Homepage: Difference between revisions

Line 388:

@media(max-width:800px){.gfooter{grid-template-columns:1fr 1fr!important}}

@media(max-width:460px){.gfooter{grid-template-columns:1fr!important}}

</style>

/* Lang switcher */

.lang-switcher{display:flex;align-items:center;gap:3px;background:#111;border:1px solid #222;border-radius:8px;padding:4px;}

.lang-btn{padding:4px 9px;border-radius:5px;font-size:11px;font-weight:700;text-decoration:none;letter-spacing:.04em;transition:all .15s;}

.lang-btn.active{background:var(--orange);color:white;}

.lang-btn.available{color:#666;}

.lang-btn.available:hover{color:#fff;}

.lang-btn.soon{color:#2E2E2E;cursor:default;}

/* Light mode */

body.light-mode{--bg:#F7F7F5;--surface:#FFFFFF;--border:#E4E4E0;--text:#111111;--text-2:#555555;--text-3:#888888;}

body.light-mode .nav{background:rgba(247,247,245,.95);}

@media(prefers-color-scheme:light){body:not(.dark-mode){--bg:#F7F7F5;--surface:#FFFFFF;--border:#E4E4E0;--text:#111111;--text-2:#555555;--text-3:#888888;}body:not(.dark-mode) .nav{background:rgba(247,247,245,.95);}}

</style>

<style>

Line 414:

Line 426:

</div>

</div>

Line 1,368:

Line 1,388:

</script>

function toggleTheme(){

const isLight=document.body.classList.toggle('light-mode');

document.body.classList.toggle('dark-mode',!isLight);

localStorage.setItem('theme',isLight?'light':'dark');

document.getElementById('theme-toggle').textContent=isLight?'☀️':'🌙';

}

(function(){

const saved=localStorage.getItem('theme');

const prefersLight=window.matchMedia('(prefers-color-scheme:light)').matches;

const useLight=saved?saved==='light':prefersLight;

document.body.classList.add(useLight?'light-mode':'dark-mode');

document.addEventListener('DOMContentLoaded',function(){

const btn=document.getElementById('theme-toggle');

if(btn)btn.textContent=useLight?'☀️':'🌙';

});

})();

</script>

</html>

@@ Line 388: / Line 388: @@
      @media(max-width:800px){.gfooter{grid-template-columns:1fr 1fr!important}}
      @media(max-width:460px){.gfooter{grid-template-columns:1fr!important}}
-   </style>
+    /* Lang switcher */
+    .lang-switcher{display:flex;align-items:center;gap:3px;background:#111;border:1px solid #222;border-radius:8px;padding:4px;}
+    .lang-btn{padding:4px 9px;border-radius:5px;font-size:11px;font-weight:700;text-decoration:none;letter-spacing:.04em;transition:all .15s;}
+    .lang-btn.active{background:var(--orange);color:white;}
+    .lang-btn.available{color:#666;}
+    .lang-btn.available:hover{color:#fff;}
+    .lang-btn.soon{color:#2E2E2E;cursor:default;}
+    /* Light mode */
+    body.light-mode{--bg:#F7F7F5;--surface:#FFFFFF;--border:#E4E4E0;--text:#111111;--text-2:#555555;--text-3:#888888;}
+    body.light-mode .nav{background:rgba(247,247,245,.95);}
+    @media(prefers-color-scheme:light){body:not(.dark-mode){--bg:#F7F7F5;--surface:#FFFFFF;--border:#E4E4E0;--text:#111111;--text-2:#555555;--text-3:#888888;}body:not(.dark-mode) .nav{background:rgba(247,247,245,.95);}}
+</style>
 <style>@media(max-width:900px){#areas-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:480px){#areas-grid{grid-template-columns:1fr}}</style>
 <style>
@@ Line 414: / Line 426: @@
    </div>
    <div class="nav-right">
+    <div class="lang-switcher">
+      <a href="https://alphax.wiki/wiki/Homepage" class="lang-btn active">EN</a>
+      <a href="https://alphax.wiki/wiki/Homepage/de" class="lang-btn available">DE</a>
+      <span class="lang-btn soon" title="Coming soon">FR</span>
+      <span class="lang-btn soon" title="Coming soon">ES</span>
+      <span class="lang-btn soon" title="Coming soon">PT</span>
+    </div>
+    <button id="theme-toggle" onclick="toggleTheme()" aria-label="Toggle theme" style="background:none;border:1px solid var(--border);border-radius:8px;padding:6px 9px;cursor:pointer;font-size:15px;line-height:1;color:var(--text-2);">🌙</button>
      <a href="https://alphax.wiki/radmin" class="nav-admin" aria-label="Admin login">
        <svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
@@ Line 1,368: / Line 1,388: @@
+</script>
+<script>
+function toggleTheme(){
+  const isLight=document.body.classList.toggle('light-mode');
+  document.body.classList.toggle('dark-mode',!isLight);
+  localStorage.setItem('theme',isLight?'light':'dark');
+  document.getElementById('theme-toggle').textContent=isLight?'☀️':'🌙';
+}
+(function(){
+  const saved=localStorage.getItem('theme');
+  const prefersLight=window.matchMedia('(prefers-color-scheme:light)').matches;
+  const useLight=saved?saved==='light':prefersLight;
+  document.body.classList.add(useLight?'light-mode':'dark-mode');
+  document.addEventListener('DOMContentLoaded',function(){
+    const btn=document.getElementById('theme-toggle');
+    if(btn)btn.textContent=useLight?'☀️':'🌙';
+  });
+})();
 </script>
 </html>