From adbbe74f97c1ed28abae9c9ae3eb4b6ad05a1c34 Mon Sep 17 00:00:00 2001 From: Steve Date: Wed, 26 Oct 2022 18:03:05 +0530 Subject: [PATCH] #138. Made language selector similar to original --- css/style.css | 164 +++++++++++++++++++++++++++++++ img/country-icon/Norwegian.png | Bin 0 -> 199 bytes img/country-icon/Polish.png | Bin 0 -> 98 bytes img/country-icon/USA.png | Bin 0 -> 252 bytes img/country-icon/Vietnamese.png | Bin 0 -> 199 bytes img/country-icon/brazil.png | Bin 0 -> 449 bytes img/country-icon/bulgaria.png | Bin 0 -> 99 bytes img/country-icon/chez.png | Bin 0 -> 284 bytes img/country-icon/china.png | Bin 0 -> 196 bytes img/country-icon/croatia.png | Bin 0 -> 344 bytes img/country-icon/denmark.png | Bin 0 -> 138 bytes img/country-icon/finland.png | Bin 0 -> 138 bytes img/country-icon/france.png | Bin 0 -> 108 bytes img/country-icon/germany.png | Bin 0 -> 99 bytes img/country-icon/greece.png | Bin 0 -> 123 bytes img/country-icon/hungary.png | Bin 0 -> 114 bytes img/country-icon/india.png | Bin 0 -> 165 bytes img/country-icon/italy.png | Bin 0 -> 109 bytes img/country-icon/japan.png | Bin 0 -> 202 bytes img/country-icon/korea.png | Bin 0 -> 440 bytes img/country-icon/lithuanian.png | Bin 0 -> 99 bytes img/country-icon/netherlands.png | Bin 0 -> 99 bytes img/country-icon/romania.png | Bin 0 -> 113 bytes img/country-icon/russia.png | Bin 0 -> 120 bytes img/country-icon/spain.png | Bin 0 -> 392 bytes img/country-icon/sweeden.png | Bin 0 -> 104 bytes img/country-icon/thailand.png | Bin 0 -> 112 bytes img/country-icon/turkey.png | Bin 0 -> 227 bytes img/country-icon/ukraine.png | Bin 0 -> 120 bytes index.html | 69 ++++++------- js/script.js | 35 ++++++- 31 files changed, 234 insertions(+), 34 deletions(-) create mode 100644 img/country-icon/Norwegian.png create mode 100644 img/country-icon/Polish.png create mode 100644 img/country-icon/USA.png create mode 100644 img/country-icon/Vietnamese.png create mode 100644 img/country-icon/brazil.png create mode 100644 img/country-icon/bulgaria.png create mode 100644 img/country-icon/chez.png create mode 100644 img/country-icon/china.png create mode 100644 img/country-icon/croatia.png create mode 100644 img/country-icon/denmark.png create mode 100644 img/country-icon/finland.png create mode 100644 img/country-icon/france.png create mode 100644 img/country-icon/germany.png create mode 100644 img/country-icon/greece.png create mode 100644 img/country-icon/hungary.png create mode 100644 img/country-icon/india.png create mode 100644 img/country-icon/italy.png create mode 100644 img/country-icon/japan.png create mode 100644 img/country-icon/korea.png create mode 100644 img/country-icon/lithuanian.png create mode 100644 img/country-icon/netherlands.png create mode 100644 img/country-icon/romania.png create mode 100644 img/country-icon/russia.png create mode 100644 img/country-icon/spain.png create mode 100644 img/country-icon/sweeden.png create mode 100644 img/country-icon/thailand.png create mode 100644 img/country-icon/turkey.png create mode 100644 img/country-icon/ukraine.png diff --git a/css/style.css b/css/style.css index 1374b07..618ee16 100644 --- a/css/style.css +++ b/css/style.css @@ -1097,6 +1097,170 @@ p { } +.dropdown{ + min-width:5em; + max-width: 10em; + position: relative; + margin-top: 24px; + align-items: center; +} + +.dropdown * { + box-sizing: border-box; + font-family: "Whitney Regular"; +} + +.selected { + display: flex; + align-items: center; + display: flex; + -webkit-box-align: center; + align-items: center; +} + +.select{ + background: transparent; + color: white; + display: flex; + justify-content: space-between; + align-items: center; + cursor: pointer; + transition: background 0.3s; +} + +.select img{ + border-radius: 2.5px/2px; + height: 16px; + width: 24px; + margin-right: 8px; +} + +.caret { + width: 0; + height: 0; + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-top: 6px solid #fff; + transition: 0.3s; +} + +.caret-rotate{ + transform: rotate(180deg); +} + +.menu { + list-style: none; + background: white; + color:#23272a; + position: absolute; + top: -330px; + opacity: 0; + display:none; + transition: 0.2s; + max-height: 320px; + min-width: 150px; + overflow-x: hidden; + overflow-y: auto; + overscroll-behavior-x: contain; + overscroll-behavior-y: contain; + border-radius: 0.5em; + box-shadow: -2px -2px 4px 1px rgba(174, 171, 171, 0.2); +} + +.menu img{ + border-radius: 2.5px/2px; + height: 16px; + width: 24px; + margin-right: 8px; +} + +::-webkit-scrollbar-track{ + border-radius: 20em; +} + +.menu li{ + padding: 8px; + cursor:pointer; + display: flex; + align-items: center; + border-radius: 5px; +} + +.menu li:hover{ + background: #e3e4e5; +} + +.menu-open { + display: block; + opacity: 1; +} + + + + +/* .dropdown{ + position: relative; + margin-top: 20px; + width: 100px; +} + +.dropdown::before{ + content: ''; + position: absolute; + right:20px; + top: 15px; + z-index: 10000; + width: 8px; + height: 8px; + border: 2px solid#333; + border-top: 2px solid#fff; + border-right: 2px solid#fff; + transform: rotate(135deg); + transition: 0.5s; + pointer-events: none; +} + +.dropdown input{ + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 10%; + background: #23272a; + cursor: pointer; + border: none; + outline: none; + padding: 12px 20px; + border-radius: 10px; +} + +.dropdown .option{ + position: absolute; + top: 70px; + width: 100%; + background: #23272a; + box-shadow: 0 30px 30px rgba(0,0,0,0.5); + border-radius: 10px; + overflow: hidden; + display: none; +} + +.dropdown > .option > div{ + padding: 12px 2ppx; + cursor: pointer; +} + +.dropdown .option div:hover{ + background: blue; + color: #fff; +} + +.dropdown .option div img { + position: relative; + top: 4px; + font-size: 1.2em; +} */ + @keyframes scrollbtn { from { transform: translateY(2rem); diff --git a/img/country-icon/Norwegian.png b/img/country-icon/Norwegian.png new file mode 100644 index 0000000000000000000000000000000000000000..ab5146e41cac4d18c47418228fbc85638aba26b3 GIT binary patch literal 199 zcmeAS@N?(olHy`uVBq!ia0vp^8bB<|!VDy}(v2N}lzM?A+EmX78zI1_7#F3)Y@} zcwC`p(OroQHIJo2LJ1rEyl?Xy((p67J#Fr^ZMxQyuDdO7Oucs0cp^iy>;)kKw~PC@ zxU42HG%JW55a?nx*pa|^W2-R#hOF>IOdG5?8KgVX*K!AiPXIZ~)78&qol`;+0K~#w AZvX%Q literal 0 HcmV?d00001 diff --git a/img/country-icon/Vietnamese.png b/img/country-icon/Vietnamese.png new file mode 100644 index 0000000000000000000000000000000000000000..6476c626e9ea7dd6e28470f566e3effff3ca59f1 GIT binary patch literal 199 zcmeAS@N?(olHy`uVBq!ia0vp^8bB<~!VDz;*j^(nnjn$?tGz!|zlKt-)@*_6Wp0Ra_^yBIs0nvx{G>4=Dk91_qGF%vm1 vU{c~O=q8>ll$yX1;=s?hfFYRS@B&r_KOIg-?IZ;!pk)l6u6{1-oD!Mxd4uP6wfH~^bE04H`6pfwLMZy!L0kB>Cx*#$pTSS?JBJ6e_a-2tx2 z5}Cvo(bEd3zsrrm8GO7RUVfz@K4;(72M{!V0h>Bwwj;sL4Wq^t*6rXQJ!g`+xFAA@ zt<1mg+5<{$nPYT#OLL5zuWz;C#lqmyI#hX-#PwhR008w#L_t(I%e~ae5`r)c0MHfH`y#k+|NnhvD2pQ?^+FCkWZq0jngVOdfJLCDNkJn32#k5CCxDUYGm!3~i9P)R zv-}K-<(Q^pDPZT>6jTdw^vvRSxsNzA4{>$ rGRZYVD!aJiDR?qZLH= literal 0 HcmV?d00001 diff --git a/img/country-icon/bulgaria.png b/img/country-icon/bulgaria.png new file mode 100644 index 0000000000000000000000000000000000000000..ca0cba6d1e456601d867de0804578d95f83ee989 GIT binary patch literal 99 zcmeAS@N?(olHy`uVBq!ia0vp^8bB<;#0(_Az6uWpQk(%kA+8M5@~)`~{r~^}pzr^A wKtWMY7sn8Z%gGU}>^vcmdKI;Vst0I!o9T>t<8 literal 0 HcmV?d00001 diff --git a/img/country-icon/chez.png b/img/country-icon/chez.png new file mode 100644 index 0000000000000000000000000000000000000000..9b4e6e86b725c8a9399729dc356d16892343155e GIT binary patch literal 284 zcmeAS@N?(olHy`uVBq!ia0vp^8bB<~!3-oV&)LQRDc1m>5ZCL%lApi+j5Q1^=-+f* zMCx@{uZCUW>&~A4|NjfR*6lxgXO*1(1yLCh*V>a}3hH59M)4EoDw>_Y^|V0Ow`KmG z_@)&}am~GZCU^o3#p*m=978Nl_nvVVYETeh4ZL8;(-ir> zKBQRE?ZNk7p{qTo2Xsj@J3R|&7MS%;VCFmnyS)h|RnB?59EUH9m*n;z+#1+Cp*EQD zX0JlZJmbiZ#WFf4uZZv3qr~*!zn{Z>zXL~vnEviI=Xo>FU`O?VC2B0sWCfWP?`CG& eEvvMfS5Ku_=8kgMwf#VsFnGH9xvX^-i)gfxF<6*H)k=3 tUEge-(B*sV+1YJOI!!)2iy8PC7`}CJ9(;XK$`@!8gQu&X%Q~loCID+uK)wI~ literal 0 HcmV?d00001 diff --git a/img/country-icon/croatia.png b/img/country-icon/croatia.png new file mode 100644 index 0000000000000000000000000000000000000000..1dc15e24fdd1d0a0b0d5a30aabb2d636196487b0 GIT binary patch literal 344 zcmV-e0jK_nP)wC@-lkCC#lZie7b zS@prkB^8WCiiD@2x&IIl--(liJbX}Oy<-b0cqj3{;1Bm0n7stRhYO0001wNkls#|{G_3`J1`!H^70 z?S>(#Arz08k%HS8+G%H||ow~k%&sh?H>9KoO*K=H@0hnLRBaZFs zo>RCX)$PvJ)^rCN-T)B}2%!WM%$*2A8EGkXB!h6oJ-Qo%aNv@=8@_+NB^fqxJ~2ag qP&8X07IrZ&p;Be(8GX>(AK?dzuoR!l-(}MP0000Xr1%4TLR^n=>tFRqKE`A4|NsB{ zW!(>__<{5=mIV0)|C4&mUJK-Cdb&79c2>0rNRUu$YD!SZ$x-TH;5in- iu(T;cSL&c5Kf|(|(DP=D4cmd57(8A5T-G@yGywn?|0oy$ literal 0 HcmV?d00001 diff --git a/img/country-icon/finland.png b/img/country-icon/finland.png new file mode 100644 index 0000000000000000000000000000000000000000..c652fc0f036df3c35699809d027ae69c7b9ce5e1 GIT binary patch literal 138 zcmeAS@N?(olHy`uVBq!ia0vp^8bB<;!VDyB84z@-iaSr7;YJ{XOD}4X} literal 0 HcmV?d00001 diff --git a/img/country-icon/france.png b/img/country-icon/france.png new file mode 100644 index 0000000000000000000000000000000000000000..fd06f8489e5a6d3c434be5eca546509dbbcd3157 GIT binary patch literal 108 zcmeAS@N?(olHy`uVBq!ia0vp^8bB<~!VDz;*js0>&DV_kI5LceK_5c6>_i8_U`1)&^ z|2LNc#kD+L977~7CnqG7CNwa{_?!zcIB<~Vk;ICiH$F{j0wvBGG7l1jSVU$sFzjMg VPk9p{y$z^~!PC{xWt~$(699mGCYk^M literal 0 HcmV?d00001 diff --git a/img/country-icon/hungary.png b/img/country-icon/hungary.png new file mode 100644 index 0000000000000000000000000000000000000000..d82edfcd0c9a04b3ff3081038edf8610ec66800a GIT binary patch literal 114 zcmeAS@N?(olHy`uVBq!ia0vp^8bB<vVD=zopr0OS`yPyhe` literal 0 HcmV?d00001 diff --git a/img/country-icon/italy.png b/img/country-icon/italy.png new file mode 100644 index 0000000000000000000000000000000000000000..bb394d9f7bd3982823acf9f3a3717f0daddff1f2 GIT binary patch literal 109 zcmeAS@N?(olHy`uVBq!ia0vp^8bB<~!VDz;*jfL~b|omg1TeW82qTt*x!RFG4Oykky2cb8eodGEL@|oYO~9@4dn7u(XqitfZH=?B?uWUtg4zl>GAY zk9VEfVrx@cm6w;7P*70cU1)Lu008(&L_t(I%e9k<4uc>Jh6RV|0xb=EQotR;YV&L@&)C1%F^g<)1ZbBC&rTy#@n6|hKiUN<1nwM zJb%V~!S02i#wJ%){1rBdst!#CAS34wK>YQGPSND%-!w@ne84=>%HxsW9@d&U_UZaYczK| ioEm>~XFk7$ztRIkjSV5~?$av(0000s0>&Db4_&5LZRF?*IS)uanVe?tW?q w6cqJzaSV~ToE*W*&a)+{?GWSH8C%#HlvN{_N9g|h2UNh|>FVdQ&MBb@0Fgc$xBvhE literal 0 HcmV?d00001 diff --git a/img/country-icon/romania.png b/img/country-icon/romania.png new file mode 100644 index 0000000000000000000000000000000000000000..6357b2b212b65876900ba26775e8100c0d134ad0 GIT binary patch literal 113 zcmeAS@N?(olHy`uVBq!ia0vp^8bB<~!VDz;*js0>&DV_kI5Z9|(vj6}8XRus$Ra>rd zwKGVXu_VYZ_@C5c_F5oE%G1R$MB;KXM=LX1lwtTm#TR*$QSLr3;M$jzpOs%oCnTn4b!jy(u@n}rxwLl6ylN$utpuMSryiK54B@I zxn~R0q94C{T+yXT%#$3`ltr;E63mGgv8Y*uJ2GrjU%6Wp;*GSENgUL(o?dBN&7^Q@ zhmyGf0004WQchF;8si6j0001&Nkl!DQ% zLy?-nT61%?5%9)h)7bmPxq;;{%-OL&KS$Ow1w&u&IPZE%wGYD}TXR0jF31uXu9k~> md)oV-iKr0j8ht%~`CM-+NhRK`Crds60000s0>&DV_kI5Z9%WhF`w^IMY5wSIf(Y zKd%}nF7N5$7$R{wIYEJOO%rolfQ7=DKm6<_$&((*sKifTU{F?VthZMR_yAPO;OXk; Jvd$@?2>|O69$o+d literal 0 HcmV?d00001 diff --git a/img/country-icon/turkey.png b/img/country-icon/turkey.png new file mode 100644 index 0000000000000000000000000000000000000000..6c6b1b3fe1793b23d353c541c59af05126dd8a3d GIT binary patch literal 227 zcmeAS@N?(olHy`uVBq!ia0vp^8bB<~!VDz;*j?A+C=(#U68s|NsC0xu)rB zpRlLW>OT%0eVdy5@59Fz7EbR=s=qE?@#o>AZ=1G#Z0VBka#I6pWGo5t3;rkdn7tOr zN%3@X4AD5BoFH<9fr+O?Ok`e%ro`PPQ=0TNE-i_ExmCdTg44=?00S0Z15f@Ve0(lq zB4Jh>Nwah2^r&boDiJ&)cHPrOXi9JuM^WgcNy>^-3yga?Z}#1t8&TVG_5BU!%mqq( Z4DTkGXuM$&)C1bb;OXk;vd$@?2>{LXRM!9i literal 0 HcmV?d00001 diff --git a/img/country-icon/ukraine.png b/img/country-icon/ukraine.png new file mode 100644 index 0000000000000000000000000000000000000000..3e71d69a0369606af2ffe2a9927b903a7a3c45bf GIT binary patch literal 120 zcmeAS@N?(olHy`uVBq!ia0vp^8bB<~#0(^h>s0>&DV_kI5Z8tovH!0!FhuVLGPb4~ zm;uEZOM?7@|4BV&uLW|XJY5_^BrYdMu(IPR5gwO PRWW$F`njxgN@xNA@^&IT literal 0 HcmV?d00001 diff --git a/index.html b/index.html index 85784ab..3fa1edb 100644 --- a/index.html +++ b/index.html @@ -193,39 +193,42 @@

Ready to start your journey?

IMAGINE A PLACE

-
- - +
+
+ English, USA +
+
+
    +
  • български
    • +
  • Čeština
    • +
  • Dansk
    • +
  • Deutsch
    • +
  • Ελληνικά
    • +
  • English, USA
    • +
  • Español
    • +
  • Suomi
    • +
  • Français
    • +
  • हिंदी
    • +
  • Hrvatski
    • +
  • Magyar
    • +
  • Italiano
    • +
  • 日本語
    • +
  • 한국어
    • +
  • Lietuviškai
    • +
  • Nederlands
    • +
  • Norwegian
    • +
  • Polski
    • +
  • Português do Brasil
    • +
  • Română
    • +
  • Русский
    • +
  • Svenska
    • +
  • ไทย
    • +
  • Türkçe
    • +
  • Українська
    • +
  • Tiếng Việt
    • +
  • 中文
    • +
  • 繁體中文
    • +
diff --git a/js/script.js b/js/script.js index bad2b48..6b381a7 100644 --- a/js/script.js +++ b/js/script.js @@ -64,13 +64,46 @@ let hidden = document.querySelector('.hidden'); hamburger.addEventListener('click',function(e){ menu.classList.add('show'); hidden.style.display = 'flex'; -}) +}); close.addEventListener('click',function(e){ menu.classList.remove('show'); hidden.style.display = 'none'; }); +const dropdowns = document.querySelectorAll('.dropdown'); + +dropdowns.forEach(dropdown => { + const select = dropdown.querySelector('.select'); + const caret = dropdown.querySelector('.caret'); + const menu = dropdown.querySelector('.menu'); + const options = dropdown.querySelectorAll('.menu li'); + const selected = dropdown.querySelector('.selected'); + console.log(options); + select.addEventListener('click', () => { + select.classList.toggle('select-clicked'); + caret.classList.toggle('caret-rotate'); + menu.classList.toggle('menu-open'); + }); + + options.forEach(option => { + option.addEventListener('click', () => { + selected.innerHTML = option.innerHTML; + select.classList.remove('select-clicked'); + caret.classList.remove('caret-rotate'); + menu.classList.remove('menu-open'); + + options.forEach(option => { + option.classList.remove('active'); + }); + + option.classList.add('active'); + }); + }); +}); + + + // function download(x) { // if(x === "Windows"){ // window.open("https://discord.com/api/downloads/distributions/app/installers/latest?channel=stable&platform=win&arch=x86");