mirror of
https://github.com/pupperpowell/bibdle.git
synced 2026-08-22 22:32:28 -04:00
Added donation button
This commit is contained in:
George Powell
@@ -68,6 +68,7 @@
|
||||
let copyTracked = $state(false);
|
||||
let showSnippetOption = $state(false);
|
||||
let includeSnippet = $state(false);
|
||||
let showProgressDropdown = $state(false);
|
||||
|
||||
let effectiveShareText = $derived(
|
||||
includeSnippet
|
||||
@@ -333,20 +334,35 @@
|
||||
|
||||
{#if isLoggedIn}
|
||||
<div class="signin-prompt">
|
||||
<div class="rainbow-glow w-full">
|
||||
<a
|
||||
href="/progress"
|
||||
class="flex flex-col items-center justify-center gap-1 w-full p-4 mb-2 bg-white dark:bg-gray-900 border-2 border-black/40 dark:border-white/40 rounded-2xl shadow-sm text-gray-800 dark:text-gray-100 text-base font-semibold no-underline transition-transform duration-100 hover:-translate-y-px active:scale-[0.98]"
|
||||
>
|
||||
📈 See your progress
|
||||
</a>
|
||||
</div>
|
||||
<a
|
||||
href="/progress"
|
||||
class="progress-btn w-full"
|
||||
data-umami-event="See your progress (logged in)"
|
||||
>
|
||||
<span>📈 See your progress</span>
|
||||
<svg class="progress-chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||
<path d="m9 18 6-6-6-6" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="signin-prompt">
|
||||
<p class="signin-text text-gray-800 dark:text-gray-300">
|
||||
Create an account (or sign in) to track your progress
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
class="progress-btn w-full"
|
||||
aria-expanded={showProgressDropdown}
|
||||
onclick={() => (showProgressDropdown = !showProgressDropdown)}
|
||||
data-umami-event="See your progress (logged out)"
|
||||
>
|
||||
<span>📈 See your progress</span>
|
||||
<svg class="progress-chev" class:open={showProgressDropdown} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||
<path d="m6 9 6 6 6-6" />
|
||||
</svg>
|
||||
</button>
|
||||
{#if showProgressDropdown}
|
||||
<p class="signin-text text-gray-800 dark:text-gray-300">
|
||||
Create an account (or sign in) to track your progress
|
||||
</p>
|
||||
<form method="POST" action="/auth/apple" class="w-full">
|
||||
<input type="hidden" name="anonymousId" value={anonymousId} />
|
||||
<button
|
||||
@@ -398,8 +414,52 @@
|
||||
Sign in with Google
|
||||
</button>
|
||||
</form>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="signin-prompt">
|
||||
<a
|
||||
href="https://discord.gg/yWQXbGK8SD"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="discord-btn w-full"
|
||||
data-umami-event="Join the BIBDLE Discord"
|
||||
>
|
||||
<svg
|
||||
class="discord-icon"
|
||||
viewBox="0 0 127.14 96.36"
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"
|
||||
/>
|
||||
</svg>
|
||||
<span>Join the BIBDLE Discord!</span>
|
||||
<svg class="progress-chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||
<path d="m9 18 6-6-6-6" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="signin-prompt">
|
||||
<a
|
||||
href="https://donate.stripe.com/9B6aEZ9WgeZF3qYfF987K00"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="progress-btn w-full"
|
||||
data-umami-event="Support bibdle's development"
|
||||
>
|
||||
<span>❤️ Support bibdle's development</span>
|
||||
<svg class="progress-chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||
<path d="m9 18 6-6-6-6" />
|
||||
</svg>
|
||||
</a>
|
||||
<div class="big-text font-black! text-center text-gray-300! mt-2">
|
||||
BIBDLE will be ad-free forever.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
@@ -680,45 +740,59 @@
|
||||
transform: translateX(16px);
|
||||
}
|
||||
|
||||
/* ── Apple Sign In prompt ── */
|
||||
.rainbow-glow {
|
||||
position: relative;
|
||||
border-radius: 1rem;
|
||||
/* ── See your progress button (neobrutalist) ── */
|
||||
.progress-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.85rem 1.25rem;
|
||||
background: #fff;
|
||||
color: #111;
|
||||
border: 2px solid #000;
|
||||
border-radius: 0.75rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
box-shadow: 6px 6px 0 0 #000;
|
||||
transition:
|
||||
transform 80ms ease,
|
||||
box-shadow 80ms ease;
|
||||
}
|
||||
|
||||
.rainbow-glow::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0px;
|
||||
border-radius: 1.25rem;
|
||||
background: conic-gradient(
|
||||
from var(--angle, 0deg),
|
||||
#ff0080,
|
||||
#ff8c00,
|
||||
#ffd700,
|
||||
#00ff88,
|
||||
#00cfff,
|
||||
#a855f7,
|
||||
#ff0080
|
||||
);
|
||||
animation: rainbow-rotate 6s linear infinite;
|
||||
filter: blur(8px);
|
||||
opacity: 0.75;
|
||||
z-index: -1;
|
||||
.progress-btn:hover {
|
||||
transform: translate(-2px, -2px);
|
||||
box-shadow: 8px 8px 0 0 #000;
|
||||
}
|
||||
|
||||
@property --angle {
|
||||
syntax: "<angle>";
|
||||
initial-value: 0deg;
|
||||
inherits: false;
|
||||
.progress-btn:active {
|
||||
transform: translate(2px, 2px);
|
||||
box-shadow: 2px 2px 0 0 #000;
|
||||
}
|
||||
|
||||
@keyframes rainbow-rotate {
|
||||
0% {
|
||||
--angle: 0deg;
|
||||
.progress-chev {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
transition: transform 200ms ease;
|
||||
}
|
||||
|
||||
.progress-chev.open {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.progress-btn {
|
||||
background: #111827;
|
||||
color: #f9fafb;
|
||||
border-color: #fff;
|
||||
box-shadow: 6px 6px 0 0 #fff;
|
||||
}
|
||||
100% {
|
||||
--angle: 360deg;
|
||||
.progress-btn:hover {
|
||||
box-shadow: 8px 8px 0 0 #fff;
|
||||
}
|
||||
.progress-btn:active {
|
||||
box-shadow: 2px 2px 0 0 #fff;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -730,6 +804,59 @@
|
||||
/*padding: 1rem 0 0.25rem;*/
|
||||
}
|
||||
|
||||
/* ── Discord button (neobrutalist, discord purple) ── */
|
||||
.discord-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.85rem 1.25rem;
|
||||
background: #5865f2;
|
||||
color: #fff;
|
||||
border: 2px solid #000;
|
||||
border-radius: 0.75rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
box-shadow: 6px 6px 0 0 #000;
|
||||
transition:
|
||||
transform 80ms ease,
|
||||
box-shadow 80ms ease,
|
||||
background-color 120ms ease;
|
||||
}
|
||||
|
||||
.discord-btn:hover {
|
||||
transform: translate(-2px, -2px);
|
||||
box-shadow: 8px 8px 0 0 #000;
|
||||
background: #4752c4;
|
||||
}
|
||||
|
||||
.discord-btn:active {
|
||||
transform: translate(2px, 2px);
|
||||
box-shadow: 2px 2px 0 0 #000;
|
||||
background: #3c45a5;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.discord-btn {
|
||||
border-color: #fff;
|
||||
box-shadow: 6px 6px 0 0 #fff;
|
||||
}
|
||||
.discord-btn:hover {
|
||||
box-shadow: 8px 8px 0 0 #fff;
|
||||
}
|
||||
.discord-btn:active {
|
||||
box-shadow: 2px 2px 0 0 #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.discord-icon {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.signin-text {
|
||||
font-size: 0.85rem;
|
||||
text-align: center;
|
||||
|
||||
Reference in New Issue
Block a user