disable submit button

hackclub · Sep 10, 2024 · 2063de5 · 2063de5
1 parent c5758ee
commit 2063de5
Show file tree

Hide file tree

Showing 4 changed files with 161 additions and 8 deletions.
diff --git a/showcase/package.json b/showcase/package.json
@@ -33,6 +33,7 @@
 	"prepare": "svelte-kit sync",
 	"type": "module",
 	"dependencies": {
+		"@hackclub/banner": "^1.0.3",
 		"@threlte/core": "^7.3.1",
 		"@threlte/extras": "^8.11.5",
 		"@threlte/flex": "^1.0.3",

diff --git a/showcase/pnpm-lock.yaml b/showcase/pnpm-lock.yaml
diff --git a/showcase/src/app.html b/showcase/src/app.html
@@ -3,10 +3,12 @@
 	<head>
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<title>OnBoard Showcase</title>
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover">
 		<div style="display: contents">%sveltekit.body%</div>
 	</body>
+
 </html>
diff --git a/showcase/src/routes/+page.svelte b/showcase/src/routes/+page.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import Gallery from '$lib/components/App.svelte';
-
 	// Define the structure of a random item
 	interface RandomItem {
 		part: string;
@@ -17,8 +16,8 @@
 	);
 	let randomItems: RandomItem[] = [];
 
-	let innerWidth = 0;
-	let innerHeight = 0;
+	let innerWidth = 400;
+	let innerHeight = 700;
 
 	// Function to generate random positions
 	function getRandomPosition(): { x: number; y: number } {
@@ -45,7 +44,21 @@
 	// Update positions every 5 seconds
 	setInterval(() => {
 		randomItems = createRandomParts();
-	}, 9000); // Adjust interval time as needed
+	}, 3000); // Adjust interval time as needed
+
+	// Variables for click tracking and redirect
+	let clickCount = 0;
+	let maxClicks = 20;
+	let isDisabled = false;
+
+	// Function to handle button click
+	function handleClick() {
+		clickCount += 1;
+		if (clickCount >= maxClicks) {
+			window.location.href = "https://www.youtube.com/watch?v=QvCoISXfcE8"; // Change this to your desired URL
+			console.log("Redirecting to form...");
+		}
+	}
 </script>
 
 <svelte:window bind:innerWidth bind:innerHeight />
@@ -61,8 +74,17 @@
 			<h3>OnBoard's Month Showcase</h3>
 			<h5>Create a PCB, get a second grant</h5>
 		</div>
-		<a id="form-link" class="hoverable" href="https://onboard.hackclub.com/submit" target="_blank">
+		<a
+			id="form-link"
+			class="hoverable disabled"
+			role="button"
+			tabindex="0"
+			on:click={handleClick}
+			on:keydown={(e) => e.key === 'Enter' && handleClick()}
+			style="pointer-events: {isDisabled ? 'none' : 'auto'}"
+		>
 			Submit your project
+			<span class="coming-soon">Coming Soon</span>
 		</a>
 
 		{#each randomItems as item}
@@ -75,6 +97,7 @@
 		{/each}
 	</header>
 
+
 	<main id="content">
 		<div class="container">
 			<h2>How to Join the Fun</h2>
@@ -162,12 +185,13 @@
 		font-family: 'Poppins', sans-serif;
 		background: #f1f1f1;
 		font-size: 1.2em;
-		overflow-y: auto;
+		z-index: -1;
+		box-shadow: 0 0 50px rgba(77, 76, 119, 0.9) inset;
 	}
 
 	header {
 		padding: 2em;
-		background: linear-gradient(to bottom right, #6a5acd, #483d8b);
+		background: linear-gradient(to Top, #6a5acd, #3c3569);
 		display: flex;
 		justify-content: center;
 		align-items: center;
@@ -191,6 +215,7 @@
 		color: white;
 		font-size: 1.2em;
 		margin-top: 0.5em;
+		z-index: 50;
 	}
 
 	#form-link {
@@ -208,6 +233,8 @@
 		background: #ff8c00;
 	}
 
+
+
 	.grid-steps {
 		display: grid;
 		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
@@ -341,7 +368,7 @@
 		opacity: 0;
 		transition: transform 1s ease; /* Smooth transition for changing positions */
 		scale: 0.1;
-		z-index: 50; /* Behind other elements */
+		overflow: hidden;
 	}
 
 	@keyframes appearDisappear {
@@ -355,4 +382,33 @@
 			transform: scale(1); /* Appear at full size */
 		}
 	}
+	#form-link {
+		margin-top: 2em;
+		padding: 0.7em 1em;
+		background: #d3d3d3;
+		border-radius: 0.5em;
+		color: #fff;
+		font-weight: 700;
+		text-decoration: none;
+		opacity: 0.7;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		z-index: 5;
+	}
+
+	#form-link.disabled {
+	}
+
+	#form-link:hover {
+		background: #d3d3d3; /* Keep it greyed out */
+	}
+
+	#form-link span.coming-soon {
+		font-size: 0.8em; /* Slightly smaller font */
+		color: #6a6a6a;
+		margin-top: 0.3em;
+	}
+
+
 </style>