Merge pull request #1311 from claynicholson/main

Added search by part, other filters and other fun stuff for bin
2026-04-19 22:05:11 +00:00 · 2024-08-15 13:31:20 +00:00 · 2024-08-15 13:31:20 +00:00 · f2702a4a69
commit f2702a4a69
parent f9ecd504ca ee78dbac68
8 changed files with 508 additions and 79 deletions
--- a/components/bin/GalleryPosts.js
+++ b/components/bin/GalleryPosts.js
@ -1,10 +1,10 @@
 import React from 'react'
 import styles from '../../public/bin/style/gallery.module.css'
+import PartTag from './PartTag';
 import { useEffect, useRef, useState } from 'react';


-const BinPost = ({title = "Bin Post", desc = "Bin Project", slack = '', link = '', id, date}) => {
-
+const BinPost = ({title = "Bin Post", desc = "Bin Project", slack = '', link = '', id, date, parts}) => {
  link = link.trim();
  if (!/^https?:\/\//i.test(link)) {
      link = 'https://' + link;
@ -37,6 +37,10 @@ const BinPost = ({title = "Bin Post", desc = "Bin Project", slack = '', link = '
      return inputDate.toLocaleDateString(undefined, options);
    }
  }
+  if (parts){
+    parts = parts.filter(part => part !== "recvK14pXAY1tn3HQ" && part !== "rec5TQNvkGkscsGuQ"); //Filter out breadboards and raspberry pi
+  }
+

 return (  
    <div alt={id} className={styles.gallery_card} 
@ -50,10 +54,19 @@ return (
      </div>
     
      <p className={styles.card_desc}>{desc}</p>
-      <span>{(slack ? (slack.startsWith('@') ? (slack) : (`@${slack}`)) : (""))+ " "}</span> 
+      <span className={styles.slack}>{(slack ? (slack.startsWith('@') ? (slack) : (`@${slack}`)) : (""))+ " "}</span> 
      <span className={styles.date}>{formatDate(date)}</span>
-      
+      <div className={styles.tag_container}>

+      {parts && parts.map(part => {
+            return (
+              <PartTag
+              key={part}
+              partID={part}
+              />)
+
+          })}
+      </div>
    </div>
  )
 }
--- a/components/bin/PartTag.js
+++ b/components/bin/PartTag.js
@ -0,0 +1,151 @@
+import React from 'react'
+import styles from './PartTag.module.css'
+import { useState } from 'react';
+
+const PartTag = ({ partID, search = false, addFilter, removeFilter}) => {
+  const [isOutlined, setIsOutlined] = useState(false);
+
+  const handleClick = () => {
+    if (search){
+      setIsOutlined(prevState => !prevState);
+      if (isOutlined){
+        removeFilter(partID);
+      } else {
+        addFilter(partID);
+      }
+    }
+    
+  };
+
+    let backgroundColor = '';
+    let text = '';
+    switch (partID) {
+      case "recltWikgPdLvpJfe":
+        backgroundColor = '#0000FF'; // Vibrant blue
+        text = 'Servo';
+        break;
+      case "recRzllr0dui91NLd":
+        backgroundColor = '#008000'; // Vibrant green
+        text = 'LED';
+        break;
+      case "recM7OOofV9Bp7AM9":
+        backgroundColor = '#FF0000'; // Vibrant red
+        text = 'ESP32';
+        break;
+      case "recALoD1CCKt3CxKE": 
+        backgroundColor = '#800080'; // Vibrant purple
+        text = 'Buzzer';
+        break;
+      case "rechtwyljZ5WR8DtR":
+        backgroundColor = '#FF4500'; // Vibrant orange
+        text = 'Slider';
+        break;
+      case "recry1GsMO6QLakzw": 
+        backgroundColor = '#8B4513'; // Dark brown
+        text = 'Photoresistor';
+        break;
+      case "recjRu1vTAU3qDanE":
+        backgroundColor = '#FF1493'; // Vibrant pink
+        text = 'LCD';
+        break;
+      case "recrgS7NnxS42tkmg":
+        backgroundColor = '#A52A2A'; // Vibrant brown
+        text = 'LED Screen';
+        break;
+      case "recocuypi4xP0UgAj":
+        backgroundColor = '#000000'; // Black
+        text = 'Joystick';
+        break;
+      case "recgLUxtFZHufN70W":
+        backgroundColor = '#1E90FF'; // Dodger blue
+        text = 'LED Bar Graph';
+        break; 
+      case "recKBAnftT9PgppUC":
+        backgroundColor = '#00FFFF'; // Vibrant cyan
+        text = 'Shift Register';
+        break;
+      case "recibIXNCSdhDHjXD": 
+        backgroundColor = '#FF00FF'; // Vibrant magenta
+        text = 'Thermistor';
+        break;
+      case "recwSKHd3anpKqNbg":
+        backgroundColor = '#00FF00'; // Vibrant lime
+        text = 'IR Receiver';
+        break;
+      case "recLRovQNumB1Et8B":
+        backgroundColor = '#008080'; // Vibrant teal
+        text = 'Range Finder';
+        break;
+      case "recMVBkeJ4KQdZihl":
+        backgroundColor = '#808000'; // Vibrant olive
+        text = 'Keypad';
+        break;
+      case "recGrj5GpSExI18Ff": 
+        backgroundColor = '#000080'; // Vibrant navy
+        text = 'Humidity';
+        break;
+      case "rec9G0CAXM0kdp7HY": 
+        backgroundColor = '#800000'; // Vibrant maroon
+        text = 'RTC';
+        break;
+      case "rec4vTiJIx4UP8Thl": 
+        backgroundColor = '#DAA520'; // Goldenrod
+        text = 'Motion Sensor';
+        break;
+      case "reczWN9rZOY95VXOT":
+        backgroundColor = '#FF8C00'; // Dark orange
+        text = 'LED Matrix';
+        break;
+      case "recNjAmh8gF0gZNtI":
+        backgroundColor = '#FF6347'; // Tomato red
+        text = 'Accelerometer';
+        break;
+      case "recPmyV5b8cvaMtTk":
+        backgroundColor = '#4B0082'; // Vibrant indigo
+        text = 'Neopixel LED';
+        break;
+      case "recj5b4DKez4GNa8i":
+        backgroundColor = '#87CEEB'; // Vibrant sky blue
+        text = 'Relay';
+        break;
+      case "rec5TQNvkGkscsGuQ":
+        backgroundColor = '#9932CC'; // Vibrant orchid
+        text = 'Pico W';
+        break;
+      case "recqffGd1j1jRh56m":
+        backgroundColor = '#DDA0DD'; // Vibrant plum
+        text = 'Multicolor LED';
+        break;
+      case "recJUolkJURydamzG":
+        backgroundColor = '#CD5C5C'; // Vibrant light coral
+        text = 'Encoder';
+        break;
+      case "rec7lggt0DsgrWHzc":
+        backgroundColor = '#20B2AA'; // Vibrant light sea green
+        text = 'Temp Sensor';
+        break;
+      case "rectVgu4kWbbaqccc":
+        backgroundColor = '#FFA07A'; // Vibrant light salmon
+        text = 'Button';
+        break;
+      case "recWKEXSaByRvl68t":
+        backgroundColor = '#4682B4'; // Vibrant light steel blue
+        text = '4 Digit Display';
+        break;
+      default:
+        backgroundColor = 'gray'; // Default gray
+        text = 'Invalid Tag';
+        console.log("invalid", partID)
+    }
+    
+    
+  return (
+    <div style={{ backgroundColor}}
+         className={styles.tag + (isOutlined ? ` ${styles.outlined}` : '')}
+         onClick={handleClick}>
+      {text}
+    </div>
+  )
+}
+
+export default PartTag
--- a/components/bin/PartTag.module.css
+++ b/components/bin/PartTag.module.css
@ -0,0 +1,24 @@
+.tag{
+    color: e1e1e1;
+    padding: 4px 10px; 
+    border-radius: 20px; 
+    width: fit-content;
+    max-width: 300px; 
+    display: flex; 
+    text-align: center; 
+    white-space: nowrap; 
+    overflow: hidden;
+    text-overflow: ellipsis;
+    transition: transform 0.3s ease;
+    box-sizing: border-box;
+}
+
+.tag:hover{
+    cursor: pointer;
+    transform: scale(1.1);
+}
+
+.outlined {
+    border: 5px dotted #c5c5c5;
+  }
+
--- a/components/bin/galleryView.js
+++ b/components/bin/galleryView.js
@ -1,62 +0,0 @@
-import React from 'react'
-import styles from '../../public/bin/style/gallery.module.css'
-import { useEffect, useRef, useState } from 'react';
-
-
-const BinPost = ({title = "Bin Post", desc = "Bin Project", slack = '', link = '', id, date}) => {
-
-  link = link.trim();
-  if (!/^https?:\/\//i.test(link)) {
-      link = 'https://' + link;
-  }
- const projectID = link.split('/')[4]
- const imgLink = `https://thumbs.wokwi.com/projects/${projectID}/social/bin.png`
-
-
-  function handleClick() {
-    console.log("clicked");
-    if (typeof window !== 'undefined'){
-      const currentHost = window.location.host;
-  
-      window.open(link, '_blank');
-    }
-   }
-
-  function formatDate(dateString) {
-    console.log("date", date)
-    const inputDate = new Date(dateString);
-    const now = new Date();
-    const oneDay = 24 * 60 * 60 * 1000;
-    
-    if (now - inputDate < oneDay) {
-      const hours = inputDate.getHours().toString().padStart(2, '0');
-      const minutes = inputDate.getMinutes().toString().padStart(2, '0');
-      return `Today at ${hours}:${minutes}`;
-    } else {
-
-      const options = { year: 'numeric', month: 'long', day: 'numeric' };
-      return inputDate.toLocaleDateString(undefined, options);
-    }
-  }
-
-return (  
-    <div alt={id} className={styles.gallery_card} 
-      onClick={handleClick}>
-      <h1 className={styles.card_title}>
-        {title}<br/>
-      </h1>
-      
-      <div className={styles.img_container}>
-        <img src={imgLink} alt="Project Image"/>
-      </div>
-     
-      <p className={styles.card_desc}>{desc}</p>
-      <span>{(slack ? (slack.startsWith('@') ? (slack) : (`@${slack}`)) : (""))+ " "}</span> 
-      <span className={styles.date}>{formatDate(date)}</span>
-      
-
-    </div>
-  )
-}
-
-export default BinPost;
--- a/pages/api/bin/gallery/tags.js
+++ b/pages/api/bin/gallery/tags.js
@ -0,0 +1,35 @@
+import AirtablePlus from "airtable-plus";
+
+const fetchTags = async () => {
+  try {
+    const airtable = new AirtablePlus({
+      apiKey: process.env.AIRTABLE_API_KEY,
+      baseID: 'appKjALSnOoA0EmPk',
+      tableName: 'Supported Parts',
+    });
+    
+    const records = await airtable.read();
+
+    const tags = records.map((record) =>  {
+      return {
+        ID: record.id,
+        hide: record.fields["Hide From Gallery"],
+      };
+    });
+  
+    console.log('tags', tags);
+    return tags;
+  } catch (error) {
+    console.error('Error fetching tags:', error);
+    throw error;
+  }
+};
+
+export default async function handler(req, res) {
+  try {
+    const data = await fetchTags();
+    res.status(200).json(data);
+  } catch (error) {
+    res.status(500).json({ error: 'Failed to fetch tags' });
+  }
+}
--- a/pages/bin/gallery.js
+++ b/pages/bin/gallery.js
@ -2,7 +2,8 @@ import React from 'react'
 import BinPost from '../../components/bin/GalleryPosts'
 import styles from '../../public/bin/style/gallery.module.css'
 import Nav from '../../components/bin/nav'
-import Footer from '../../components/bin/footer'
+import Footer from '../../components/footer'
+import PartTag from '../../components/bin/PartTag';
 import { useEffect, useRef, useState } from 'react';
 import { resolve } from 'styled-jsx/css';
 import { set } from 'lodash';
@ -12,30 +13,97 @@ export async function getStaticProps() {
  const res = await fetch(`${host}/api/bin/gallery/posts/`);
  const posts = await res.json();
  
-  const filteredPosts = posts.filter(post => post.status === 'Accepted');
+  const filteredPosts = posts.filter(post => post.status === 'Accepted' && post.parts && !post.hide);
+
+  //Tags
+
+  const resTag = await fetch(`${host}/api/bin/gallery/tags/`);
+  const tags = await resTag.json();
+  
+  const filteredTags = tags.filter(tag => !tag.hide);
  return {
-    props: { posts: filteredPosts },
+    props: { posts: filteredPosts, 
+             tags: filteredTags
+    },
  };
 }


-function Gallery({ posts = [] }) {
+
+function Gallery({ posts = [], tags = [] }) {
+
+  const [allPosts, setAllPosts] = useState([]);
+  const [filterPosts, setFilterPosts] = useState([]);
+  const [filterParts, setFilterParts] = useState([]);
+
+  useEffect(() => {
+    setAllPosts(posts);
+    setFilterParts([]);
+
+  }, []);
+
+  useEffect(() => {
+    setFilterPosts(
+      allPosts.filter(post =>
+        post.parts && filterParts.every(part => post.parts.includes(part))
+      )
+    );
+  }, [filterParts]);
+
  
+  const addFilter = (partID) => {
+    setFilterParts((prevParts) => {
+      if (!prevParts.includes(partID)) {
+        console.log("add", partID)
+        return [...prevParts, partID];
+      }
+      return prevParts; 
+    });
+
+  };
+  
+  const removeFilter = (partID) => {
+    setFilterParts((prevParts) => {
+      return prevParts.filter(id => id !== partID);
+    });
+  };
+
  return (
    <section className='page'>

      <div className={styles.background}></div>
      <script src="https://awdev.codes/utils/hackclub/orph.js"></script>

-      <Nav />
+      

-      <h1 className={styles.title}>Bin Gallery</h1>
-      <p className={styles.sub_title}>A display of all of bin's projects</p>
+      <div className={styles.header_div}>
+        <Nav />
+        <h1 className={styles.title}>Bin Gallery</h1>
+        <p className={styles.sub_title}>A display of all of bin's projects</p>
+      </div>
+      <div className={styles.text_container}>      <span className={styles.first}>Want to add to the gallery? </span><span className={styles.second} onClick={() => window.location.href = '/bin'}>Create a bin project in wokwi </span><span className={styles.third}>and your project will be added to the gallery!</span><br/>
+      </div>
+      <span className={styles.tag_text}>Search By Tag:</span>
+      <div className={styles.tag_search_container}>
+        
+            {tags.map(tag => {
+                  return (
+                    <PartTag
+                      partID={tag.ID} 
+                      search={true}
+                      addFilter={addFilter}
+                      removeFilter={removeFilter}
+                    />)

+                })}
+
+        </div>

      <div className={styles.feed}>
+        

-          {posts.map(post => {
+
+          {filterPosts.map(post => {
            return (
              <BinPost
                key={post.ID}
@ -45,6 +113,7 @@ function Gallery({ posts = [] }) {
                slack={post.slack}
                link={post.link}
                date={post.created}
+                parts={post.parts}
              />)

          })}
--- a/public/bin/images/Frame.svg
+++ b/public/bin/images/Frame.svg
@ -0,0 +1,106 @@
+<svg width="945" height="616" viewBox="0 0 945 616" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1_3)">
+<path d="M436.5 617V580.5L473 617" stroke="#151212" stroke-width="3"/>
+<path d="M946.5 284H791L753.5 321.5L832 400H946.5" stroke="#151212" stroke-width="3"/>
+<path d="M717 618V529L665.5 477.5" stroke="#151212" stroke-width="3"/>
+<path d="M79 618L143.5 553.5" stroke="#151212" stroke-width="3"/>
+<path d="M351.5 209V133L287.5 69V0.5" stroke="#151212" stroke-width="3"/>
+<path d="M384 208V111L324.5 51.5V15.5H384V-9" stroke="#151212" stroke-width="3"/>
+<path d="M412.5 209V138.5L435 116L367.5 48.5" stroke="#151212" stroke-width="3"/>
+<path d="M443.5 207V145" stroke="#151212" stroke-width="3"/>
+<circle cx="364" cy="42" r="10" fill="#151212"/>
+<circle cx="295" cy="209" r="9.5" stroke="black"/>
+<circle cx="658" cy="76" r="9.5" stroke="black"/>
+<circle cx="885" cy="530" r="9.5" stroke="black"/>
+<circle cx="895" cy="351" r="9.5" stroke="black"/>
+<circle cx="18" cy="216" r="9.5" stroke="black"/>
+<circle cx="179" cy="512" r="9.5" stroke="black"/>
+<circle cx="444" cy="36" r="10" fill="#151212"/>
+<circle cx="443" cy="143" r="10" fill="#151212"/>
+<circle cx="873" cy="215" r="10" fill="#151212"/>
+<circle cx="709" cy="371" r="10" fill="#151212"/>
+<circle cx="562" cy="492" r="10" fill="#151212"/>
+<circle cx="663" cy="477" r="10" fill="#151212"/>
+<circle cx="412" cy="452" r="10" fill="#151212"/>
+<circle cx="361" cy="567" r="10" fill="#151212"/>
+<circle cx="146" cy="551" r="10" fill="#151212"/>
+<path d="M381.5 408V473.5L361.5 493.5V567" stroke="#151212" stroke-width="3"/>
+<path d="M350.5 407.5V457L236.5 571V620.5" stroke="#151212" stroke-width="3"/>
+<path d="M532 407V616" stroke="#151212" stroke-width="3"/>
+<path d="M502 407V469L441 530V557L506 622" stroke="#151212" stroke-width="3"/>
+<circle cx="912" cy="445" r="10" fill="#151212"/>
+<path d="M473 207V109L409 45V16H478.5V74L441 36.5" stroke="#151212" stroke-width="3"/>
+<path d="M504 207V2" stroke="#151212" stroke-width="3"/>
+<path d="M534.5 207V113.5L605.5 42.5V-0.5" stroke="#151212" stroke-width="3"/>
+<path d="M565.5 207.5V125L643.5 47H774V-1.5" stroke="#151212" stroke-width="3"/>
+<path d="M595 208V144.5H799V31.5H876V-15.5" stroke="#151212" stroke-width="3"/>
+<path d="M628 250.5H652.5L726 177H831.5V58.5H948.5" stroke="#151212" stroke-width="3"/>
+<path d="M627.5 279.5H679L743.5 215H866" stroke="#151212" stroke-width="3"/>
+<path d="M943.5 84H903V258H761.5L710 309.5H627" stroke="#151212" stroke-width="3"/>
+<path d="M627 339H724L829.5 444.5H907" stroke="#151212" stroke-width="3"/>
+<path d="M627 369L709 369" stroke="#151212" stroke-width="3"/>
+<path d="M595 405.5V500.5L641.5 547V623.5" stroke="#151212" stroke-width="3"/>
+<path d="M562 409.5V487" stroke="#151212" stroke-width="3"/>
+<path d="M473 405.5V460.5L416 517.5V625" stroke="#151212" stroke-width="3"/>
+<path d="M442.5 408V455L388 509.5V592H277V649" stroke="#151212" stroke-width="3"/>
+<path d="M412 407V447.5" stroke="#151212" stroke-width="3"/>
+<path d="M670.5 614V528L627 484.5V424H662L760 522V641" stroke="#151212" stroke-width="3"/>
+<path d="M318 246.5H258V137L220.5 99.5V-3" stroke="#151212" stroke-width="3"/>
+<path d="M317 278.5H227.5V146H183.5V306.5H-5.5" stroke="#151212" stroke-width="3"/>
+<path d="M319 310H222.5L181 351.5H0" stroke="#151212" stroke-width="3"/>
+<path d="M321.5 338H237V367.5H317.5" stroke="#151212" stroke-width="3"/>
+<path d="M3 383H157L260 486L128 618" stroke="#151212" stroke-width="3"/>
+<path d="M0.5 421H147.5L181 454.5H0.5" stroke="#151212" stroke-width="3"/>
+<path d="M554.5 614.5V527.5H585L612 554.5V617" stroke="#151212" stroke-width="3"/>
+<path d="M236.5 0.5V88.5L275 127V228.5H315V192.5H334.5V143L269 77.5V0.5" stroke="#151212"/>
+<path d="M208.031 -3V105.826L222 125H185V-3" stroke="#151212"/>
+<path d="M0.5 7.5H170V95L-5 270" stroke="#151212"/>
+<path d="M-2 19H153V87.5L25.8328 210" stroke="#151212"/>
+<path d="M-18.4038 35H92V76.8495H48.1262L-22 174" stroke="#151212"/>
+<path d="M-7 474H199.937L226 499L176.481 546.5L141.036 512.5L23.7539 625" stroke="#151212"/>
+<path d="M253 0.5V82L294 123V199.5" stroke="#151212"/>
+<path d="M-7 493H179V502" stroke="#151212"/>
+<path d="M1 507.5H121L9.5 619" stroke="#151212"/>
+<path d="M784.5 614.5V521L834.5 471H900.5L931 501.5H956.5" stroke="#151212"/>
+<path d="M622 0.5V30.5H754V0.5" stroke="#151212"/>
+<path d="M944.5 591.5L890.5 537.5" stroke="#151212"/>
+<path d="M787.5 -1V76H668" stroke="#151212"/>
+<path d="M808 624V532.5L846 494.5H891L964 567.5" stroke="#151212"/>
+<rect x="332" y="223" width="281" height="170" fill="#4D4D4D" stroke="black" stroke-width="3"/>
+<rect x="342" y="209" width="19" height="14" fill="#3A3232" stroke="black" stroke-width="3"/>
+<rect x="342" y="393" width="19" height="13" fill="#3A3232" stroke="black" stroke-width="3"/>
+<rect x="373" y="209" width="18" height="14" fill="#3A3232" stroke="black" stroke-width="3"/>
+<rect x="373" y="393" width="18" height="13" fill="#3A3232" stroke="black" stroke-width="3"/>
+<rect x="403" y="209" width="18" height="14" fill="#3A3232" stroke="black" stroke-width="3"/>
+<rect x="403" y="393" width="18" height="13" fill="#3A3232" stroke="black" stroke-width="3"/>
+<rect x="433" y="209" width="18" height="14" fill="#3A3232" stroke="black" stroke-width="3"/>
+<rect x="433" y="393" width="18" height="13" fill="#3A3232" stroke="black" stroke-width="3"/>
+<rect x="613" y="378" width="17" height="13" transform="rotate(-90 613 378)" fill="#3A3232" stroke="black" stroke-width="3"/>
+<rect x="319" y="378" width="17" height="13" transform="rotate(-90 319 378)" fill="#3A3232" stroke="black" stroke-width="3"/>
+<rect x="465" y="209" width="16" height="14" fill="#3A3232" stroke="black" stroke-width="3"/>
+<rect x="465" y="393" width="16" height="13" fill="#3A3232" stroke="black" stroke-width="3"/>
+<rect x="613" y="347" width="17" height="13" transform="rotate(-90 613 347)" fill="#3A3232" stroke="black" stroke-width="3"/>
+<rect x="319" y="347" width="17" height="13" transform="rotate(-90 319 347)" fill="#3A3232" stroke="black" stroke-width="3"/>
+<rect x="494" y="209" width="17" height="14" fill="#3A3232" stroke="black" stroke-width="3"/>
+<rect x="494" y="393" width="17" height="13" fill="#3A3232" stroke="black" stroke-width="3"/>
+<rect x="613" y="318" width="18" height="13" transform="rotate(-90 613 318)" fill="#3A3232" stroke="black" stroke-width="3"/>
+<rect x="319" y="318" width="18" height="13" transform="rotate(-90 319 318)" fill="#3A3232" stroke="black" stroke-width="3"/>
+<rect x="525" y="209" width="17" height="14" fill="#3A3232" stroke="black" stroke-width="3"/>
+<rect x="525" y="393" width="17" height="13" fill="#3A3232" stroke="black" stroke-width="3"/>
+<rect x="613" y="287" width="18" height="13" transform="rotate(-90 613 287)" fill="#3A3232" stroke="black" stroke-width="3"/>
+<rect x="319" y="287" width="18" height="13" transform="rotate(-90 319 287)" fill="#3A3232" stroke="black" stroke-width="3"/>
+<rect x="554" y="209" width="17" height="14" fill="#3A3232" stroke="black" stroke-width="3"/>
+<rect x="554" y="393" width="17" height="13" fill="#3A3232" stroke="black" stroke-width="3"/>
+<rect x="613" y="258" width="18" height="13" transform="rotate(-90 613 258)" fill="#3A3232" stroke="black" stroke-width="3"/>
+<rect x="319" y="258" width="18" height="13" transform="rotate(-90 319 258)" fill="#3A3232" stroke="black" stroke-width="3"/>
+<rect x="585" y="209" width="18" height="14" fill="#3A3232" stroke="black" stroke-width="3"/>
+<rect x="585" y="393" width="18" height="13" fill="#3A3232" stroke="black" stroke-width="3"/>
+<path d="M957 309H856V375H957" stroke="#151212"/>
+<path d="M830.5 614.5V550.5H862.5L935.5 623.5" stroke="#151212"/>
+</g>
+<defs>
+<clipPath id="clip0_1_3">
+<rect width="945" height="616" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/public/bin/style/gallery.module.css
+++ b/public/bin/style/gallery.module.css
@ -71,7 +71,7 @@
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
-    color: #5e5e5e;
+    color: #808080;
    margin-bottom: 1rem;
    text-transform: uppercase;
    text-shadow: 5px 5px 8px rgba(0, 0, 0, 0.1);
@ -125,6 +125,10 @@
    display: flex;
    padding-left: 200px;
    padding-top: -20px;
+    background-color: rgba(255, 255, 255, 0.3); /* Semi-transparent background color */
+    backdrop-filter: blur(10px); /* Blur everything behind the div */
+    -webkit-backdrop-filter: blur(10px); /* For Safari support */
+    overflow: hidden; /* Hide any overflow content */
 }

 .loading {
@ -185,17 +189,106 @@
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s, border-color 0.3s;
-  color: #e1e1e1;
+  color: #202020;
 }

 .nav_button:hover {
-    background-color: rgba(255, 255, 255, 0.1);
+    background-color: rgba(0, 0, 0, 0.1);
 }

 .date{
    color: gray; /* Sets the text color to gray */
    font-size: 14px; /* Optional: adjusts the font size */
    font-family: Arial, sans-serif; /* Optional: sets the font family */
-    margin: 0; /* Optional: removes default margins */
+    margin: 5px; /* Optional: removes default margins */
    padding: 0; /* Optional: removes default padding */
-}
+}
+
+.tag_container{
+    padding: 5px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    align-items: center;
+}
+
+.tag_search_container{
+    margin: 20px;
+    padding: 5px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    align-items: center;
+}
+
+.slack{
+    color: #e1e1e1;
+}
+
+.header_div{
+    width: 100%;
+    height: 100%;
+    padding-bottom: 100px   ;
+    background-color:#dfdbcf;
+    background-image: url('../images/Frame.svg');
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    margin-bottom: 30px;
+    min-height: 400px;
+}
+
+.search_input {
+    display: block;
+    width: 100%;
+    border-radius: 0.375rem; /* rounded-md */
+    border: 1px solid #e5e7eb; /* border-gray-200 */
+    background-color: #ffffff; /* bg-white */
+    padding: 0.625rem 3rem 0.625rem 1.25rem; /* py-2.5 pl-5 pr-12 */
+    font-family: 'Satoshi', sans-serif; /* font-satoshi */
+    font-size: 0.875rem; /* text-sm */
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
+    font-weight: 500; /* font-medium */
+    transition: border-color 0.2s;
+    margin-top: 2rem;
+  }
+
+  .tag_text{
+    font-family: "Phantom Sans";
+    margin: 20px;
+
+    font-size: 2rem;
+    font-weight: 700;
+    text-align: center;
+    color: #e1e1e1;
+    margin-bottom: 1rem;
+    text-transform: uppercase;
+    text-shadow: 5px 5px 8px rgba(0, 0, 0, 0.1);
+  }
+
+  .first{
+    text-align: center;
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: #e1e1e1;
+
+  }
+  
+  .second{
+    font-size: 1.5rem;
+    font-weight: 700;
+    text-decoration: underline;
+    color: orange;
+    cursor: pointer;
+  }
+  
+  .third{
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: #e1e1e1;
+
+  }
+
+  .text_container{
+    text-align: center;
+  }