Add files via upload

Trangvu801 · Feb 13, 2024 · 6bc7230 · 6bc7230
1 parent 74ba2ae
commit 6bc7230
Show file tree

Hide file tree

Showing 13 changed files with 1,161 additions and 0 deletions.
diff --git a/Adity.js b/Adity.js
@@ -0,0 +1,59 @@
+const wrapper = document.querySelector(".main3");
+const question = document.querySelector(".question");
+const gif = document.querySelector(".gif");
+const yesBtn = document.querySelector(".yes-btn");
+const noBtn = document.querySelector(".no-btn");
+
+yesBtn.addEventListener("click", () => {
+  question.innerHTML = "Yay, can you send me a text to 717-254-3537, please?";
+// Create an image element
+  // const image = document.createElement("img");
+  // image.src = "./resources/Pic/Adity.jpeg";
+  // image.alt = "Adity Image";
+  // image.style.maxWidth = "500px";
+  // image.style.display = "block";
+  // // Insert the image between the question and buttons
+  // wrapper.appendChild(image);
+});
+
+let noBtnClickCount = 0;
+
+noBtn.addEventListener("click", () => {
+  if (noBtnClickCount === 0) {
+    question.innerHTML = "Did you click No by mistake?";
+  } else if (noBtnClickCount === 1) {
+    question.innerHTML = "Are you really sure you don't want to see me? Let's try again one more time.";
+  } else {
+    question.innerHTML = "Ok then! However the Yes button is still there if you want to change your mind.";
+    // Here you can add any further actions you want to perform when the user clicks "No" for the final time
+  }
+
+  // Increment the click count
+  noBtnClickCount++;
+
+  // Reset the click count after the third click (optional)
+  if (noBtnClickCount > 2) {
+    noBtnClickCount = 0;
+  }
+});
+
+noBtn.addEventListener("click", () => {
+  const wrapperRect = wrapper.getBoundingClientRect();
+  const noBtnRect = noBtn.getBoundingClientRect();
+
+  const maxX = wrapperRect.width - noBtnRect.width;
+  const maxY = wrapperRect.height - noBtnRect.height;
+
+  const randomX = Math.floor(Math.random() * maxX);
+  const randomY = Math.floor(Math.random() * maxY);
+
+  noBtn.style.left = randomX + "px";
+  noBtn.style.top = randomY + "px";
+});
+
+
+const cursor = document.querySelector(".cursor");
+window.addEventListener("mousemove", function(e){
+    cursor.style.left = (e.x-100)+"px";
+    cursor.style.top = (e.y-100)+"px";
+})
diff --git a/hi-adity.html b/hi-adity.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Hi Adity</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap">
+    <link href="./resources/CSS/Adity.css" rel="stylesheet">
+
+</head>
+<body>
+    <div>
+        <audio id="bg-music" autoplay loop>
+            <source src="./resources/music/wave to earth - bad .mp3" type="audio/mp3">
+            Your browser does not support the audio tag.
+        </audio>
+        <div class="top-right">
+            <button class="play-pause-btn" onclick="togglePlayPause()">
+                <span id="play-icon" class="icon">&#9654;</span> <!-- Play icon -->
+                <span id="pause-icon" class="icon" style="display: none;">&#9612;&#9612;</span> <!-- Pause icon -->
+            </button>
+        </div>
+
+        <svg class="arrow-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" onclick="goToMeeting()">
+            <path d="M20 12H4" stroke="#464646" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M10 18L4 12L10 6" stroke="#464646" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+    </div>
+    <div>
+        <div id="section1" class="main1">
+            <h1>Hi Adity, you have a new message!</h1>
+            <div class="message-container">
+                <p>Shall we play some music before reading this message?</p>
+                <p>If you are ready to read the message</p>
+                <button class="button" onclick="openMessage()">Click Here</button>
+            </div>
+        </div>
+
+        <div id="section2" class="main2">
+            <h1>Hey Adity,</h1>
+            <div class = "message-container">
+                <p>How have you been? I hope everything are going well for you. Even if there is a tough day, I believe you can make it through. Because
+                    you are one of the strongest and the most independent person that I have known and I alway admires you for that. I hope you will have an awesome day with your friends and safe trip to Boston.
+                </p>
+                <p>Thank you so much for being such a good person and I enjoyed all the time that we spent together!</p>
+                <button class="button" onclick="finalMessage()">Click Here</button>
+            </div>
+
+
+        </div>
+
+
+        <div id="section3" class="main3">
+            <h1 class="question"> Let's keep in touch, shall we?</h1>
+            <img src="./resources/Pic/Adity.jpeg" alt="Adity Image" class="picAdity">
+            <p> Do you know you can scan this picture?</p>
+            <div class="btn-group">
+                <button class="yes-btn">Yes</button>
+                <button class="no-btn">No</button>
+            </div>
+        </div>
+    </div>
+
+
+    <script src="Adity.js"></script>
+    <script>
+
+    function goToMeeting() {
+        window.location.href = 'index.html'; // Redirect to the "Meeting" page
+    }
+    function openMessage() {
+            window.location.href = '#section2'; // Scroll to section 2 where the message is
+        }
+    function finalMessage() {
+            window.location.href = '#section3'; // Scroll to section 2 where the message is
+        }
+
+        function togglePlayPause() {
+            var bgMusic = document.getElementById('bg-music');
+            var playIcon = document.getElementById('play-icon');
+            var pauseIcon = document.getElementById('pause-icon');
+
+            if (bgMusic.paused) {
+                bgMusic.play();
+                playIcon.style.display = 'none';
+                pauseIcon.style.display = 'inline';
+                localStorage.setItem('musicState', 'playing');
+            } else {
+                bgMusic.pause();
+                playIcon.style.display = 'inline';
+                pauseIcon.style.display = 'none';
+                localStorage.setItem('musicState', 'paused');
+            }
+        }
+
+    </script>
+
+</body>
+</html>
diff --git a/resources/CSS/Adity.css b/resources/CSS/Adity.css
@@ -0,0 +1,202 @@
+/* Reset CSS */
+
+
+/* Body Styles */
+body {
+    background-color: #add8e6; /* Light pastel blue */
+    color: #285473; /* Darker pastel blue for text */
+    font-family: 'Press Start 2P', cursive;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: auto;
+    max-width: 1000px;
+    margin: 0 auto;
+}
+
+/* Heading Styles */
+h1 {
+    font-size: 20px;
+}
+
+/* Button Styles */
+button {
+    font-family: 'Press Start 2P', cursive;
+    padding: 14px 24px;
+    margin-top: 20px;
+    font-size: 16px;
+    background-color: #97cee1; /* Pastel green */
+    color: #fff;
+    border: none;
+    cursor: pointer;
+    border-radius: 4px;
+    transition: background-color 0.3s, padding 0.3s;
+    text-align: center;
+}
+
+button:hover {
+    background-color: #2f6389; /* Darker green on hover */
+}
+
+/* Arrow Icon Styles */
+.arrow-icon {
+    position: absolute;
+    top: 10px;
+    left: 30px;
+    cursor: pointer;
+}
+
+/* Audio Player Styles */
+#bg-music {
+    display: none; /* Hide the audio player */
+}
+
+/* Top-right Position Styles */
+.top-right {
+    position: absolute;
+    top: 5px;
+    right: 80px;
+}
+
+/* Play/Pause Button Icon Styles */
+.play-pause-btn {
+    color: #fff;
+    padding: 5px 10px;
+    margin-top: 10px;
+    border: none;
+    cursor: pointer;
+    border-radius: 4px;
+}
+
+.play-pause-btn:hover {
+    color: #fff; /* Pastel green */
+}
+
+.icon {
+    font-size: 20px;
+}
+
+/* Smooth Scroll Styles */
+html {
+    scroll-behavior: smooth;
+}
+
+/* Section Styles */
+#section1,
+#section2,
+#section3 {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: auto;
+    height: auto;
+    /* background-color: #add8e6; Light pastel blue */
+}
+
+/* Main Section Margin Styles */
+.main1 {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin-top: 300px;
+    margin-bottom: 500px;
+}
+
+.main2 {
+    margin-top: 300px;
+    margin-bottom: 500px;
+}
+.main3 {
+    margin-top: 300px;
+    margin-bottom: 500px;
+}
+
+#choice-button {
+        position: absolute;
+        width: 50px;
+        background-color: #add8e6; /* Pastel green */
+        color: white;
+        border-radius: 4px;
+        outline: none;
+        cursor: pointer;
+        border: none;
+        font-size: 12px;
+    }
+
+.btn-group {
+        width: 100%;
+        height: 50px;
+        display: flex;
+        justify-content: center;
+        margin-top: 50px;
+        text-align: center;
+    }
+
+.btn-group:nth-child(1) {
+        margin-left: -200px;
+        background: #285473;
+        text-align: center;
+        }
+
+.btn-group:nth-child(2) {
+        margin-right: -200px;
+        background: white;
+        color: #285473;
+        text-align: center;
+        }
+
+
+
+.hidden {
+    display: none;
+}
+
+textarea {
+    width: 100%;
+    height: 80px;
+    margin-bottom: 10px;
+}
+
+.main2 div p {
+    margin-bottom: 20px; /* Adds space between paragraphs */
+    line-height: 2; /* Adjust line height for better readability */
+    color: #285473;
+}
+
+.main2 div p1 {
+    color: #add8e6;
+}
+
+.cursor {
+    position: fixed;
+    height: 200px;
+    width: 200px;
+    background-color: #fff;
+    border-radius: 50%;
+    z-index: 9999;
+    pointer-events: none;
+}
+
+.yes-btn, .no-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.picAdity {
+    max-width: 500px;
+    display: block;
+    margin-top: 40px; /* Adjust as needed for top margin */
+    margin-bottom: 20px; /* Adjust as needed for bottom margin */
+
+}
+
+
+.message-container p {
+    text-align: justify;
+    margin-bottom: 10px; /* Add some space between paragraphs */
+}