├── images ├── sun.png └── moon.png ├── README.md ├── index.html ├── script ├── script.js └── languages.js └── styles └── style.css /images/sun.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Venkateeshh/Js-Language-Translator/HEAD/images/sun.png -------------------------------------------------------------------------------- /images/moon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Venkateeshh/Js-Language-Translator/HEAD/images/moon.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Language Translator Web Application 2 | 3 | 4 | ## Overview 5 | 6 | This is a simple language translator web application built using pure HTML, CSS, and JavaScript. The project utilizes the Google Translate API to provide translation services, allowing users to translate text from one language to another seamlessly. The application is designed to be fully responsive, providing an optimal user experience across various devices and screen sizes. 7 | 8 | ## Features 9 | 10 | - Translate text between multiple languages using the power of Google Translate API. 11 | - Simple and intuitive user interface for easy navigation and usage. 12 | - Fully responsive design ensures compatibility with desktop, tablet, and mobile devices. 13 | - Supports a wide range of languages, enabling users to translate to and from different language pairs. 14 | - Minimalistic and lightweight, ensuring fast loading times and smooth performance. 15 | 16 | ## How to Use 17 | 18 | 1. Clone the repository to your local machine: 19 | 20 | ```bash 21 | git clone https://github.com/Venkateeshh/Js-Language-Translator.git 22 | ``` 23 | 24 | 2. Open the `index.html` file in your web browser. 25 | 26 | 3. Enter the text you want to translate in the input field. 27 | 28 | 4. Select the source language and target language from the provided drop-down menus. 29 | 30 | 5. Click the "Translate" button to get the translated text. 31 | 32 | ## Demo 33 | 34 | For a live demonstration of the language translator web application, you can visit the following link: [Language Translator Demo](https://venkateeshh.github.io/Js-Language-Translator/) 35 | 36 | ## Feedback and Contributions 37 | 38 | If you find any issues with the application or have suggestions for improvement, please feel free to create an issue or submit a pull request on the GitHub repository. Your feedback and contributions are highly appreciated! 39 | 40 | ## About the Author 41 | 42 | This language translator web application is developed and maintained by [Venkateeshh](https://github.com/Venkateeshh). I am a passionate web developer with a keen interest in building useful and innovative projects using various web technologies. 43 | 44 | Thank you for checking out this project! If you find it helpful, don't forget to give it a star and share it with others. Happy translating! 45 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 15 | 16 | Language Translator 17 | 18 | 19 |
20 | 28 |
29 |
30 |
31 |
32 | From : 33 | 44 |
45 |
46 | 52 |
0 / 5000
53 |
54 |
55 |

Or choose your document!

56 | 61 |
62 |
63 | 64 |
65 |
66 | 67 |
68 |
69 | 70 |
71 |
72 | To : 73 | 84 |
85 | 92 |
93 |

Download as a document!

94 | 98 |
99 |
100 |
101 | 102 | 103 | 104 | 105 | 106 | -------------------------------------------------------------------------------- /script/script.js: -------------------------------------------------------------------------------- 1 | const dropdowns = document.querySelectorAll(".dropdown-container"), 2 | inputLanguageDropdown = document.querySelector("#input-language"), 3 | outputLanguageDropdown = document.querySelector("#output-language"); 4 | 5 | function populateDropdown(dropdown, options) { 6 | dropdown.querySelector("ul").innerHTML = ""; 7 | options.forEach((option) => { 8 | const li = document.createElement("li"); 9 | const title = option.name + " (" + option.native + ")"; 10 | li.innerHTML = title; 11 | li.dataset.value = option.code; 12 | li.classList.add("option"); 13 | dropdown.querySelector("ul").appendChild(li); 14 | }); 15 | } 16 | 17 | populateDropdown(inputLanguageDropdown, languages); 18 | populateDropdown(outputLanguageDropdown, languages); 19 | 20 | dropdowns.forEach((dropdown) => { 21 | dropdown.addEventListener("click", (e) => { 22 | dropdown.classList.toggle("active"); 23 | }); 24 | 25 | dropdown.querySelectorAll(".option").forEach((item) => { 26 | item.addEventListener("click", (e) => { 27 | //remove active class from current dropdowns 28 | dropdown.querySelectorAll(".option").forEach((item) => { 29 | item.classList.remove("active"); 30 | }); 31 | item.classList.add("active"); 32 | const selected = dropdown.querySelector(".selected"); 33 | selected.innerHTML = item.innerHTML; 34 | selected.dataset.value = item.dataset.value; 35 | translate(); 36 | }); 37 | }); 38 | }); 39 | document.addEventListener("click", (e) => { 40 | dropdowns.forEach((dropdown) => { 41 | if (!dropdown.contains(e.target)) { 42 | dropdown.classList.remove("active"); 43 | } 44 | }); 45 | }); 46 | 47 | const swapBtn = document.querySelector(".swap-position"), 48 | inputLanguage = inputLanguageDropdown.querySelector(".selected"), 49 | outputLanguage = outputLanguageDropdown.querySelector(".selected"), 50 | inputTextElem = document.querySelector("#input-text"), 51 | outputTextElem = document.querySelector("#output-text"); 52 | 53 | swapBtn.addEventListener("click", (e) => { 54 | const temp = inputLanguage.innerHTML; 55 | inputLanguage.innerHTML = outputLanguage.innerHTML; 56 | outputLanguage.innerHTML = temp; 57 | 58 | const tempValue = inputLanguage.dataset.value; 59 | inputLanguage.dataset.value = outputLanguage.dataset.value; 60 | outputLanguage.dataset.value = tempValue; 61 | 62 | //swap text 63 | const tempInputText = inputTextElem.value; 64 | inputTextElem.value = outputTextElem.value; 65 | outputTextElem.value = tempInputText; 66 | 67 | translate(); 68 | }); 69 | 70 | function translate() { 71 | const inputText = inputTextElem.value; 72 | const inputLanguage = 73 | inputLanguageDropdown.querySelector(".selected").dataset.value; 74 | const outputLanguage = 75 | outputLanguageDropdown.querySelector(".selected").dataset.value; 76 | const url = `https://translate.googleapis.com/translate_a/single?client=gtx&sl=${inputLanguage}&tl=${outputLanguage}&dt=t&q=${encodeURI( 77 | inputText, 78 | )}`; 79 | fetch(url) 80 | .then((response) => response.json()) 81 | .then((json) => { 82 | console.log(json); 83 | outputTextElem.value = json[0].map((item) => item[0]).join(""); 84 | }) 85 | .catch((error) => { 86 | console.log(error); 87 | }); 88 | } 89 | inputTextElem.addEventListener("input", (e) => { 90 | //limit input to 5000 characters 91 | if (inputTextElem.value.length > 5000) { 92 | inputTextElem.value = inputTextElem.value.slice(0, 5000); 93 | } 94 | translate(); 95 | }); 96 | 97 | const uploadDocument = document.querySelector("#upload-document"), 98 | uploadTitle = document.querySelector("#upload-title"); 99 | 100 | uploadDocument.addEventListener("change", (e) => { 101 | const file = e.target.files[0]; 102 | if ( 103 | file.type === "application/pdf" || 104 | file.type === "text/plain" || 105 | file.type === "application/msword" || 106 | file.type === 107 | "application/vnd.openxmlformats-officedocument.wordprocessingml.document" 108 | ) { 109 | uploadTitle.innerHTML = file.name; 110 | const reader = new FileReader(); 111 | reader.readAsText(file); 112 | reader.onload = (e) => { 113 | inputTextElem.value = e.target.result; 114 | translate(); 115 | }; 116 | } else { 117 | alert("Please upload a valid file"); 118 | } 119 | }); 120 | 121 | const downloadBtn = document.querySelector("#download-btn"); 122 | 123 | downloadBtn.addEventListener("click", (e) => { 124 | const outputText = outputTextElem.value; 125 | const outputLanguage = 126 | outputLanguageDropdown.querySelector(".selected").dataset.value; 127 | if (outputText) { 128 | const blob = new Blob([outputText], { type: "text/plain" }); 129 | const url = URL.createObjectURL(blob); 130 | const a = document.createElement("a"); 131 | a.download = `translated-to-${outputLanguage}.txt`; 132 | a.href = url; 133 | a.click(); 134 | } 135 | }); 136 | 137 | const darkModeCheckbox = document.getElementById("dark-mode-btn"); 138 | 139 | darkModeCheckbox.addEventListener("change", () => { 140 | document.body.classList.toggle("dark"); 141 | }); 142 | 143 | const inputChars = document.querySelector("#input-chars"); 144 | 145 | inputTextElem.addEventListener("input", (e) => { 146 | inputChars.innerHTML = inputTextElem.value.length; 147 | }); 148 | -------------------------------------------------------------------------------- /script/languages.js: -------------------------------------------------------------------------------- 1 | const languages = [ 2 | { 3 | no: "0", 4 | name: "Auto", 5 | native: "Detect", 6 | code: "auto", 7 | }, 8 | { 9 | no: "1", 10 | name: "Afrikaans", 11 | native: "Afrikaans", 12 | code: "af", 13 | }, 14 | { 15 | no: "2", 16 | name: "Albanian", 17 | native: "Shqip", 18 | code: "sq", 19 | }, 20 | { 21 | no: "3", 22 | name: "Arabic", 23 | native: "عربي", 24 | code: "ar", 25 | }, 26 | { 27 | no: "4", 28 | name: "Armenian", 29 | native: "Հայերէն", 30 | code: "hy", 31 | }, 32 | { 33 | no: "5", 34 | name: "Azerbaijani", 35 | native: "آذربایجان دیلی", 36 | code: "az", 37 | }, 38 | { 39 | no: "6", 40 | name: "Basque", 41 | native: "Euskara", 42 | code: "eu", 43 | }, 44 | { 45 | no: "7", 46 | name: "Belarusian", 47 | native: "Беларуская", 48 | code: "be", 49 | }, 50 | { 51 | no: "8", 52 | name: "Bulgarian", 53 | native: "Български", 54 | code: "bg", 55 | }, 56 | { 57 | no: "9", 58 | name: "Catalan", 59 | native: "Català", 60 | code: "ca", 61 | }, 62 | { 63 | no: "10", 64 | name: "Chinese (Simplified)", 65 | native: "中文简体", 66 | code: "zh-CN", 67 | }, 68 | { 69 | no: "11", 70 | name: "Chinese (Traditional)", 71 | native: "中文繁體", 72 | code: "zh-TW", 73 | }, 74 | { 75 | no: "12", 76 | name: "Croatian", 77 | native: "Hrvatski", 78 | code: "hr", 79 | }, 80 | { 81 | no: "13", 82 | name: "Czech", 83 | native: "Čeština", 84 | code: "cs", 85 | }, 86 | { 87 | no: "14", 88 | name: "Danish", 89 | native: "Dansk", 90 | code: "da", 91 | }, 92 | { 93 | no: "15", 94 | name: "Dutch", 95 | native: "Nederlands", 96 | code: "nl", 97 | }, 98 | { 99 | no: "16", 100 | name: "English", 101 | native: "English", 102 | code: "en", 103 | }, 104 | { 105 | no: "17", 106 | name: "Estonian", 107 | native: "Eesti keel", 108 | code: "et", 109 | }, 110 | { 111 | no: "18", 112 | name: "Filipino", 113 | native: "Filipino", 114 | code: "tl", 115 | }, 116 | { 117 | no: "19", 118 | name: "Finnish", 119 | native: "Suomi", 120 | code: "fi", 121 | }, 122 | { 123 | no: "20", 124 | name: "French", 125 | native: "Français", 126 | code: "fr", 127 | }, 128 | { 129 | no: "21", 130 | name: "Galician", 131 | native: "Galego", 132 | code: "gl", 133 | }, 134 | { 135 | no: "22", 136 | name: "Georgian", 137 | native: "ქართული", 138 | code: "ka", 139 | }, 140 | { 141 | no: "23", 142 | name: "German", 143 | native: "Deutsch", 144 | code: "de", 145 | }, 146 | { 147 | no: "24", 148 | name: "Greek", 149 | native: "Ελληνικά", 150 | code: "el", 151 | }, 152 | { 153 | no: "25", 154 | name: "Haitian Creole", 155 | native: "Kreyòl ayisyen", 156 | code: "ht", 157 | }, 158 | { 159 | no: "26", 160 | name: "Hebrew", 161 | native: "עברית", 162 | code: "iw", 163 | }, 164 | { 165 | no: "27", 166 | name: "Hindi", 167 | native: "हिन्दी", 168 | code: "hi", 169 | }, 170 | { 171 | no: "28", 172 | name: "Hungarian", 173 | native: "Magyar", 174 | code: "hu", 175 | }, 176 | { 177 | no: "29", 178 | name: "Icelandic", 179 | native: "Íslenska", 180 | code: "is", 181 | }, 182 | { 183 | no: "30", 184 | name: "Indonesian", 185 | native: "Bahasa Indonesia", 186 | code: "id", 187 | }, 188 | { 189 | no: "31", 190 | name: "Irish", 191 | native: "Gaeilge", 192 | code: "ga", 193 | }, 194 | { 195 | no: "32", 196 | name: "Italian", 197 | native: "Italiano", 198 | code: "it", 199 | }, 200 | { 201 | no: "33", 202 | name: "Japanese", 203 | native: "日本語", 204 | code: "ja", 205 | }, 206 | { 207 | no: "34", 208 | name: "Korean", 209 | native: "한국어", 210 | code: "ko", 211 | }, 212 | { 213 | no: "35", 214 | name: "Latvian", 215 | native: "Latviešu", 216 | code: "lv", 217 | }, 218 | { 219 | no: "36", 220 | name: "Lithuanian", 221 | native: "Lietuvių kalba", 222 | code: "lt", 223 | }, 224 | { 225 | no: "37", 226 | name: "Macedonian", 227 | native: "Македонски", 228 | code: "mk", 229 | }, 230 | { 231 | no: "38", 232 | name: "Malay", 233 | native: "Malay", 234 | code: "ms", 235 | }, 236 | { 237 | no: "39", 238 | name: "Maltese", 239 | native: "Malti", 240 | code: "mt", 241 | }, 242 | { 243 | no: "40", 244 | name: "Norwegian", 245 | native: "Norsk", 246 | code: "no", 247 | }, 248 | { 249 | no: "41", 250 | name: "Persian", 251 | native: "فارسی", 252 | code: "fa", 253 | }, 254 | { 255 | no: "42", 256 | name: "Polish", 257 | native: "Polski", 258 | code: "pl", 259 | }, 260 | { 261 | no: "43", 262 | name: "Portuguese", 263 | native: "Português", 264 | code: "pt", 265 | }, 266 | { 267 | no: "44", 268 | name: "Romanian", 269 | native: "Română", 270 | code: "ro", 271 | }, 272 | { 273 | no: "45", 274 | name: "Russian", 275 | native: "Русский", 276 | code: "ru", 277 | }, 278 | { 279 | no: "46", 280 | name: "Serbian", 281 | native: "Српски", 282 | code: "sr", 283 | }, 284 | { 285 | no: "47", 286 | name: "Slovak", 287 | native: "Slovenčina", 288 | code: "sk", 289 | }, 290 | { 291 | no: "48", 292 | name: "Slovenian", 293 | native: "Slovensko", 294 | code: "sl", 295 | }, 296 | { 297 | no: "49", 298 | name: "Spanish", 299 | native: "Español", 300 | code: "es", 301 | }, 302 | { 303 | no: "50", 304 | name: "Swahili", 305 | native: "Kiswahili", 306 | code: "sw", 307 | }, 308 | { 309 | no: "51", 310 | name: "Swedish", 311 | native: "Svenska", 312 | code: "sv", 313 | }, 314 | { 315 | no: "52", 316 | name: "Thai", 317 | native: "ไทย", 318 | code: "th", 319 | }, 320 | { 321 | no: "53", 322 | name: "Turkish", 323 | native: "Türkçe", 324 | code: "tr", 325 | }, 326 | { 327 | no: "54", 328 | name: "Ukrainian", 329 | native: "Українська", 330 | code: "uk", 331 | }, 332 | { 333 | no: "55", 334 | name: "Urdu", 335 | native: "اردو", 336 | code: "ur", 337 | }, 338 | { 339 | no: "56", 340 | name: "Vietnamese", 341 | native: "Tiếng Việt", 342 | code: "vi", 343 | }, 344 | { 345 | no: "57", 346 | name: "Welsh", 347 | native: "Cymraeg", 348 | code: "cy", 349 | }, 350 | { 351 | no: "58", 352 | name: "Yiddish", 353 | native: "ייִדיש", 354 | code: "yi", 355 | }, 356 | ]; 357 | -------------------------------------------------------------------------------- /styles/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --primary-color: #356aff; 3 | --bg-color: #f5f5f5; 4 | --light-bg-color: #fff; 5 | --text-color: #111116; 6 | --light-text-color: #cdccd1; 7 | --primary-text-color: #fff; 8 | } 9 | 10 | ::-webkit-scrollbar { 11 | width: 5px; 12 | } 13 | 14 | ::-webkit-scrollbar-track { 15 | border-radius: 30px; 16 | background: #f1f1f1; 17 | } 18 | 19 | ::-webkit-scrollbar-thumb { 20 | border-radius: 30px; 21 | background: var(--primary-color); 22 | } 23 | 24 | ::-webkit-scrollbar-thumb:hover { 25 | background: var(--bg-color); 26 | } 27 | 28 | * { 29 | margin: 0; 30 | padding: 0; 31 | box-sizing: border-box; 32 | font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; 33 | } 34 | 35 | body { 36 | min-height: 100vh; 37 | display: flex; 38 | align-items: center; 39 | justify-content: center; 40 | color: var(--text-color); 41 | background-color: var(--bg-color); 42 | } 43 | 44 | body.dark { 45 | --bg-color: #878683; 46 | --light-bg-color: #444444; 47 | --text-color: #fff; 48 | --light-text-color: #58575c; 49 | } 50 | 51 | .container { 52 | position: relative; 53 | width: 1200px; 54 | padding: 0 20px; 55 | display: flex; 56 | gap: 10px; 57 | } 58 | 59 | .container .card { 60 | flex: 1; 61 | padding: 30px; 62 | border-radius: 20px; 63 | background-color: var(--light-bg-color); 64 | } 65 | 66 | .container .card .from, 67 | .container .card .to { 68 | display: flex; 69 | align-items: center; 70 | gap: 20px; 71 | } 72 | 73 | .container .card .from { 74 | margin-right: 20px; 75 | } 76 | 77 | .container .card .to { 78 | margin-left: 20px; 79 | } 80 | 81 | .container .card .heading { 82 | font-size: 0.8rem; 83 | font-weight: 600; 84 | color: var(--light-text-color); 85 | white-space: nowrap; 86 | } 87 | 88 | .dropdown-container { 89 | position: relative; 90 | margin-bottom: 10px; 91 | width: 100%; 92 | } 93 | 94 | .dropdown-container .dropdown-toggle { 95 | display: flex; 96 | align-items: center; 97 | padding: 15px 20px; 98 | border-radius: 30px; 99 | background-color: var(--bg-color); 100 | cursor: pointer; 101 | transition: all 0.3s; 102 | } 103 | 104 | .dropdown-container .dropdown-toggle span { 105 | flex: 1; 106 | margin-left: 10px; 107 | } 108 | 109 | .dropdown-container .dropdown-toggle ion-icon { 110 | font-size: 20px; 111 | transition: transform 0.3s ease; 112 | } 113 | 114 | .dropdown-container.active .dropdown-toggle { 115 | border-radius: 20px 20px 0 0; 116 | } 117 | 118 | .dropdown-container.active .dropdown-toggle ion-icon:last-child { 119 | transform: rotate(180deg); 120 | } 121 | 122 | .dropdown-container .dropdown-menu { 123 | position: absolute; 124 | top: 100%; 125 | left: 0; 126 | width: 100%; 127 | height: 300px; 128 | overflow: auto; 129 | display: none; 130 | padding: 20px; 131 | z-index: 1; 132 | list-style: none; 133 | flex-direction: column; 134 | background-color: var(--bg-color); 135 | transition: all 1s; 136 | border-radius: 0 0 20px 20px; 137 | } 138 | 139 | .dropdown-container .dropdown-menu::-webkit-scrollbar { 140 | display: none; 141 | } 142 | 143 | .dropdown-container.active .dropdown-menu { 144 | display: flex; 145 | } 146 | 147 | .dropdown-container .dropdown-menu li { 148 | padding: 10px 20px; 149 | border-radius: 20px; 150 | cursor: pointer; 151 | margin-bottom: 5px; 152 | border-bottom: 1px solid var(--light-bg-color); 153 | transition: all 0.3s ease; 154 | } 155 | 156 | .dropdown-container .dropdown-menu li:hover { 157 | background-color: var(--light-bg-color); 158 | } 159 | .dropdown-container .dropdown-menu li.active { 160 | color: var(--primary-text-color); 161 | background-color: var(--primary-color); 162 | } 163 | 164 | .container .text-area { 165 | position: relative; 166 | } 167 | 168 | .container textarea { 169 | width: 100%; 170 | padding: 20px; 171 | margin: 10px 0; 172 | background-color: transparent; 173 | resize: none; 174 | outline: none; 175 | border: none; 176 | color: var(--text-color); 177 | font-size: 20px; 178 | } 179 | 180 | .container .text-area .chars { 181 | position: absolute; 182 | bottom: 0; 183 | right: 0; 184 | padding: 10px; 185 | font-size: 0.8rem; 186 | color: var(--light-text-color); 187 | } 188 | 189 | .card-bottom { 190 | display: flex; 191 | align-items: center; 192 | flex-direction: column; 193 | justify-content: center; 194 | padding-top: 20px; 195 | border-top: 2px solid var(--bg-color); 196 | } 197 | 198 | .card-bottom p { 199 | margin-bottom: 20px; 200 | } 201 | 202 | .card-bottom label { 203 | height: 50px; 204 | display: flex; 205 | align-items: center; 206 | gap: 20px; 207 | padding: 0 20px; 208 | cursor: pointer; 209 | border-radius: 32px; 210 | background-color: var(--bg-color); 211 | } 212 | 213 | .card-bottom label:hover { 214 | color: var(--primary-text-color); 215 | background-color: var(--primary-color); 216 | } 217 | 218 | .card-bottom span { 219 | font-size: 15px; 220 | pointer-events: none; 221 | } 222 | 223 | .card-bottom ion-icon { 224 | font-size: 22px; 225 | } 226 | 227 | .card-bottom button { 228 | height: 50px; 229 | display: flex; 230 | align-items: center; 231 | gap: 20px; 232 | padding: 0 20px; 233 | border-radius: 30px; 234 | border: none; 235 | outline: none; 236 | color: var(--text-color); 237 | cursor: pointer; 238 | background-color: var(--bg-color); 239 | } 240 | 241 | .card-bottom button:hover { 242 | color: var(--primary-text-color); 243 | background-color: var(--primary-color); 244 | } 245 | 246 | .container .center { 247 | position: relative; 248 | } 249 | 250 | .swap-position { 251 | display: flex; 252 | align-items: center; 253 | justify-content: center; 254 | position: absolute; 255 | top: 30px; 256 | left: 50%; 257 | transform: translateX(-50%); 258 | width: 50px; 259 | height: 50px; 260 | border-radius: 50%; 261 | cursor: pointer; 262 | border: 5px solid var(--bg-color); 263 | transition: all 0.3s; 264 | color: var(--primary-text-color); 265 | background-color: var(--primary-color); 266 | } 267 | 268 | .swap-position ion-icon { 269 | font-size: 25px; 270 | } 271 | 272 | .swap-position:hover { 273 | transform: translateX(-50%) scale(1.1); 274 | } 275 | 276 | .mode { 277 | position: fixed; 278 | bottom: 20px; 279 | right: 20px; 280 | z-index: 1; 281 | } 282 | 283 | .toggle { 284 | position: relative; 285 | cursor: pointer; 286 | } 287 | 288 | .toggle-track { 289 | width: 30px; 290 | height: 50px; 291 | border-radius: 30px; 292 | display: flex; 293 | align-items: center; 294 | flex-direction: column; 295 | padding: 3px 0; 296 | justify-content: space-between; 297 | border: 1px solid var(--light-text-color); 298 | background-color: var(--light-bg-color); 299 | transition: all 0.3s ease; 300 | } 301 | 302 | .toggle-checkbox { 303 | display: none; 304 | } 305 | 306 | .toggle-thumb { 307 | position: absolute; 308 | top: 2px; 309 | left: 2px; 310 | width: 25px; 311 | height: 20px; 312 | border-radius: 50%; 313 | background-color: var(--primary-color); 314 | transition: all 0.5s; 315 | } 316 | 317 | .toggle input:checked ~ .toggle-thumb { 318 | transform: translateY(25px); 319 | } 320 | 321 | .toggle img { 322 | width: 20px; 323 | height: 20px; 324 | } 325 | 326 | /* Media Querries */ 327 | 328 | @media (max-width: 800px) { 329 | .container { 330 | width: 100%; 331 | margin-top: 20px; 332 | flex-direction: column; 333 | } 334 | 335 | .container .card { 336 | width: 100%; 337 | } 338 | 339 | .container.card .from { 340 | margin-right: 0; 341 | } 342 | 343 | .container.card .to { 344 | margin-left: 0; 345 | } 346 | 347 | .container .card .from, 348 | .container .card .to { 349 | flex-direction: column; 350 | } 351 | 352 | .swap-position { 353 | top: 50%; 354 | left: 50%; 355 | transform: translate(-50%, -50%); 356 | } 357 | 358 | .swap-position:hover { 359 | transform: translate(-50%, -50%) scale(1.1); 360 | } 361 | 362 | .swap-position ion-icon { 363 | transform: rotate(90deg); 364 | } 365 | } 366 | --------------------------------------------------------------------------------