diff --git a/README.md b/README.md
index 2bc9017..7591c23 100644
--- a/README.md
+++ b/README.md
@@ -18,7 +18,7 @@ git clone git@git.sr.ht:~svlad_cjelli/onTheSpectrum
cd onTheSpectrum
# bun install all dependencies
-bun i
+bun i
# bun run with bun backend
bun --bun run dev --open
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
new file mode 100644
index 0000000..bc33f4a
--- /dev/null
+++ b/src/lib/components/index.ts
@@ -0,0 +1,4 @@
+export * from './chartDisplay.svelte'
+export * from './diceRoller.svelte'
+export * from './themeSelector.svelte'
+export * from './toggle.svelte'
diff --git a/src/lib/components/themeSelector.svelte b/src/lib/components/themeSelector.svelte
index 09f6c1c..9f4bd4e 100644
--- a/src/lib/components/themeSelector.svelte
+++ b/src/lib/components/themeSelector.svelte
@@ -1,28 +1,24 @@
- {#each themes as theme}
- currentTheme = theme}
- class:active={currentTheme === theme}
- >
- {theme.charAt(0).toUpperCase() + theme.slice(1)}
-
- {/each}
+ {#each themes as theme}
+ (currentTheme = theme)} class:active={currentTheme === theme}>
+ {theme.charAt(0).toUpperCase() + theme.slice(1)}
+
+ {/each}
\ No newline at end of file
+ .button-row {
+ display: flex;
+ gap: 10px;
+ justify-content: center;
+ flex-wrap: wrap;
+ margin-top: 10px;
+ }
+
+
diff --git a/src/lib/data/xAxes.js b/src/lib/data/xAxes.js
index d2f72f8..7b14cf0 100644
--- a/src/lib/data/xAxes.js
+++ b/src/lib/data/xAxes.js
@@ -1,15 +1,17 @@
-export const xAxes = [
+const xAxes = [
{ values: ["Traditional", "Experimental"], adult: false },
{ values: ["Budget", "Luxury"], adult: false },
{ values: ["Old", "New"], adult: false },
{ values: ["Simple", "Complex"], adult: false },
{ values: ["Minimal", "Maximal"], adult: false },
-
+
// Adult axes
{ values: ["Beer", "Cocktails"], adult: true },
{ values: ["Swipe-happy", "Selective"], adult: true },
{ values: ["Casual", "Serious"], adult: true },
-
+
// Add more X axes here...
// Format: { values: ["Left extreme", "Right extreme"], adult: true/false }
-];
\ No newline at end of file
+];
+
+export default xAxes;
diff --git a/src/lib/data/yAxes.js b/src/lib/data/yAxes.js
index c1ee875..2b4ccdb 100644
--- a/src/lib/data/yAxes.js
+++ b/src/lib/data/yAxes.js
@@ -1,15 +1,17 @@
-export const yAxes = [
+const yAxes = [
{ values: ["Thin", "Thick"], adult: false },
{ values: ["Planned", "Spontaneous"], adult: false },
{ values: ["Calm", "Upbeat"], adult: false },
{ values: ["Indoor", "Outdoor"], adult: false },
{ values: ["Solo", "Group"], adult: false },
-
+
// Adult axes
{ values: ["Occasional", "Frequent"], adult: true },
{ values: ["Hookups", "Relationships"], adult: true },
{ values: ["Private", "Public"], adult: true },
-
+
// Add more Y axes here...
// Format: { values: ["Bottom extreme", "Top extreme"], adult: true/false }
-];
\ No newline at end of file
+];
+
+export default yAxes;
diff --git a/src/lib/index.ts b/src/lib/index.ts
index 856f2b6..00ad36b 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -1 +1,3 @@
// place files you want to import through the `$lib` alias in this folder.
+export { default as xAxes } from './data/xAxes.js'
+export { default as yAxes } from './data/yAxes.js'
diff --git a/src/lib/styles/cyberpunk.css b/src/lib/styles/cyberpunk.css
new file mode 100644
index 0000000..de8a6c9
--- /dev/null
+++ b/src/lib/styles/cyberpunk.css
@@ -0,0 +1,43 @@
+/* Cyberpunk Theme */
+:global(.theme-cyberpunk) {
+ font-family: 'Courier New', monospace;
+ background: #0a0e27;
+ color: #00ffff;
+}
+
+:global(.theme-cyberpunk .window){
+ background: rgba(10, 14, 39, 0.95);
+ border: 2px solid #00ffff;
+ box-shadow: 0 0 20px #ff00ff;
+}
+
+:global(.theme-cyberpunk .title-bar ){
+ background: linear-gradient(90deg, #ff00ff, #00ffff);
+ color: #000;
+ padding: 12px;
+ font-weight: bold;
+ text-transform: uppercase;
+}
+
+:global(.theme-cyberpunk fieldset ){
+ border: 1px solid #ff00ff;
+}
+
+:global(.theme-cyberpunk legend ){
+ color: #ff00ff;
+ text-transform: uppercase;
+}
+
+:global(.theme-cyberpunk button ){
+ background: transparent;
+ border: 2px solid #ff00ff;
+ color: #ff00ff;
+ font-family: 'Courier New', monospace;
+ text-transform: uppercase;
+ padding: 10px 25px;
+}
+
+:global(.theme-cyberpunk button:hover ){
+ background: #ff00ff;
+ color: #000;
+}
diff --git a/src/lib/styles/nightmare.css b/src/lib/styles/nightmare.css
new file mode 100644
index 0000000..7a28406
--- /dev/null
+++ b/src/lib/styles/nightmare.css
@@ -0,0 +1,44 @@
+/* Nightmare Theme */
+:global(.theme-nightmare) {
+ font-family: 'Georgia', serif;
+ background: #000000;
+ color: #8b0000;
+}
+
+:global(.theme-nightmare .window) {
+ background: #0d0000;
+ border: 3px solid #8b0000;
+ box-shadow: 0 0 30px #ff0000;
+}
+
+:global(.theme-nightmare .title-bar) {
+ background: linear-gradient(180deg, #3a0000, #000000);
+ color: #ff0000;
+ padding: 15px;
+ text-align: center;
+ text-transform: uppercase;
+ letter-spacing: 5px;
+ text-shadow: 0 0 10px #ff0000;
+}
+
+:global(.theme-nightmare fieldset) {
+ border: 2px solid #8b0000;
+}
+
+:global(.theme-nightmare legend) {
+ color: #ff0000;
+ text-shadow: 0 0 5px #ff0000;
+}
+
+:global(.theme-nightmare button) {
+ background: #3a0000;
+ border: 2px solid #8b0000;
+ color: #ff0000;
+ font-family: 'Georgia', serif;
+ text-transform: uppercase;
+ padding: 10px 25px;
+}
+
+:global(.theme-nightmare button:hover) {
+ background: #8b0000;
+}
diff --git a/src/lib/styles/nintendo.css b/src/lib/styles/nintendo.css
new file mode 100644
index 0000000..28bd4aa
--- /dev/null
+++ b/src/lib/styles/nintendo.css
@@ -0,0 +1,58 @@
+/* Nintendo Theme */
+:global(.theme-nintendo) {
+ font-family: 'Arial', sans-serif;
+ background: #e60012;
+ color: #fff;
+}
+
+:global(.theme-nintendo .window) {
+ background: #fff;
+ border: 8px solid #e60012;
+ border-radius: 20px;
+ box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
+ overflow: hidden;
+}
+
+:global(.theme-nintendo .title-bar) {
+ background: #e60012;
+ color: #fff;
+ padding: 20px;
+ text-align: center;
+ font-weight: bold;
+ font-size: 24px;
+ letter-spacing: 2px;
+}
+
+:global(.theme-nintendo .window-body) {
+ color: #484848;
+}
+
+:global(.theme-nintendo fieldset) {
+ border: 3px solid #e60012;
+ border-radius: 15px;
+ background: #f7f7f7;
+}
+
+:global(.theme-nintendo legend) {
+ color: #e60012;
+}
+
+:global(.theme-nintendo button) {
+ background: #e60012;
+ border: none;
+ border-radius: 25px;
+ color: #fff;
+ text-transform: uppercase;
+ padding: 12px 30px;
+ box-shadow: 0 4px 0 #a00009;
+}
+
+:global(.theme-nintendo button:hover) {
+ background: #ff0018;
+}
+
+:global(.theme-nintendo button:active) {
+ box-shadow: 0 2px 0 #a00009;
+ transform: translateY(2px);
+}
+
diff --git a/src/lib/styles/themes.css b/src/lib/styles/themes.css
deleted file mode 100644
index f530847..0000000
--- a/src/lib/styles/themes.css
+++ /dev/null
@@ -1,263 +0,0 @@
-:global(body) {
- margin: 0;
- padding: 0;
-}
-
-.container {
- padding: 20px;
- min-height: 100vh;
-}
-
-.window {
- max-width: 800px;
- margin: 0 auto;
-}
-
-.window-body {
- padding: 20px;
-}
-
-fieldset {
- padding: 15px;
- margin: 15px 0;
-}
-
-legend {
- font-weight: bold;
- padding: 0 5px;
-}
-
-.button-row {
- display: flex;
- gap: 10px;
- justify-content: center;
- margin-top: 10px;
-}
-
-button {
- padding: 8px 24px;
- cursor: pointer;
- font-weight: bold;
-}
-
-/* Cyberpunk Theme */
-.theme-cyberpunk {
- font-family: 'Courier New', monospace;
- background: #0a0e27;
- color: #00ffff;
-}
-
-.theme-cyberpunk .window {
- background: rgba(10, 14, 39, 0.95);
- border: 2px solid #00ffff;
- box-shadow: 0 0 20px #ff00ff;
-}
-
-.theme-cyberpunk .title-bar {
- background: linear-gradient(90deg, #ff00ff, #00ffff);
- color: #000;
- padding: 12px;
- font-weight: bold;
- text-transform: uppercase;
-}
-
-.theme-cyberpunk fieldset {
- border: 1px solid #ff00ff;
-}
-
-.theme-cyberpunk legend {
- color: #ff00ff;
- text-transform: uppercase;
-}
-
-.theme-cyberpunk button {
- background: transparent;
- border: 2px solid #ff00ff;
- color: #ff00ff;
- font-family: 'Courier New', monospace;
- text-transform: uppercase;
- padding: 10px 25px;
-}
-
-.theme-cyberpunk button:hover {
- background: #ff00ff;
- color: #000;
-}
-
-/* Typewriter Theme */
-.theme-typewriter {
- font-family: 'Courier', monospace;
- background: #f4e8d0;
- color: #2c2416;
-}
-
-.theme-typewriter .window {
- background: #fffef7;
- border: 3px double #2c2416;
- box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
-}
-
-.theme-typewriter .title-bar {
- background: #2c2416;
- color: #f4e8d0;
- padding: 12px;
- text-align: center;
- text-transform: uppercase;
- letter-spacing: 3px;
-}
-
-.theme-typewriter fieldset {
- border: 2px solid #2c2416;
-}
-
-.theme-typewriter button {
- background: #2c2416;
- border: 2px solid #2c2416;
- color: #f4e8d0;
- font-family: 'Courier', monospace;
-}
-
-/* Nightmare Theme */
-.theme-nightmare {
- font-family: 'Georgia', serif;
- background: #000000;
- color: #8b0000;
-}
-
-.theme-nightmare .window {
- background: #0d0000;
- border: 3px solid #8b0000;
- box-shadow: 0 0 30px #ff0000;
-}
-
-.theme-nightmare .title-bar {
- background: linear-gradient(180deg, #3a0000, #000000);
- color: #ff0000;
- padding: 15px;
- text-align: center;
- text-transform: uppercase;
- letter-spacing: 5px;
- text-shadow: 0 0 10px #ff0000;
-}
-
-.theme-nightmare fieldset {
- border: 2px solid #8b0000;
-}
-
-.theme-nightmare legend {
- color: #ff0000;
- text-shadow: 0 0 5px #ff0000;
-}
-
-.theme-nightmare button {
- background: #3a0000;
- border: 2px solid #8b0000;
- color: #ff0000;
- font-family: 'Georgia', serif;
- text-transform: uppercase;
- padding: 10px 25px;
-}
-
-.theme-nightmare button:hover {
- background: #8b0000;
-}
-
-/* Vaporwave Theme */
-.theme-vaporwave {
- font-family: 'Arial', sans-serif;
- background: linear-gradient(180deg, #ff6ad5 0%, #c774e8 50%, #ad8cff 100%);
- color: #fff;
-}
-
-.theme-vaporwave .window {
- background: rgba(255, 106, 213, 0.3);
- backdrop-filter: blur(10px);
- border: 3px solid #00f0ff;
- box-shadow: 0 8px 32px rgba(0, 240, 255, 0.4);
-}
-
-.theme-vaporwave .title-bar {
- background: linear-gradient(90deg, #ff6ad5, #00f0ff);
- color: #fff;
- padding: 15px;
- text-align: center;
- text-transform: uppercase;
- letter-spacing: 4px;
- text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
-}
-
-.theme-vaporwave fieldset {
- border: 2px solid #00f0ff;
- background: rgba(255, 255, 255, 0.1);
-}
-
-.theme-vaporwave legend {
- color: #00f0ff;
- text-transform: uppercase;
-}
-
-.theme-vaporwave button {
- background: linear-gradient(135deg, #ff6ad5, #c774e8);
- border: 2px solid #00f0ff;
- color: #fff;
- text-transform: uppercase;
- padding: 12px 30px;
-}
-
-/* Nintendo Theme */
-.theme-nintendo {
- font-family: 'Arial', sans-serif;
- background: #e60012;
- color: #fff;
-}
-
-.theme-nintendo .window {
- background: #fff;
- border: 8px solid #e60012;
- border-radius: 20px;
- box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
- overflow: hidden;
-}
-
-.theme-nintendo .title-bar {
- background: #e60012;
- color: #fff;
- padding: 20px;
- text-align: center;
- font-weight: bold;
- font-size: 24px;
- letter-spacing: 2px;
-}
-
-.theme-nintendo .window-body {
- color: #484848;
-}
-
-.theme-nintendo fieldset {
- border: 3px solid #e60012;
- border-radius: 15px;
- background: #f7f7f7;
-}
-
-.theme-nintendo legend {
- color: #e60012;
-}
-
-.theme-nintendo button {
- background: #e60012;
- border: none;
- border-radius: 25px;
- color: #fff;
- text-transform: uppercase;
- padding: 12px 30px;
- box-shadow: 0 4px 0 #a00009;
-}
-
-.theme-nintendo button:hover {
- background: #ff0018;
-}
-
-.theme-nintendo button:active {
- box-shadow: 0 2px 0 #a00009;
- transform: translateY(2px);
-}
\ No newline at end of file
diff --git a/src/lib/styles/typewriter.css b/src/lib/styles/typewriter.css
new file mode 100644
index 0000000..a5df61c
--- /dev/null
+++ b/src/lib/styles/typewriter.css
@@ -0,0 +1,32 @@
+/* Typewriter Theme */
+:global(.theme-typewriter) {
+ font-family: 'Courier', monospace;
+ background: #f4e8d0;
+ color: #2c2416;
+}
+
+:global(.theme-typewriter .window) {
+ background: #fffef7;
+ border: 3px double #2c2416;
+ box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
+}
+
+:global(.theme-typewriter .title-bar) {
+ background: #2c2416;
+ color: #f4e8d0;
+ padding: 12px;
+ text-align: center;
+ text-transform: uppercase;
+ letter-spacing: 3px;
+}
+
+:global(.theme-typewriter fieldset) {
+ border: 2px solid #2c2416;
+}
+
+:global(.theme-typewriter button) {
+ background: #2c2416;
+ border: 2px solid #2c2416;
+ color: #f4e8d0;
+ font-family: 'Courier', monospace;
+}
diff --git a/src/lib/styles/vaporwave.css b/src/lib/styles/vaporwave.css
new file mode 100644
index 0000000..1257289
--- /dev/null
+++ b/src/lib/styles/vaporwave.css
@@ -0,0 +1,42 @@
+/* Vaporwave Theme */
+:global(.theme-vaporwave) {
+ font-family: 'Arial', sans-serif;
+ background: linear-gradient(180deg, #ff6ad5 0%, #c774e8 50%, #ad8cff 100%);
+ color: #fff;
+}
+
+:global(.theme-vaporwave .window) {
+ background: rgba(255, 106, 213, 0.3);
+ backdrop-filter: blur(10px);
+ border: 3px solid #00f0ff;
+ box-shadow: 0 8px 32px rgba(0, 240, 255, 0.4);
+}
+
+:global(.theme-vaporwave .title-bar) {
+ background: linear-gradient(90deg, #ff6ad5, #00f0ff);
+ color: #fff;
+ padding: 15px;
+ text-align: center;
+ text-transform: uppercase;
+ letter-spacing: 4px;
+ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+}
+
+:global(.theme-vaporwave fieldset) {
+ border: 2px solid #00f0ff;
+ background: rgba(255, 255, 255, 0.1);
+}
+
+:global(.theme-vaporwave legend) {
+ color: #00f0ff;
+ text-transform: uppercase;
+}
+
+:global(.theme-vaporwave button) {
+ background: linear-gradient(135deg, #ff6ad5, #c774e8);
+ border: 2px solid #00f0ff;
+ color: #fff;
+ text-transform: uppercase;
+ padding: 12px 30px;
+}
+
diff --git a/src/lib/styles/win95.css b/src/lib/styles/win95.css
index 5437f60..83638d1 100644
--- a/src/lib/styles/win95.css
+++ b/src/lib/styles/win95.css
@@ -1,76 +1,34 @@
-:global(body) {
- margin: 0;
- padding: 0;
-}
-
-.container {
- padding: 20px;
- min-height: 100vh;
-}
-
-.window {
- max-width: 800px;
- margin: 0 auto;
-}
-
-.window-body {
- padding: 20px;
-}
-
-fieldset {
- padding: 15px;
- margin: 15px 0;
-}
-
-legend {
- font-weight: bold;
- padding: 0 5px;
-}
-
-.button-row {
- display: flex;
- gap: 10px;
- justify-content: center;
- margin-top: 10px;
-}
-
-button {
- padding: 8px 24px;
- cursor: pointer;
- font-weight: bold;
-}
-
/* Windows 95 Theme */
-.theme-win95 {
+:global(.theme-win95 ){
font-family: 'MS Sans Serif', Arial, sans-serif;
background: #008080;
}
-.theme-win95 .window {
+:global(.theme-win95 .window) {
background: #c0c0c0;
border: 2px solid;
border-color: #dfdfdf #808080 #808080 #dfdfdf;
box-shadow: 2px 2px 0 rgba(0,0,0,0.5);
}
-.theme-win95 .title-bar {
+:global(.theme-win95 .title-bar ){
background: linear-gradient(to right, #000080, #1084d0);
color: white;
padding: 8px;
font-weight: bold;
}
-.theme-win95 fieldset {
+:global(.theme-win95 fieldset ){
border: 2px groove #c0c0c0;
}
-.theme-win95 button {
+:global(.theme-win95 button ){
background: #c0c0c0;
border: 2px solid;
border-color: #ffffff #000000 #000000 #ffffff;
font-family: 'MS Sans Serif', Arial, sans-serif;
}
-.theme-win95 button:active {
+:global(.theme-win95 button:active) {
border-color: #000000 #ffffff #ffffff #000000;
-}
\ No newline at end of file
+}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index ed553bb..aed4999 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -9,9 +9,8 @@
- On the Spectrum
+