shifter stuff + updated downloads

12 files changed, 206 insertions, 112 deletions

diff --git a/src/components/Shifter.tsx b/src/components/Shifter.tsx
index 36b2262..940e6f0 100644
--- a/src/components/Shifter.tsx
+++ b/src/components/Shifter.tsx
@@ -1,13 +1,7 @@
 import React, { useState, useRef } from 'react';
+import { sidebarContent } from './Shifter/Sidebar';
 import '../styles/shifter.css';
 
-let cssVariables = ['--titlebar-colour',
-  '--titlebar-text-colour',
-  '--titlebar-control-colour',
-  '--titlebar-control-link',
-  '--window-font',
-  '--titlebar-font']
-
 export default function Shifter() {
     const [sidebar, setSidebar] = useState(0);
     const [position, setPosition] = useState({
@@ -25,13 +19,6 @@ export default function Shifter() {
 
     }
 
-    function resetSettings() {
-      cssVariables.map((x) => {
-        localStorage.removeItem(x);
-        document.documentElement.style.removeProperty(x);
-      });
-    }
-
     function closeButton() {
 
     }
@@ -80,70 +67,6 @@ export default function Shifter() {
         }
     }, [isDragging]);
 
-    function sidebarContent(): React.ReactNode {
-        switch (sidebar) {
-            case 0:
-                return (
-                    <>
-                        <div className="shifter-welcome">
-                        <h1>Welcome to the Shifter!</h1>
-                            <p>The shifter is an application that allows you to modify various features in ShiftOS.
-                                Initially the user interface of ShiftOS is very dull however you can use the Shifter and
-                                various sub programs within the Shifter such as the "Colour Picker" to improve the
-                                appearance of ShiftOS.</p>
-                            <p>The basic process of modifying your ShiftOS interface is very simple. You first choose a
-                                main category on the left which will bring up a list of sub categories. Next select a
-                                sub category to display your list of customization options. Once you have modified the
-                                appropriate settings click Apply Changes to confirm your choices.</p>
-                        </div>
-                        <div className="shifter-codepoints">
-                            <h2>You can earn codepoints using the Shifter!</h2>
-                            <p>That's right! Simply by customizing your ShiftOS interface you can earn as many
-                                codepoints as you like. The amount of codepoints you earn will be calculated and
-                                displayed the moment you press "Apply Changes". The more time you spend customizing the
-                                more codepoints you will earn!</p>
-                        </div>
-                    </>
-                )
-            case 1:
-                return (
-                    <>
-                        <div>
-                      <div className="window" style={{ paddingBottom: 130 }}>
-                            <div className="titlebar">
-                                <div className="titlebar-text">Template</div>
-                                <div className="titlebar-buttons"></div>
-                            </div>
-                          </div>
-                        </div>
-                        <div className="shifter-window-sidebar">
-                            <div className="shifter-window-buttons">
-                                <a className="shifter-button" onClick={() => console.log("Title Bar")}>Title Bar</a>
-                                <a className="shifter-button" onClick={() => console.log("Title Text")}>Title Text</a>
-                                <a className="shifter-button" onClick={() => console.log("Buttons")}>Buttons</a>
-                                <a className="shifter-button" onClick={() => console.log("Borders")}>Borders</a>
-                            </div>
-                            <div>
-                              <a onClick={() => testOption()}>Test</a>
-                              Content
-                            </div>
-                        </div>
-                    </>
-                )
-            case 2:
-                return (
-                    <>
-                        <h1>Global Settings Reset!</h1>
-                        <p>After spending hours customizing ShiftOS you may want to reset all settings to their default values so you can have a clean slate.
-                            Remember that once you reset your settings you can't undo your actions so only do so if you truly want to abandon all the customizations you have made to ShiftOS.</p>
-                        <a onClick={() => resetSettings()}>Reset All Settings</a>
-                        <p><b>Warning! A Global Reset Is Irreversible!</b></p>
-                    </>
-                )
-        }
-    }
-
-
     return (
         <>
             <div className="window draggable" style={{
@@ -158,16 +81,16 @@ export default function Shifter() {
                 </div>
                 <div className="content">
                     <div className="sidebar">
-                        <div className="sidebar-content">
+                        <aside className="sidebar-content">
                             <a href="#windows" className="sidebar-button" onClick={() => changeSidebar(1)}>Windows</a>
                             <div className="sep"/>
                             <a href="#reset" className="sidebar-button" onClick={() => changeSidebar(2)}>Reset</a>
                             <div className="sep"/>
-                        </div>
+                        </aside>
                         <a href="#apply" className="shifter-button" onClick={() => applyButton()}>Apply Changes</a>
                     </div>
                     <div className="shifter-body">
-                        {sidebarContent()}
+                        {sidebarContent(sidebar)}
                     </div>
                 </div>
             </div>
diff --git a/src/components/Shifter/Sidebar.tsx b/src/components/Shifter/Sidebar.tsx
new file mode 100644
index 0000000..adb211f
--- /dev/null
+++ b/src/components/Shifter/Sidebar.tsx
@@ -0,0 +1,74 @@
+import { cssVariables } from '../../scripts/variables';
+
+function resetSettings() {
+  cssVariables.map((x) => {
+    if (!x) return;
+    localStorage.removeItem(x);
+    document.documentElement.style.removeProperty(x);
+  });
+}
+
+export function sidebarContent(sidebar: number): React.ReactNode {
+  switch (sidebar) {
+      case 0:
+          return (
+              <section className="welcome">
+                  <div className="shifter-welcome">
+                  <h1>Welcome to the Shifter!</h1>
+                      <p>The shifter is an application that allows you to modify various features in ShiftOS.
+                          Initially the user interface of ShiftOS is very dull however you can use the Shifter and
+                          various sub programs within the Shifter such as the "Colour Picker" to improve the
+                          appearance of ShiftOS.</p>
+                      <p>The basic process of modifying your ShiftOS interface is very simple. You first choose a
+                          main category on the left which will bring up a list of sub categories. Next select a
+                          sub category to display your list of customization options. Once you have modified the
+                          appropriate settings click Apply Changes to confirm your choices.</p>
+                  </div>
+                  <div className="shifter-codepoints">
+                      <h2>You can earn codepoints using the Shifter!</h2>
+                      <p>That's right! Simply by customizing your ShiftOS interface you can earn as many
+                          codepoints as you like. The amount of codepoints you earn will be calculated and
+                          displayed the moment you press "Apply Changes". The more time you spend customizing the
+                          more codepoints you will earn!</p>
+                  </div>
+              </section>
+          )
+      case 1:
+          return (
+              <section className="windows">
+                  <div className="template">
+                    <div className="window" style={{ paddingBottom: 103 }}>
+                      <div className="titlebar">
+                          <div className="titlebar-text">Template</div>
+                          <div className="titlebar-buttons"></div>
+                      </div>
+                    </div>
+                  </div>
+                  <div className="shifter-window-sidebar">
+                      <aside className="shifter-window-buttons">
+                          <a className="window-shifter-button" onClick={() => console.log("Title Bar")}>Title Bar</a>
+                          <a className="window-shifter-button" onClick={() => console.log("Title Text")}>Title Text</a>
+                          <a className="window-shifter-button" onClick={() => console.log("Buttons")}>Buttons</a>
+                          <a className="window-shifter-button" onClick={() => console.log("Borders")}>Borders</a>
+                      </aside>
+                      <div className="window-setting-main">
+                        <h3>Window Settings</h3>
+                        <p>Welcome to the windows settings panel. Here you can modify the appearance of the controls that are displayed on your open windows.
+                          Just select a sub option to the left to get started!</p>
+                        <p>The preview window above will track your modifications live until you click "Apply Changes".</p>
+                      </div>
+                  </div>
+              </section>
+          )
+      case 2:
+          return (
+              <section className="reset">
+                  <h1>Global Settings Reset!</h1>
+                  <p>After spending hours customizing ShiftOS you may want to reset all settings to their default values so you can have a clean slate.
+                      Remember that once you reset your settings you can't undo your actions so only do so if you truly want to abandon all the customizations you have made to ShiftOS.</p>
+                  <a className="reset-button" onClick={() => resetSettings()}>Reset All Settings</a>
+                  <p><b>Warning! A Global Reset Is Irreversible!</b></p>
+              </section>
+          )
+  }
+}
diff --git a/src/components/Shifter/Window/Borders.tsx b/src/components/Shifter/Window/Borders.tsx
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/components/Shifter/Window/Borders.tsx
diff --git a/src/components/Shifter/Window/Buttons.tsx b/src/components/Shifter/Window/Buttons.tsx
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/components/Shifter/Window/Buttons.tsx
diff --git a/src/components/Shifter/Window/TitleBar.tsx b/src/components/Shifter/Window/TitleBar.tsx
new file mode 100644
index 0000000..6b3fa70
--- /dev/null
+++ b/src/components/Shifter/Window/TitleBar.tsx
@@ -0,0 +1,6 @@
+function setTitleBar(type: number, b: any) {
+  switch (type) {
+    case 0:
+      return localStorage.setItem("--titlebar-colour", b);
+  }
+}
diff --git a/src/components/Shifter/Window/TitleText.tsx b/src/components/Shifter/Window/TitleText.tsx
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/components/Shifter/Window/TitleText.tsx
diff --git a/src/components/ToggleShifter.tsx b/src/components/ToggleShifter.tsx
index 4737a6f..725a8cc 100644
--- a/src/components/ToggleShifter.tsx
+++ b/src/components/ToggleShifter.tsx
@@ -1,14 +1,26 @@
 import Shifter from './Shifter.tsx';
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 export default function ToggleShifter() {
-    const [isShowingShifter, setShowingShifter] = useState(false);
-
-    return (
-        <>
-            {isShowingShifter && (
-                <Shifter />
-            )}
-        </>
-    )
+  const [isShowingShifter, setShowingShifter] = useState(false);
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "s") {
+        setShowingShifter(prev => !prev);
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, []);
+
+  return (
+    <>
+      {isShowingShifter && <Shifter />}
+    </>
+  );
 }
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 1ad0619..471756c 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -38,11 +38,10 @@ import '../styles/window.css';
 </body>
 </html>
 <script>
-const titlebarColour = localStorage.getItem("--titlebar-colour");
-
-document.documentElement.style.setProperty(
-  '--titlebar-colour',
-  titlebarColour
-);
-
+import { cssVariables } from '../scripts/variables';
+cssVariables.map((x) => {
+  let y = localStorage.getItem(x);
+  if (!y) return;
+  document.documentElement.style.setProperty(x, y);
+});
 </script>
diff --git a/src/pages/downloads.md b/src/pages/downloads.md
index 08c0645..722ea16 100644
--- a/src/pages/downloads.md
+++ b/src/pages/downloads.md
@@ -9,21 +9,31 @@ This contains the ShiftOS source code and ShiftOS binary files.
 If you have files for ShiftOS, zip it (if it has dependencies), and email [email protected] with the binary/zip attached.
 
 # ShiftOS Source Code
-
 All ShiftOS source code are located on [the official git server](https://git.shiftos.dev) or on [codeberg](https://codeberg.org/shiftos-archive).
 
-## Note for ShiftOS 0.0.3 to 0.0.4.1
+## Repositories
+- shiftos: The original codebase (view the `original` branch for 0.0.8 Beta 1).
+- shiftos-next: First recreation of ShiftOS with a new story and features.
+- shiftos-c-: First C# rewrite based on 0.0.9.
+- shiftos_thereturn: The final official version of ShiftOS, also known as ShiftOS 1.0.
+- project-unite: Website for ShiftOS. Forums, sharing skins, downloads, etc.
+- shiftgears: Server emulator for ShiftOS 1.0.
+- shiftos-challenge: A modern and polished recreation of 0.0.x.
+- shiftos-pong: Android port of ShiftOS' pong in monogame.
+- shiftos-rewind (Various people): Unofficial recreation of ShiftOS 0.0.9 made in C#.
+- shiftskn-rewind: ShiftOS skin decompiler from 0.0.x to rewind.
+- shiftos-therevival-old (EverythingWindows): Another unofficial ShiftOS recreation made in Visual Basic .NET.
 
+## Note for ShiftOS 0.0.3 to 0.0.4.1
 ShiftOS used to collect the user's information then sends it to an email, and it includes the following:
 
 - Screenshot of your desktop
 - System information (Computer Name, Username, Time, Memory, Operating System (Version and Platform), Drive Label. Total Drive Size, File System, Resolution, ShiftOS Location)
 - Directories/Files for creation date, size and name (Desktop. Documents, Pictures, Music, Videos, Program, and Program Files)
 
-As of 2025, the email no longer works. But if you want to be extra careful, use a VM.
+As of now, the email no longer works. But if you want to be extra careful, use a VM.
 
 # ShiftOS 0.0.x
-
 - [ShiftOS Community Source Code](https://git.shiftos.dev/shiftos.git)
 - [ShiftOS Philip Adams Source Code](https://files.alee14.me/Software/ShiftOS/0.0.x/ShiftOS%20-%200.0.8%20Beta%201.1%20Source.zip)
 - [ShiftOS 0.0.8 Skins](https://files.alee14.me/Software/ShiftOS/0.0.x/shiftos-skins.tar.gz)
@@ -40,7 +50,6 @@ As of 2025, the email no longer works. But if you want to be extra careful, use
 - [ShiftOS 0.0.9 Alpha 1](https://files.alee14.me/Software/ShiftOS/0.0.x/ShiftOS%200.0.9%20Alpha%201.exe)
 
 # ShiftOS Next
-
 - [ShiftOS Next 0.0.1 Alpha 2](https://files.alee14.me/Software/ShiftOS/next/ShiftOS%20Next%200.0.1%20Alpha%202.exe)
 - [ShiftOS Next 0.0.1 Alpha 3.1](https://files.alee14.me/Software/ShiftOS/next/ShiftOS%20Next%200.0.1%20Alpha%203.1.exe)
 - [ShiftOS Next 0.0.1 Beta 1](https://files.alee14.me/Software/ShiftOS/next/ShiftOS%20Next%200.0.1%20Beta%201.exe)
@@ -51,23 +60,34 @@ As of 2025, the email no longer works. But if you want to be extra careful, use
 - [ShiftOS Next 0.0.2 Alpha 2.1](https://files.alee14.me/Software/ShiftOS/next/ShiftOS.Next.0.0.2.Alpha.2.1.exe)
 - [ShiftOS Next 0.0.2 Alpha 3.1](https://files.alee14.me/Software/ShiftOS/next/shiftos_next.0.0.2.Alpha.3.1.exe)
 
-# ShiftOS 1.0
+# ShiftOS C#
+- [ShiftOS C# 0.1.1 Debug](https://files.alee14.me/Software/ShiftOS/csharp/ShiftOS%20C%23%200.1.1%20Debug.zip)
+- [ShiftOS C# 0.1.1 Release](https://files.alee14.me/Software/ShiftOS/csharp/ShiftOS%20C%23%200.1.1%20Release.zip)
+- [ShiftOS C# 0.1.2 Debug](https://files.alee14.me/Software/ShiftOS/csharp/ShiftOS%20C%23%200.1.2%20Debug.zip)
+- [ShiftOS C# 0.1.2 Release](https://files.alee14.me/Software/ShiftOS/csharp/ShiftOS%20C%23%200.1.2%20Release.zip)
 
+## NOTE
+0.1.2 may be unstable due to major changes.
+
+### Debug vs Release
+- Debug = Decrypted save file, access to dev commands
+- Release = Encrypted save file, no access to dev commands
+
+# ShiftOS 1.0
 - [ShiftOS 1.0 Beta 1.2](https://files.alee14.me/Software/ShiftOS/1.x/shiftos_1.0_beta_1.2.zip)
 - [ShiftOS 1.0 Beta 1.4 The Hackers Update](https://files.alee14.me/Software/ShiftOS/1.x/shiftos_1.0_beta_1.4_-_the_hacker_s_update.zip)
 - [ShiftOS 1.0 Beta 2](https://files.alee14.me/Software/ShiftOS/1.x/shiftos_1.0_beta_2.zip)
 - [ShiftOS 1.0 Beta 2.5.1](https://files.alee14.me/Software/ShiftOS/1.x/shiftos_1.0_beta_2.5.1.zip)
 - [ShiftOS 1.0 Beta 2.5.2](https://files.alee14.me/Software/ShiftOS/1.x/shiftos_1.0_beta_2.5.2.zip)
 - [ShiftOS 1.0 Beta 3](https://files.alee14.me/Software/ShiftOS/1.x/shiftos-1.0-beta-3.zip)
+- [ShiftOS Monogame Latest](https://files.alee14.me/Software/ShiftOS/1.x/shiftos_1.0_monogame.zip) (very unstable)
 
 # ShiftOS Rewind
-
-Recreating 0.0.9 using C#. Created by former ShiftOS 1.0 devs.
+Recreating 0.0.9 using C#. Created by various people.
 
 [Source code](https://git.shiftos.dev/shiftos-rewind.git) | [Download](https://files.alee14.me/Software/ShiftOS/shiftos-rewind.zip)
 
 # ShiftOS Challenge (.NET 5.0)
-
 Originally made by acidiclight, ported to .NET 5.0 by Alee14.
 
 After extracting, run ShiftOS.exe.
diff --git a/src/pages/index.astro b/src/pages/index.astro
index b352cd0..899a0e6 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -3,7 +3,7 @@ import { Image } from 'astro:assets';
 import logo from "../assets/logo.png";
 import Layout from '../layouts/Layout.astro';
 import NoJSWarning from '../components/NoJSWarning.astro';
-import Shifter from '../components/Shifter.tsx';
+import ToggleShifter from '../components/ToggleShifter.tsx';
 import Slideshow from '../components/Slideshow.tsx';
 ---
 
@@ -32,11 +32,11 @@ import Slideshow from '../components/Slideshow.tsx';
             </div>
         </div>
         <!-- <div class="window-container">
-            <Slideshow client:load />
+            <Slideshow client:load image={"test"} alt={"test"}  />
         </div> -->
-        <Shifter client:only />
+        <ToggleShifter client:only />
     </div>
     <footer>
-        <p><b>&copy; Copyright 2013-2025 ShiftOS Archive. Game originally made by Philip Adams.<br/>Website made by <a href="https://alee14.me">Andrew Lee</a>. <a href="https://github.com/Alee14/shiftos-website">Website source code.</a></b></p>
+        <p><b>&copy; Copyright 2013-2026 ShiftOS Archive. Game originally made by Philip Adams.<br/>Website made by <a href="https://alee14.me">Andrew Lee</a>. <a href="https://github.com/Alee14/shiftos-website">Website source code.</a></b></p>
     </footer>
 </Layout>
diff --git a/src/scripts/variables.ts b/src/scripts/variables.ts
new file mode 100644
index 0000000..b119216
--- /dev/null
+++ b/src/scripts/variables.ts
@@ -0,0 +1,6 @@
+export let cssVariables = ['--titlebar-colour',
+  '--titlebar-text-colour',
+  '--titlebar-control-colour',
+  '--titlebar-control-link',
+  '--window-font',
+  '--titlebar-font'];
diff --git a/src/styles/shifter.css b/src/styles/shifter.css
index f245ab2..ee77b83 100644
--- a/src/styles/shifter.css
+++ b/src/styles/shifter.css
@@ -11,6 +11,15 @@
         box-shadow: inset 0 0 0 1px var(--dark-button-text);
         color: var(--dark-button-text);
     }
+
+    .shifter-button:hover {
+        background-color: var(--dark-button-hover);
+    }
+
+    .shifter-button:active {
+        box-shadow: inset 0 0 0 1px var(--dark-button-text);
+        color: var(--dark-button-text);
+    }
 }
 
 @media (prefers-color-scheme: light) {
@@ -26,6 +35,15 @@
         box-shadow: inset 0 0 0 1px var(--light-button-text);
         color: var(--light-button-text);
     }
+
+    .shifter-button:hover {
+        background-color: var(--dark-button-hover);
+    }
+
+    .shifter-button:active {
+        box-shadow: inset 0 0 0 1px var(--dark-button-text);
+        color: var(--dark-button-text);
+    }
 }
 
 .draggable {
@@ -73,8 +91,10 @@
 }
 
 .shifter-window-buttons {
+    font-family: Cambria, serif;
     display: flex;
     flex-direction: column;
+    gap: 6px;
 }
 
 .shifter-welcome h1 {
@@ -96,11 +116,45 @@
 }
 
 .shifter-button {
-    padding: 6px 12px;
+    padding: 6px 10px;
+    border: 1px solid;
+}
+
+.window-shifter-button {
+    padding: 7px 30px;
     border: 1px solid;
+    white-space: nowrap;
 }
 
 .sep {
     border-top: 1px solid;
     background-color: white;
 }
+
+.window-setting-main {
+    margin: 0.7em;
+}
+
+.window-setting-main h3 {
+    margin: 0;
+}
+
+.window-setting-main p {
+    margin-top: 0.3em;
+    font-size: 0.9em;
+}
+
+.reset h1 {
+    font-size: 1.5em;
+}
+
+.reset p {
+    font-size: 0.9em;
+}
+
+.reset-button {
+    font-family: Cambria, serif;
+    font-size: 1.7em;
+    padding: 30px 40px;
+    border: 1px solid;
+}