update submit button (#1087)

* fix cloudflare issue * disable submit button
hackclub · Sep 10, 2024 · 9926932 · 9926932
1 parent 1da059a
commit 9926932
Show file tree

Hide file tree

Showing 4 changed files with 154 additions and 9 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}
@@ -162,12 +184,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 +214,7 @@
  color: white;
  font-size: 1.2em;
  margin-top: 0.5em;
+ z-index: 50;
  }
 
  #form-link {
@@ -341,7 +365,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 +379,28 @@
  transform: scale(1); /* Appear at full size */
  }
  }
-</style>
+ #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: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>