diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/shifter.tsx | 79 | ||||
| -rw-r--r-- | src/components/slideshow.astro | 0 | ||||
| -rw-r--r-- | src/layouts/Page.astro | 18 | ||||
| -rw-r--r-- | src/pages/index.astro | 57 | ||||
| -rw-r--r-- | src/styles/shifter.css | 36 | ||||
| -rw-r--r-- | src/styles/style.css | 1 | ||||
| -rw-r--r-- | src/styles/window.css | 7 |
7 files changed, 163 insertions, 35 deletions
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 ( + <> + <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 ( + <> + <h1>Windows Settings</h1> + </> + ) + case 2: + return ( + <> + <h1>Do you want to reset your settings?</h1> + </> + ) + } + } + + + return ( + <div> + <div className="window"> + <div className="titlebar"> + <div className="titlebar-text">Shifter</div> + <div className="titlebar-buttons"> + <div className="titlebar-box titlebar-box-link"></div> + </div> + </div> + <div className="content"> + <div className="sidebar"> + <div className="sidebar-content"> + <a className="shifter-button" onClick={() => changeSidebar(1)}>Windows</a> + <a className="shifter-button" onClick={() => changeSidebar(2)}>Reset</a> + </div> + <a onClick={() => applyButton()}>Apply Changes</a> + </div> + <div className="shifter-body"> + {sidebarContent()} + </div> + </div> + </div> + </div> + ) +} diff --git a/src/components/slideshow.astro b/src/components/slideshow.astro new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/src/components/slideshow.astro 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; --- <Layout title={frontmatter.title} description={frontmatter.description}> - <div class="window"> - <div class="titlebar"> - <p class="titlebar-text">{frontmatter.title}</p> - <div class="titlebar-buttons"> - <a href="/"><div class="titlebar-box titlebar-box-link"></div></a> + <div class="window-container"> + <div class="window"> + <div class="titlebar"> + <p class="titlebar-text">{frontmatter.title}</p> + <div class="titlebar-buttons"> + <a href="/"><div class="titlebar-box titlebar-box-link"></div></a> + </div> + </div> + <div class="container"> + <slot /> </div> - </div> - <div class="container"> - <slot /> </div> </div> </Layout> 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'; --- <Layout title="ShiftOS: The Archive" description="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."> <div class="center"> <Image src={logo} alt="ShiftOS Logo" class="logo" width={logo.width} height={logo.height} /> - <div class="window"> - <div class="titlebar"> - <p class="titlebar-text">ShiftOS: The Archive</p> - <div class="titlebar-buttons"> - <div class="titlebar-box"></div> - <div class="titlebar-box"></div> - <div class="titlebar-box"></div> + <div class="window-container"> + <div class="window"> + <div class="titlebar"> + <p class="titlebar-text">ShiftOS: The Archive</p> + <div class="titlebar-buttons"> + <div class="titlebar-box"></div> + <div class="titlebar-box"></div> + <div class="titlebar-box"></div> + </div> </div> - </div> - <div class="container"> - <p>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.</p> - <div class="nav"> - <a class="button" href="history">History</a> - <a class="button" href="downloads">Downloads</a> - <a class="button" href="https://www.youtube.com/c/ShiftOS">Videos</a> + <div class="container"> + <p>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.</p> + <div class="nav"> + <a class="button" href="history">History</a> + <a class="button" href="downloads">Downloads</a> + <a class="button" href="https://www.youtube.com/c/ShiftOS">Videos</a> + </div> </div> </div> </div> - <!-- <div class="window" style="display:flex; flex-direction:column; height:80vh;"> - <div class="titlebar"> - <p class="titlebar-text">Screenshots</p> - <div class="titlebar-buttons"> - <div class="titlebar-box"></div> - <div class="titlebar-box"></div> - <div class="titlebar-box"></div> + <div class="window-container"> + <div class="window" style="display:flex; flex-direction:column; height:80vh;"> + <div class="titlebar"> + <p class="titlebar-text">Screenshots</p> + <div class="titlebar-buttons"> + <div class="titlebar-box"></div> + <div class="titlebar-box"></div> + <div class="titlebar-box"></div> + </div> </div> + <Slideshow /> </div> - <Slideshow /> - </div> --> + </div> + <div class="window-container"> + <Shifter client:load /> + </div> </div> <footer> <p><b>© 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> diff --git a/src/styles/shifter.css b/src/styles/shifter.css new file mode 100644 index 0000000..a37b6bf --- /dev/null +++ b/src/styles/shifter.css @@ -0,0 +1,36 @@ +.draggable { + position: absolute; + top: 50px; + left: 50px; + width: fit-content; +} + + +.content { + padding: 10px; + display: flex; + flex-direction: row; +} + +.sidebar { + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.sidebar-content { + display: flex; + flex-direction: column; + padding: 0 20px; + border: 1px solid; +} + +.shifter-body { + margin: 1em; +} + +.shifter-button { + font-weight: bold; + font-style: italic; + border: 1px solid; +} diff --git a/src/styles/style.css b/src/styles/style.css index 80f49c5..5946f95 100644 --- a/src/styles/style.css +++ b/src/styles/style.css @@ -61,7 +61,6 @@ p { } footer { - position: fixed; left: 0; bottom: 0; text-align: center; diff --git a/src/styles/window.css b/src/styles/window.css index 77c917a..8718330 100644 --- a/src/styles/window.css +++ b/src/styles/window.css @@ -107,9 +107,12 @@ background-color: var(--titlebar-control-link); } +.window-container { + margin: 1em 2%; +} + .window { font-family: var(--window-font); - margin: 1em 2%; box-shadow: inset -2px -2px var(--titlebar-colour), inset 2px 2px var(--titlebar-colour); @@ -134,7 +137,7 @@ flex-direction: row; } - .window { + .window-container { margin: 1em 20%; } } |