Half way there

public/bin/icons/new-background.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.69231 8.70833H5V8.16667H9.84615M7.69231 8.70833V19H16.3077V8.70833M7.69231 8.70833H16.3077M16.3077 8.70833H19V8.16667H14.1538M9.84615 8.16667V6H14.1538V8.16667M9.84615 8.16667H14.1538" stroke="#e7e8d5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10 11V17" stroke="#e7e8d5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 11V17" stroke="#e7e8d5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14 11V17" stroke="#e7e8d5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

public/bin/index.html

@@ -47,7 +47,8 @@
     <section class="landing-section section">
         <div class="landing-header">
             <img src="./icons/icon.svg" class="landing-logo">
-            <span class="landing-tagline">The beginner hardware kit designed just for you</span>
+            <img src="./icons/recycled.png" class="recycled">
+            <span class="landing-tagline landing-tagline-top">The beginner hardware kit designed just for you</span>
             <span class="landing-tagline">Free for high schoolers</span>
             <img src="./parts/pico.png" class="landing-main-image">
         </div>
@@ -60,7 +61,7 @@
         <a class="floaty" style="top: 80%; right:10%;animation-delay: -1000ms;" href="https://wokwi.com/projects/383628008466438145" target="_blank">
             <img src="./parts/humidity.png">
         </a>
-        <a class="floaty" style="top: 30%; right:10%;animation-delay: -1500ms;" href="https://wokwi.com/projects/390119173913012225" target="_blank">
+        <a class="floaty" style="top: 30%; right:5%;animation-delay: -1500ms;" href="https://wokwi.com/projects/390119173913012225" target="_blank">
             <img src="./parts/led.png">
         </a>
         <div class="scroll-prompt" onclick="smoothScroll('.timeline')">
@@ -77,7 +78,7 @@
             What will you make
         </h1>
         <h2 class="timeline-subheader">
-            before summer break?
+            this summer?
         </h2>
         <div class="timeline-list">
             <div class="timeline-item hoverable greenbutton" onclick="smoothScroll('.gambling-section')"
@@ -214,9 +215,8 @@
                     1st to qualify.</p>
             </div>
             <div class="faq-item">
-                <h1>What do I need?</h1>
-                <p>Just a browser simulator & computer to upload your code to the pico– we’ll give you all the equipment
-                    you need for your circuit.</p>
+                <h1>When is bin open until?</h1>
+                <p>Bin will be open and furfilling orders until September 31st</p>
             </div>
             <div class="faq-item">
                 <h1>I need help!</h1>

public/bin/landing-new/style.css

@@ -55,6 +55,16 @@
     width: 100%;
 }
 
+.recycled {
+    position: absolute;
+    top: 25%;
+    left: 85%;
+    transform: translate(-50%, -50%) rotate(-10deg); /* Adjust rotation angle as needed */
+    width: 60%;
+    height: auto; /* Maintain aspect ratio */
+}
+
+
 .landing-tagline {
     font-size: 35px;
     display: block;
@@ -62,6 +72,10 @@
     text-wrap: nowrap;
 }
 
+.landing-tagline-top {
+    padding-top: 45px;
+}
+
 .scroll-prompt {
     cursor: pointer;
     position: absolute;

public/bin/selector/script.js

@@ -8,7 +8,8 @@ async function fetchParts() {
     data = await response.json();
 
     data = removeItemByAttribute(data, "type", "Microprocessor");
-    console.log(data)
+    console.log("Fetched parts:");
+    console.log(data)   
     return data
 }
 function removeItemByAttribute(arr, attr, value) {
@@ -69,6 +70,9 @@ function addPartToPage(part) {
     selectorItem.setAttribute("part_name", part.wokwiName)
     selectorItem.className = "selector-item"
 
+    
+
+
     let selectorImage = document.createElement("img")
     selectorImage.src = part.imageUrl
     selectorImage.className = "selector-image"
@@ -83,7 +87,13 @@ function addPartToPage(part) {
     selectorItemDesc.innerText = part.flavorText
     selectorItemDesc.className = "selector-item-description"
     selectorItem.appendChild(selectorItemDesc)
-
+    if (part.newPart){
+       let newImage = document.createElement("img")
+        newImage.src = "../icons/new.png";
+        newImage.className = "new-tag"
+        selectorItem.appendChild(newImage)
+    } 
+    
     document.getElementsByClassName("selector-main")[0].appendChild(selectorItem)
 
     selectorItem.addEventListener("click", () => {

public/bin/selector/style.css

@@ -41,6 +41,7 @@
     gap: 20px;
     justify-content: space-around;
     grid-template-columns: repeat(4, 1.5fr);
+    
 }
 
 .selector-item {
@@ -50,7 +51,7 @@
     justify-content: flex-end;
     width: calc(100vw / 4.5);
     aspect-ratio: 1;
-    background-color: #D9D9D9;
+    background-color: #dbdec3;
     padding: 20px;
     border-radius: 20px;
     gap: 5px;
@@ -60,6 +61,20 @@
     transition: filter 300ms;
 }
 
+.new-tag {
+    position: absolute;
+    top: 10%;
+    right: -35%;
+    transform: translate(-50%, -50%) rotate(45deg); /* Adjust rotation angle as needed */
+    width: 55%;
+    height: auto;
+
+}
+
+.selector-item:hover {
+    background-color: #bcbda7;}
+
+
 .selector-item.disabled {
     filter: grayscale(1) brightness(0.7);
 }
@@ -153,14 +168,6 @@
         height: 100%;
     }
 
-    .selector-main {
-        display: grid;
-        flex-grow: 1;
-        width: 100%;
-        gap: 20px;
-        justify-content: space-around;
-        grid-template-columns: repeat(2, 1.5fr);
-    }
 
     .selector-item-name {
         font-size: 30px;

public/bin/style/common.css

@@ -16,8 +16,8 @@
 
 body {
     background-color: #EBECE0;
-    background-image: url(../icons/grid.svg);
-    background-size: 3px;
+    background-image: url(../icons/new-background.svg);
+    background-size: 50px;
     background-repeat: repeat;
     margin: 0;
 }