hack-rpi · BastedEggsRYummy · Apr 14, 2025 · Apr 11, 2025 · Apr 11, 2025 · Apr 11, 2025
diff --git a/AaryanFolder/Animated Menu Icon/index.html b/AaryanFolder/Animated Menu Icon/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Animated Menu Icon</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="menu-icon" 
+    onclick="toggleMenu(this)">
+        <span class="line line1"></span>
+        <span class="line line2"></span>
+        <span class="line line3"></span>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/AaryanFolder/Animated Menu Icon/script.js b/AaryanFolder/Animated Menu Icon/script.js
@@ -0,0 +1,3 @@
+function toggleMenu(icon){
+    icon.classList.toggle("active");
+}
diff --git a/AaryanFolder/Animated Menu Icon/style.css b/AaryanFolder/Animated Menu Icon/style.css
@@ -0,0 +1,36 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+body{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background-color: #f5f5f5;
+}
+.menu-icon{
+    width: 30px;
+    height: 25px;
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+.line{
+    width: 100%;
+    height: 4px;
+    background-color: #333;
+    border-radius: 4px;
+    transition: transform 0.4s ease, opacity 0.4s ease;
+}
+.menu-icon.active .line{
+    transform: translateY(10px) rotate(45deg);
+}
+.menu-icon.active .line2{
+    opacity: 0;
+}
+.menu-icon.active .line3{
+    transform: translateY(-10px) rotate(-45deg);
+}
diff --git a/AaryanFolder/Fortune Cookie/index.html b/AaryanFolder/Fortune Cookie/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Fortune Cookie</title>
+    <link rel="stylesheet" href="style.css" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <div class="container">
+      <h3>Fortune Cookie</h3>
+      <h1>🥠</h1>
+      <p id="fortuneMessage">Click the cookie to get your fortune!</p>
+      <button id="openCookie">Open Cookie</button>
+    </div>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/AaryanFolder/Fortune Cookie/script.js b/AaryanFolder/Fortune Cookie/script.js
@@ -0,0 +1,23 @@
+let fortunes = [
+    "You will have a great day today! 🌟",
+    "Something unexpected will make you smile. 😊",
+    "Success is coming your way! 🚀",
+    "A pleasant surprise is waiting for you. 🎁",
+    "You will make a new friend soon. 🤝",
+    "An exciting opportunity will present itself. 🎉",
+    "Happiness is closer than you think! ❤️",
+    "Be patient. Good things take time. ⏳",
+    "A big change is coming in your life. Embrace it! 🔄",
+    "Your kindness will return to you in unexpected ways. 💖",
+    "You will soon cross paths with someone important. 🌍",
+    "Good fortune will follow you wherever you go. 🍀",
+    "A dream you have will soon come true. 🌙",
+    "Trust your instincts; they will guide you well. 🧭",
+    "Adventure is out there—be ready! 🏔️",
+    "You will soon receive great news. 📩",
+  ];
+
+  document.getElementById("openCookie").addEventListener("click", function () {
+    let randomIndex = Math.floor(Math.random() * fortunes.length);
+    document.getElementById("fortuneMessage").innerText = fortunes[randomIndex];
+  });
diff --git a/AaryanFolder/Fortune Cookie/style.css b/AaryanFolder/Fortune Cookie/style.css
@@ -0,0 +1,42 @@
+body {
+    font-family: "Poppins", sans-serif;
+    text-align: center;
+    background-color: #ffa500; /* Orange background */
+    margin: 50px;
+  }
+
+  .container {
+    max-width: 400px;
+    margin: auto;
+    background-color: #ffffff;
+    padding: 20px;
+    border-radius: 10px;
+  }
+
+  h1 {
+    font-size: 50px;
+  }
+
+  h3 {
+    font-size: 40px;
+  }
+
+  p {
+    background-color: rgba(255, 190, 70, 0.2);
+    font-size: 18px;
+    margin: 20px 0;
+  }
+
+  button {
+    padding: 10px 15px;
+    font-size: 16px;
+    background-color: orange;
+    color: #ffffff;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+  }
+
+  button:hover {
+    background-color: darkorange;
+  }
diff --git a/AaryanFolder/Story Generator/index.html b/AaryanFolder/Story Generator/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Interactive Story Generator 📖</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div class="container">
+      <h1>Interactive Story Generator</h1>
+      <div class="wrapper">
+        <div>
+          <label for="name">Enter a Name:</label>
+          <input type="text" id="name" placeholder="Type a name..." required />
+        </div>
+        <div>
+          <label for="place">Enter a Place:</label>
+          <input type="text" id="place" placeholder="Type a place..." required />
+        </div>
+        <div>
+          <label for="object">Enter an Object:</label>
+          <input type="text" id="object" placeholder="Type an object..." required />
+        </div>
+        <div>
+          <label for="action">Enter an Action:</label>
+          <input type="text" id="action" placeholder="Type an action..." required />
+        </div>
+      </div>
+      <button id="generateStory">Generate Story</button>
+      <div id="story" class="story"></div>
+    </div>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/AaryanFolder/Story Generator/script.js b/AaryanFolder/Story Generator/script.js
@@ -0,0 +1,34 @@
+document.getElementById("generateStory").addEventListener("click", function () {
+    let name = document.getElementById("name").value.trim();
+    let place = document.getElementById("place").value.trim();
+    let object = document.getElementById("object").value.trim();
+    let action = document.getElementById("action").value.trim();
+    let storyDiv = document.getElementById("story");
+
+    if (name === "" || place === "" || object === "" || action === "") {
+      alert("Please fill in all fields!");
+      return;
+    }
+
+    let stories = [
+      `One day, ${name} went to ${place} and found a mysterious ${object}. Without thinking, ${name} decided to ${action}, and something magical happened!`,
+      `In the heart of ${place}, ${name} discovered a hidden ${object}. As curiosity took over, ${name} started to ${action}, and the adventure began!`,
+      `${name} was walking through ${place} when suddenly a ${object} appeared. Without hesitation, ${name} chose to ${action}, leading to an unforgettable experience!`,
+      `While exploring ${place}, ${name} saw a sparkling ${object}. As soon as they touched it, they were transported to a new world where they had to ${action} to find a way back home!`,
+      `One night at ${place}, ${name} found an ancient ${object}. The moment they tried to ${action}, the object began to glow, revealing a hidden secret!`,
+      `At ${place}, ${name} was given a strange ${object} by an old wise person. They were told that if they ${action} at the right moment, something incredible would happen!`,
+      `${name} was cleaning their attic when they stumbled upon an old ${object}. Curious, they decided to ${action}, and suddenly, they were taken on a journey through time!`,
+      `In ${place}, ${name} met a talking ${object}. The ${object} asked ${name} to help it ${action}, and together they embarked on a quest to save the day!`,
+      `While hiking in ${place}, ${name} found a magical ${object}. They realized that if they ${action}, they could unlock its hidden powers!`,
+      `During a stormy night in ${place}, ${name} discovered a glowing ${object}. As the thunder roared, ${name} bravely decided to ${action}, and the storm turned into a beautiful light show!`,
+      `In ${place}, ${name} found a treasure map leading to a hidden ${object}. With excitement, ${name} set out to ${action}, uncovering secrets along the way!`,
+      `While visiting ${place}, ${name} encountered a friendly ${object}. Together, they decided to ${action}, and their friendship blossomed into an epic adventure!`,
+      `In ${place}, ${name} discovered a mysterious ${object} that granted wishes. Eager to test its power, ${name} wished to ${action}, and the world around them changed forever!`,
+      `One sunny day in ${place}, ${name} found a magical ${object}. They realized that if they ${action}, they could make their wildest dreams come true!`,
+    ];
+
+    let randomStory = stories[Math.floor(Math.random() * stories.length)];
+
+    storyDiv.innerText = randomStory;
+    storyDiv.style.display = "block";
+  });
diff --git a/AaryanFolder/Story Generator/style.css b/AaryanFolder/Story Generator/style.css
@@ -0,0 +1,60 @@
+body {
+    font-family: "Poppins", sans-serif;
+    box-sizing: border-box;
+    background-color: #fa3546;
+    margin: 20px;
+  }
+
+  .container {
+    position: absolute;
+    width: min(400px, 90vw);
+    transform: translate(-50%, -50%);
+    left: 50%;
+    top: 50%;
+    background: white;
+    padding: 30px;
+    border-radius: 10px;
+    box-shadow: 0 30px 30px rgba(0, 0, 0, 0.2);
+  }
+
+  .wrapper {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 15px;
+  }
+
+  input {
+    width: 90%;
+    padding: 10px;
+    margin-bottom: 15px;
+    border: 1.5px solid #000000;
+    border-radius: 5px;
+  }
+
+  label {
+    font-weight: bold;
+    display: block;
+    margin-bottom: 10px;
+  }
+
+  button {
+    width: 95%;
+    background-color: #fa3546;
+    color: white;
+    cursor: pointer;
+    border: none;
+    padding: 15px 0;
+    border-radius: 10px;
+  }
+
+  button:hover {
+    background-color: #45a049;
+  }
+
+  .story {
+    margin-top: 20px;
+    padding: 15px;
+    background: #fff3cd;
+    border-radius: 10px;
+    display: none;
+  }