diff --git a/src/app.html b/src/app.html index de72b10..566e851 100644 --- a/src/app.html +++ b/src/app.html @@ -8,6 +8,7 @@ + %sveltekit.head% diff --git a/src/lib/styles/main.css b/src/lib/styles/main.css index fb32030..b6b05f7 100644 --- a/src/lib/styles/main.css +++ b/src/lib/styles/main.css @@ -23,7 +23,7 @@ --settings-input-bg-color: #1b1b1d; --settings-input-text-color: white; - --settomgs-input-border-color: #333; + --settings-input-border-color: #333; --shadow-color: rgba(0, 0, 0, 0.3); } @@ -53,11 +53,49 @@ --settings-input-bg-color: #f0f0f0; --settings-input-text-color: black; - --settomgs-input-border-color: #ccc; + --settings-input-border-color: #ccc; --shadow-color: rgba(0, 0, 0, 0.3); } +[data-theme='pink'] { + /* Pleasant Pink theme with good contrast */ + --bg-color: #e0218a; /* A vibrant pink for the background */ + --content-bg-color: #fddde6; /* A softer, light pink for content background */ + --text-color: #e52b50; /* Black text for high contrast and readability */ + --prompt-text-color: white; /* Black text for prompts */ + + --bingo-cell-border-color: #fb607f; /* A slightly darker pink for bingo cell borders */ + --bingo-cell-bg-color: #ffc0cb; /* Light pink for the bingo cell background */ + --bingo-cell-bg-color-hover: #e63e62; /* A medium pink for hover effect */ + --bingo-cell-clicked-bg-color: #e0218a; /* Vibrant pink for clicked state */ + + --button-bg-color: #ffc0cb; /* Black buttons for strong contrast */ + --button-color: var(--bg-color); /* Button text in vibrant pink */ + --button-bg-color-hover: #e63e62; /* Hover effect in medium pink for buttons */ + + --warning-bg-color: rgb(255, 204, 0); /* A bright yellow for warnings (keeps visibility) */ + + --overlay-bg-color: rgba(255, 255, 255, 0.8); /* Slightly transparent white overlay */ + --overlay-content-bg-color: #ffc0cb; /* Light pink background for overlay content */ + --overlay-content-border-color: #e0218a; /* Vibrant pink for overlay borders */ + + --settings-bg-color: #e0218a; /* Vibrant pink for settings background */ + --settings-element-bg-color: #ffc0cb; /* Light pink for settings element background */ + + --settings-input-bg-color: #fb607f; /* Medium pink for input background */ + --settings-input-text-color: black; /* Black text for inputs */ + --settings-input-border-color: #e63e62; /* Darker pink for input borders */ + + --shadow-color: rgba(0, 0, 0, 0.3); /* Subtle shadow to give depth */ + + body, button { + font-family: "Emilys Candy", serif; + font-weight: 400; + font-style: normal; + } +} + body { font-family: "Noto Sans", sans-serif; font-size: 16px; @@ -129,6 +167,7 @@ body { .bingo-cell.clicked { background-color: var(--bingo-cell-clicked-bg-color); + color: var(--prompt-text-color); } button { @@ -181,6 +220,7 @@ button:hover { border-radius: 8px; min-width: 300px; text-align: center; + justify-content: center; box-shadow: 0 4px 8px var(--shadow-color); border: 2px solid var(--overlay-content-border-color); } @@ -255,6 +295,7 @@ button:hover { padding: 15px; margin: 10px; border-radius: 8px; + color: var(--prompt-text-color); box-shadow: inset 0 4px 8px var(--shadow-color); } @@ -276,8 +317,10 @@ button:hover { text-align: center; margin-top: auto; margin-bottom: auto; + color: var(--prompt-text-color); } .cookie-notice { margin-top: auto; + color: var(--prompt-text-color); } diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index cf9492c..dd1bfba 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -226,17 +226,26 @@ Bingo Item 25`; } function triggerConfetti() { - // `party.confetti` can be used for screen-wide confetti - party.confetti(document.body, { - count: party.variation.range(50, 2000), // Number of confetti pieces - spread: 70, // Spread of confetti - size: party.variation.range(0.5, 1.5), // Size of confetti - }); + if (theme === 'dark') { + // `party.confetti` can be used for screen-wide confetti + party.confetti(document.body, { + count: party.variation.range(50, 2000), // Number of confetti pieces + spread: 70, // Spread of confetti + size: party.variation.range(0.5, 1.5), // Size of confetti + }); + } else { + // pink confetti + party.sparkles(document.body, { + count: party.variation.range(50, 10000), // Number of confetti pieces + speed: party.variation.range(500, 500), // Speed of confetti + size: party.variation.range(0.5, 1.5), // Size of confetti + }); + } } // Toggle between dark and light themes function toggleTheme() { - theme = theme === 'dark' ? 'light' : 'dark'; + theme = theme === 'dark' ? 'pink' : 'dark'; document.documentElement.setAttribute('data-theme', theme); setThemeCookie(theme); } @@ -301,6 +310,11 @@ Bingo Item 25`; A game is currently running. Changes made to the configuration are not being updated to the grid. {/if} + {#if theme === 'pink'} +
+ Confetti +
+ {/if} @@ -336,6 +350,10 @@ Bingo Item 25`;

Bingo!

You achieved a new Bingo!
You now have {bingoCount} Bingos.

+ {#if theme === 'pink'} + Confetti +
+ {/if}
@@ -366,7 +384,7 @@ Bingo Item 25`;

Display

- +
diff --git a/static/barbie_bingo.png b/static/barbie_bingo.png new file mode 100644 index 0000000..9c447e2 Binary files /dev/null and b/static/barbie_bingo.png differ diff --git a/static/congrats_bingo.png b/static/congrats_bingo.png new file mode 100644 index 0000000..6d929c7 Binary files /dev/null and b/static/congrats_bingo.png differ diff --git a/static/hello_barbie_bingo.png b/static/hello_barbie_bingo.png new file mode 100644 index 0000000..5a76e68 Binary files /dev/null and b/static/hello_barbie_bingo.png differ diff --git a/static/hello_kitty_bingo.png b/static/hello_kitty_bingo.png new file mode 100644 index 0000000..758f277 Binary files /dev/null and b/static/hello_kitty_bingo.png differ