Skip to content

Commit 8059c96

Browse files
ArcaEgeArcaEge
authored
Merge pull request #27 from bbarni2020/main
Add swag modal with stickers and 3D keychain preview
2 parents 7d03d0c + d04b470 commit 8059c96

File tree

1 file changed

+49
-70
lines changed

1 file changed

+49
-70
lines changed

‎src/routes/+page.svelte‎

Lines changed: 49 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@
1010
import model from '$lib/assets/Construct Logo.3mf?url';
1111
import modelImage from '$lib/assets/model.png';
1212
import keyringModel from '$lib/assets/keyring.obj?url';
13-
import sticker1 from '$lib/assets/sticker1.png';
14-
import sticker2 from '$lib/assets/sticker2.png';
13+
import sticker1Image from '$lib/assets/sticker1.png';
14+
import sticker2Image from '$lib/assets/sticker2.png';
1515
1616
let { data } = $props();
1717
@@ -217,7 +217,11 @@
217217
});
218218
219219
$effect(() => {
220-
if (!showStickersSection || keyringInitialized || !keyringModel) {
220+
if (!showStickersSection) {
221+
return;
222+
}
223+
224+
if (keyringInitialized || !keyringModel) {
221225
return;
222226
}
223227
@@ -381,7 +385,10 @@
381385
<button
382386
class="button md fixed top-4 right-4 z-50 border-3 border-orange-900 bg-orange-800 outline-orange-50 transition-all hover:scale-105 hover:bg-orange-700 animate-[bounce_2.5s_ease-in-out_infinite]"
383387
style="transform: rotate(-2deg);"
384-
onclick={() => (showStickersSection = !showStickersSection)}
388+
onclick={() => {
389+
keyringInitialized = false;
390+
showStickersSection = !showStickersSection;
391+
}}
385392
>
386393
Free swag!
387394
</button>
@@ -415,7 +422,7 @@
415422

416423
<div class="mx-auto max-w-4xl">
417424
<div class="mb-8 text-center">
418-
<h2 class="mb-2 text-3xl font-bold sm:text-5xl">
425+
<h2 class="mb-2 text-2xl font-bold sm:text-3xl">
419426
Free swag with your first submission
420427
</h2>
421428
<p class="text-lg font-medium text-primary-300">
@@ -427,13 +434,13 @@
427434
<div class="themed-box p-6">
428435
<div class="mb-4 flex h-56 items-center justify-center gap-3 overflow-hidden rounded-lg border-2 border-primary-900 bg-primary-900">
429436
<img
430-
src={sticker1}
437+
src={sticker1Image}
431438
alt="Construct sticker 1"
432439
class="h-40 w-40 animate-[spin_20s_linear_infinite] object-contain"
433440
style="animation-direction: normal;"
434441
/>
435442
<img
436-
src={sticker2}
443+
src={sticker2Image}
437444
alt="Construct sticker 2"
438445
class="h-40 w-40 animate-[spin_20s_linear_infinite] object-contain"
439446
style="animation-direction: reverse;"
@@ -525,70 +532,42 @@
525532

526533
<Rules idvDomain={data.idvDomain} />
527534

528-
<div class="mt-20 flex flex-col items-center justify-center px-10">
529-
<h1 class="mb-3 text-center text-2xl font-bold sm:text-4xl">Frequently asked questions</h1>
530-
<div class="w-full max-w-2xl">
531-
<Accordion text="Is this free?">
532-
<p>
533-
Yes! This program is entirely funded by <a href="https://hackclub.com" class="underline">
534-
Hack Club
535-
</a>, a US-based 501(c)(3) charity helping teens learn how to design and code, with sponsors
536-
such as <a href="https://github.com" class="underline">GitHub</a>.
537-
</p>
538-
</Accordion>
539-
540-
<Accordion text="What can I make?">
541-
<p>
542-
Anything created with 3D modelling CAD software! Keychains, models, art, or even functional parts. You can include hardware (bearings, motors, PCBs) at your own cost. However, you must use one of the <a href="/approved-editors" class="underline">approved editors</a>.
543-
</p>
544-
</Accordion>
545-
546-
<Accordion text="What are the requirements to get a 3D printer?">
547-
<p>Accumulate 40 clay (earned at 1 per hour journaled). That's enough to buy a base 3D printer.</p>
548-
</Accordion>
549-
550-
<Accordion text="What are the requirements to participate?">
551-
<p>
552-
You must be 13-18 years old and have verified your identity on our <a
553-
href={`https://${data.idvDomain}`}
554-
class="underline"
555-
>
556-
identity platform
557-
</a>. You also need to be part of the <a href="https://hackclub.com/slack/" class="underline">Hack Club Slack</a>.
558-
</p>
559-
</Accordion>
560-
<Accordion text="How do I earn prizes?">
561-
<p>
562-
Earn 1 clay bag per hour you work and journal. Clay is the currency to buy a 3D printer—the cheapest is 40 clay! After you buy a printer, you'll earn 12 bricks per hour instead, which you can use to upgrade or buy from the Brick Shop.
563-
</p>
564-
</Accordion>
565-
<Accordion text="How do I track my time?">
566-
<p>
567-
Use the journaling feature on your project page. Each entry caps at 2 hours, and you can only log time that's actually elapsed since your last entry. If you lose hours, we can't recover them.
568-
</p>
569-
</Accordion>
570-
<Accordion text="Do I have to build my project?">
571-
<p class="mb-2">
572-
Yes! Two options:
573-
</p>
574-
<ul class="list-inside list-disc space-y-1 text-sm">
575-
<li><strong>We print for you:</strong> Cost deducted from earnings (best for 3D-only projects)</li>
576-
<li><strong>You build it:</strong> At your own cost (good for hardware + CAD combos)</li>
577-
</ul>
578-
</Accordion>
579-
<Accordion text="Can I work on multiple projects?">
580-
<p>
581-
Yes, as long as each meets the 2-hour minimum. You can also continue working on existing projects (only hours logged after Construct starts count).
582-
</p>
583-
</Accordion>
535+
<div class="mt-20 flex flex-col items-center justify-center px-10">
536+
<h1 class="mb-3 text-center text-2xl font-bold sm:text-4xl">Frequently asked questions</h1>
537+
<div class="w-full max-w-2xl">
538+
<Accordion text="Is this free?">
539+
<p>
540+
Yes! This program is entirely funded by <a href="https://hackclub.com" class="underline">
541+
Hack Club
542+
</a>, a US-based 501(c)(3) charity helping teens learn how to design and code, with sponsors
543+
such as <a href="https://github.com" class="underline">GitHub</a>.
544+
</p>
545+
</Accordion>
546+
<Accordion text="What can I make?">
547+
<p>
548+
Any reasonable CAD project is fine, get creative! However, you must use one of the <a
549+
href="/approved-editors"
550+
class="underline">approved editors</a
551+
>.
552+
</p>
553+
</Accordion>
554+
<Accordion text="What are the requirements to get a 3D printer?">
555+
<p>You must ship at least 40 hours' worth of projects by the end of the event.</p>
556+
</Accordion>
557+
<Accordion text="What are the requirements to participate?">
558+
<p>
559+
You must be between the ages 13-18 and have verified your identity on our <a
560+
href={`https://${data.idvDomain}`}
561+
class="underline"
562+
>
563+
identity platform
564+
</a>.
565+
</p>
566+
</Accordion>
567+
</div>
568+
</div>
584569

585-
<Accordion text="What happens if I commit hour inflation?">
586-
<p>
587-
It's not tolerated in Hack Club. You'll face indefinite ban from Construct and all future YSWS programs. If you believe you were banned unfairly, DM @Fraud Squad on Slack to appeal. Please don't fraud—it takes attention away from people doing honest work.
588-
</p>
589-
</Accordion>
590-
</div>
591-
</div><div class="mt-15 mb-30 flex flex-col items-center justify-center gap-5 px-10">
570+
<div class="mt-15 mb-30 flex flex-col items-center justify-center gap-5 px-10">
592571
<h1 class="text-center text-3xl font-bold sm:text-4xl">Ready?</h1>
593572
<div class="w-full max-w-2xl text-center">
594573
{#if data.loggedIn}

0 commit comments

Comments
 (0)