dandri/simplex-chat
1
0
Fork 0
mirror of https://github.com/simplex-chat/simplex-chat.git synced 2026-05-10 19:27:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

deploy: 6f528bd8a1

Browse Source
This commit is contained in:
epoberezkin
2025-10-16 12:05:03 +00:00
parent a22d19ddbf
commit a26a15973f
31 changed files with 1643 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ar/index.html
+60 -7
View File
@@ -32,8 +32,8 @@
<body>
<header id="navbar">
<a class="logo" href="/"><img src="/img/design_3/logo-light.png" alt="logo" /></a>
<a href="/ar" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo" /></a>
<a href="/ar" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo" /></a>
<nav id="menu">
<ul>
@@ -185,7 +185,9 @@
<path d="M225.368 385.712C222.968 387.046 219.368 390.112 217.368 392.646L213.768 397.312V426.379C213.768 458.246 213.901 458.779 222.968 465.446C228.168 469.312 240.701 469.312 245.901 465.446C254.834 458.779 255.101 457.979 255.501 428.246C256.034 397.579 255.234 394.379 246.834 387.979C241.101 383.579 231.634 382.512 225.368 385.712Z"/>
</svg>
<img src="/img/new/moon.svg" alt="" srcset="" class="moon hidden">
<svg class="moon" width="469" height="469" viewBox="5 5 20 23" xmlns="http://www.w3.org/2000/svg">
<path d="M10.895 7.574c0 7.55 5.179 13.67 11.567 13.67 1.588 0 3.101-0.38 4.479-1.063-1.695 4.46-5.996 7.636-11.051 7.636-6.533 0-11.83-5.297-11.83-11.83 0-4.82 2.888-8.959 7.023-10.803-0.116 0.778-0.188 1.573-0.188 2.39z"></path>
</svg>
</button>
<div class="nav-link flag-container">
@@ -438,7 +440,8 @@
</div>
</header>
<div id="mobile-header">
<a class="logo" href="/"><img src="/img/new/logo-symbol-dark.svg" alt="logo" /></a>
<a href="/ar" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-light.svg" alt="" srcset=""></a>
<a href="/ar" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-dark.svg" alt="" srcset=""></a>
<button id="hamburger" class="nav-toggle-btn">
<svg viewBox="0 0 100 80" width="36" height="36">
@@ -737,6 +740,56 @@
io.observe(cover);
})();
// switch theme
const sunIcon = document.querySelector('.sun');
const moonIcon = document.querySelector('.moon');
const userTheme = localStorage.getItem('theme');
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
const prismThemeLink = document.getElementById('prism-theme')
const iconToggle = () => {
sunIcon.classList.toggle('hidden');
moonIcon.classList.toggle('hidden');
}
const themeCheck = () => {
if(userTheme === 'dark' || (!userTheme && systemTheme)){
document.documentElement.classList.add('dark');
moonIcon.classList.add('hidden');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
}
}
else{
sunIcon.classList.add('hidden');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-light.min.css')
}
}
}
themeCheck();
const themeSwitch = () => {
if(document.documentElement.classList.contains('dark')){
document.documentElement.classList.remove('dark');
localStorage.setItem('theme','light');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-light.min.css')
}
iconToggle();
}
else{
document.documentElement.classList.add('dark');
localStorage.setItem('theme','dark');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
}
iconToggle();
}
}
window.addEventListener('click',(e)=>{
if(e.target.closest('.nav-link')){
if(e.target.closest('.nav-link').classList.contains('active')){
@@ -756,9 +809,9 @@
nav.classList.add('open');
}
}
// else if(e.target.closest('.theme-switch-btn')){
// themeSwitch();
// }
else if(e.target.closest('.theme-switch-btn')){
themeSwitch();
}
});
</script>
</body>
bg/index.html
+60 -7
View File
@@ -32,8 +32,8 @@
<body>
<header id="navbar">
<a class="logo" href="/"><img src="/img/design_3/logo-light.png" alt="logo" /></a>
<a href="/bg" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo" /></a>
<a href="/bg" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo" /></a>
<nav id="menu">
<ul>
@@ -185,7 +185,9 @@
<path d="M225.368 385.712C222.968 387.046 219.368 390.112 217.368 392.646L213.768 397.312V426.379C213.768 458.246 213.901 458.779 222.968 465.446C228.168 469.312 240.701 469.312 245.901 465.446C254.834 458.779 255.101 457.979 255.501 428.246C256.034 397.579 255.234 394.379 246.834 387.979C241.101 383.579 231.634 382.512 225.368 385.712Z"/>
</svg>
<img src="/img/new/moon.svg" alt="" srcset="" class="moon hidden">
<svg class="moon" width="469" height="469" viewBox="5 5 20 23" xmlns="http://www.w3.org/2000/svg">
<path d="M10.895 7.574c0 7.55 5.179 13.67 11.567 13.67 1.588 0 3.101-0.38 4.479-1.063-1.695 4.46-5.996 7.636-11.051 7.636-6.533 0-11.83-5.297-11.83-11.83 0-4.82 2.888-8.959 7.023-10.803-0.116 0.778-0.188 1.573-0.188 2.39z"></path>
</svg>
</button>
<div class="nav-link flag-container">
@@ -433,7 +435,8 @@
</div>
</header>
<div id="mobile-header">
<a class="logo" href="/"><img src="/img/new/logo-symbol-dark.svg" alt="logo" /></a>
<a href="/bg" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-light.svg" alt="" srcset=""></a>
<a href="/bg" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-dark.svg" alt="" srcset=""></a>
<button id="hamburger" class="nav-toggle-btn">
<svg viewBox="0 0 100 80" width="36" height="36">
@@ -732,6 +735,56 @@
io.observe(cover);
})();
// switch theme
const sunIcon = document.querySelector('.sun');
const moonIcon = document.querySelector('.moon');
const userTheme = localStorage.getItem('theme');
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
const prismThemeLink = document.getElementById('prism-theme')
const iconToggle = () => {
sunIcon.classList.toggle('hidden');
moonIcon.classList.toggle('hidden');
}
const themeCheck = () => {
if(userTheme === 'dark' || (!userTheme && systemTheme)){
document.documentElement.classList.add('dark');
moonIcon.classList.add('hidden');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
}
}
else{
sunIcon.classList.add('hidden');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-light.min.css')
}
}
}
themeCheck();
const themeSwitch = () => {
if(document.documentElement.classList.contains('dark')){
document.documentElement.classList.remove('dark');
localStorage.setItem('theme','light');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-light.min.css')
}
iconToggle();
}
else{
document.documentElement.classList.add('dark');
localStorage.setItem('theme','dark');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
}
iconToggle();
}
}
window.addEventListener('click',(e)=>{
if(e.target.closest('.nav-link')){
if(e.target.closest('.nav-link').classList.contains('active')){
@@ -751,9 +804,9 @@
nav.classList.add('open');
}
}
// else if(e.target.closest('.theme-switch-btn')){
// themeSwitch();
// }
else if(e.target.closest('.theme-switch-btn')){
themeSwitch();
}
});
</script>
</body>
cs/index.html
+60 -7
View File
@@ -32,8 +32,8 @@
<body>
<header id="navbar">
<a class="logo" href="/"><img src="/img/design_3/logo-light.png" alt="logo" /></a>
<a href="/cs" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo" /></a>
<a href="/cs" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo" /></a>
<nav id="menu">
<ul>
@@ -185,7 +185,9 @@
<path d="M225.368 385.712C222.968 387.046 219.368 390.112 217.368 392.646L213.768 397.312V426.379C213.768 458.246 213.901 458.779 222.968 465.446C228.168 469.312 240.701 469.312 245.901 465.446C254.834 458.779 255.101 457.979 255.501 428.246C256.034 397.579 255.234 394.379 246.834 387.979C241.101 383.579 231.634 382.512 225.368 385.712Z"/>
</svg>
<img src="/img/new/moon.svg" alt="" srcset="" class="moon hidden">
<svg class="moon" width="469" height="469" viewBox="5 5 20 23" xmlns="http://www.w3.org/2000/svg">
<path d="M10.895 7.574c0 7.55 5.179 13.67 11.567 13.67 1.588 0 3.101-0.38 4.479-1.063-1.695 4.46-5.996 7.636-11.051 7.636-6.533 0-11.83-5.297-11.83-11.83 0-4.82 2.888-8.959 7.023-10.803-0.116 0.778-0.188 1.573-0.188 2.39z"></path>
</svg>
</button>
<div class="nav-link flag-container">
@@ -438,7 +440,8 @@
</div>
</header>
<div id="mobile-header">
<a class="logo" href="/"><img src="/img/new/logo-symbol-dark.svg" alt="logo" /></a>
<a href="/cs" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-light.svg" alt="" srcset=""></a>
<a href="/cs" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-dark.svg" alt="" srcset=""></a>
<button id="hamburger" class="nav-toggle-btn">
<svg viewBox="0 0 100 80" width="36" height="36">
@@ -737,6 +740,56 @@
io.observe(cover);
})();
// switch theme
const sunIcon = document.querySelector('.sun');
const moonIcon = document.querySelector('.moon');
const userTheme = localStorage.getItem('theme');
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
const prismThemeLink = document.getElementById('prism-theme')
const iconToggle = () => {
sunIcon.classList.toggle('hidden');
moonIcon.classList.toggle('hidden');
}
const themeCheck = () => {
if(userTheme === 'dark' || (!userTheme && systemTheme)){
document.documentElement.classList.add('dark');
moonIcon.classList.add('hidden');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
}
}
else{
sunIcon.classList.add('hidden');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-light.min.css')
}
}
}
themeCheck();
const themeSwitch = () => {
if(document.documentElement.classList.contains('dark')){
document.documentElement.classList.remove('dark');
localStorage.setItem('theme','light');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-light.min.css')
}
iconToggle();
}
else{
document.documentElement.classList.add('dark');
localStorage.setItem('theme','dark');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
}
iconToggle();
}
}
window.addEventListener('click',(e)=>{
if(e.target.closest('.nav-link')){
if(e.target.closest('.nav-link').classList.contains('active')){
@@ -756,9 +809,9 @@
nav.classList.add('open');
}
}
// else if(e.target.closest('.theme-switch-btn')){
// themeSwitch();
// }
else if(e.target.closest('.theme-switch-btn')){
themeSwitch();
}
});
</script>
</body>
css/design3.css
+203 -28
View File
@@ -204,14 +204,13 @@
}
:root {
--bg-grad: linear-gradient(9.2deg,
#000000 0%,
#131d49 52%,
#3f5598 65%,
#c3faff 85%,
#fff6e0 90%);
--bg-grad: linear-gradient(10deg,
#e8f3ff 0%,
#c0e2ff 40%,
#e9ffff 80%,
#ffefd6 90%);
--nav-color: #ffffff;
--nav-color: #001796;
/* Compute cover drawn size and inner safe frame (60% of full image on each axis) */
/* --cover-bg-w: calc(min((3200 / 1920) * 100vw, (3200 / 1080) * 100vh));
@@ -233,6 +232,17 @@
--sec-vhu-desktop: calc(var(--sec-h) / 100);
}
:root.dark {
--bg-grad: linear-gradient(9.2deg,
#000000 0%,
#131d49 52%,
#3f5598 65%,
#c3faff 85%,
#fff6e0 90%);
--nav-color: #ffffff;
}
@media screen and (max-width: 767px) {
:root {
--sec-w: 100vw;
@@ -250,6 +260,11 @@ body.change-nav-color {
box-sizing: border-box;
margin: 0;
padding: 0;
border-color: #000;
}
.dark * {
border-color: #fff;
}
html {
@@ -259,15 +274,32 @@ html {
html,
body {
background: #fff;
}
.dark html,
.dark body {
background: #000;
}
.hidden {
@media screen and (min-width: 768px) {
html {
overscroll-behavior: none;
}
}
/* .hidden {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
}
:is(.dark .dark\:hidden) {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
} */
.lock-scroll {
overflow: hidden !important;
}
@@ -285,6 +317,28 @@ p {
}
.gradient-text {
background: linear-gradient(100deg,
#ffb55d 0%,
#fff494 50%,
#fbffdd 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
}
.page .text-container a.gradient-text {
background: linear-gradient(90deg,
#001aa7 0%,
#0095e7 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
}
.dark .gradient-text,
.dark .page .text-container a.gradient-text {
background: linear-gradient(90deg,
#019bfe 0%,
#64fdff 58%,
@@ -348,12 +402,16 @@ section.page .area {
/* --- COVER --- */
section.cover {
background-image: url("/img/design_3/cover.jpg");
background-image: url("/img/design_3/cover-light.jpg");
background-size: var(--cover-bg-w) var(--cover-bg-h);
background-position: center;
background-repeat: no-repeat;
}
.dark section.cover {
background-image: url("/img/design_3/cover.jpg");
}
section.cover div.content {
display: flex;
flex-direction: column;
@@ -385,13 +443,17 @@ section.cover div.content h2 {
section.cover div.content p {
font-family: "Manrope", "GT-Walsheim", sans-serif;
font-weight: 200;
font-weight: 400;
font-size: calc(var(--sec-vwu-desktop) * 1.6);
align-items: center;
color: #ffffff;
max-width: calc(var(--sec-vwu-desktop) * 25);
}
.dark section.cover div.content p {
font-weight: 200;
}
section.cover div.socials {
position: absolute;
width: var(--sec-w);
@@ -434,12 +496,18 @@ main .section-bg {
background-image: var(--bg-grad);
background-position: center;
background-size: cover;
background-size: 102% 102%;
background-repeat: no-repeat;
z-index: -1;
pointer-events: none;
}
.chrome-ios main .section-bg,
.safari-ios main .section-bg {
height: 110lvh;
margin-bottom: -110lvh;
}
.page .area>.image:first-child {
position: absolute;
inset: 0;
@@ -449,10 +517,18 @@ main .section-bg {
}
.page-2 .image {
background-image: url("/img/design_3/section-2-desktop-light.webp");
}
.dark .page-2 .image {
background-image: url("/img/design_3/section-2-desktop.webp");
}
.page-3 .image {
background-image: url("/img/design_3/section-3-desktop-light.webp");
}
.dark .page-3 .image {
background-image: url("/img/design_3/section-3-desktop.webp");
}
@@ -470,12 +546,21 @@ main .section-bg {
}
.page-2 .image {
background-image: url("/img/design_3/section-2-mobile.webp");
top: -6% !important;
background-image: url("/img/design_3/section-2-mobile-light.webp");
background-size: cover !important;
height: 75%;
}
.dark .page-2 .image {
background-image: url("/img/design_3/section-2-mobile.webp");
}
.page-3 .image {
background-image: url("/img/design_3/section-3-mobile-light.webp");
}
.dark .page-3 .image {
background-image: url("/img/design_3/section-3-mobile.webp");
}
@@ -510,6 +595,11 @@ main .section-bg {
letter-spacing: -0.025em;
line-height: 1.05;
max-width: calc(var(--sec-vwu-desktop)*26);
color: #023789;
}
.dark .page .text-container h2 {
color: #ffffff;
}
.page .text-container p {
@@ -517,6 +607,11 @@ main .section-bg {
font-weight: 200;
font-size: calc(var(--sec-vwu-desktop)*1.62);
max-width: calc(var(--sec-vwu-desktop)*23);
color: #000000;
}
.dark .page .text-container p {
color: #ffffff;
}
.page .text-container p span {
@@ -583,11 +678,27 @@ main .section-bg {
max-width: calc(var(--sec-vwu-desktop)*21) !important;
}
.roadmap>p:first-child {
.roadmap p:first-of-type {
font-weight: 500;
background: linear-gradient(90deg, #001aa7 0%, #00bdd4 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
display: inline-block;
}
.dark .roadmap p:first-of-type,
.dark .roadmap>p:first-of-type {
background: none;
-webkit-background-clip: initial;
background-clip: initial;
-webkit-text-fill-color: #64fdff;
color: #64fdff;
}
/* .dark .roadmap>p:first-child {} */
.roadmap>p:nth-child(2) {
font-weight: 500;
}
@@ -608,6 +719,11 @@ main .section-bg {
/* --- COVER --- */
section.cover {
background-image: url("/img/design_3/cover-mobile-light.webp");
background-size: cover;
}
.dark section.cover {
background-image: url("/img/design_3/cover-mobile.jpg");
background-size: cover;
}
@@ -714,6 +830,19 @@ main .section-bg {
}
.roadmap p.title {
background: linear-gradient(90deg, #001aa7 0%, #00bdd4 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
display: inline-block;
}
.dark .roadmap p.title {
background: none;
-webkit-background-clip: initial;
background-clip: initial;
-webkit-text-fill-color: #64fdff;
color: #64fdff;
}
@@ -1174,7 +1303,7 @@ header#navbar>a.logo {
position: absolute;
left: 16px;
height: 100%;
display: flex;
/* display: flex; */
align-items: center;
}
@@ -1188,10 +1317,15 @@ header#navbar nav#menu>ul>hr {
}
header#navbar nav#menu ul.sub-menu hr {
border-top-width: 1px;
height: 1px;
width: 100%;
background: rgb(255, 255, 255);
opacity: 0.1;
color: #000;
opacity: 0.2;
}
.dark header#navbar nav#menu ul.sub-menu hr {
color: #fff;
}
header#navbar ul {
@@ -1230,12 +1364,16 @@ header#navbar ul a>span:first-child {
}
header#navbar ul a span svg {
fill: #fff;
fill: #001796;
width: 10px;
height: auto;
transition: all 0.5s ease;
}
.dark header#navbar ul a span svg {
fill: #fff;
}
@media screen and (min-width: 768px) {
header#navbar nav#menu>ul>li>a {
color: var(--nav-color);
@@ -1258,7 +1396,7 @@ header#navbar ul.sub-menu {
gap: 0.5rem;
max-height: calc(100vh - 70px);
position: absolute;
background: #181e43;
background: #fff;
top: calc(100% + 8px);
padding: 16px 0;
min-width: 180px;
@@ -1269,12 +1407,21 @@ header#navbar ul.sub-menu {
opacity: 0;
}
.dark header#navbar ul.sub-menu {
background: #181e43;
}
header#navbar ul.sub-menu li a {
padding: 3px 20px;
white-space: nowrap;
display: flex;
align-items: center;
gap: 4px;
color: #001796;
}
.dark header#navbar ul.sub-menu li a {
color: #ffffff;
}
header#navbar ul.sub-menu li a img {
@@ -1310,23 +1457,31 @@ header#navbar .nav-link:focus-within .sub-menu {
align-items: center;
justify-content: center;
gap: 4px;
color: white;
color: #001796;
text-decoration: none;
}
.dark .flag-container>a {
color: white;
}
.flag-container>a svg {
fill: #fff;
fill: #001796;
width: 10px;
height: auto;
}
.dark .flag-container>a svg {
fill: white;
}
@media screen and (min-width: 768px) {
.flag-container>a {
color: var(--nav-color);
color: var(--nav-color) !important;
}
.flag-container>a svg {
fill: var(--nav-color);
fill: var(--nav-color) !important;
}
}
@@ -1367,13 +1522,17 @@ header#navbar button.theme-switch-btn svg {
}
header#navbar button.theme-switch-btn svg path {
fill: white;
fill: #001796;
transition: all 0.3s ease;
}
.dark header#navbar button.theme-switch-btn svg path {
fill: white;
}
@media screen and (min-width: 768px) {
header#navbar button.theme-switch-btn svg path {
fill: var(--nav-color);
fill: var(--nav-color) !important;
transition: all 0.3s ease;
}
}
@@ -1396,11 +1555,15 @@ button#cross-btn {
}
#cross {
fill: white;
fill: #001796;
width: 13px;
height: auto;
}
.dark #cross {
fill: #ffffff;
}
#mobile-header {
display: none;
padding: 0 1rem;
@@ -1444,13 +1607,17 @@ button#cross-btn {
header#navbar {
height: 100%;
width: 100%;
background: #0a0f2b;
background: #fff;
visibility: hidden;
opacity: 0;
transition: all .3s ease;
transform: translateX(-100%);
}
.dark header#navbar {
background: #0a0f2b;
}
header#navbar.open {
visibility: visible;
opacity: 1;
@@ -1504,6 +1671,11 @@ button#cross-btn {
gap: 10px;
padding: 0px;
padding: 6px 2rem;
color: #001796;
}
.dark header#navbar nav#menu .nav-link a {
color: #ffffff;
}
header#navbar nav#menu .nav-link>a {
@@ -1512,7 +1684,6 @@ button#cross-btn {
}
header#navbar nav#menu ul.sub-menu hr {
opacity: 0.2;
width: 100%;
}
@@ -1545,10 +1716,14 @@ button#cross-btn {
header#navbar nav#menu .sub-menu li a {
font-family: "Manrope", "GT-Walsheim", sans-serif;
font-weight: 200;
font-weight: 300;
width: 100%;
}
.dark header#navbar nav#menu .sub-menu li a {
font-weight: 200;
}
header#navbar nav#menu .active .sub-menu {
max-height: 1000px;
transform: translateY(0px);
de/index.html
+60 -7
View File
@@ -32,8 +32,8 @@
<body>
<header id="navbar">
<a class="logo" href="/"><img src="/img/design_3/logo-light.png" alt="logo" /></a>
<a href="/de" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo" /></a>
<a href="/de" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo" /></a>
<nav id="menu">
<ul>
@@ -185,7 +185,9 @@
<path d="M225.368 385.712C222.968 387.046 219.368 390.112 217.368 392.646L213.768 397.312V426.379C213.768 458.246 213.901 458.779 222.968 465.446C228.168 469.312 240.701 469.312 245.901 465.446C254.834 458.779 255.101 457.979 255.501 428.246C256.034 397.579 255.234 394.379 246.834 387.979C241.101 383.579 231.634 382.512 225.368 385.712Z"/>
</svg>
<img src="/img/new/moon.svg" alt="" srcset="" class="moon hidden">
<svg class="moon" width="469" height="469" viewBox="5 5 20 23" xmlns="http://www.w3.org/2000/svg">
<path d="M10.895 7.574c0 7.55 5.179 13.67 11.567 13.67 1.588 0 3.101-0.38 4.479-1.063-1.695 4.46-5.996 7.636-11.051 7.636-6.533 0-11.83-5.297-11.83-11.83 0-4.82 2.888-8.959 7.023-10.803-0.116 0.778-0.188 1.573-0.188 2.39z"></path>
</svg>
</button>
<div class="nav-link flag-container">
@@ -438,7 +440,8 @@
</div>
</header>
<div id="mobile-header">
<a class="logo" href="/"><img src="/img/new/logo-symbol-dark.svg" alt="logo" /></a>
<a href="/de" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-light.svg" alt="" srcset=""></a>
<a href="/de" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-dark.svg" alt="" srcset=""></a>
<button id="hamburger" class="nav-toggle-btn">
<svg viewBox="0 0 100 80" width="36" height="36">
@@ -737,6 +740,56 @@
io.observe(cover);
})();
// switch theme
const sunIcon = document.querySelector('.sun');
const moonIcon = document.querySelector('.moon');
const userTheme = localStorage.getItem('theme');
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
const prismThemeLink = document.getElementById('prism-theme')
const iconToggle = () => {
sunIcon.classList.toggle('hidden');
moonIcon.classList.toggle('hidden');
}
const themeCheck = () => {
if(userTheme === 'dark' || (!userTheme && systemTheme)){
document.documentElement.classList.add('dark');
moonIcon.classList.add('hidden');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
}
}
else{
sunIcon.classList.add('hidden');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-light.min.css')
}
}
}
themeCheck();
const themeSwitch = () => {
if(document.documentElement.classList.contains('dark')){
document.documentElement.classList.remove('dark');
localStorage.setItem('theme','light');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-light.min.css')
}
iconToggle();
}
else{
document.documentElement.classList.add('dark');
localStorage.setItem('theme','dark');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
}
iconToggle();
}
}
window.addEventListener('click',(e)=>{
if(e.target.closest('.nav-link')){
if(e.target.closest('.nav-link').classList.contains('active')){
@@ -756,9 +809,9 @@
nav.classList.add('open');
}
}
// else if(e.target.closest('.theme-switch-btn')){
// themeSwitch();
// }
else if(e.target.closest('.theme-switch-btn')){
themeSwitch();
}
});
</script>
</body>
en/index.html
+60 -7
View File
@@ -32,8 +32,8 @@
<body>
<header id="navbar">
<a class="logo" href="/"><img src="/img/design_3/logo-light.png" alt="logo" /></a>
<a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo" /></a>
<a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo" /></a>
<nav id="menu">
<ul>
@@ -185,7 +185,9 @@
<path d="M225.368 385.712C222.968 387.046 219.368 390.112 217.368 392.646L213.768 397.312V426.379C213.768 458.246 213.901 458.779 222.968 465.446C228.168 469.312 240.701 469.312 245.901 465.446C254.834 458.779 255.101 457.979 255.501 428.246C256.034 397.579 255.234 394.379 246.834 387.979C241.101 383.579 231.634 382.512 225.368 385.712Z"/>
</svg>
<img src="/img/new/moon.svg" alt="" srcset="" class="moon hidden">
<svg class="moon" width="469" height="469" viewBox="5 5 20 23" xmlns="http://www.w3.org/2000/svg">
<path d="M10.895 7.574c0 7.55 5.179 13.67 11.567 13.67 1.588 0 3.101-0.38 4.479-1.063-1.695 4.46-5.996 7.636-11.051 7.636-6.533 0-11.83-5.297-11.83-11.83 0-4.82 2.888-8.959 7.023-10.803-0.116 0.778-0.188 1.573-0.188 2.39z"></path>
</svg>
</button>
<div class="nav-link flag-container">
@@ -438,7 +440,8 @@
</div>
</header>
<div id="mobile-header">
<a class="logo" href="/"><img src="/img/new/logo-symbol-dark.svg" alt="logo" /></a>
<a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-light.svg" alt="" srcset=""></a>
<a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-dark.svg" alt="" srcset=""></a>
<button id="hamburger" class="nav-toggle-btn">
<svg viewBox="0 0 100 80" width="36" height="36">
@@ -737,6 +740,56 @@
io.observe(cover);
})();
// switch theme
const sunIcon = document.querySelector('.sun');
const moonIcon = document.querySelector('.moon');
const userTheme = localStorage.getItem('theme');
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
const prismThemeLink = document.getElementById('prism-theme')
const iconToggle = () => {
sunIcon.classList.toggle('hidden');
moonIcon.classList.toggle('hidden');
}
const themeCheck = () => {
if(userTheme === 'dark' || (!userTheme && systemTheme)){
document.documentElement.classList.add('dark');
moonIcon.classList.add('hidden');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
}
}
else{
sunIcon.classList.add('hidden');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-light.min.css')
}
}
}
themeCheck();
const themeSwitch = () => {
if(document.documentElement.classList.contains('dark')){
document.documentElement.classList.remove('dark');
localStorage.setItem('theme','light');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-light.min.css')
}
iconToggle();
}
else{
document.documentElement.classList.add('dark');
localStorage.setItem('theme','dark');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
}
iconToggle();
}
}
window.addEventListener('click',(e)=>{
if(e.target.closest('.nav-link')){
if(e.target.closest('.nav-link').classList.contains('active')){
@@ -756,9 +809,9 @@
nav.classList.add('open');
}
}
// else if(e.target.closest('.theme-switch-btn')){
// themeSwitch();
// }
else if(e.target.closest('.theme-switch-btn')){
themeSwitch();
}
});
</script>
</body>
es/index.html
+60 -7
View File
@@ -32,8 +32,8 @@
<body>
<header id="navbar">
<a class="logo" href="/"><img src="/img/design_3/logo-light.png" alt="logo" /></a>
<a href="/es" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo" /></a>
<a href="/es" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo" /></a>
<nav id="menu">
<ul>
@@ -185,7 +185,9 @@
<path d="M225.368 385.712C222.968 387.046 219.368 390.112 217.368 392.646L213.768 397.312V426.379C213.768 458.246 213.901 458.779 222.968 465.446C228.168 469.312 240.701 469.312 245.901 465.446C254.834 458.779 255.101 457.979 255.501 428.246C256.034 397.579 255.234 394.379 246.834 387.979C241.101 383.579 231.634 382.512 225.368 385.712Z"/>
</svg>
<img src="/img/new/moon.svg" alt="" srcset="" class="moon hidden">
<svg class="moon" width="469" height="469" viewBox="5 5 20 23" xmlns="http://www.w3.org/2000/svg">
<path d="M10.895 7.574c0 7.55 5.179 13.67 11.567 13.67 1.588 0 3.101-0.38 4.479-1.063-1.695 4.46-5.996 7.636-11.051 7.636-6.533 0-11.83-5.297-11.83-11.83 0-4.82 2.888-8.959 7.023-10.803-0.116 0.778-0.188 1.573-0.188 2.39z"></path>
</svg>
</button>
<div class="nav-link flag-container">
@@ -438,7 +440,8 @@
</div>
</header>
<div id="mobile-header">
<a class="logo" href="/"><img src="/img/new/logo-symbol-dark.svg" alt="logo" /></a>
<a href="/es" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-light.svg" alt="" srcset=""></a>
<a href="/es" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-dark.svg" alt="" srcset=""></a>
<button id="hamburger" class="nav-toggle-btn">
<svg viewBox="0 0 100 80" width="36" height="36">
@@ -737,6 +740,56 @@
io.observe(cover);
})();
// switch theme
const sunIcon = document.querySelector('.sun');
const moonIcon = document.querySelector('.moon');
const userTheme = localStorage.getItem('theme');
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
const prismThemeLink = document.getElementById('prism-theme')
const iconToggle = () => {
sunIcon.classList.toggle('hidden');
moonIcon.classList.toggle('hidden');
}
const themeCheck = () => {
if(userTheme === 'dark' || (!userTheme && systemTheme)){
document.documentElement.classList.add('dark');
moonIcon.classList.add('hidden');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
}
}
else{
sunIcon.classList.add('hidden');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-light.min.css')
}
}
}
themeCheck();
const themeSwitch = () => {
if(document.documentElement.classList.contains('dark')){
document.documentElement.classList.remove('dark');
localStorage.setItem('theme','light');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-light.min.css')
}
iconToggle();
}
else{
document.documentElement.classList.add('dark');
localStorage.setItem('theme','dark');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
}
iconToggle();
}
}
window.addEventListener('click',(e)=>{
if(e.target.closest('.nav-link')){
if(e.target.closest('.nav-link').classList.contains('active')){
@@ -756,9 +809,9 @@
nav.classList.add('open');
}
}
// else if(e.target.closest('.theme-switch-btn')){
// themeSwitch();
// }
else if(e.target.closest('.theme-switch-btn')){
themeSwitch();
}
});
</script>
</body>
fa/index.html
+60 -7
View File
@@ -32,8 +32,8 @@
<body>
<header id="navbar">
<a class="logo" href="/"><img src="/img/design_3/logo-light.png" alt="logo" /></a>
<a href="/fa" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo" /></a>
<a href="/fa" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo" /></a>
<nav id="menu">
<ul>
@@ -185,7 +185,9 @@
<path d="M225.368 385.712C222.968 387.046 219.368 390.112 217.368 392.646L213.768 397.312V426.379C213.768 458.246 213.901 458.779 222.968 465.446C228.168 469.312 240.701 469.312 245.901 465.446C254.834 458.779 255.101 457.979 255.501 428.246C256.034 397.579 255.234 394.379 246.834 387.979C241.101 383.579 231.634 382.512 225.368 385.712Z"/>
</svg>
<img src="/img/new/moon.svg" alt="" srcset="" class="moon hidden">
<svg class="moon" width="469" height="469" viewBox="5 5 20 23" xmlns="http://www.w3.org/2000/svg">
<path d="M10.895 7.574c0 7.55 5.179 13.67 11.567 13.67 1.588 0 3.101-0.38 4.479-1.063-1.695 4.46-5.996 7.636-11.051 7.636-6.533 0-11.83-5.297-11.83-11.83 0-4.82 2.888-8.959 7.023-10.803-0.116 0.778-0.188 1.573-0.188 2.39z"></path>
</svg>
</button>
<div class="nav-link flag-container">
@@ -433,7 +435,8 @@
</div>
</header>
<div id="mobile-header">
<a class="logo" href="/"><img src="/img/new/logo-symbol-dark.svg" alt="logo" /></a>
<a href="/fa" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-light.svg" alt="" srcset=""></a>
<a href="/fa" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-dark.svg" alt="" srcset=""></a>
<button id="hamburger" class="nav-toggle-btn">
<svg viewBox="0 0 100 80" width="36" height="36">
@@ -732,6 +735,56 @@
io.observe(cover);
})();
// switch theme
const sunIcon = document.querySelector('.sun');
const moonIcon = document.querySelector('.moon');
const userTheme = localStorage.getItem('theme');
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
const prismThemeLink = document.getElementById('prism-theme')
const iconToggle = () => {
sunIcon.classList.toggle('hidden');
moonIcon.classList.toggle('hidden');
}
const themeCheck = () => {
if(userTheme === 'dark' || (!userTheme && systemTheme)){
document.documentElement.classList.add('dark');
moonIcon.classList.add('hidden');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
}
}
else{
sunIcon.classList.add('hidden');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-light.min.css')
}
}
}
themeCheck();
const themeSwitch = () => {
if(document.documentElement.classList.contains('dark')){
document.documentElement.classList.remove('dark');
localStorage.setItem('theme','light');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-light.min.css')
}
iconToggle();
}
else{
document.documentElement.classList.add('dark');
localStorage.setItem('theme','dark');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
}
iconToggle();
}
}
window.addEventListener('click',(e)=>{
if(e.target.closest('.nav-link')){
if(e.target.closest('.nav-link').classList.contains('active')){
@@ -751,9 +804,9 @@
nav.classList.add('open');
}
}
// else if(e.target.closest('.theme-switch-btn')){
// themeSwitch();
// }
else if(e.target.closest('.theme-switch-btn')){
themeSwitch();
}
});
</script>
</body>
fi/index.html
+60 -7
View File
@@ -32,8 +32,8 @@
<body>
<header id="navbar">
<a class="logo" href="/"><img src="/img/design_3/logo-light.png" alt="logo" /></a>
<a href="/fi" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo" /></a>
<a href="/fi" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo" /></a>
<nav id="menu">
<ul>
@@ -185,7 +185,9 @@
<path d="M225.368 385.712C222.968 387.046 219.368 390.112 217.368 392.646L213.768 397.312V426.379C213.768 458.246 213.901 458.779 222.968 465.446C228.168 469.312 240.701 469.312 245.901 465.446C254.834 458.779 255.101 457.979 255.501 428.246C256.034 397.579 255.234 394.379 246.834 387.979C241.101 383.579 231.634 382.512 225.368 385.712Z"/>
</svg>
<img src="/img/new/moon.svg" alt="" srcset="" class="moon hidden">
<svg class="moon" width="469" height="469" viewBox="5 5 20 23" xmlns="http://www.w3.org/2000/svg">
<path d="M10.895 7.574c0 7.55 5.179 13.67 11.567 13.67 1.588 0 3.101-0.38 4.479-1.063-1.695 4.46-5.996 7.636-11.051 7.636-6.533 0-11.83-5.297-11.83-11.83 0-4.82 2.888-8.959 7.023-10.803-0.116 0.778-0.188 1.573-0.188 2.39z"></path>
</svg>
</button>
<div class="nav-link flag-container">
@@ -438,7 +440,8 @@
</div>
</header>
<div id="mobile-header">
<a class="logo" href="/"><img src="/img/new/logo-symbol-dark.svg" alt="logo" /></a>
<a href="/fi" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-light.svg" alt="" srcset=""></a>
<a href="/fi" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-dark.svg" alt="" srcset=""></a>
<button id="hamburger" class="nav-toggle-btn">
<svg viewBox="0 0 100 80" width="36" height="36">
@@ -737,6 +740,56 @@
io.observe(cover);
})();
// switch theme
const sunIcon = document.querySelector('.sun');
const moonIcon = document.querySelector('.moon');
const userTheme = localStorage.getItem('theme');
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
const prismThemeLink = document.getElementById('prism-theme')
const iconToggle = () => {
sunIcon.classList.toggle('hidden');
moonIcon.classList.toggle('hidden');
}
const themeCheck = () => {
if(userTheme === 'dark' || (!userTheme && systemTheme)){
document.documentElement.classList.add('dark');
moonIcon.classList.add('hidden');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
}
}
else{
sunIcon.classList.add('hidden');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-light.min.css')
}
}
}
themeCheck();
const themeSwitch = () => {
if(document.documentElement.classList.contains('dark')){
document.documentElement.classList.remove('dark');
localStorage.setItem('theme','light');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-light.min.css')
}
iconToggle();
}
else{
document.documentElement.classList.add('dark');
localStorage.setItem('theme','dark');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
}
iconToggle();
}
}
window.addEventListener('click',(e)=>{
if(e.target.closest('.nav-link')){
if(e.target.closest('.nav-link').classList.contains('active')){
@@ -756,9 +809,9 @@
nav.classList.add('open');
}
}
// else if(e.target.closest('.theme-switch-btn')){
// themeSwitch();
// }
else if(e.target.closest('.theme-switch-btn')){
themeSwitch();
}
});
</script>
</body>
fr/index.html
+60 -7
View File
@@ -32,8 +32,8 @@
<body>
<header id="navbar">
<a class="logo" href="/"><img src="/img/design_3/logo-light.png" alt="logo" /></a>
<a href="/fr" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo" /></a>
<a href="/fr" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo" /></a>
<nav id="menu">
<ul>
@@ -185,7 +185,9 @@
<path d="M225.368 385.712C222.968 387.046 219.368 390.112 217.368 392.646L213.768 397.312V426.379C213.768 458.246 213.901 458.779 222.968 465.446C228.168 469.312 240.701 469.312 245.901 465.446C254.834 458.779 255.101 457.979 255.501 428.246C256.034 397.579 255.234 394.379 246.834 387.979C241.101 383.579 231.634 382.512 225.368 385.712Z"/>
</svg>
<img src="/img/new/moon.svg" alt="" srcset="" class="moon hidden">
<svg class="moon" width="469" height="469" viewBox="5 5 20 23" xmlns="http://www.w3.org/2000/svg">
<path d="M10.895 7.574c0 7.55 5.179 13.67 11.567 13.67 1.588 0 3.101-0.38 4.479-1.063-1.695 4.46-5.996 7.636-11.051 7.636-6.533 0-11.83-5.297-11.83-11.83 0-4.82 2.888-8.959 7.023-10.803-0.116 0.778-0.188 1.573-0.188 2.39z"></path>
</svg>
</button>
<div class="nav-link flag-container">
@@ -438,7 +440,8 @@
</div>
</header>
<div id="mobile-header">
<a class="logo" href="/"><img src="/img/new/logo-symbol-dark.svg" alt="logo" /></a>
<a href="/fr" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-light.svg" alt="" srcset=""></a>
<a href="/fr" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-dark.svg" alt="" srcset=""></a>
<button id="hamburger" class="nav-toggle-btn">
<svg viewBox="0 0 100 80" width="36" height="36">
@@ -737,6 +740,56 @@
io.observe(cover);
})();
// switch theme
const sunIcon = document.querySelector('.sun');
const moonIcon = document.querySelector('.moon');
const userTheme = localStorage.getItem('theme');
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
const prismThemeLink = document.getElementById('prism-theme')
const iconToggle = () => {
sunIcon.classList.toggle('hidden');
moonIcon.classList.toggle('hidden');
}
const themeCheck = () => {
if(userTheme === 'dark' || (!userTheme && systemTheme)){
document.documentElement.classList.add('dark');
moonIcon.classList.add('hidden');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
}
}
else{
sunIcon.classList.add('hidden');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-light.min.css')
}
}
}
themeCheck();
const themeSwitch = () => {
if(document.documentElement.classList.contains('dark')){
document.documentElement.classList.remove('dark');
localStorage.setItem('theme','light');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-light.min.css')
}
iconToggle();
}
else{
document.documentElement.classList.add('dark');
localStorage.setItem('theme','dark');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
}
iconToggle();
}
}
window.addEventListener('click',(e)=>{
if(e.target.closest('.nav-link')){
if(e.target.closest('.nav-link').classList.contains('active')){
@@ -756,9 +809,9 @@
nav.classList.add('open');
}
}
// else if(e.target.closest('.theme-switch-btn')){
// themeSwitch();
// }
else if(e.target.closest('.theme-switch-btn')){
themeSwitch();
}
});
</script>
</body>
he/index.html
+60 -7
View File
@@ -32,8 +32,8 @@
<body>
<header id="navbar">
<a class="logo" href="/"><img src="/img/design_3/logo-light.png" alt="logo" /></a>
<a href="/he" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo" /></a>
<a href="/he" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo" /></a>
<nav id="menu">
<ul>
@@ -185,7 +185,9 @@
<path d="M225.368 385.712C222.968 387.046 219.368 390.112 217.368 392.646L213.768 397.312V426.379C213.768 458.246 213.901 458.779 222.968 465.446C228.168 469.312 240.701 469.312 245.901 465.446C254.834 458.779 255.101 457.979 255.501 428.246C256.034 397.579 255.234 394.379 246.834 387.979C241.101 383.579 231.634 382.512 225.368 385.712Z"/>
</svg>
<img src="/img/new/moon.svg" alt="" srcset="" class="moon hidden">
<svg class="moon" width="469" height="469" viewBox="5 5 20 23" xmlns="http://www.w3.org/2000/svg">
<path d="M10.895 7.574c0 7.55 5.179 13.67 11.567 13.67 1.588 0 3.101-0.38 4.479-1.063-1.695 4.46-5.996 7.636-11.051 7.636-6.533 0-11.83-5.297-11.83-11.83 0-4.82 2.888-8.959 7.023-10.803-0.116 0.778-0.188 1.573-0.188 2.39z"></path>
</svg>
</button>
<div class="nav-link flag-container">
@@ -438,7 +440,8 @@
</div>
</header>
<div id="mobile-header">
<a class="logo" href="/"><img src="/img/new/logo-symbol-dark.svg" alt="logo" /></a>
<a href="/he" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-light.svg" alt="" srcset=""></a>
<a href="/he" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-dark.svg" alt="" srcset=""></a>
<button id="hamburger" class="nav-toggle-btn">
<svg viewBox="0 0 100 80" width="36" height="36">
@@ -737,6 +740,56 @@
io.observe(cover);
})();
// switch theme
const sunIcon = document.querySelector('.sun');
const moonIcon = document.querySelector('.moon');
const userTheme = localStorage.getItem('theme');
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
const prismThemeLink = document.getElementById('prism-theme')
const iconToggle = () => {
sunIcon.classList.toggle('hidden');
moonIcon.classList.toggle('hidden');
}
const themeCheck = () => {
if(userTheme === 'dark' || (!userTheme && systemTheme)){
document.documentElement.classList.add('dark');
moonIcon.classList.add('hidden');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
}
}
else{
sunIcon.classList.add('hidden');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-light.min.css')
}
}
}
themeCheck();
const themeSwitch = () => {
if(document.documentElement.classList.contains('dark')){
document.documentElement.classList.remove('dark');
localStorage.setItem('theme','light');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-light.min.css')
}
iconToggle();
}
else{
document.documentElement.classList.add('dark');
localStorage.setItem('theme','dark');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
}
iconToggle();
}
}
window.addEventListener('click',(e)=>{
if(e.target.closest('.nav-link')){
if(e.target.closest('.nav-link').classList.contains('active')){
@@ -756,9 +809,9 @@
nav.classList.add('open');
}
}
// else if(e.target.closest('.theme-switch-btn')){
// themeSwitch();
// }
else if(e.target.closest('.theme-switch-btn')){
themeSwitch();
}
});
</script>
</body>
hu/index.html
+60 -7
View File
@@ -32,8 +32,8 @@
<body>
<header id="navbar">
<a class="logo" href="/"><img src="/img/design_3/logo-light.png" alt="logo" /></a>
<a href="/hu" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo" /></a>
<a href="/hu" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo" /></a>
<nav id="menu">
<ul>
@@ -185,7 +185,9 @@
<path d="M225.368 385.712C222.968 387.046 219.368 390.112 217.368 392.646L213.768 397.312V426.379C213.768 458.246 213.901 458.779 222.968 465.446C228.168 469.312 240.701 469.312 245.901 465.446C254.834 458.779 255.101 457.979 255.501 428.246C256.034 397.579 255.234 394.379 246.834 387.979C241.101 383.579 231.634 382.512 225.368 385.712Z"/>
</svg>
<img src="/img/new/moon.svg" alt="" srcset="" class="moon hidden">
<svg class="moon" width="469" height="469" viewBox="5 5 20 23" xmlns="http://www.w3.org/2000/svg">
<path d="M10.895 7.574c0 7.55 5.179 13.67 11.567 13.67 1.588 0 3.101-0.38 4.479-1.063-1.695 4.46-5.996 7.636-11.051 7.636-6.533 0-11.83-5.297-11.83-11.83 0-4.82 2.888-8.959 7.023-10.803-0.116 0.778-0.188 1.573-0.188 2.39z"></path>
</svg>
</button>
<div class="nav-link flag-container">
@@ -438,7 +440,8 @@
</div>
</header>
<div id="mobile-header">
<a class="logo" href="/"><img src="/img/new/logo-symbol-dark.svg" alt="logo" /></a>
<a href="/hu" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-light.svg" alt="" srcset=""></a>
<a href="/hu" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-dark.svg" alt="" srcset=""></a>
<button id="hamburger" class="nav-toggle-btn">
<svg viewBox="0 0 100 80" width="36" height="36">
@@ -737,6 +740,56 @@
io.observe(cover);
})();
// switch theme
const sunIcon = document.querySelector('.sun');
const moonIcon = document.querySelector('.moon');
const userTheme = localStorage.getItem('theme');
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
const prismThemeLink = document.getElementById('prism-theme')
const iconToggle = () => {
sunIcon.classList.toggle('hidden');
moonIcon.classList.toggle('hidden');
}
const themeCheck = () => {
if(userTheme === 'dark' || (!userTheme && systemTheme)){
document.documentElement.classList.add('dark');
moonIcon.classList.add('hidden');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
}
}
else{
sunIcon.classList.add('hidden');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-light.min.css')
}
}
}
themeCheck();
const themeSwitch = () => {
if(document.documentElement.classList.contains('dark')){
document.documentElement.classList.remove('dark');
localStorage.setItem('theme','light');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-light.min.css')
}
iconToggle();
}
else{
document.documentElement.classList.add('dark');
localStorage.setItem('theme','dark');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
}
iconToggle();
}
}
window.addEventListener('click',(e)=>{
if(e.target.closest('.nav-link')){
if(e.target.closest('.nav-link').classList.contains('active')){
@@ -756,9 +809,9 @@
nav.classList.add('open');
}
}
// else if(e.target.closest('.theme-switch-btn')){
// themeSwitch();
// }
else if(e.target.closest('.theme-switch-btn')){
themeSwitch();
}
});
</script>
</body>
id/index.html
+60 -7
View File
@@ -32,8 +32,8 @@
<body>
<header id="navbar">
<a class="logo" href="/"><img src="/img/design_3/logo-light.png" alt="logo" /></a>
<a href="/id" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo" /></a>
<a href="/id" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo" /></a>
<nav id="menu">
<ul>
@@ -185,7 +185,9 @@
<path d="M225.368 385.712C222.968 387.046 219.368 390.112 217.368 392.646L213.768 397.312V426.379C213.768 458.246 213.901 458.779 222.968 465.446C228.168 469.312 240.701 469.312 245.901 465.446C254.834 458.779 255.101 457.979 255.501 428.246C256.034 397.579 255.234 394.379 246.834 387.979C241.101 383.579 231.634 382.512 225.368 385.712Z"/>
</svg>
<img src="/img/new/moon.svg" alt="" srcset="" class="moon hidden">
<svg class="moon" width="469" height="469" viewBox="5 5 20 23" xmlns="http://www.w3.org/2000/svg">
<path d="M10.895 7.574c0 7.55 5.179 13.67 11.567 13.67 1.588 0 3.101-0.38 4.479-1.063-1.695 4.46-5.996 7.636-11.051 7.636-6.533 0-11.83-5.297-11.83-11.83 0-4.82 2.888-8.959 7.023-10.803-0.116 0.778-0.188 1.573-0.188 2.39z"></path>
</svg>
</button>
<div class="nav-link flag-container">
@@ -433,7 +435,8 @@
</div>
</header>
<div id="mobile-header">
<a class="logo" href="/"><img src="/img/new/logo-symbol-dark.svg" alt="logo" /></a>
<a href="/id" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-light.svg" alt="" srcset=""></a>
<a href="/id" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-dark.svg" alt="" srcset=""></a>
<button id="hamburger" class="nav-toggle-btn">
<svg viewBox="0 0 100 80" width="36" height="36">
@@ -732,6 +735,56 @@
io.observe(cover);
})();
// switch theme
const sunIcon = document.querySelector('.sun');
const moonIcon = document.querySelector('.moon');
const userTheme = localStorage.getItem('theme');
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
const prismThemeLink = document.getElementById('prism-theme')
const iconToggle = () => {
sunIcon.classList.toggle('hidden');
moonIcon.classList.toggle('hidden');
}
const themeCheck = () => {
if(userTheme === 'dark' || (!userTheme && systemTheme)){
document.documentElement.classList.add('dark');
moonIcon.classList.add('hidden');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
}
}
else{
sunIcon.classList.add('hidden');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-light.min.css')
}
}
}
themeCheck();
const themeSwitch = () => {
if(document.documentElement.classList.contains('dark')){
document.documentElement.classList.remove('dark');
localStorage.setItem('theme','light');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-light.min.css')
}
iconToggle();
}
else{
document.documentElement.classList.add('dark');
localStorage.setItem('theme','dark');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
}
iconToggle();
}
}
window.addEventListener('click',(e)=>{
if(e.target.closest('.nav-link')){
if(e.target.closest('.nav-link').classList.contains('active')){
@@ -751,9 +804,9 @@
nav.classList.add('open');
}
}
// else if(e.target.closest('.theme-switch-btn')){
// themeSwitch();
// }
else if(e.target.closest('.theme-switch-btn')){
themeSwitch();
}
});
</script>
</body>
img/design_3/cover-light.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 300 KiB

img/design_3/cover-mobile-light.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 534 KiB

img/design_3/section-2-desktop-light.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 398 KiB

img/design_3/section-2-mobile-light.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 249 KiB

img/design_3/section-3-desktop-light.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 196 KiB

img/design_3/section-3-mobile-light.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 138 KiB

index.html
+60 -7
View File
@@ -32,8 +32,8 @@
<body>
<header id="navbar">
<a class="logo" href="/"><img src="/img/design_3/logo-light.png" alt="logo" /></a>
<a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo" /></a>
<a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo" /></a>
<nav id="menu">
<ul>
@@ -185,7 +185,9 @@
<path d="M225.368 385.712C222.968 387.046 219.368 390.112 217.368 392.646L213.768 397.312V426.379C213.768 458.246 213.901 458.779 222.968 465.446C228.168 469.312 240.701 469.312 245.901 465.446C254.834 458.779 255.101 457.979 255.501 428.246C256.034 397.579 255.234 394.379 246.834 387.979C241.101 383.579 231.634 382.512 225.368 385.712Z"/>
</svg>
<img src="/img/new/moon.svg" alt="" srcset="" class="moon hidden">
<svg class="moon" width="469" height="469" viewBox="5 5 20 23" xmlns="http://www.w3.org/2000/svg">
<path d="M10.895 7.574c0 7.55 5.179 13.67 11.567 13.67 1.588 0 3.101-0.38 4.479-1.063-1.695 4.46-5.996 7.636-11.051 7.636-6.533 0-11.83-5.297-11.83-11.83 0-4.82 2.888-8.959 7.023-10.803-0.116 0.778-0.188 1.573-0.188 2.39z"></path>
</svg>
</button>
<div class="nav-link flag-container">
@@ -438,7 +440,8 @@
</div>
</header>
<div id="mobile-header">
<a class="logo" href="/"><img src="/img/new/logo-symbol-dark.svg" alt="logo" /></a>
<a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-light.svg" alt="" srcset=""></a>
<a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-dark.svg" alt="" srcset=""></a>
<button id="hamburger" class="nav-toggle-btn">
<svg viewBox="0 0 100 80" width="36" height="36">
@@ -737,6 +740,56 @@
io.observe(cover);
})();
// switch theme
const sunIcon = document.querySelector('.sun');
const moonIcon = document.querySelector('.moon');
const userTheme = localStorage.getItem('theme');
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
const prismThemeLink = document.getElementById('prism-theme')
const iconToggle = () => {
sunIcon.classList.toggle('hidden');
moonIcon.classList.toggle('hidden');
}
const themeCheck = () => {
if(userTheme === 'dark' || (!userTheme && systemTheme)){
document.documentElement.classList.add('dark');
moonIcon.classList.add('hidden');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
}
}
else{
sunIcon.classList.add('hidden');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-light.min.css')
}
}
}
themeCheck();
const themeSwitch = () => {
if(document.documentElement.classList.contains('dark')){
document.documentElement.classList.remove('dark');
localStorage.setItem('theme','light');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-light.min.css')
}
iconToggle();
}
else{
document.documentElement.classList.add('dark');
localStorage.setItem('theme','dark');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
}
iconToggle();
}
}
window.addEventListener('click',(e)=>{
if(e.target.closest('.nav-link')){
if(e.target.closest('.nav-link').classList.contains('active')){
@@ -756,9 +809,9 @@
nav.classList.add('open');
}
}
// else if(e.target.closest('.theme-switch-btn')){
// themeSwitch();
// }
else if(e.target.closest('.theme-switch-btn')){
themeSwitch();
}
});
</script>
</body>
it/index.html
+60 -7
View File
@@ -32,8 +32,8 @@
<body>
<header id="navbar">
<a class="logo" href="/"><img src="/img/design_3/logo-light.png" alt="logo" /></a>
<a href="/it" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo" /></a>
<a href="/it" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo" /></a>
<nav id="menu">
<ul>
@@ -185,7 +185,9 @@
<path d="M225.368 385.712C222.968 387.046 219.368 390.112 217.368 392.646L213.768 397.312V426.379C213.768 458.246 213.901 458.779 222.968 465.446C228.168 469.312 240.701 469.312 245.901 465.446C254.834 458.779 255.101 457.979 255.501 428.246C256.034 397.579 255.234 394.379 246.834 387.979C241.101 383.579 231.634 382.512 225.368 385.712Z"/>
</svg>
<img src="/img/new/moon.svg" alt="" srcset="" class="moon hidden">
<svg class="moon" width="469" height="469" viewBox="5 5 20 23" xmlns="http://www.w3.org/2000/svg">
<path d="M10.895 7.574c0 7.55 5.179 13.67 11.567 13.67 1.588 0 3.101-0.38 4.479-1.063-1.695 4.46-5.996 7.636-11.051 7.636-6.533 0-11.83-5.297-11.83-11.83 0-4.82 2.888-8.959 7.023-10.803-0.116 0.778-0.188 1.573-0.188 2.39z"></path>
</svg>
</button>
<div class="nav-link flag-container">
@@ -438,7 +440,8 @@
</div>
</header>
<div id="mobile-header">
<a class="logo" href="/"><img src="/img/new/logo-symbol-dark.svg" alt="logo" /></a>
<a href="/it" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-light.svg" alt="" srcset=""></a>
<a href="/it" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-dark.svg" alt="" srcset=""></a>
<button id="hamburger" class="nav-toggle-btn">
<svg viewBox="0 0 100 80" width="36" height="36">
@@ -737,6 +740,56 @@
io.observe(cover);
})();
// switch theme
const sunIcon = document.querySelector('.sun');
const moonIcon = document.querySelector('.moon');
const userTheme = localStorage.getItem('theme');
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
const prismThemeLink = document.getElementById('prism-theme')
const iconToggle = () => {
sunIcon.classList.toggle('hidden');
moonIcon.classList.toggle('hidden');
}
const themeCheck = () => {
if(userTheme === 'dark' || (!userTheme && systemTheme)){
document.documentElement.classList.add('dark');
moonIcon.classList.add('hidden');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
}
}
else{
sunIcon.classList.add('hidden');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-light.min.css')
}
}
}
themeCheck();
const themeSwitch = () => {
if(document.documentElement.classList.contains('dark')){
document.documentElement.classList.remove('dark');
localStorage.setItem('theme','light');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-light.min.css')
}
iconToggle();
}
else{
document.documentElement.classList.add('dark');
localStorage.setItem('theme','dark');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
}
iconToggle();
}
}
window.addEventListener('click',(e)=>{
if(e.target.closest('.nav-link')){
if(e.target.closest('.nav-link').classList.contains('active')){
@@ -756,9 +809,9 @@
nav.classList.add('open');
}
}
// else if(e.target.closest('.theme-switch-btn')){
// themeSwitch();
// }
else if(e.target.closest('.theme-switch-btn')){
themeSwitch();
}
});
</script>
</body>
ja/index.html
+60 -7
View File
@@ -32,8 +32,8 @@
<body>
<header id="navbar">
<a class="logo" href="/"><img src="/img/design_3/logo-light.png" alt="logo" /></a>
<a href="/ja" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo" /></a>
<a href="/ja" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo" /></a>
<nav id="menu">
<ul>
@@ -185,7 +185,9 @@
<path d="M225.368 385.712C222.968 387.046 219.368 390.112 217.368 392.646L213.768 397.312V426.379C213.768 458.246 213.901 458.779 222.968 465.446C228.168 469.312 240.701 469.312 245.901 465.446C254.834 458.779 255.101 457.979 255.501 428.246C256.034 397.579 255.234 394.379 246.834 387.979C241.101 383.579 231.634 382.512 225.368 385.712Z"/>
</svg>
<img src="/img/new/moon.svg" alt="" srcset="" class="moon hidden">
<svg class="moon" width="469" height="469" viewBox="5 5 20 23" xmlns="http://www.w3.org/2000/svg">
<path d="M10.895 7.574c0 7.55 5.179 13.67 11.567 13.67 1.588 0 3.101-0.38 4.479-1.063-1.695 4.46-5.996 7.636-11.051 7.636-6.533 0-11.83-5.297-11.83-11.83 0-4.82 2.888-8.959 7.023-10.803-0.116 0.778-0.188 1.573-0.188 2.39z"></path>
</svg>
</button>
<div class="nav-link flag-container">
@@ -438,7 +440,8 @@
</div>
</header>
<div id="mobile-header">
<a class="logo" href="/"><img src="/img/new/logo-symbol-dark.svg" alt="logo" /></a>
<a href="/ja" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-light.svg" alt="" srcset=""></a>
<a href="/ja" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-dark.svg" alt="" srcset=""></a>
<button id="hamburger" class="nav-toggle-btn">
<svg viewBox="0 0 100 80" width="36" height="36">
@@ -737,6 +740,56 @@
io.observe(cover);
})();
// switch theme
const sunIcon = document.querySelector('.sun');
const moonIcon = document.querySelector('.moon');
const userTheme = localStorage.getItem('theme');
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
const prismThemeLink = document.getElementById('prism-theme')
const iconToggle = () => {
sunIcon.classList.toggle('hidden');
moonIcon.classList.toggle('hidden');
}
const themeCheck = () => {
if(userTheme === 'dark' || (!userTheme && systemTheme)){
document.documentElement.classList.add('dark');
moonIcon.classList.add('hidden');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
}
}
else{
sunIcon.classList.add('hidden');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-light.min.css')
}
}
}
themeCheck();
const themeSwitch = () => {
if(document.documentElement.classList.contains('dark')){
document.documentElement.classList.remove('dark');
localStorage.setItem('theme','light');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-light.min.css')
}
iconToggle();
}
else{
document.documentElement.classList.add('dark');
localStorage.setItem('theme','dark');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
}
iconToggle();
}
}
window.addEventListener('click',(e)=>{
if(e.target.closest('.nav-link')){
if(e.target.closest('.nav-link').classList.contains('active')){
@@ -756,9 +809,9 @@
nav.classList.add('open');
}
}
// else if(e.target.closest('.theme-switch-btn')){
// themeSwitch();
// }
else if(e.target.closest('.theme-switch-btn')){
themeSwitch();
}
});
</script>
</body>
nl/index.html
+60 -7
View File
@@ -32,8 +32,8 @@
<body>
<header id="navbar">
<a class="logo" href="/"><img src="/img/design_3/logo-light.png" alt="logo" /></a>
<a href="/nl" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo" /></a>
<a href="/nl" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo" /></a>
<nav id="menu">
<ul>
@@ -185,7 +185,9 @@
<path d="M225.368 385.712C222.968 387.046 219.368 390.112 217.368 392.646L213.768 397.312V426.379C213.768 458.246 213.901 458.779 222.968 465.446C228.168 469.312 240.701 469.312 245.901 465.446C254.834 458.779 255.101 457.979 255.501 428.246C256.034 397.579 255.234 394.379 246.834 387.979C241.101 383.579 231.634 382.512 225.368 385.712Z"/>
</svg>
<img src="/img/new/moon.svg" alt="" srcset="" class="moon hidden">
<svg class="moon" width="469" height="469" viewBox="5 5 20 23" xmlns="http://www.w3.org/2000/svg">
<path d="M10.895 7.574c0 7.55 5.179 13.67 11.567 13.67 1.588 0 3.101-0.38 4.479-1.063-1.695 4.46-5.996 7.636-11.051 7.636-6.533 0-11.83-5.297-11.83-11.83 0-4.82 2.888-8.959 7.023-10.803-0.116 0.778-0.188 1.573-0.188 2.39z"></path>
</svg>
</button>
<div class="nav-link flag-container">
@@ -438,7 +440,8 @@
</div>
</header>
<div id="mobile-header">
<a class="logo" href="/"><img src="/img/new/logo-symbol-dark.svg" alt="logo" /></a>
<a href="/nl" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-light.svg" alt="" srcset=""></a>
<a href="/nl" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-dark.svg" alt="" srcset=""></a>
<button id="hamburger" class="nav-toggle-btn">
<svg viewBox="0 0 100 80" width="36" height="36">
@@ -737,6 +740,56 @@
io.observe(cover);
})();
// switch theme
const sunIcon = document.querySelector('.sun');
const moonIcon = document.querySelector('.moon');
const userTheme = localStorage.getItem('theme');
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
const prismThemeLink = document.getElementById('prism-theme')
const iconToggle = () => {
sunIcon.classList.toggle('hidden');
moonIcon.classList.toggle('hidden');
}
const themeCheck = () => {
if(userTheme === 'dark' || (!userTheme && systemTheme)){
document.documentElement.classList.add('dark');
moonIcon.classList.add('hidden');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
}
}
else{
sunIcon.classList.add('hidden');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-light.min.css')
}
}
}
themeCheck();
const themeSwitch = () => {
if(document.documentElement.classList.contains('dark')){
document.documentElement.classList.remove('dark');
localStorage.setItem('theme','light');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-light.min.css')
}
iconToggle();
}
else{
document.documentElement.classList.add('dark');
localStorage.setItem('theme','dark');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
}
iconToggle();
}
}
window.addEventListener('click',(e)=>{
if(e.target.closest('.nav-link')){
if(e.target.closest('.nav-link').classList.contains('active')){
@@ -756,9 +809,9 @@
nav.classList.add('open');
}
}
// else if(e.target.closest('.theme-switch-btn')){
// themeSwitch();
// }
else if(e.target.closest('.theme-switch-btn')){
themeSwitch();
}
});
</script>
</body>
pl/index.html
+60 -7
View File
@@ -32,8 +32,8 @@
<body>
<header id="navbar">
<a class="logo" href="/"><img src="/img/design_3/logo-light.png" alt="logo" /></a>
<a href="/pl" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo" /></a>
<a href="/pl" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo" /></a>
<nav id="menu">
<ul>
@@ -185,7 +185,9 @@
<path d="M225.368 385.712C222.968 387.046 219.368 390.112 217.368 392.646L213.768 397.312V426.379C213.768 458.246 213.901 458.779 222.968 465.446C228.168 469.312 240.701 469.312 245.901 465.446C254.834 458.779 255.101 457.979 255.501 428.246C256.034 397.579 255.234 394.379 246.834 387.979C241.101 383.579 231.634 382.512 225.368 385.712Z"/>
</svg>
<img src="/img/new/moon.svg" alt="" srcset="" class="moon hidden">
<svg class="moon" width="469" height="469" viewBox="5 5 20 23" xmlns="http://www.w3.org/2000/svg">
<path d="M10.895 7.574c0 7.55 5.179 13.67 11.567 13.67 1.588 0 3.101-0.38 4.479-1.063-1.695 4.46-5.996 7.636-11.051 7.636-6.533 0-11.83-5.297-11.83-11.83 0-4.82 2.888-8.959 7.023-10.803-0.116 0.778-0.188 1.573-0.188 2.39z"></path>
</svg>
</button>
<div class="nav-link flag-container">
@@ -438,7 +440,8 @@
</div>
</header>
<div id="mobile-header">
<a class="logo" href="/"><img src="/img/new/logo-symbol-dark.svg" alt="logo" /></a>
<a href="/pl" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-light.svg" alt="" srcset=""></a>
<a href="/pl" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-dark.svg" alt="" srcset=""></a>
<button id="hamburger" class="nav-toggle-btn">
<svg viewBox="0 0 100 80" width="36" height="36">
@@ -737,6 +740,56 @@
io.observe(cover);
})();
// switch theme
const sunIcon = document.querySelector('.sun');
const moonIcon = document.querySelector('.moon');
const userTheme = localStorage.getItem('theme');
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
const prismThemeLink = document.getElementById('prism-theme')
const iconToggle = () => {
sunIcon.classList.toggle('hidden');
moonIcon.classList.toggle('hidden');
}
const themeCheck = () => {
if(userTheme === 'dark' || (!userTheme && systemTheme)){
document.documentElement.classList.add('dark');
moonIcon.classList.add('hidden');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
}
}
else{
sunIcon.classList.add('hidden');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-light.min.css')
}
}
}
themeCheck();
const themeSwitch = () => {
if(document.documentElement.classList.contains('dark')){
document.documentElement.classList.remove('dark');
localStorage.setItem('theme','light');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-light.min.css')
}
iconToggle();
}
else{
document.documentElement.classList.add('dark');
localStorage.setItem('theme','dark');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
}
iconToggle();
}
}
window.addEventListener('click',(e)=>{
if(e.target.closest('.nav-link')){
if(e.target.closest('.nav-link').classList.contains('active')){
@@ -756,9 +809,9 @@
nav.classList.add('open');
}
}
// else if(e.target.closest('.theme-switch-btn')){
// themeSwitch();
// }
else if(e.target.closest('.theme-switch-btn')){
themeSwitch();
}
});
</script>
</body>
pt_BR/index.html
+60 -7
View File
@@ -32,8 +32,8 @@
<body>
<header id="navbar">
<a class="logo" href="/"><img src="/img/design_3/logo-light.png" alt="logo" /></a>
<a href="/pt_BR" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo" /></a>
<a href="/pt_BR" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo" /></a>
<nav id="menu">
<ul>
@@ -185,7 +185,9 @@
<path d="M225.368 385.712C222.968 387.046 219.368 390.112 217.368 392.646L213.768 397.312V426.379C213.768 458.246 213.901 458.779 222.968 465.446C228.168 469.312 240.701 469.312 245.901 465.446C254.834 458.779 255.101 457.979 255.501 428.246C256.034 397.579 255.234 394.379 246.834 387.979C241.101 383.579 231.634 382.512 225.368 385.712Z"/>
</svg>
<img src="/img/new/moon.svg" alt="" srcset="" class="moon hidden">
<svg class="moon" width="469" height="469" viewBox="5 5 20 23" xmlns="http://www.w3.org/2000/svg">
<path d="M10.895 7.574c0 7.55 5.179 13.67 11.567 13.67 1.588 0 3.101-0.38 4.479-1.063-1.695 4.46-5.996 7.636-11.051 7.636-6.533 0-11.83-5.297-11.83-11.83 0-4.82 2.888-8.959 7.023-10.803-0.116 0.778-0.188 1.573-0.188 2.39z"></path>
</svg>
</button>
<div class="nav-link flag-container">
@@ -438,7 +440,8 @@
</div>
</header>
<div id="mobile-header">
<a class="logo" href="/"><img src="/img/new/logo-symbol-dark.svg" alt="logo" /></a>
<a href="/pt_BR" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-light.svg" alt="" srcset=""></a>
<a href="/pt_BR" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-dark.svg" alt="" srcset=""></a>
<button id="hamburger" class="nav-toggle-btn">
<svg viewBox="0 0 100 80" width="36" height="36">
@@ -737,6 +740,56 @@
io.observe(cover);
})();
// switch theme
const sunIcon = document.querySelector('.sun');
const moonIcon = document.querySelector('.moon');
const userTheme = localStorage.getItem('theme');
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
const prismThemeLink = document.getElementById('prism-theme')
const iconToggle = () => {
sunIcon.classList.toggle('hidden');
moonIcon.classList.toggle('hidden');
}
const themeCheck = () => {
if(userTheme === 'dark' || (!userTheme && systemTheme)){
document.documentElement.classList.add('dark');
moonIcon.classList.add('hidden');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
}
}
else{
sunIcon.classList.add('hidden');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-light.min.css')
}
}
}
themeCheck();
const themeSwitch = () => {
if(document.documentElement.classList.contains('dark')){
document.documentElement.classList.remove('dark');
localStorage.setItem('theme','light');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-light.min.css')
}
iconToggle();
}
else{
document.documentElement.classList.add('dark');
localStorage.setItem('theme','dark');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
}
iconToggle();
}
}
window.addEventListener('click',(e)=>{
if(e.target.closest('.nav-link')){
if(e.target.closest('.nav-link').classList.contains('active')){
@@ -756,9 +809,9 @@
nav.classList.add('open');
}
}
// else if(e.target.closest('.theme-switch-btn')){
// themeSwitch();
// }
else if(e.target.closest('.theme-switch-btn')){
themeSwitch();
}
});
</script>
</body>
ro/index.html
+60 -7
View File
@@ -32,8 +32,8 @@
<body>
<header id="navbar">
<a class="logo" href="/"><img src="/img/design_3/logo-light.png" alt="logo" /></a>
<a href="/ro" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo" /></a>
<a href="/ro" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo" /></a>
<nav id="menu">
<ul>
@@ -185,7 +185,9 @@
<path d="M225.368 385.712C222.968 387.046 219.368 390.112 217.368 392.646L213.768 397.312V426.379C213.768 458.246 213.901 458.779 222.968 465.446C228.168 469.312 240.701 469.312 245.901 465.446C254.834 458.779 255.101 457.979 255.501 428.246C256.034 397.579 255.234 394.379 246.834 387.979C241.101 383.579 231.634 382.512 225.368 385.712Z"/>
</svg>
<img src="/img/new/moon.svg" alt="" srcset="" class="moon hidden">
<svg class="moon" width="469" height="469" viewBox="5 5 20 23" xmlns="http://www.w3.org/2000/svg">
<path d="M10.895 7.574c0 7.55 5.179 13.67 11.567 13.67 1.588 0 3.101-0.38 4.479-1.063-1.695 4.46-5.996 7.636-11.051 7.636-6.533 0-11.83-5.297-11.83-11.83 0-4.82 2.888-8.959 7.023-10.803-0.116 0.778-0.188 1.573-0.188 2.39z"></path>
</svg>
</button>
<div class="nav-link flag-container">
@@ -433,7 +435,8 @@
</div>
</header>
<div id="mobile-header">
<a class="logo" href="/"><img src="/img/new/logo-symbol-dark.svg" alt="logo" /></a>
<a href="/ro" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-light.svg" alt="" srcset=""></a>
<a href="/ro" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-dark.svg" alt="" srcset=""></a>
<button id="hamburger" class="nav-toggle-btn">
<svg viewBox="0 0 100 80" width="36" height="36">
@@ -732,6 +735,56 @@
io.observe(cover);
})();
// switch theme
const sunIcon = document.querySelector('.sun');
const moonIcon = document.querySelector('.moon');
const userTheme = localStorage.getItem('theme');
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
const prismThemeLink = document.getElementById('prism-theme')
const iconToggle = () => {
sunIcon.classList.toggle('hidden');
moonIcon.classList.toggle('hidden');
}
const themeCheck = () => {
if(userTheme === 'dark' || (!userTheme && systemTheme)){
document.documentElement.classList.add('dark');
moonIcon.classList.add('hidden');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
}
}
else{
sunIcon.classList.add('hidden');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-light.min.css')
}
}
}
themeCheck();
const themeSwitch = () => {
if(document.documentElement.classList.contains('dark')){
document.documentElement.classList.remove('dark');
localStorage.setItem('theme','light');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-light.min.css')
}
iconToggle();
}
else{
document.documentElement.classList.add('dark');
localStorage.setItem('theme','dark');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
}
iconToggle();
}
}
window.addEventListener('click',(e)=>{
if(e.target.closest('.nav-link')){
if(e.target.closest('.nav-link').classList.contains('active')){
@@ -751,9 +804,9 @@
nav.classList.add('open');
}
}
// else if(e.target.closest('.theme-switch-btn')){
// themeSwitch();
// }
else if(e.target.closest('.theme-switch-btn')){
themeSwitch();
}
});
</script>
</body>
ru/index.html
+60 -7
View File
@@ -32,8 +32,8 @@
<body>
<header id="navbar">
<a class="logo" href="/"><img src="/img/design_3/logo-light.png" alt="logo" /></a>
<a href="/ru" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo" /></a>
<a href="/ru" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo" /></a>
<nav id="menu">
<ul>
@@ -185,7 +185,9 @@
<path d="M225.368 385.712C222.968 387.046 219.368 390.112 217.368 392.646L213.768 397.312V426.379C213.768 458.246 213.901 458.779 222.968 465.446C228.168 469.312 240.701 469.312 245.901 465.446C254.834 458.779 255.101 457.979 255.501 428.246C256.034 397.579 255.234 394.379 246.834 387.979C241.101 383.579 231.634 382.512 225.368 385.712Z"/>
</svg>
<img src="/img/new/moon.svg" alt="" srcset="" class="moon hidden">
<svg class="moon" width="469" height="469" viewBox="5 5 20 23" xmlns="http://www.w3.org/2000/svg">
<path d="M10.895 7.574c0 7.55 5.179 13.67 11.567 13.67 1.588 0 3.101-0.38 4.479-1.063-1.695 4.46-5.996 7.636-11.051 7.636-6.533 0-11.83-5.297-11.83-11.83 0-4.82 2.888-8.959 7.023-10.803-0.116 0.778-0.188 1.573-0.188 2.39z"></path>
</svg>
</button>
<div class="nav-link flag-container">
@@ -438,7 +440,8 @@
</div>
</header>
<div id="mobile-header">
<a class="logo" href="/"><img src="/img/new/logo-symbol-dark.svg" alt="logo" /></a>
<a href="/ru" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-light.svg" alt="" srcset=""></a>
<a href="/ru" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-dark.svg" alt="" srcset=""></a>
<button id="hamburger" class="nav-toggle-btn">
<svg viewBox="0 0 100 80" width="36" height="36">
@@ -737,6 +740,56 @@
io.observe(cover);
})();
// switch theme
const sunIcon = document.querySelector('.sun');
const moonIcon = document.querySelector('.moon');
const userTheme = localStorage.getItem('theme');
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
const prismThemeLink = document.getElementById('prism-theme')
const iconToggle = () => {
sunIcon.classList.toggle('hidden');
moonIcon.classList.toggle('hidden');
}
const themeCheck = () => {
if(userTheme === 'dark' || (!userTheme && systemTheme)){
document.documentElement.classList.add('dark');
moonIcon.classList.add('hidden');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
}
}
else{
sunIcon.classList.add('hidden');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-light.min.css')
}
}
}
themeCheck();
const themeSwitch = () => {
if(document.documentElement.classList.contains('dark')){
document.documentElement.classList.remove('dark');
localStorage.setItem('theme','light');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-light.min.css')
}
iconToggle();
}
else{
document.documentElement.classList.add('dark');
localStorage.setItem('theme','dark');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
}
iconToggle();
}
}
window.addEventListener('click',(e)=>{
if(e.target.closest('.nav-link')){
if(e.target.closest('.nav-link').classList.contains('active')){
@@ -756,9 +809,9 @@
nav.classList.add('open');
}
}
// else if(e.target.closest('.theme-switch-btn')){
// themeSwitch();
// }
else if(e.target.closest('.theme-switch-btn')){
themeSwitch();
}
});
</script>
</body>
tr/index.html
+60 -7
View File
@@ -32,8 +32,8 @@
<body>
<header id="navbar">
<a class="logo" href="/"><img src="/img/design_3/logo-light.png" alt="logo" /></a>
<a href="/tr" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo" /></a>
<a href="/tr" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo" /></a>
<nav id="menu">
<ul>
@@ -185,7 +185,9 @@
<path d="M225.368 385.712C222.968 387.046 219.368 390.112 217.368 392.646L213.768 397.312V426.379C213.768 458.246 213.901 458.779 222.968 465.446C228.168 469.312 240.701 469.312 245.901 465.446C254.834 458.779 255.101 457.979 255.501 428.246C256.034 397.579 255.234 394.379 246.834 387.979C241.101 383.579 231.634 382.512 225.368 385.712Z"/>
</svg>
<img src="/img/new/moon.svg" alt="" srcset="" class="moon hidden">
<svg class="moon" width="469" height="469" viewBox="5 5 20 23" xmlns="http://www.w3.org/2000/svg">
<path d="M10.895 7.574c0 7.55 5.179 13.67 11.567 13.67 1.588 0 3.101-0.38 4.479-1.063-1.695 4.46-5.996 7.636-11.051 7.636-6.533 0-11.83-5.297-11.83-11.83 0-4.82 2.888-8.959 7.023-10.803-0.116 0.778-0.188 1.573-0.188 2.39z"></path>
</svg>
</button>
<div class="nav-link flag-container">
@@ -433,7 +435,8 @@
</div>
</header>
<div id="mobile-header">
<a class="logo" href="/"><img src="/img/new/logo-symbol-dark.svg" alt="logo" /></a>
<a href="/tr" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-light.svg" alt="" srcset=""></a>
<a href="/tr" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-dark.svg" alt="" srcset=""></a>
<button id="hamburger" class="nav-toggle-btn">
<svg viewBox="0 0 100 80" width="36" height="36">
@@ -732,6 +735,56 @@
io.observe(cover);
})();
// switch theme
const sunIcon = document.querySelector('.sun');
const moonIcon = document.querySelector('.moon');
const userTheme = localStorage.getItem('theme');
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
const prismThemeLink = document.getElementById('prism-theme')
const iconToggle = () => {
sunIcon.classList.toggle('hidden');
moonIcon.classList.toggle('hidden');
}
const themeCheck = () => {
if(userTheme === 'dark' || (!userTheme && systemTheme)){
document.documentElement.classList.add('dark');
moonIcon.classList.add('hidden');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
}
}
else{
sunIcon.classList.add('hidden');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-light.min.css')
}
}
}
themeCheck();
const themeSwitch = () => {
if(document.documentElement.classList.contains('dark')){
document.documentElement.classList.remove('dark');
localStorage.setItem('theme','light');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-light.min.css')
}
iconToggle();
}
else{
document.documentElement.classList.add('dark');
localStorage.setItem('theme','dark');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
}
iconToggle();
}
}
window.addEventListener('click',(e)=>{
if(e.target.closest('.nav-link')){
if(e.target.closest('.nav-link').classList.contains('active')){
@@ -751,9 +804,9 @@
nav.classList.add('open');
}
}
// else if(e.target.closest('.theme-switch-btn')){
// themeSwitch();
// }
else if(e.target.closest('.theme-switch-btn')){
themeSwitch();
}
});
</script>
</body>
uk/index.html
+60 -7
View File
@@ -32,8 +32,8 @@
<body>
<header id="navbar">
<a class="logo" href="/"><img src="/img/design_3/logo-light.png" alt="logo" /></a>
<a href="/uk" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo" /></a>
<a href="/uk" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo" /></a>
<nav id="menu">
<ul>
@@ -185,7 +185,9 @@
<path d="M225.368 385.712C222.968 387.046 219.368 390.112 217.368 392.646L213.768 397.312V426.379C213.768 458.246 213.901 458.779 222.968 465.446C228.168 469.312 240.701 469.312 245.901 465.446C254.834 458.779 255.101 457.979 255.501 428.246C256.034 397.579 255.234 394.379 246.834 387.979C241.101 383.579 231.634 382.512 225.368 385.712Z"/>
</svg>
<img src="/img/new/moon.svg" alt="" srcset="" class="moon hidden">
<svg class="moon" width="469" height="469" viewBox="5 5 20 23" xmlns="http://www.w3.org/2000/svg">
<path d="M10.895 7.574c0 7.55 5.179 13.67 11.567 13.67 1.588 0 3.101-0.38 4.479-1.063-1.695 4.46-5.996 7.636-11.051 7.636-6.533 0-11.83-5.297-11.83-11.83 0-4.82 2.888-8.959 7.023-10.803-0.116 0.778-0.188 1.573-0.188 2.39z"></path>
</svg>
</button>
<div class="nav-link flag-container">
@@ -438,7 +440,8 @@
</div>
</header>
<div id="mobile-header">
<a class="logo" href="/"><img src="/img/new/logo-symbol-dark.svg" alt="logo" /></a>
<a href="/uk" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-light.svg" alt="" srcset=""></a>
<a href="/uk" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-dark.svg" alt="" srcset=""></a>
<button id="hamburger" class="nav-toggle-btn">
<svg viewBox="0 0 100 80" width="36" height="36">
@@ -737,6 +740,56 @@
io.observe(cover);
})();
// switch theme
const sunIcon = document.querySelector('.sun');
const moonIcon = document.querySelector('.moon');
const userTheme = localStorage.getItem('theme');
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
const prismThemeLink = document.getElementById('prism-theme')
const iconToggle = () => {
sunIcon.classList.toggle('hidden');
moonIcon.classList.toggle('hidden');
}
const themeCheck = () => {
if(userTheme === 'dark' || (!userTheme && systemTheme)){
document.documentElement.classList.add('dark');
moonIcon.classList.add('hidden');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
}
}
else{
sunIcon.classList.add('hidden');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-light.min.css')
}
}
}
themeCheck();
const themeSwitch = () => {
if(document.documentElement.classList.contains('dark')){
document.documentElement.classList.remove('dark');
localStorage.setItem('theme','light');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-light.min.css')
}
iconToggle();
}
else{
document.documentElement.classList.add('dark');
localStorage.setItem('theme','dark');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
}
iconToggle();
}
}
window.addEventListener('click',(e)=>{
if(e.target.closest('.nav-link')){
if(e.target.closest('.nav-link').classList.contains('active')){
@@ -756,9 +809,9 @@
nav.classList.add('open');
}
}
// else if(e.target.closest('.theme-switch-btn')){
// themeSwitch();
// }
else if(e.target.closest('.theme-switch-btn')){
themeSwitch();
}
});
</script>
</body>
zh_Hans/index.html
+60 -7
View File
@@ -32,8 +32,8 @@
<body>
<header id="navbar">
<a class="logo" href="/"><img src="/img/design_3/logo-light.png" alt="logo" /></a>
<a href="/zh_Hans" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo" /></a>
<a href="/zh_Hans" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo" /></a>
<nav id="menu">
<ul>
@@ -185,7 +185,9 @@
<path d="M225.368 385.712C222.968 387.046 219.368 390.112 217.368 392.646L213.768 397.312V426.379C213.768 458.246 213.901 458.779 222.968 465.446C228.168 469.312 240.701 469.312 245.901 465.446C254.834 458.779 255.101 457.979 255.501 428.246C256.034 397.579 255.234 394.379 246.834 387.979C241.101 383.579 231.634 382.512 225.368 385.712Z"/>
</svg>
<img src="/img/new/moon.svg" alt="" srcset="" class="moon hidden">
<svg class="moon" width="469" height="469" viewBox="5 5 20 23" xmlns="http://www.w3.org/2000/svg">
<path d="M10.895 7.574c0 7.55 5.179 13.67 11.567 13.67 1.588 0 3.101-0.38 4.479-1.063-1.695 4.46-5.996 7.636-11.051 7.636-6.533 0-11.83-5.297-11.83-11.83 0-4.82 2.888-8.959 7.023-10.803-0.116 0.778-0.188 1.573-0.188 2.39z"></path>
</svg>
</button>
<div class="nav-link flag-container">
@@ -438,7 +440,8 @@
</div>
</header>
<div id="mobile-header">
<a class="logo" href="/"><img src="/img/new/logo-symbol-dark.svg" alt="logo" /></a>
<a href="/zh_Hans" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-light.svg" alt="" srcset=""></a>
<a href="/zh_Hans" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-dark.svg" alt="" srcset=""></a>
<button id="hamburger" class="nav-toggle-btn">
<svg viewBox="0 0 100 80" width="36" height="36">
@@ -737,6 +740,56 @@
io.observe(cover);
})();
// switch theme
const sunIcon = document.querySelector('.sun');
const moonIcon = document.querySelector('.moon');
const userTheme = localStorage.getItem('theme');
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
const prismThemeLink = document.getElementById('prism-theme')
const iconToggle = () => {
sunIcon.classList.toggle('hidden');
moonIcon.classList.toggle('hidden');
}
const themeCheck = () => {
if(userTheme === 'dark' || (!userTheme && systemTheme)){
document.documentElement.classList.add('dark');
moonIcon.classList.add('hidden');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
}
}
else{
sunIcon.classList.add('hidden');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-light.min.css')
}
}
}
themeCheck();
const themeSwitch = () => {
if(document.documentElement.classList.contains('dark')){
document.documentElement.classList.remove('dark');
localStorage.setItem('theme','light');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-light.min.css')
}
iconToggle();
}
else{
document.documentElement.classList.add('dark');
localStorage.setItem('theme','dark');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
}
iconToggle();
}
}
window.addEventListener('click',(e)=>{
if(e.target.closest('.nav-link')){
if(e.target.closest('.nav-link').classList.contains('active')){
@@ -756,9 +809,9 @@
nav.classList.add('open');
}
}
// else if(e.target.closest('.theme-switch-btn')){
// themeSwitch();
// }
else if(e.target.closest('.theme-switch-btn')){
themeSwitch();
}
});
</script>
</body>
zh_Hant/index.html
+60 -7
View File
@@ -32,8 +32,8 @@
<body>
<header id="navbar">
<a class="logo" href="/"><img src="/img/design_3/logo-light.png" alt="logo" /></a>
<a href="/zh_Hant" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo" /></a>
<a href="/zh_Hant" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo" /></a>
<nav id="menu">
<ul>
@@ -185,7 +185,9 @@
<path d="M225.368 385.712C222.968 387.046 219.368 390.112 217.368 392.646L213.768 397.312V426.379C213.768 458.246 213.901 458.779 222.968 465.446C228.168 469.312 240.701 469.312 245.901 465.446C254.834 458.779 255.101 457.979 255.501 428.246C256.034 397.579 255.234 394.379 246.834 387.979C241.101 383.579 231.634 382.512 225.368 385.712Z"/>
</svg>
<img src="/img/new/moon.svg" alt="" srcset="" class="moon hidden">
<svg class="moon" width="469" height="469" viewBox="5 5 20 23" xmlns="http://www.w3.org/2000/svg">
<path d="M10.895 7.574c0 7.55 5.179 13.67 11.567 13.67 1.588 0 3.101-0.38 4.479-1.063-1.695 4.46-5.996 7.636-11.051 7.636-6.533 0-11.83-5.297-11.83-11.83 0-4.82 2.888-8.959 7.023-10.803-0.116 0.778-0.188 1.573-0.188 2.39z"></path>
</svg>
</button>
<div class="nav-link flag-container">
@@ -433,7 +435,8 @@
</div>
</header>
<div id="mobile-header">
<a class="logo" href="/"><img src="/img/new/logo-symbol-dark.svg" alt="logo" /></a>
<a href="/zh_Hant" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-light.svg" alt="" srcset=""></a>
<a href="/zh_Hant" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-symbol-dark.svg" alt="" srcset=""></a>
<button id="hamburger" class="nav-toggle-btn">
<svg viewBox="0 0 100 80" width="36" height="36">
@@ -732,6 +735,56 @@
io.observe(cover);
})();
// switch theme
const sunIcon = document.querySelector('.sun');
const moonIcon = document.querySelector('.moon');
const userTheme = localStorage.getItem('theme');
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
const prismThemeLink = document.getElementById('prism-theme')
const iconToggle = () => {
sunIcon.classList.toggle('hidden');
moonIcon.classList.toggle('hidden');
}
const themeCheck = () => {
if(userTheme === 'dark' || (!userTheme && systemTheme)){
document.documentElement.classList.add('dark');
moonIcon.classList.add('hidden');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
}
}
else{
sunIcon.classList.add('hidden');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-light.min.css')
}
}
}
themeCheck();
const themeSwitch = () => {
if(document.documentElement.classList.contains('dark')){
document.documentElement.classList.remove('dark');
localStorage.setItem('theme','light');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-light.min.css')
}
iconToggle();
}
else{
document.documentElement.classList.add('dark');
localStorage.setItem('theme','dark');
if(prismThemeLink){
prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
}
iconToggle();
}
}
window.addEventListener('click',(e)=>{
if(e.target.closest('.nav-link')){
if(e.target.closest('.nav-link').classList.contains('active')){
@@ -751,9 +804,9 @@
nav.classList.add('open');
}
}
// else if(e.target.closest('.theme-switch-btn')){
// themeSwitch();
// }
else if(e.target.closest('.theme-switch-btn')){
themeSwitch();
}
});
</script>
</body>