From 8b680990b0bb4fe3212a4f632519320191065f67 Mon Sep 17 00:00:00 2001 From: Andrew Lee Date: Sun, 14 Dec 2025 15:57:36 -0500 Subject: init shifter + slideshow --- src/components/shifter.tsx | 79 ++++++++++++++++++++++++++++++++++++++++++ src/components/slideshow.astro | 0 src/layouts/Page.astro | 18 +++++----- src/pages/index.astro | 57 +++++++++++++++++------------- src/styles/shifter.css | 36 +++++++++++++++++++ src/styles/style.css | 1 - src/styles/window.css | 7 ++-- 7 files changed, 163 insertions(+), 35 deletions(-) create mode 100644 src/components/shifter.tsx create mode 100644 src/components/slideshow.astro create mode 100644 src/styles/shifter.css (limited to 'src') diff --git a/src/components/shifter.tsx b/src/components/shifter.tsx new file mode 100644 index 0000000..5c62be9 --- /dev/null +++ b/src/components/shifter.tsx @@ -0,0 +1,79 @@ +import { useState } from 'react'; +import '../styles/shifter.css'; +export default function Shifter() { + const [sidebar, setSidebar] = useState(0); + + function changeSidebar(window: number) { + setSidebar(window); + } + + function applyButton() { + + } + + function sidebarContent(): React.ReactNode { + switch (sidebar) { + case 0: + return ( + <> +
+

Welcome to the Shifter!

+

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.

+

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.

+
+
+

You can earn codepoints using the Shifter!

+

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!

+
+ + ) + case 1: + return ( + <> +

Windows Settings

+ + ) + case 2: + return ( + <> +

Do you want to reset your settings?

+ + ) + } + } + + + return ( +
+
+
+
Shifter
+
+
+
+
+
+
+ + applyButton()}>Apply Changes +
+
+ {sidebarContent()} +
+
+
+
+ ) +} diff --git a/src/components/slideshow.astro b/src/components/slideshow.astro new file mode 100644 index 0000000..e69de29 diff --git a/src/layouts/Page.astro b/src/layouts/Page.astro index 780bc8d..1d6573f 100644 --- a/src/layouts/Page.astro +++ b/src/layouts/Page.astro @@ -4,15 +4,17 @@ const { frontmatter } = Astro.props; --- -
-
-

{frontmatter.title}

-
-
+
+
+
+

{frontmatter.title}

+
+
+
+
+
+
-
-
-
diff --git a/src/pages/index.astro b/src/pages/index.astro index 3f93d26..1b23b31 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -2,41 +2,50 @@ import { Image } from 'astro:assets'; import logo from "../assets/logo.png"; import Layout from '../layouts/Layout.astro'; -import Slideshow from '../components/Slideshow.astro'; +// import Shifter from '../components/shifter.astro'; +import Shifter from '../components/shifter.tsx'; +import Slideshow from '../components/slideshow.astro'; ---
-
-
-

ShiftOS: The Archive

-
-
-
-
+
+
+
+

ShiftOS: The Archive

+
+
+
+
+
-
-
-

ShiftOS was a game developed by Philip Adams and other developers. The original goal was to go from a bare terminal to a graphical user interface with full desktop features.

-
- History - Downloads - Videos +
+

ShiftOS was a game developed by Philip Adams and other developers. The original goal was to go from a bare terminal to a graphical user interface with full desktop features.

+
+ History + Downloads + Videos +
- +
+
+ +