├── .github └── ISSUE_TEMPLATE │ ├── bug_report.md │ └── feature_request.md ├── .vscode └── settings.json ├── CODE_OF_CONDUCT.md ├── Contribute.md ├── MAA-VIMALAlogo.png ├── README.md ├── index.html ├── script.js └── style.css /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Desktop (please complete the following information):** 27 | - OS: [e.g. iOS] 28 | - Browser [e.g. chrome, safari] 29 | - Version [e.g. 22] 30 | 31 | **Smartphone (please complete the following information):** 32 | - Device: [e.g. iPhone6] 33 | - OS: [e.g. iOS8.1] 34 | - Browser [e.g. stock browser, safari] 35 | - Version [e.g. 22] 36 | 37 | **Additional context** 38 | Add any other context about the problem here. 39 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5502 3 | } 4 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | We as members, contributors, and leaders pledge to make participation in our 6 | community a harassment-free experience for everyone, regardless of age, body 7 | size, visible or invisible disability, ethnicity, sex characteristics, gender 8 | identity and expression, level of experience, education, socio-economic status, 9 | nationality, personal appearance, race, religion, or sexual identity 10 | and orientation. 11 | 12 | We pledge to act and interact in ways that contribute to an open, welcoming, 13 | diverse, inclusive, and healthy community. 14 | 15 | ## Our Standards 16 | 17 | Examples of behavior that contributes to a positive environment for our 18 | community include: 19 | 20 | * Demonstrating empathy and kindness toward other people 21 | * Being respectful of differing opinions, viewpoints, and experiences 22 | * Giving and gracefully accepting constructive feedback 23 | * Accepting responsibility and apologizing to those affected by our mistakes, 24 | and learning from the experience 25 | * Focusing on what is best not just for us as individuals, but for the 26 | overall community 27 | 28 | Examples of unacceptable behavior include: 29 | 30 | * The use of sexualized language or imagery, and sexual attention or 31 | advances of any kind 32 | * Trolling, insulting or derogatory comments, and personal or political attacks 33 | * Public or private harassment 34 | * Publishing others' private information, such as a physical or email 35 | address, without their explicit permission 36 | * Other conduct which could reasonably be considered inappropriate in a 37 | professional setting 38 | 39 | ## Enforcement Responsibilities 40 | 41 | Community leaders are responsible for clarifying and enforcing our standards of 42 | acceptable behavior and will take appropriate and fair corrective action in 43 | response to any behavior that they deem inappropriate, threatening, offensive, 44 | or harmful. 45 | 46 | Community leaders have the right and responsibility to remove, edit, or reject 47 | comments, commits, code, wiki edits, issues, and other contributions that are 48 | not aligned to this Code of Conduct, and will communicate reasons for moderation 49 | decisions when appropriate. 50 | 51 | ## Scope 52 | 53 | This Code of Conduct applies within all community spaces, and also applies when 54 | an individual is officially representing the community in public spaces. 55 | Examples of representing our community include using an official e-mail address, 56 | posting via an official social media account, or acting as an appointed 57 | representative at an online or offline event. 58 | 59 | ## Enforcement 60 | 61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 62 | reported to the community leaders responsible for enforcement at 63 | sonawaneomkar2306@gmail.com. 64 | All complaints will be reviewed and investigated promptly and fairly. 65 | 66 | All community leaders are obligated to respect the privacy and security of the 67 | reporter of any incident. 68 | 69 | ## Enforcement Guidelines 70 | 71 | Community leaders will follow these Community Impact Guidelines in determining 72 | the consequences for any action they deem in violation of this Code of Conduct: 73 | 74 | ### 1. Correction 75 | 76 | **Community Impact**: Use of inappropriate language or other behavior deemed 77 | unprofessional or unwelcome in the community. 78 | 79 | **Consequence**: A private, written warning from community leaders, providing 80 | clarity around the nature of the violation and an explanation of why the 81 | behavior was inappropriate. A public apology may be requested. 82 | 83 | ### 2. Warning 84 | 85 | **Community Impact**: A violation through a single incident or series 86 | of actions. 87 | 88 | **Consequence**: A warning with consequences for continued behavior. No 89 | interaction with the people involved, including unsolicited interaction with 90 | those enforcing the Code of Conduct, for a specified period of time. This 91 | includes avoiding interactions in community spaces as well as external channels 92 | like social media. Violating these terms may lead to a temporary or 93 | permanent ban. 94 | 95 | ### 3. Temporary Ban 96 | 97 | **Community Impact**: A serious violation of community standards, including 98 | sustained inappropriate behavior. 99 | 100 | **Consequence**: A temporary ban from any sort of interaction or public 101 | communication with the community for a specified period of time. No public or 102 | private interaction with the people involved, including unsolicited interaction 103 | with those enforcing the Code of Conduct, is allowed during this period. 104 | Violating these terms may lead to a permanent ban. 105 | 106 | ### 4. Permanent Ban 107 | 108 | **Community Impact**: Demonstrating a pattern of violation of community 109 | standards, including sustained inappropriate behavior, harassment of an 110 | individual, or aggression toward or disparagement of classes of individuals. 111 | 112 | **Consequence**: A permanent ban from any sort of public interaction within 113 | the community. 114 | -------------------------------------------------------------------------------- /Contribute.md: -------------------------------------------------------------------------------- 1 | 2 | # Contributing to Maa-Vimala 3 | 4 | First off, thanks for taking the time to contribute! ❤️ 5 | 6 | All types of contributions are encouraged and valued. See the [Table of Contents](#table-of-contents) for different ways to help and details about how this project handles them. Please make sure to read the relevant section before making your contribution. It will make it a lot easier for us maintainers and smooth out the experience for all involved. The community looks forward to your contributions. 🎉 7 | 8 | > And if you like the project, but just don't have time to contribute, that's fine. There are other easy ways to support the project and show your appreciation, which we would also be very happy about: 9 | > - Star the project 10 | > - Tweet about it 11 | > - Refer this project in your project's readme 12 | > - Mention the project at local meetups and tell your friends/colleagues 13 | 14 | 15 | ## Table of Contents 16 | 17 | - [I Have a Question](#i-have-a-question) 18 | - [I Want To Contribute](#i-want-to-contribute) 19 | - [Reporting Bugs](#reporting-bugs) 20 | - [Suggesting Enhancements](#suggesting-enhancements) 21 | - [Your First Code Contribution](#your-first-code-contribution) 22 | - [Improving The Documentation](#improving-the-documentation) 23 | - [Styleguides](#styleguides) 24 | - [Commit Messages](#commit-messages) 25 | - [Join The Project Team](#join-the-project-team) 26 | 27 | 28 | 29 | ## I Have a Question 30 | 31 | > If you want to ask a question, we assume that you have read the available [Documentation](). 32 | 33 | Before you ask a question, it is best to search for existing [Issues](https://github.com/Web403/Maa-Vimala/issues) that might help you. In case you have found a suitable issue and still need clarification, you can write your question in this issue. It is also advisable to search the internet for answers first. 34 | 35 | If you then still feel the need to ask a question and need clarification, we recommend the following: 36 | 37 | - Open an [Issue](https://github.com/Web403/Maa-Vimala/issues/new). 38 | - Provide as much context as you can about what you're running into. 39 | - Provide project and platform versions (nodejs, npm, etc), depending on what seems relevant. 40 | 41 | We will then take care of the issue as soon as possible. 42 | 43 | 57 | 58 | ## I Want To Contribute 59 | 60 | > ### Legal Notice 61 | > When contributing to this project, you must agree that you have authored 100% of the content, that you have the necessary rights to the content and that the content you contribute may be provided under the project license. 62 | 63 | ### Reporting Bugs 64 | 65 | 66 | #### Before Submitting a Bug Report 67 | 68 | A good bug report shouldn't leave others needing to chase you up for more information. Therefore, we ask you to investigate carefully, collect information and describe the issue in detail in your report. Please complete the following steps in advance to help us fix any potential bug as fast as possible. 69 | 70 | - Make sure that you are using the latest version. 71 | - Determine if your bug is really a bug and not an error on your side e.g. using incompatible environment components/versions (Make sure that you have read the [documentation](). If you are looking for support, you might want to check [this section](#i-have-a-question)). 72 | - To see if other users have experienced (and potentially already solved) the same issue you are having, check if there is not already a bug report existing for your bug or error in the [bug tracker](https://github.com/Web403/Maa-Vimalaissues?q=label%3Abug). 73 | - Also make sure to search the internet (including Stack Overflow) to see if users outside of the GitHub community have discussed the issue. 74 | - Collect information about the bug: 75 | - Stack trace (Traceback) 76 | - OS, Platform and Version (Windows, Linux, macOS, x86, ARM) 77 | - Version of the interpreter, compiler, SDK, runtime environment, package manager, depending on what seems relevant. 78 | - Possibly your input and the output 79 | - Can you reliably reproduce the issue? And can you also reproduce it with older versions? 80 | 81 | 82 | We use GitHub issues to track bugs and errors. If you run into an issue with the project: 83 | 84 | - Open an [Issue](https://github.com/Web403/Maa-Vimala/issues/new). (Since we can't be sure at this point whether it is a bug or not, we ask you not to talk about a bug yet and not to label the issue.) 85 | - Explain the behavior you would expect and the actual behavior. 86 | - Please provide as much context as possible and describe the *reproduction steps* that someone else can follow to recreate the issue on their own. This usually includes your code. For good bug reports you should isolate the problem and create a reduced test case. 87 | - Provide the information you collected in the previous section. 88 | 89 | Once it's filed: 90 | 91 | - The project team will label the issue accordingly. 92 | - A team member will try to reproduce the issue with your provided steps. If there are no reproduction steps or no obvious way to reproduce the issue, the team will ask you for those steps and mark the issue as `needs-repro`. Bugs with the `needs-repro` tag will not be addressed until they are reproduced. 93 | - If the team is able to reproduce the issue, it will be marked `needs-fix`, as well as possibly other tags (such as `critical`), and the issue will be left to be [implemented by someone](#your-first-code-contribution). 94 | 95 | 96 | 97 | 98 | ### Suggesting Enhancements 99 | 100 | This section guides you through submitting an enhancement suggestion for Maa-Vimala, **including completely new features and minor improvements to existing functionality**. Following these guidelines will help maintainers and the community to understand your suggestion and find related suggestions. 101 | 102 | 103 | #### Before Submitting an Enhancement 104 | 105 | - Make sure that you are using the latest version. 106 | - Read the [documentation]() carefully and find out if the functionality is already covered, maybe by an individual configuration. 107 | - Perform a [search](https://github.com/Web403/Maa-Vimala/issues) to see if the enhancement has already been suggested. If it has, add a comment to the existing issue instead of opening a new one. 108 | - Find out whether your idea fits with the scope and aims of the project. It's up to you to make a strong case to convince the project's developers of the merits of this feature. Keep in mind that we want features that will be useful to the majority of our users and not just a small subset. If you're just targeting a minority of users, consider writing an add-on/plugin library. 109 | 110 | 111 | #### How Do I Submit a Good Enhancement Suggestion? 112 | 113 | Enhancement suggestions are tracked as [GitHub issues](https://github.com/Web403/Maa-Vimala/issues). 114 | 115 | - Use a **clear and descriptive title** for the issue to identify the suggestion. 116 | - Provide a **step-by-step description of the suggested enhancement** in as many details as possible. 117 | - **Describe the current behavior** and **explain which behavior you expected to see instead** and why. At this point you can also tell which alternatives do not work for you. 118 | - **Explain why this enhancement would be useful** to most Maa-Vimala users. You may also want to point out the other projects that solved it better and which could serve as inspiration. 119 | 120 | 121 | -------------------------------------------------------------------------------- /MAA-VIMALAlogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Omkar-Sonawane-23/Maa-Vimala/806c8d330802f6346a736224d77cc4a7eba921f7/MAA-VIMALAlogo.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

Maa-Vimala

2 | 3 | ### Calling all keyboard enthusiasts! 🚀 Ever wish you could conquer the digital realm without lifting a finger off your beloved keys? Well, say hello to our latest creation—a game-changing tool for developers who live for the thrill of a keyboard shortcut. 4 | 5 | ## Features 6 | 7 | 1. ### Perform Search using Keyword like 8 | - ### 📺 Youtube 9 | - ### 🔍 Google 10 | - ### 📚 Wikipedia 11 | 12 | 2. ### Use only one word to perform Word Search (Without Space) 13 | 3. ### Perform Calculations 🧮 14 | 5. ### Weather Information ☁️ 15 | 4. ### Set ToDo's (Coming Soon ❗) 16 | 17 | ## How To Add This on a New Tab 18 | 19 | git clone https://github.com/Web403/Maa-Vimala 20 | 21 | path/to/Maa-Vimala/index.html 22 | Go To Browser -> Setting search for Home page 23 | set to Custom Url 24 | Paste your Path To Index File. 25 | 26 | ## Contributing 27 | 28 | Pull requests are welcome. 29 | Read Contribute.md File First 30 | For major changes, please open an issue first to discuss what you would like to change. 31 | 32 | 33 | ## How To Use It? 34 | 35 | 1. Just Start Typing 36 | 2. Press Enter After Complete. 37 | 3. Watch the video for more 📽️. 38 | 39 | [![Watch the video]](https://github.com/Web403/Maa-Vimala/assets/130058150/06f7bc4e-fbb0-418c-b080-1b4b05c97d1b) 40 | 41 | ## Contributing 42 | 43 | Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change. 44 | 45 | Please make sure to update tests as appropriate. 46 | 47 | 48 | # Join the Discord 49 | https://discord.gg/uD7x8Mah 50 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Maa-Vimala 13 | 14 | 15 | 16 |
17 | 27 |
28 | 39 | 40 |
41 |
42 |
43 |

Start Typing To Search...

44 |
45 | 46 |
47 | 48 | 49 |
50 |
51 |
52 | 61 |
62 |
63 |
64 |
65 | 68 |
69 | 111 | 112 | 113 | 114 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | let Input = document.getElementById("input_text"); 2 | let Body = document.getElementById("body"); 3 | let timeElement = document.getElementById('time'); 4 | let dateElement = document.getElementById('date'); 5 | 6 | let keynum; 7 | Input.value = ""; 8 | 9 | Body.addEventListener("keydown", function (e) { 10 | const searchcontainer = document.getElementsByClassName("search-bar")[0]; 11 | if (event.key.length === 1 && event.key.match(/[a-z0-9]/i)) { 12 | searchcontainer.style.width = '50vw'; 13 | searchcontainer.style.transition = 'width 0.2s ease-in-out'; 14 | } 15 | Input.focus(); 16 | if (window.event) { 17 | keynum = e.keyCode; 18 | } 19 | if (keynum == 13) { 20 | handleDropDown(Input.value); 21 | } 22 | Input.addEventListener("input", function (e) { 23 | if (Input.value == "") { 24 | document.getElementById("content").innerHTML = ""; 25 | document.getElementById('result').innerHTML = ''; 26 | searchcontainer.style.width = '4.5vw'; 27 | } else { 28 | // updateList(); 29 | } 30 | } 31 | ) 32 | }) 33 | 34 | // function dropDownHandeler(params) { 35 | // Body.addEventListener("keydown", function (e) { 36 | // const dropdowncontent = document.getElementById("content"); 37 | 38 | // }) 39 | // } 40 | 41 | 42 | 43 | async function showCalcResult(params) { 44 | console.log(params); 45 | let result = document.getElementById("result"); 46 | let res = result.innerHTML = "

" + params + "

"; 47 | console.log(res); 48 | } 49 | async function showWordSearchResult(params) { 50 | console.log(params); 51 | let result = document.getElementById("result"); 52 | if (params.title != "No Definitions Found") { 53 | let res = result.innerHTML = "

" + params[0].meanings[0].definitions[0].definition + "

"; 54 | } else { 55 | let res = result.innerHTML = "

" + params.title + "

"; 56 | } 57 | } 58 | async function showWikiResult(params) { 59 | document.getElementById('loader').classList.add('loader') 60 | setTimeout(function () { 61 | document.getElementById('loader').classList.remove('loader') 62 | }, 1000); 63 | let result = document.getElementById("result"); 64 | result.innerHTML = ""; 65 | let list = params.query.search; 66 | result.innerHTML = "

Wikipedia Search Results

"; 67 | list.map((item, i) => { 68 | let res = result.innerHTML += `
  • ` + list[i].title + "
    • "; 69 | } 70 | ) 71 | console.log(res); 72 | } 73 | function loadwiki(params) { 74 | let result = document.getElementById("result"); 75 | result.innerHTML = ""; 76 | result.innerHTML = ``; 77 | } 78 | 79 | function handleDropDown(search) { 80 | if (search.includes("*") || search.includes("-") || search.includes("/") || search.includes("+")) { 81 | showCalcResult(performCalculation(search)); 82 | } else if (hasOnlyOneWord(search)) { 83 | console.log("Word Search"); 84 | document.getElementById('loader').classList.add('loader') 85 | setTimeout(function () { 86 | document.getElementById('loader').classList.remove('loader') 87 | }, 1000); 88 | performWordSearch(search) 89 | } else if (search.includes("set") || search.includes("add") || search.includes("todo")) { 90 | console.log("Set Todo"); 91 | performTodoSet(search); 92 | } else if (search.includes("remove") || search.includes("delete") || search.includes("remove todo")) { 93 | console.log("remove Todo"); 94 | performToDoUpdate(search); 95 | } else if (search.includes("google") || search.includes("search google") || search.includes("how") || search.includes("what") || search.includes("why") || search.includes("how") || search.includes("when") || search.includes("where") || search.includes("who") || search.includes("which") || search.includes("whom") || search.includes("whose") || search.includes("google search")) { 96 | performGoogleSearch(search); 97 | } else if (search.includes("youtube") || search.includes("search youtube") || search.includes("youtube search")) { 98 | performYouTubeSearch(search); 99 | } else if (search.includes("wikipedia") || search.includes("search wikipedia") || search.includes("wikipedia search") || search.includes("wiki")) { 100 | performWikipediaSearch(search); 101 | document.getElementById('loader').classList.add('loader') 102 | setTimeout(function () { 103 | document.getElementById('loader').classList.remove('loader') 104 | }, 1000); 105 | } 106 | else { 107 | performGoogleSearch(search , true); 108 | } 109 | } 110 | function hasOnlyOneWord(inputString) { 111 | var wordRegex = /^\w+$/; 112 | return wordRegex.test(inputString); 113 | } 114 | function performCalculation(expression) { 115 | var calculate = new Function('return ' + expression); 116 | var result = calculate(); 117 | return result; 118 | } 119 | function performWordSearch(word) { 120 | let result = fetch(`https://api.dictionaryapi.dev/api/v2/entries/en/${word}`).then(response => { 121 | response.json().then(data => { 122 | showWordSearchResult(data); 123 | }) 124 | }) 125 | } 126 | function performTodoSet(cmd) { 127 | let res = cmd.split("add "); 128 | let alltodo = JSON.parse(localStorage.getItem("todolist")) || []; 129 | let newTodo = res[1].trim(); 130 | alltodo.push(newTodo); 131 | console.log(alltodo); 132 | localStorage.setItem("todolist", JSON.stringify(alltodo)); 133 | } 134 | function performToDoUpdate(cmd) { 135 | let res = cmd.split("remove "); 136 | let alltodoRemove = JSON.parse(localStorage.getItem("todolist")) || []; 137 | let indexToRemove = alltodoRemove.indexOf(res[1]); 138 | if (indexToRemove !== -1) { 139 | alltodoRemove.splice(indexToRemove, 1); 140 | localStorage.setItem("todolist", JSON.stringify(alltodoRemove)); 141 | } else { 142 | console.log("The word to remove is not in the list."); 143 | } 144 | } 145 | function performGoogleSearch(search, isit) { 146 | let res = search.split("google"); 147 | if(isit){ 148 | document.location = `https://www.google.com/search?q=${encodeURIComponent(search)}` 149 | }else{ 150 | document.location = `https://www.google.com/search?q=${encodeURIComponent(res[1].trim())}` 151 | } 152 | search = ""; 153 | } 154 | function performYouTubeSearch(search) { 155 | let res = search.split("youtube"); 156 | document.location = `https://www.youtube.com/results?search_query=${encodeURIComponent(res[1].trim())}` 157 | search = ""; 158 | } 159 | function performDuckDuckGoSearch(search) { 160 | document.location = `https://duckduckgo.com/?q=${encodeURIComponent(search)}` 161 | search = ""; 162 | } 163 | function performBingSearch(search) { 164 | document.location = `https://www.bing.com/search?q=${encodeURIComponent(search)}` 165 | search = ""; 166 | } 167 | function performWolframAlphaSearch(search) { 168 | document.location = `https://www.wolframalpha.com/input/?i=${encodeURIComponent(search)}` 169 | search = ""; 170 | } 171 | function performWikipediaSearch(search) { 172 | fetch(`https://en.wikipedia.org/w/api.php?action=query&list=search&prop=info&inprop=url&utf8=&format=json&origin=*&srlimit=5&srsearch=${encodeURIComponent(search)}`).then(response => { 173 | response.json().then(data => { 174 | console.log(data); 175 | showWikiResult(data); 176 | }) 177 | }) 178 | search = ""; 179 | } 180 | function performWhetherCheck(search) { 181 | search = ""; 182 | } 183 | function performImageSearchOnPexels(search) { 184 | document.location = `https://www.pexels.com/?s=${encodeURIComponent(search)}` 185 | search = ""; 186 | } 187 | function performImageSearchOnUnsplashes(search) { 188 | document.location = `https://unsplash.com/s/photos/${encodeURIComponent(search)}` 189 | search = ""; 190 | } 191 | function updateTime() { 192 | const currentDate = new Date(); 193 | const day = currentDate.getDate(); 194 | const month = currentDate.getMonth(); 195 | const year = currentDate.getFullYear(); 196 | const hour = currentDate.getHours(); 197 | const minute = currentDate.getMinutes(); 198 | const timeString = (hour % 12 || 12) + " : " + (minute < 10 ? '0' : '') + minute + " " + (hour < 12 ? 'AM' : 'PM'); 199 | const dateString = day + " " + ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"][month] + " " + year; 200 | timeElement.innerText = timeString; 201 | dateElement.innerText = dateString; 202 | } 203 | 204 | // Initial call to set time and date, and then update every minute 205 | updateTime(); 206 | setInterval(updateTime, 60000); -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-image: url('https://images.pexels.com/photos/36717/amazing-animal-beautiful-beautifull.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'); 3 | color: #ddd; 4 | background-repeat: no-repeat; 5 | background-size: cover; 6 | background-color: #333; 7 | padding: 10px; 8 | border-radius: 5px; 9 | font-family: "Poppins", sans-serif; 10 | } 11 | 12 | /*#logoName{ 13 | font-size: 2rem; 14 | font-weight: 600; 15 | }*/ 16 | 17 | .container { 18 | display:grid; 19 | align-items: center; 20 | grid-template-columns: 1fr 2fr 8fr 3fr; 21 | margin-top: 0px; 22 | } 23 | .container > div{ 24 | text-align: center; 25 | font-size: 15px; 26 | } 27 | img{ 28 | max-width: 100%; 29 | max-height: 100%; 30 | } 31 | 32 | #search-txt{ 33 | font-size: 2rem; 34 | font-weight: 300; 35 | } 36 | 37 | body div{ 38 | display: flex; 39 | flex-direction: column; 40 | justify-content: center; 41 | margin: 40px auto; 42 | } 43 | 44 | input { 45 | width: 60vw; 46 | height: 60px; 47 | padding: 9px; 48 | text-align: center; 49 | /* padding: 8px; */ 50 | border: none; 51 | border-radius: 3px; 52 | font-size: 16px; 53 | /* margin-bottom: 10px; */ 54 | background-color: #ddd; 55 | color: #333; 56 | font-size: 30px; 57 | outline: none; 58 | caret-color: palevioletred; 59 | 60 | } 61 | button { 62 | width: 85px; 63 | height: 77px; 64 | /* display: inline; 65 | justify-items: center; */ 66 | background-color: #ddd; 67 | margin: 0; 68 | } 69 | 70 | #input_text{ 71 | display: flex; 72 | flex-direction: row; 73 | justify-content: center; 74 | align-items: center; 75 | margin: 0 auto; 76 | /* border: 1px solid black; */ 77 | 78 | } 79 | 80 | .search-icon { 81 | width: 65px; 82 | font-size: 50px; 83 | color: #666; 84 | cursor: pointer; 85 | border: 1px solid black; 86 | margin-top: 5px; 87 | } 88 | .child{ 89 | display: flex; 90 | flex-direction: row; 91 | justify-content: center; 92 | align-items: center; 93 | margin: 0 auto; 94 | width: 100%; 95 | list-style: none; 96 | /* border: 1px solid black; */ 97 | } 98 | .wiki-result{ 99 | list-style: none; 100 | font-size: 20px; 101 | padding: 10px; 102 | margin: 10px; 103 | } 104 | .wiki-result a{ 105 | color: rgb(0, 255, 0); 106 | text-decoration: none; 107 | } 108 | #content li{ 109 | width: 55rem; 110 | margin: 10px; 111 | padding: 10px; 112 | border: 1px solid black; 113 | border-radius: 5px; 114 | background-color: #ddd; 115 | color: #333; 116 | font-size: 20px; 117 | } 118 | 119 | .loader { 120 | border: 8px solid #f3f3f3; 121 | border-top: 8px solid #3498db; 122 | border-radius: 50%; 123 | width: 50px; 124 | height: 50px; 125 | animation: spin 1s linear infinite; 126 | } 127 | 128 | @keyframes spin { 129 | 0% { transform: rotate(0deg); } 130 | 100% { transform: rotate(360deg); } 131 | } 132 | 133 | .search-container { 134 | position: relative; 135 | border-bottom: 2px solid rgb(196, 196, 196); 136 | color: #3498db; 137 | } 138 | 139 | .search-bar { 140 | background-color: transparent; 141 | color: white; 142 | width: 4.5vw; 143 | padding: 10px; 144 | border: none; 145 | border-radius: 25px; 146 | font-size: 2rem; 147 | outline: none; 148 | } 149 | 150 | .search-icon { 151 | position: absolute; 152 | top: 50%; 153 | right: 15px; 154 | transform: translateY(-50%); 155 | cursor: pointer; 156 | border: none; 157 | color: rgb(255, 255, 255); 158 | } 159 | 160 | .nav-info{ 161 | position: absolute; 162 | right: 35px; 163 | padding: 0; 164 | top: 5px; 165 | } 166 | #time{ 167 | font-size: 1.4rem; 168 | margin-top: 5px; 169 | } 170 | #date{ 171 | font-size: 1.2rem; 172 | margin-top: -70px; 173 | } 174 | #whether{ 175 | font-size: 1.2rem; 176 | margin-top: -20px; 177 | } 178 | #nav-extra{ 179 | display: flex; 180 | margin-top: -1px; 181 | } 182 | #link{ 183 | float: right; 184 | font-size: 1.5rem; 185 | position: absolute; 186 | bottom: 0; 187 | } 188 | #link a{ 189 | /* text-decoration: none; */ 190 | color: #1b1c6d; 191 | 192 | } 193 | 194 | @media screen and (max-width: 600px){ 195 | body{ 196 | background-image: url('https://images.pexels.com/photos/1368382/pexels-photo-1368382.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'); 197 | color: #ddd; 198 | background-repeat: no-repeat; 199 | background-size:100vh; 200 | background-color: #fcfcfc; 201 | padding: 10px; 202 | } 203 | .search-bar { 204 | position: absolute; 205 | font-size: 1.5rem; 206 | top: 10rem; 207 | right: -5rem; 208 | color: white; 209 | border-bottom: 2px solid white; 210 | } 211 | .search-icon { 212 | visibility: hidden; 213 | } 214 | .search-container{ 215 | border-bottom: 2px solid rgb(196, 196, 196); 216 | } 217 | } 218 | 219 | .fa-magnifying-glass:before, .fa-search:before { 220 | content: "\f002"; 221 | margin-left: 90px; 222 | } 223 | body { 224 | background-image: url('https://images.pexels.com/photos/36717/amazing-animal-beautiful-beautifull.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'); 225 | color: #ddd; 226 | background-repeat: no-repeat; 227 | background-size: cover; 228 | background-color: #333; 229 | padding: 15px; 230 | border-radius: 5px; 231 | font-family: "Poppins", sans-serif; 232 | margin:0; 233 | } 234 | /* Navbar Styling */ 235 | nav { 236 | background-color: rgba(0, 0, 0, 0.8); 237 | width: 100%; 238 | padding: 1rem 0; 239 | position: fixed; 240 | top: 0; 241 | left: 0; 242 | z-index: 1000; 243 | } 244 | 245 | .navbar { 246 | list-style: none; 247 | display: flex; 248 | justify-content: space-around; 249 | align-items:center; 250 | margin: 0; 251 | padding: 15px; 252 | } 253 | .navbar h1 { 254 | color: #fff; 255 | font-size: 1.5rem; 256 | font-weight: 600; 257 | margin: 0; 258 | } 259 | 260 | .nav-links { 261 | list-style: none; 262 | display: flex; 263 | margin: 0; 264 | padding: 0; 265 | } 266 | 267 | .nav-links li { 268 | margin: 0 10px; 269 | } 270 | 271 | .nav-links a { 272 | text-decoration: none; 273 | color: #fff; 274 | font-size: 1.2rem; 275 | transition: color 0.3s ease; 276 | } 277 | .navbar .nav-links li i { 278 | color: #fff; 279 | 280 | } 281 | 282 | .nav-links a:hover { 283 | color: #ffcc00; /* Highlight color on hover */ 284 | } 285 | 286 | /* Responsive Navbar for Mobile */ 287 | @media screen and (max-width: 600px) { 288 | .navbar { 289 | flex-direction: column; 290 | align-items: flex-start; 291 | } 292 | 293 | .nav-links { 294 | flex-direction: column; 295 | width: 100%; 296 | } 297 | 298 | .nav-links li { 299 | margin: 10px 0; 300 | } 301 | } 302 | 303 | /* Other existing styles */ 304 | 305 | 306 | #logoName{ 307 | font-size: 2rem; 308 | font-weight: 600; 309 | margin:0; 310 | } 311 | 312 | #search-txt{ 313 | font-size: 2rem; 314 | font-weight: 300; 315 | } 316 | 317 | body div{ 318 | display: flex; 319 | flex-direction: column; 320 | justify-content: center; 321 | margin: 40px auto; 322 | } 323 | 324 | input { 325 | width: 60vw; 326 | height: 60px; 327 | padding: 9px; 328 | text-align: center; 329 | /* padding: 8px; */ 330 | border: none; 331 | border-radius: 3px; 332 | font-size: 16px; 333 | /* margin-bottom: 10px; */ 334 | background-color: #ddd; 335 | color: #333; 336 | font-size: 30px; 337 | outline: none; 338 | caret-color: palevioletred; 339 | 340 | } 341 | button { 342 | width: 85px; 343 | height: 77px; 344 | /* display: inline; 345 | justify-items: center; */ 346 | background-color: #ddd; 347 | margin: 0; 348 | } 349 | 350 | #input_text{ 351 | display: flex; 352 | flex-direction: row; 353 | justify-content: center; 354 | align-items: center; 355 | margin: 0 auto; 356 | /* border: 1px solid black; */ 357 | 358 | } 359 | 360 | .search-icon { 361 | width: 65px; 362 | font-size: 50px; 363 | color: #666; 364 | cursor: pointer; 365 | border: 1px solid black; 366 | margin-top: 5px; 367 | } 368 | .child{ 369 | display: flex; 370 | flex-direction: row; 371 | justify-content: center; 372 | align-items: center; 373 | margin: 0 auto; 374 | width: 100%; 375 | list-style: none; 376 | /* border: 1px solid black; */ 377 | } 378 | .wiki-result{ 379 | list-style: none; 380 | font-size: 20px; 381 | padding: 10px; 382 | margin: 10px; 383 | } 384 | .wiki-result a{ 385 | color: rgb(0, 255, 0); 386 | text-decoration: none; 387 | } 388 | #content li{ 389 | width: 55rem; 390 | margin: 10px; 391 | padding: 10px; 392 | border: 1px solid black; 393 | border-radius: 5px; 394 | background-color: #ddd; 395 | color: #333; 396 | font-size: 20px; 397 | } 398 | 399 | .loader { 400 | border: 8px solid #f3f3f3; 401 | border-top: 8px solid #3498db; 402 | border-radius: 50%; 403 | width: 50px; 404 | height: 50px; 405 | animation: spin 1s linear infinite; 406 | } 407 | 408 | @keyframes spin { 409 | 0% { transform: rotate(0deg); } 410 | 100% { transform: rotate(360deg); } 411 | } 412 | 413 | .search-container { 414 | position: relative; 415 | border-bottom: 2px solid rgb(196, 196, 196); 416 | color: #3498db; 417 | } 418 | 419 | .search-bar { 420 | background-color: transparent; 421 | color: white; 422 | width: 4.5vw; 423 | padding: 10px; 424 | border: none; 425 | border-radius: 25px; 426 | font-size: 2rem; 427 | outline: none; 428 | } 429 | 430 | .search-icon { 431 | position: absolute; 432 | top: 50%; 433 | right: 15px; 434 | transform: translateY(-50%); 435 | cursor: pointer; 436 | border: none; 437 | color: rgb(255, 255, 255); 438 | } 439 | .nav-info { 440 | display: flex; 441 | flex-direction: column; 442 | align-items: flex-end; 443 | color: #ddd; 444 | } 445 | 446 | #time, #date, #whether, #wind { 447 | margin: 0; 448 | font-size: 1rem; 449 | } 450 | #nav-extra{ 451 | display: flex; 452 | margin-top: -1px; 453 | } 454 | #link{ 455 | float: right; 456 | font-size: 1.5rem; 457 | position: absolute; 458 | bottom: 0; 459 | } 460 | #link a{ 461 | /* text-decoration: none; */ 462 | color: #1b1c6d; 463 | 464 | } 465 | 466 | @media screen and (max-width: 600px){ 467 | body{ 468 | background-image: url('https://images.pexels.com/photos/1368382/pexels-photo-1368382.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'); 469 | color: #ddd; 470 | background-repeat: no-repeat; 471 | background-size:100vh; 472 | background-color: #fcfcfc; 473 | padding: 10px; 474 | } 475 | .search-bar { 476 | position: absolute; 477 | font-size: 1.5rem; 478 | top: 10rem; 479 | right: -5rem; 480 | color: white; 481 | border-bottom: 2px solid white; 482 | } 483 | .search-icon { 484 | visibility: hidden; 485 | } 486 | .search-container{ 487 | border-bottom: 2px solid rgb(196, 196, 196); 488 | } 489 | } 490 | 491 | .fa-magnifying-glass:before, .fa-search:before { 492 | content: "\f002"; 493 | margin-left: 90px; 494 | } --------------------------------------------------------------------------------