gallery proof of concept

hackclub · Jan 14, 2025 · 01a909b · 01a909b
1 parent f08a5bf
commit 01a909b
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 17 deletions.
diff --git a/gallery.html b/gallery.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Gallery | Minus Twelve</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width">
+    <link rel="stylesheet" href="style.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..600;1,300..600&display=swap" rel="stylesheet">
+  </head>
+  <body>
+    <a href="https://hackclub.com" target="_blank" rel="noopener noreferrer">
+      <img id="flag" src="assets/flag-orpheus-left-bw.svg" />
+    </a>
+    <center id="hero">
+      <h1 id="gallery">gallery</h1>
+      <h4><span id="in_total">In total, there are</span> <span id="n_submissions">...</span></h4>
+      <a id="home_link" href="https://minustwelve.hackclub.com">Back</a>
+    </center>
+    <center id="arrow_container">
+      <img id="arrow" src="assets/arrow-down.svg">
+    </center>
+    <main id="main">
+    </main>
+    <footer>
+      <center id="footer">
+        <p><span class="muted">(c)</span> 2025 <a href="https://hackclub.com" target="_blank" rel="noopener noreferrer">Hack Club</a></p>
+        <p>Made with <img id="love" src="assets/heart.svg"> by <a href="https://github.com/sporeball" target="_blank">@lux</a></p>
+      </center>
+    </footer>
+    <script src="gallery.js"></script>
+  </body>
+</html>
diff --git a/gallery.js b/gallery.js
@@ -0,0 +1,32 @@
+async function get_json(url) {
+  const response = await fetch(url, { cache: 'no-cache' });
+  let json;
+  if (response.ok) {
+    json = await response.json();
+  }
+  return json;
+}
+
+function append_submission(submission) {
+  console.log(submission);
+  let e_section = document.createElement('div');
+  e_section.classList.add('section');
+  let e_name = document.createElement('h2');
+  e_name.innerHTML = submission.name;
+  let e_links = document.createElement('p');
+  e_links.innerHTML = `<a href="${submission.repo_link}" target="_blank">Repository</a> &middot; <a href="${submission.package_link}" target="_blank">Package</a>`
+  let e_description = document.createElement('blockquote');
+  e_description.innerHTML = submission.description;
+  e_section.appendChild(e_name);
+  e_section.appendChild(e_links);
+  e_section.appendChild(e_description);
+  document.getElementById('main').appendChild(e_section);
+}
+
+get_json('./submissions.json').then(json => {
+  const submissions = json.submissions;
+  document.getElementById('n_submissions').innerHTML = `${submissions.length} submissions`;
+  for (let i = 0; i < submissions.length; i++) {
+    append_submission(submissions[i]);
+  }
+})
diff --git a/index.html b/index.html
@@ -17,7 +17,7 @@
       <p id="huddle">Coming soon...</p>
       <h1><span id="minus">minus</span> <span id="twelve">twelve</span></h1><img id="twelve_gon" src="assets/12-gon.svg" />
       <h4><span id="you_ship">Make a useful tool &mdash;</span> <span id="we_ship">Get a microcontroller</span></h4>
-      <a id="submit" class="disabled">Submit</a> &middot; <a id="gallery" class="disabled">Gallery</a>
+      <a id="submit_link" class="disabled">Submit</a> &middot; <a id="gallery_link" class="disabled">Gallery</a>
     </center>
     <center id="arrow_container">
       <img id="arrow" src="assets/arrow-down.svg">

diff --git a/style.css b/style.css
@@ -17,7 +17,8 @@ body {
   background:linear-gradient(60deg, black 0%, #262d57 100%);
   font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
   line-height:1.6;
-  color:#f1f1f1
+  color:#f1f1f1;
+  min-height:100%
 }
 
 h2, p, ul {
@@ -59,6 +60,12 @@ ol li {
   padding-bottom:16px
 }
 
+blockquote {
+  border-left:4px solid #edabed;
+  padding-left:1.5rem;
+  font-style:italic
+}
+
 #flag {
   position:absolute;
   top:10px;
@@ -86,46 +93,41 @@ ol li {
   display:inline-block
 }
 
-h2, #ten_to_the, #minus, #twelve {
+h2, #minus, #twelve, #gallery {
   font-family:"Rubik"
 }
 
-#minus, #twelve {
+#minus, #twelve, #gallery {
   position:relative;
   font-size:72px
 }
 
-#minus, #you_ship {
+#minus, #you_ship, #in_total {
   font-weight:300;
   color:#f1f1f1
 }
 
-h2, #twelve, #we_ship {
+h2, #twelve, #we_ship, #gallery, #n_submissions {
   font-style:italic
 }
 
-#ten_to_the {
-  position:absolute;
-  font-weight:400;
-  font-size:20px;
-  text-shadow:0px 2px 3px #aaa;
-  color:#ccc
-}
-
 #minus {
   left:-5px;
   text-shadow:0px 4px 3px #999
 }
 
-#twelve {
-  left:5px;
+#twelve, #gallery {
   background:#edabed;
   background: linear-gradient(to bottom, rgb(255, 127, 255), #4554b5);
   filter: drop-shadow(0px 4px 3px #354582);
   -webkit-background-clip:text;
   -webkit-text-fill-color:transparent
 }
 
+#twelve {
+  left:5px;
+}
+
 #twelve_gon {
   position:relative;
   top:-36px;
@@ -134,7 +136,7 @@ h2, #twelve, #we_ship {
   filter:drop-shadow(0px 4px 0px rgb(96, 48, 96))
 }
 
-a, #we_ship {
+a, #we_ship, #n_submissions {
   background:#edabed;
   background: linear-gradient(to bottom, rgb(255, 127, 255) 0%, #4554b5 140%);
   font-weight:600;

diff --git a/submissions.json b/submissions.json
@@ -0,0 +1,3 @@
+{
+  "submissions": []
+}