Added themes to home and rules pages
This commit is contained in:
Giac
@@ -1,18 +1,18 @@
|
|||||||
<script>
|
<script>
|
||||||
export let chart;
|
export let chart;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="chart-display">
|
<div class="chart-display">
|
||||||
{#if chart.x != ''}
|
{#if chart && chart.x && chart.y}
|
||||||
<div class="axis">
|
<div class="axis">
|
||||||
<div class="axis-label">X-Axis (Horizontal)</div>
|
<div class="axis-label">X-Axis (Horizontal)</div>
|
||||||
<div>{chart.x[0]} ↔ {chart.x[1]}</div>
|
<div>{chart.x[0]} ↔ {chart.x[1]}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="axis">
|
<div class="axis">
|
||||||
<div class="axis-label">Y-Axis (Vertical)</div>
|
<div class="axis-label">Y-Axis (Vertical)</div>
|
||||||
<div>{chart.y[0]} ↔ {chart.y[1]}</div>
|
<div>{chart.y[0]} ↔ {chart.y[1]}</div>
|
||||||
</div>
|
</div>
|
||||||
{:else}
|
{:else}
|
||||||
<p class="empty-state">Click Generate!</p>
|
<div class="empty-state">Click Generate!</div>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
@@ -1,14 +1,14 @@
|
|||||||
<script>
|
<script>
|
||||||
export let diceRoll;
|
export let diceRoll;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="dice-display">
|
<div class="dice-display">
|
||||||
{#if diceRoll.x != 0}
|
{#if diceRoll}
|
||||||
<div class="dice-emoji">🎲 🎲</div>
|
<div class="dice-emoji">🎲 🎲</div>
|
||||||
<div class="dice-result">X: {diceRoll.x} | Y: {diceRoll.y}</div>
|
<div class="dice-result">X: {diceRoll.x} | Y: {diceRoll.y}</div>
|
||||||
{:else}
|
{:else}
|
||||||
<div class="empty-state">Click Roll!</div>
|
<div class="empty-state">Click Roll!</div>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
@@ -24,4 +24,3 @@
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|||||||
@@ -3,16 +3,13 @@
|
|||||||
export let currentTheme;
|
export let currentTheme;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<fieldset>
|
|
||||||
<legend>Theme Selector</legend>
|
|
||||||
|
|
||||||
<div class="button-row">
|
<div class="button-row">
|
||||||
{#each themes as theme}
|
{#each themeNames as theme}
|
||||||
<button
|
<button
|
||||||
on:click={() => currentTheme = theme}
|
on:click={() => currentTheme = theme}
|
||||||
class:active={currentTheme === theme}
|
class:active={currentTheme === theme}
|
||||||
>
|
>
|
||||||
{theme.charAt(0).toUpperCase() + theme.slice(1)}
|
{themeDisplayNames[theme]}
|
||||||
</button>
|
</button>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -46,3 +46,91 @@
|
|||||||
background: rgba(0, 255, 255, 0.05);
|
background: rgba(0, 255, 255, 0.05);
|
||||||
border: 1px solid #00ffff;
|
border: 1px solid #00ffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Home Page Styles */
|
||||||
|
.theme-cyberpunk .home-wrapper {
|
||||||
|
background: #0a0e27;
|
||||||
|
color: #00ffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-cyberpunk .home-window {
|
||||||
|
background: rgba(10, 14, 39, 0.95);
|
||||||
|
border: 2px solid #00ffff;
|
||||||
|
box-shadow: 0 0 30px #ff00ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-cyberpunk .home-title-bar {
|
||||||
|
background: linear-gradient(90deg, #ff00ff, #00ffff);
|
||||||
|
color: #000;
|
||||||
|
padding: 12px;
|
||||||
|
font-weight: bold;
|
||||||
|
text-transform: uppercase;
|
||||||
|
text-align: center;
|
||||||
|
letter-spacing: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-cyberpunk .home-content {
|
||||||
|
background: rgba(10, 14, 39, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-cyberpunk .title {
|
||||||
|
color: #00ffff;
|
||||||
|
text-shadow: 0 0 20px #00ffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-cyberpunk .subtitle {
|
||||||
|
color: #ff00ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-cyberpunk .tab-button {
|
||||||
|
background: transparent;
|
||||||
|
border: 2px solid #ff00ff;
|
||||||
|
color: #ff00ff;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-cyberpunk .tab-button:hover {
|
||||||
|
background: #ff00ff;
|
||||||
|
color: #000;
|
||||||
|
box-shadow: 0 0 20px #ff00ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Rules Page Styles */
|
||||||
|
.theme-cyberpunk .rules-wrapper {
|
||||||
|
background: #0a0e27;
|
||||||
|
color: #00ffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-cyberpunk .back-button {
|
||||||
|
background: transparent;
|
||||||
|
border: 1px solid #ff00ff;
|
||||||
|
color: #ff00ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-cyberpunk .back-button:hover {
|
||||||
|
background: #ff00ff;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-cyberpunk .rules-content {
|
||||||
|
color: #00ffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-cyberpunk h1 {
|
||||||
|
color: #00ffff;
|
||||||
|
text-shadow: 0 0 20px #00ffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-cyberpunk h2 {
|
||||||
|
color: #ff00ff;
|
||||||
|
text-shadow: 0 0 15px #ff00ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-cyberpunk h3 {
|
||||||
|
color: #00ffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-cyberpunk p,
|
||||||
|
.theme-cyberpunk li {
|
||||||
|
color: #00ffff;
|
||||||
|
}
|
||||||
@@ -47,3 +47,98 @@
|
|||||||
background: #000000;
|
background: #000000;
|
||||||
border: 2px solid #8b0000;
|
border: 2px solid #8b0000;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Home Page Styles */
|
||||||
|
.theme-nightmare .home-wrapper {
|
||||||
|
background: #000000;
|
||||||
|
color: #8b0000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-nightmare .home-window {
|
||||||
|
background: #0d0000;
|
||||||
|
border: 3px solid #8b0000;
|
||||||
|
box-shadow: 0 0 30px #ff0000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-nightmare .home-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;
|
||||||
|
font-family: 'Georgia', serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-nightmare .home-content {
|
||||||
|
background: #0d0000;
|
||||||
|
font-family: 'Georgia', serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-nightmare .title {
|
||||||
|
color: #ff0000;
|
||||||
|
text-shadow: 0 0 15px #ff0000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-nightmare .subtitle {
|
||||||
|
color: #cc0000;
|
||||||
|
text-shadow: 0 0 10px #cc0000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-nightmare .tab-button {
|
||||||
|
background: #3a0000;
|
||||||
|
border: 2px solid #8b0000;
|
||||||
|
color: #ff0000;
|
||||||
|
font-family: 'Georgia', serif;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-nightmare .tab-button:hover {
|
||||||
|
background: #8b0000;
|
||||||
|
box-shadow: 0 0 20px #ff0000;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Rules Page Styles */
|
||||||
|
.theme-nightmare .rules-wrapper {
|
||||||
|
background: #000000;
|
||||||
|
color: #8b0000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-nightmare .back-button {
|
||||||
|
background: #3a0000;
|
||||||
|
border: 2px solid #8b0000;
|
||||||
|
color: #ff0000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-nightmare .back-button:hover {
|
||||||
|
background: #8b0000;
|
||||||
|
box-shadow: 0 0 15px #ff0000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-nightmare .rules-content {
|
||||||
|
color: #8b0000;
|
||||||
|
font-family: 'Georgia', serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-nightmare h1 {
|
||||||
|
color: #ff0000;
|
||||||
|
text-shadow: 0 0 15px #ff0000;
|
||||||
|
font-family: 'Georgia', serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-nightmare h2 {
|
||||||
|
color: #cc0000;
|
||||||
|
text-shadow: 0 0 10px #cc0000;
|
||||||
|
font-family: 'Georgia', serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-nightmare h3 {
|
||||||
|
color: #ff0000;
|
||||||
|
font-family: 'Georgia', serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-nightmare p,
|
||||||
|
.theme-nightmare li {
|
||||||
|
color: #8b0000;
|
||||||
|
}
|
||||||
@@ -62,3 +62,105 @@
|
|||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
color: #484848;
|
color: #484848;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Home Page Styles */
|
||||||
|
.theme-nintendo .home-wrapper {
|
||||||
|
background: #e60012;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-nintendo .home-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 .home-title-bar {
|
||||||
|
background: #e60012;
|
||||||
|
color: #fff;
|
||||||
|
padding: 20px;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 24px;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-nintendo .home-content {
|
||||||
|
background: #fff;
|
||||||
|
color: #484848;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-nintendo .title {
|
||||||
|
color: #e60012;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-nintendo .subtitle {
|
||||||
|
color: #484848;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-nintendo .tab-button {
|
||||||
|
background: #e60012;
|
||||||
|
border: none;
|
||||||
|
border-radius: 25px;
|
||||||
|
color: #fff;
|
||||||
|
text-transform: uppercase;
|
||||||
|
box-shadow: 0 4px 0 #a00009;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-nintendo .tab-button:hover {
|
||||||
|
background: #ff0018;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-nintendo .tab-button:active {
|
||||||
|
box-shadow: 0 2px 0 #a00009;
|
||||||
|
transform: translateY(2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Rules Page Styles */
|
||||||
|
.theme-nintendo .rules-wrapper {
|
||||||
|
background: #e60012;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-nintendo .back-button {
|
||||||
|
background: #e60012;
|
||||||
|
border: none;
|
||||||
|
border-radius: 25px;
|
||||||
|
color: #fff;
|
||||||
|
box-shadow: 0 4px 0 #a00009;
|
||||||
|
padding: 8px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-nintendo .back-button:hover {
|
||||||
|
background: #ff0018;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-nintendo .back-button:active {
|
||||||
|
box-shadow: 0 2px 0 #a00009;
|
||||||
|
transform: translateY(2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-nintendo .rules-content {
|
||||||
|
color: #484848;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-nintendo h1 {
|
||||||
|
color: #e60012;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-nintendo h2 {
|
||||||
|
color: #e60012;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-nintendo h3 {
|
||||||
|
color: #00a3e0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-nintendo p,
|
||||||
|
.theme-nintendo li {
|
||||||
|
color: #484848;
|
||||||
|
}
|
||||||
@@ -40,3 +40,77 @@
|
|||||||
background: #fffef7;
|
background: #fffef7;
|
||||||
border: 1px solid #2c2416;
|
border: 1px solid #2c2416;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Home Page Styles */
|
||||||
|
.theme-typewriter .home-wrapper {
|
||||||
|
background: #f4e8d0;
|
||||||
|
color: #2c2416;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-typewriter .home-window {
|
||||||
|
background: #fffef7;
|
||||||
|
border: 3px double #2c2416;
|
||||||
|
box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-typewriter .home-title-bar {
|
||||||
|
background: #2c2416;
|
||||||
|
color: #f4e8d0;
|
||||||
|
padding: 12px;
|
||||||
|
text-align: center;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 3px;
|
||||||
|
font-family: 'Courier', monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-typewriter .home-content {
|
||||||
|
background: #fffef7;
|
||||||
|
font-family: 'Courier', monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-typewriter .title {
|
||||||
|
color: #2c2416;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-typewriter .subtitle {
|
||||||
|
color: #4a3a28;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-typewriter .tab-button {
|
||||||
|
background: #2c2416;
|
||||||
|
border: 2px solid #2c2416;
|
||||||
|
color: #f4e8d0;
|
||||||
|
font-family: 'Courier', monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-typewriter .tab-button:hover {
|
||||||
|
background: #4a3a28;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Rules Page Styles */
|
||||||
|
.theme-typewriter .rules-wrapper {
|
||||||
|
background: #f4e8d0;
|
||||||
|
color: #2c2416;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-typewriter .back-button {
|
||||||
|
background: #2c2416;
|
||||||
|
color: #f4e8d0;
|
||||||
|
border: 2px solid #2c2416;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-typewriter .back-button:hover {
|
||||||
|
background: #4a3a28;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-typewriter .rules-content {
|
||||||
|
color: #2c2416;
|
||||||
|
font-family: 'Courier', monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-typewriter h1,
|
||||||
|
.theme-typewriter h2,
|
||||||
|
.theme-typewriter h3 {
|
||||||
|
color: #2c2416;
|
||||||
|
font-family: 'Courier', monospace;
|
||||||
|
}
|
||||||
@@ -44,3 +44,91 @@
|
|||||||
background: rgba(255, 255, 255, 0.15);
|
background: rgba(255, 255, 255, 0.15);
|
||||||
border: 2px solid #ff6ad5;
|
border: 2px solid #ff6ad5;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Home Page Styles */
|
||||||
|
.theme-vaporwave .home-wrapper {
|
||||||
|
background: linear-gradient(180deg, #ff6ad5 0%, #c774e8 50%, #ad8cff 100%);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-vaporwave .home-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 .home-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 .home-content {
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-vaporwave .title {
|
||||||
|
color: #fff;
|
||||||
|
text-shadow: 2px 2px 8px rgba(0, 240, 255, 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-vaporwave .subtitle {
|
||||||
|
color: rgba(255, 255, 255, 0.95);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-vaporwave .tab-button {
|
||||||
|
background: linear-gradient(135deg, #ff6ad5, #c774e8);
|
||||||
|
border: 2px solid #00f0ff;
|
||||||
|
color: #fff;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-vaporwave .tab-button:hover {
|
||||||
|
transform: translateY(-3px);
|
||||||
|
box-shadow: 0 8px 25px rgba(0, 240, 255, 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Rules Page Styles */
|
||||||
|
.theme-vaporwave .rules-wrapper {
|
||||||
|
background: linear-gradient(180deg, #ff6ad5 0%, #c774e8 50%, #ad8cff 100%);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-vaporwave .back-button {
|
||||||
|
background: linear-gradient(135deg, #ff6ad5, #c774e8);
|
||||||
|
border: 2px solid #00f0ff;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-vaporwave .back-button:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 4px 15px rgba(0, 240, 255, 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-vaporwave .rules-content {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-vaporwave h1 {
|
||||||
|
color: #fff;
|
||||||
|
text-shadow: 2px 2px 8px rgba(0, 240, 255, 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-vaporwave h2 {
|
||||||
|
color: #00f0ff;
|
||||||
|
text-shadow: 0 0 10px #00f0ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-vaporwave h3 {
|
||||||
|
color: #ff6ad5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-vaporwave p,
|
||||||
|
.theme-vaporwave li {
|
||||||
|
color: rgba(255, 255, 255, 0.95);
|
||||||
|
}
|
||||||
@@ -10,16 +10,16 @@
|
|||||||
box-shadow: 2px 2px 0 rgba(0,0,0,0.5);
|
box-shadow: 2px 2px 0 rgba(0,0,0,0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.title-bar {
|
.theme-win95 .title-bar {
|
||||||
background: linear-gradient(to right, #000080, #1084d0);
|
background: linear-gradient(to right, #000080, #1084d0);
|
||||||
color: white;
|
color: white;
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
fieldset {
|
.theme-win95 fieldset {
|
||||||
border: 2px groove #c0c0c0;
|
border: 2px groove #c0c0c0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.theme-win95 button {
|
.theme-win95 button {
|
||||||
background: #c0c0c0;
|
background: #c0c0c0;
|
||||||
@@ -37,3 +37,70 @@
|
|||||||
background: white;
|
background: white;
|
||||||
border: 2px inset #808080;
|
border: 2px inset #808080;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Home Page Styles */
|
||||||
|
.theme-win95 .home-wrapper {
|
||||||
|
background: #008080;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-win95 .home-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 .home-title-bar {
|
||||||
|
background: linear-gradient(to right, #000080, #1084d0);
|
||||||
|
color: white;
|
||||||
|
padding: 8px;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-win95 .home-content {
|
||||||
|
background: #c0c0c0;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-win95 .tab-button {
|
||||||
|
background: #c0c0c0;
|
||||||
|
border: 2px solid;
|
||||||
|
border-color: #ffffff #000000 #000000 #ffffff;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-win95 .tab-button:hover {
|
||||||
|
background: #dfdfdf;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-win95 .tab-button:active {
|
||||||
|
border-color: #000000 #ffffff #ffffff #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Rules Page Styles */
|
||||||
|
.theme-win95 .rules-wrapper {
|
||||||
|
background: #008080;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-win95 .back-button {
|
||||||
|
background: rgba(255, 255, 255, 0.2);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-win95 .back-button:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-win95 .rules-content {
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-win95 h1,
|
||||||
|
.theme-win95 h2 {
|
||||||
|
color: #000080;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-win95 h3 {
|
||||||
|
color: #1084d0;
|
||||||
|
}
|
||||||
@@ -1,67 +1,29 @@
|
|||||||
<script lang="ts">
|
<script>
|
||||||
import favicon from '$lib/assets/favicon.svg';
|
import '$lib/styles/themes.js';
|
||||||
import ThemeSelector from '$components/themeSelector.svelte';
|
import { writable } from 'svelte/store';
|
||||||
|
import { setContext } from 'svelte';
|
||||||
|
|
||||||
let currentTheme = $state('win95');
|
// Create a theme store that persists across pages
|
||||||
let { children } = $props();
|
const theme = writable('win95');
|
||||||
|
setContext('theme', theme);
|
||||||
|
|
||||||
|
let currentTheme;
|
||||||
|
theme.subscribe(value => {
|
||||||
|
currentTheme = value;
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<svelte:head>
|
<div class="app-container theme-{currentTheme}">
|
||||||
<link rel="icon" href={favicon} />
|
<slot />
|
||||||
</svelte:head>
|
</div>
|
||||||
|
|
||||||
<!-- <svelte:body class="theme-{currentTheme}" /> -->
|
|
||||||
|
|
||||||
<nav class="title-bar theme-{currentTheme}">
|
|
||||||
<h1><a href="/">On the Spectrum</a></h1>
|
|
||||||
<ul>
|
|
||||||
<li><a href="play">Play</a></li>
|
|
||||||
<li><a href="rules">Rules</a></li>
|
|
||||||
<li><a href="submit">Submit</a></li>
|
|
||||||
</ul>
|
|
||||||
<ThemeSelector bind:currentTheme />
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<section class="theme-{currentTheme}">
|
|
||||||
{@render children()}
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
@import '$lib/styles/cyberpunk.css';
|
:global(body) {
|
||||||
@import '$lib/styles/nightmare.css';
|
margin: 0;
|
||||||
@import '$lib/styles/nintendo.css';
|
padding: 0;
|
||||||
@import '$lib/styles/typewriter.css';
|
}
|
||||||
@import '$lib/styles/vaporwave.css';
|
|
||||||
@import '$lib/styles/win95.css';
|
|
||||||
|
|
||||||
:global(body) {
|
.app-container {
|
||||||
margin: 0;
|
min-height: 100vh;
|
||||||
height: 100vh;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
nav {
|
|
||||||
display: inline-flex;
|
|
||||||
width: 100vw;
|
|
||||||
a {
|
|
||||||
text-decoration: none;
|
|
||||||
font-weight: 600;
|
|
||||||
&:visited {
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
&:hover {
|
|
||||||
color: oklch(0.6 0.186 25);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
ul {
|
|
||||||
list-style: none;
|
|
||||||
display: inline-flex;
|
|
||||||
gap: 1rem;
|
|
||||||
align-items: end;
|
|
||||||
font-size: 1.25rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
section {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
@@ -1,108 +1,144 @@
|
|||||||
<script lang="ts">
|
<script>
|
||||||
|
import { getContext } from 'svelte';
|
||||||
|
import ThemeSelector from '$lib/components/ThemeSelector.svelte';
|
||||||
|
|
||||||
|
const themeStore = getContext('theme');
|
||||||
|
let currentTheme = $themeStore;
|
||||||
|
|
||||||
|
$: themeStore.set(currentTheme);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="home-container">
|
<div class="home-wrapper">
|
||||||
<div class="home-content">
|
<div class="home-container">
|
||||||
<h1 class="title">On the Spectrum!</h1>
|
<div class="home-window">
|
||||||
<p class="subtitle">Well...are ya?</p>
|
<div class="home-title-bar">
|
||||||
|
<span>On the Spectrum</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="tabs">
|
<div class="home-content">
|
||||||
<a href="/play" class="tab-button">
|
<h1 class="title">Are you on the Spectrum?</h1>
|
||||||
<span class="tab-icon">🎮</span>
|
<p class="subtitle">A party game about preferences</p>
|
||||||
<span>Play</span>
|
|
||||||
</a>
|
<div class="tabs">
|
||||||
<a href="/rules" class="tab-button">
|
<a href="/play" class="tab-button">
|
||||||
<span class="tab-icon">📖</span>
|
<span class="tab-icon">🎮</span>
|
||||||
<span>Rules</span>
|
<span>Play</span>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
<a href="/rules" class="tab-button">
|
||||||
</div>
|
<span class="tab-icon">📖</span>
|
||||||
|
<span>Rules</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="theme-selector-container">
|
||||||
|
<fieldset>
|
||||||
|
<legend>Theme Selector</legend>
|
||||||
|
<ThemeSelector bind:currentTheme />
|
||||||
|
</fieldset>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.home-container {
|
.home-wrapper {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
padding: 20px;
|
||||||
padding: 20px;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.home-content {
|
.home-container {
|
||||||
text-align: center;
|
width: 100%;
|
||||||
max-width: 600px;
|
max-width: 700px;
|
||||||
width: 100%;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
.home-window {
|
||||||
font-size: 3.5rem;
|
width: 100%;
|
||||||
font-weight: bold;
|
}
|
||||||
color: white;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
|
|
||||||
line-height: 1.2;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
.home-content {
|
||||||
.title {
|
padding: 40px;
|
||||||
font-size: 2.5rem;
|
text-align: center;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.subtitle {
|
.title {
|
||||||
font-size: 1.5rem;
|
font-size: 3rem;
|
||||||
color: rgba(255, 255, 255, 0.9);
|
font-weight: bold;
|
||||||
margin-bottom: 3rem;
|
margin-bottom: 1rem;
|
||||||
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
|
line-height: 1.2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabs {
|
.subtitle {
|
||||||
display: flex;
|
font-size: 1.3rem;
|
||||||
gap: 20px;
|
margin-bottom: 2.5rem;
|
||||||
justify-content: center;
|
opacity: 0.9;
|
||||||
flex-wrap: wrap;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.tab-button {
|
.tabs {
|
||||||
text-decoration: none;
|
display: flex;
|
||||||
background: white;
|
gap: 20px;
|
||||||
border: none;
|
justify-content: center;
|
||||||
border-radius: 15px;
|
flex-wrap: wrap;
|
||||||
padding: 30px 50px;
|
margin-bottom: 2.5rem;
|
||||||
font-size: 1.5rem;
|
}
|
||||||
font-weight: bold;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
gap: 10px;
|
|
||||||
min-width: 200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-button:hover {
|
.tab-button {
|
||||||
transform: translateY(-5px);
|
border: none;
|
||||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
|
border-radius: 10px;
|
||||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
padding: 25px 40px;
|
||||||
color: white;
|
font-size: 1.3rem;
|
||||||
}
|
font-weight: bold;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
min-width: 180px;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
.tab-icon {
|
.tab-icon {
|
||||||
font-size: 3rem;
|
font-size: 2.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
.theme-selector-container {
|
||||||
.tab-button {
|
margin-top: 2rem;
|
||||||
padding: 20px 40px;
|
}
|
||||||
font-size: 1.2rem;
|
|
||||||
min-width: 150px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-icon {
|
.theme-selector-container fieldset {
|
||||||
font-size: 2rem;
|
padding: 20px;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
.theme-selector-container legend {
|
||||||
|
font-weight: bold;
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.title {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-button {
|
||||||
|
padding: 20px 30px;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
min-width: 150px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-icon {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home-content {
|
||||||
|
padding: 30px 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|||||||
@@ -1,34 +1,44 @@
|
|||||||
<script>
|
<script>
|
||||||
import { xAxes, yAxes } from '$lib';
|
import { getContext } from 'svelte';
|
||||||
import ChartDisplay from '$components/chartDisplay.svelte';
|
import xAxes from '$lib/data/xAxes.js';
|
||||||
import DiceRoller from '$components/diceRoller.svelte';
|
import yAxes from '$lib/data/yAxes.js';
|
||||||
|
import ChartDisplay from '$components/ChartDisplay.svelte';
|
||||||
|
import DiceRoller from '$components/DiceRoller.svelte';
|
||||||
|
import ThemeSelector from '$components/ThemeSelector.svelte';
|
||||||
|
import Toggle from '$components/Toggle.svelte';
|
||||||
|
|
||||||
let adultMode = $state(false);
|
const theme = getContext('theme');
|
||||||
let currentChart = $state({ x: [''], y: [''] });
|
let currentTheme;
|
||||||
let diceRoll = $state({ x: 0, y: 0 });
|
theme.subscribe(value => {
|
||||||
|
currentTheme = value;
|
||||||
|
});
|
||||||
|
|
||||||
function generateChart() {
|
let adultMode = false;
|
||||||
const availableXAxes = adultMode ? xAxes : xAxes.filter((axis) => !axis.adult);
|
let currentChart = null;
|
||||||
const availableYAxes = adultMode ? yAxes : yAxes.filter((axis) => !axis.adult);
|
let diceRoll = null;
|
||||||
|
|
||||||
const randomX = availableXAxes[Math.floor(Math.random() * availableXAxes.length)];
|
function generateChart() {
|
||||||
const randomY = availableYAxes[Math.floor(Math.random() * availableYAxes.length)];
|
const availableXAxes = adultMode ? xAxes : xAxes.filter(axis => !axis.adult);
|
||||||
|
const availableYAxes = adultMode ? yAxes : yAxes.filter(axis => !axis.adult);
|
||||||
|
|
||||||
currentChart = {
|
const randomX = availableXAxes[Math.floor(Math.random() * availableXAxes.length)];
|
||||||
x: randomX.values,
|
const randomY = availableYAxes[Math.floor(Math.random() * availableYAxes.length)];
|
||||||
y: randomY.values
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
function rollDice() {
|
currentChart = {
|
||||||
diceRoll = {
|
x: randomX.values,
|
||||||
x: Math.floor(Math.random() * 10) + 1,
|
y: randomY.values
|
||||||
y: Math.floor(Math.random() * 10) + 1
|
};
|
||||||
};
|
}
|
||||||
}
|
|
||||||
|
function rollDice() {
|
||||||
|
diceRoll = {
|
||||||
|
x: Math.floor(Math.random() * 10) + 1,
|
||||||
|
y: Math.floor(Math.random() * 10) + 1
|
||||||
|
};
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="container theme-{currentTheme}">
|
<div class="container">
|
||||||
<div class="window">
|
<div class="window">
|
||||||
<div class="title-bar">
|
<div class="title-bar">
|
||||||
<a href="/" class="home-button">← Home</a>
|
<a href="/" class="home-button">← Home</a>
|
||||||
@@ -38,7 +48,7 @@
|
|||||||
<div class="window-body">
|
<div class="window-body">
|
||||||
<fieldset>
|
<fieldset>
|
||||||
<legend>Theme Selector</legend>
|
<legend>Theme Selector</legend>
|
||||||
<ThemeSelector bind:currentTheme />
|
<ThemeSelector bind:currentTheme={$theme} />
|
||||||
</fieldset>
|
</fieldset>
|
||||||
|
|
||||||
<fieldset>
|
<fieldset>
|
||||||
@@ -56,7 +66,7 @@
|
|||||||
|
|
||||||
<fieldset>
|
<fieldset>
|
||||||
<legend>Position Roller</legend>
|
<legend>Position Roller</legend>
|
||||||
<DiceRoller roll={diceRoll} />
|
<DiceRoller diceRoll={diceRoll} />
|
||||||
<div class="button-row">
|
<div class="button-row">
|
||||||
<button on:click={rollDice}>Roll Dice</button>
|
<button on:click={rollDice}>Roll Dice</button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,105 +1,200 @@
|
|||||||
<script lang="ts">
|
<script>
|
||||||
import { goto } from '$app/navigation';
|
import { getContext } from 'svelte';
|
||||||
|
import ThemeSelector from '$lib/components/ThemeSelector.svelte';
|
||||||
|
|
||||||
function goHome() {
|
const themeStore = getContext('theme');
|
||||||
goto('/');
|
let currentTheme = $themeStore;
|
||||||
}
|
|
||||||
|
$: themeStore.set(currentTheme);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="rules-container">
|
<div class="rules-wrapper">
|
||||||
<div class="rules-content">
|
<div class="rules-container">
|
||||||
<button class="back-button" on:click={() => goHome()}>← Back to Home</button>
|
<div class="window">
|
||||||
|
<div class="title-bar">
|
||||||
|
<a href="/" class="back-button">← Back</a>
|
||||||
|
<span>Rules</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
<h1>How to Play</h1>
|
<div class="window-body">
|
||||||
|
<fieldset>
|
||||||
|
<legend>Theme Selector</legend>
|
||||||
|
<ThemeSelector bind:currentTheme />
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
<section>
|
<div class="rules-content">
|
||||||
<h2>🎯 Objective</h2>
|
<h1>How to Play</h1>
|
||||||
<p>--</p>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<h2>🎮 Setup</h2>
|
<h2>🎲 Setup</h2>
|
||||||
<ol>
|
<ol>
|
||||||
<li></li>
|
<li>Gather 2+ players</li>
|
||||||
<li></li>
|
<li>Each player needs paper and something to write with</li>
|
||||||
<li></li>
|
<li>Choose a theme (optional but fun!)</li>
|
||||||
</ol>
|
<li>Decide if you want Adult Mode enabled (18+)</li>
|
||||||
</section>
|
</ol>
|
||||||
|
</section>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<h2>📊 How to Play</h2>
|
<h2>📊 Basic Gameplay</h2>
|
||||||
<ol>
|
<ol>
|
||||||
<li><strong>Generate a Chart:</strong> Click "Generate" to get a random spectrum with X and Y axes</li>
|
<li><strong>Generate:</strong> Click "Generate" to create a random 2D spectrum with X and Y axes</li>
|
||||||
</ol>
|
<li><strong>Plot:</strong> Each player marks where they fall on the spectrum (1-10 on each axis)</li>
|
||||||
</section>
|
<li><strong>Reveal:</strong> Players show their positions simultaneously</li>
|
||||||
|
<li><strong>Discuss:</strong> Talk about why you're positioned where you are</li>
|
||||||
|
<li><strong>Repeat:</strong> Generate a new spectrum and keep playing!</li>
|
||||||
|
</ol>
|
||||||
|
</section>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<h2>Points</h2>
|
<h2>🎮 Game Variants</h2>
|
||||||
<p><strong>5 Points:</strong>0 away</p>
|
|
||||||
<p><strong>4 Points:</strong>1 away</p>
|
|
||||||
<p><strong>3 Points:</strong>2 away</p>
|
|
||||||
<p><strong>2 Points:</strong>3 away</p>
|
|
||||||
<p><strong>1 Point:</strong>4 away</p>
|
|
||||||
<p><strong>0 Points:</strong>5+ away</p>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section>
|
<h3>Classic Mode</h3>
|
||||||
<h2>💡 Tips</h2>
|
<p>Players honestly plot their positions and discuss their reasoning. Great for getting to know each other!</p>
|
||||||
<ul>
|
|
||||||
<li>--</li>
|
<h3>Dice Challenge</h3>
|
||||||
</ul>
|
<p>Click "Roll Dice" to get random coordinates (X and Y). Players must defend that position as if it were their true preference. First player to convince the group wins that round!</p>
|
||||||
</section>
|
|
||||||
|
<h3>Prediction Mode</h3>
|
||||||
|
<p>Before revealing, each player predicts where another player will land. Earn points for accurate predictions!</p>
|
||||||
|
|
||||||
|
<h3>Debate Mode</h3>
|
||||||
|
<p>Players on opposite extremes of a spectrum engage in a friendly debate. The group votes on the most convincing argument.</p>
|
||||||
|
|
||||||
|
<h3>Speed Round</h3>
|
||||||
|
<p>Generate 5 spectrums. Players have only 10 seconds to plot each position. Quick thinking required!</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>📏 Understanding the Scale</h2>
|
||||||
|
<p>Each axis uses a 1-10 scale:</p>
|
||||||
|
<ul>
|
||||||
|
<li><strong>1-2:</strong> Strongly aligned with left/bottom option</li>
|
||||||
|
<li><strong>3-4:</strong> Prefer left/bottom, but not extremely</li>
|
||||||
|
<li><strong>5-6:</strong> Slightly prefer right/top</li>
|
||||||
|
<li><strong>7-8:</strong> Prefer right/top, but not extremely</li>
|
||||||
|
<li><strong>9-10:</strong> Strongly aligned with right/top option</li>
|
||||||
|
</ul>
|
||||||
|
<p><em>Note: You can land anywhere on the spectrum, including exactly in the middle!</em></p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>🏆 Scoring (Optional)</h2>
|
||||||
|
<p>Want to make it competitive? Try these scoring systems:</p>
|
||||||
|
<ul>
|
||||||
|
<li><strong>Uniqueness Points:</strong> Award 1 point to the player whose position is most different from others</li>
|
||||||
|
<li><strong>Prediction Points:</strong> 3 points for exact predictions, 1 point for being within 2 units on both axes</li>
|
||||||
|
<li><strong>Debate Points:</strong> Winner of each debate gets 2 points</li>
|
||||||
|
<li><strong>Dice Challenge:</strong> 3 points for successfully defending a random position</li>
|
||||||
|
</ul>
|
||||||
|
<p>First to 15 points wins!</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>🔞 Adult Mode</h2>
|
||||||
|
<p>Toggle Adult Mode to include spectrums about:</p>
|
||||||
|
<ul>
|
||||||
|
<li>Relationships and dating</li>
|
||||||
|
<li>Social drinking and nightlife</li>
|
||||||
|
<li>Personal boundaries</li>
|
||||||
|
<li>Other mature topics</li>
|
||||||
|
</ul>
|
||||||
|
<p><strong>Adult Mode is intended for players 18+ only.</strong> Make sure everyone is comfortable before enabling it.</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>💡 Pro Tips</h2>
|
||||||
|
<ul>
|
||||||
|
<li><strong>Be honest:</strong> The game is most fun when people share their real preferences</li>
|
||||||
|
<li><strong>Ask questions:</strong> Don't just see where people land—ask them why!</li>
|
||||||
|
<li><strong>No judgment:</strong> Remember, these are preferences, not right or wrong answers</li>
|
||||||
|
<li><strong>Embrace extremes:</strong> Landing at 1 or 10 often leads to the best discussions</li>
|
||||||
|
<li><strong>Change your mind:</strong> It's okay to revise your position after hearing others' perspectives</li>
|
||||||
|
<li><strong>Keep it light:</strong> Even in debate mode, keep things fun and friendly</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>🎨 About Themes</h2>
|
||||||
|
<p>Choose from six visual themes to customize your experience:</p>
|
||||||
|
<ul>
|
||||||
|
<li><strong>Windows 95:</strong> Nostalgic retro computing vibes</li>
|
||||||
|
<li><strong>Cyberpunk:</strong> Neon-soaked futuristic aesthetic</li>
|
||||||
|
<li><strong>Typewriter:</strong> Classic vintage paper look</li>
|
||||||
|
<li><strong>Nightmare:</strong> Dark and spooky atmosphere</li>
|
||||||
|
<li><strong>Vaporwave:</strong> Dreamy 80s-90s nostalgia</li>
|
||||||
|
<li><strong>Nintendo:</strong> Bold and playful gaming style</li>
|
||||||
|
</ul>
|
||||||
|
<p>Themes are purely cosmetic—pick what speaks to your vibe!</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>❓ FAQ</h2>
|
||||||
|
<p><strong>Can I play solo?</strong><br>
|
||||||
|
While designed for groups, you can use it for self-reflection or to prep for game night!</p>
|
||||||
|
|
||||||
|
<p><strong>How many spectrums are there?</strong><br>
|
||||||
|
Hundreds! The X and Y axes are randomly combined, creating thousands of possible spectrums.</p>
|
||||||
|
|
||||||
|
<p><strong>What if I'm perfectly neutral?</strong><br>
|
||||||
|
Mark yourself at 5 or 6 on that axis. True neutrality is rare and interesting!</p>
|
||||||
|
|
||||||
|
<p><strong>Can we make our own rules?</strong><br>
|
||||||
|
Absolutely! These are guidelines. House rules are encouraged!</p>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.rules-container {
|
.rules-wrapper {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
padding: 40px 20px;
|
padding: 40px 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.rules-content {
|
.rules-container {
|
||||||
max-width: 800px;
|
width: 100%;
|
||||||
margin: 0 auto;
|
max-width: 900px;
|
||||||
background: white;
|
}
|
||||||
border-radius: 20px;
|
|
||||||
padding: 40px;
|
.title-bar {
|
||||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.back-button {
|
.back-button {
|
||||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
padding: 5px 15px;
|
||||||
color: white;
|
|
||||||
border: none;
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 10px 20px;
|
|
||||||
font-size: 16px;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
margin-bottom: 30px;
|
border-radius: 4px;
|
||||||
transition: transform 0.2s;
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
font-weight: bold;
|
||||||
|
transition: all 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.back-button:hover {
|
.rules-content {
|
||||||
transform: translateY(-2px);
|
padding: 20px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
color: #333;
|
|
||||||
font-size: 2.5rem;
|
font-size: 2.5rem;
|
||||||
margin-bottom: 30px;
|
margin-bottom: 30px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
color: #667eea;
|
|
||||||
font-size: 1.8rem;
|
font-size: 1.8rem;
|
||||||
margin-top: 30px;
|
margin-top: 30px;
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
color: #764ba2;
|
|
||||||
font-size: 1.3rem;
|
font-size: 1.3rem;
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
@@ -110,13 +205,11 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
color: #555;
|
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
ol, ul {
|
ol, ul {
|
||||||
color: #555;
|
|
||||||
line-height: 1.8;
|
line-height: 1.8;
|
||||||
padding-left: 25px;
|
padding-left: 25px;
|
||||||
}
|
}
|
||||||
@@ -126,11 +219,15 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
strong {
|
strong {
|
||||||
color: #333;
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
em {
|
||||||
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.rules-content {
|
.rules-wrapper {
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user