Spaces:

Abhiyoshi
/

peepoo

Running

App Files Files Community

Abhiyoshi commited on Apr 4, 2025

Commit

d7356a6

verified ·

1 Parent(s): 068155b

Upload 12 files

Browse files

Files changed (13) hide show

.gitattributes +11 -0
index.html +883 -19
main1.png +3 -0
musik.mp3 +3 -0
p.jpg +3 -0
p1.jpg +3 -0
p2.jpg +3 -0
p3.jpg +3 -0
p4.jpg +3 -0
p5.jpg +3 -0
p6.jpg +3 -0
p7.jpg +3 -0
place1.jpg +3 -0

.gitattributes CHANGED Viewed

@@ -33,3 +33,14 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text

 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+main1.png filter=lfs diff=lfs merge=lfs -text
+musik.mp3 filter=lfs diff=lfs merge=lfs -text
+p.jpg filter=lfs diff=lfs merge=lfs -text
+p1.jpg filter=lfs diff=lfs merge=lfs -text
+p2.jpg filter=lfs diff=lfs merge=lfs -text
+p3.jpg filter=lfs diff=lfs merge=lfs -text
+p4.jpg filter=lfs diff=lfs merge=lfs -text
+p5.jpg filter=lfs diff=lfs merge=lfs -text
+p6.jpg filter=lfs diff=lfs merge=lfs -text
+p7.jpg filter=lfs diff=lfs merge=lfs -text
+place1.jpg filter=lfs diff=lfs merge=lfs -text

index.html CHANGED Viewed

@@ -1,19 +1,883 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Our Story</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inconsolata">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
+    <style>
+      body, html {
+        height: 100%;
+        font-family: "Inconsolata", sans-serif;
+        background-color: rgb(199, 185, 159);
+      }
+      .no-btn {
+        position: absolute;
+        transition: all 0.2s ease-in-out;
+    }
+      .bgimg {
+        background-position: center;
+        background-size: cover;
+        background-image: url("main1.png");
+        min-height: 100%;
+      }
+      @keyframes upDownShake {
+        0% { transform: translateY(0px); }
+        50% { transform: translateY(-30px); } /* Moves up by 3cm */
+        100% { transform: translateY(0px); } /* Moves back down */
+    }
+    .shake-animation {
+        animation: upDownShake 0.2s infinite ease-in-out; /* Smooth and continuous */
+    }
+    .envelope {
+      transition: transform 1s ease-in-out;
+  }
+  .envelope.open {
+      transform: rotateX(180deg); /* Envelope flips open */
+  }
+  .card {
+      transition: transform 1s ease-in-out;
+  }
+  .card.slide-out {
+      transform: translateY(-50px); /* Card moves out */
+  }
+  #message {
+      opacity: 0; /* Initially hidden */
+      transition: opacity 1s ease-in;
+  }
+      /* Navbar adjustments */
+      .navbar {
+        position: fixed;
+        top: 0;
+        width: 100%;
+        display: flex;
+        justify-content: space-evenly;
+        background: black;
+        padding: 10px 0;
+        z-index: 1000;
+      }
+      .navbar a {
+        color: white;
+        text-decoration: none;
+        padding: 10px 20px;
+        font-size: 18px;
+      }
+      .navbar a:hover {
+        background: #444;
+      }
+      .photobooth-btn {
+        background: linear-gradient(135deg, #d06f85, #e3b63c);
+        border: none;
+        color: white;
+        font-size: 18px;
+        font-weight: bold;
+        margin-top: 30px;
+        padding: 12px 24px;
+        border-radius: 50px;
+        cursor: pointer;
+        transition: 0.3s;
+        box-shadow: 0px 0px 10px rgba(255, 75, 43, 0.6);
+        text-transform: uppercase;
+        letter-spacing: 1.5px;
+        outline: none;
+        position: relative;
+        overflow: hidden;
+    }
+    .photobooth-btn::before {
+        content: "";
+        position: absolute;
+        top: -100%;
+        left: -100%;
+        width: 300%;
+        height: 300%;
+        background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 10%, transparent 40%);
+        transition: 0.5s ease-out;
+    }
+    .photobooth-btn:hover::before {
+        top: 0;
+        left: 0;
+    }
+    .photobooth-btn:hover {
+        box-shadow: 0px 0px 20px rgba(255, 75, 43, 0.9);
+        transform: scale(1.05);
+    }
+      /* Photobooth Styling */
+      .photobooth-frame {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        background: white;
+        padding: 15px;
+        border-radius: 12px;
+        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
+        width: fit-content;
+        max-width: 100%;
+    }
+    .photo-slot {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-bottom: 10px;
+        background: #f8f8f8;
+        padding: 5px;
+        border-radius: 8px;
+        width: 250px;  /* Set a fixed width */
+        height: auto;  /* Allow dynamic height */
+    }
+    .photo-slot img {
+        max-width: 100%;
+        height: auto; /* Preserve aspect ratio */
+        object-fit: contain;
+        border-radius: 5px;
+    }
+     .photobooth-container {
+        text-align: center;
+        padding: 20px;
+      }
+      .photobooth-preview {
+        display: none;
+        margin-top: 20px;
+        background: black;
+        padding: 10px;
+      }
+      .color-options button {
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        border: none;
+        margin: 5px;
+        cursor: pointer;
+        transition: transform 0.2s;
+      }
+      .color-options button:hover {
+        transform: scale(1.2);
+      }
+      .btn {
+        margin: 10px;
+        padding: 10px 15px;
+        font-size: 16px;
+        border: none;
+        cursor: pointer;
+        background: black;
+        color: white;
+        border-radius: 5px;
+        transition: 0.3s;
+      }
+      .btn:hover {
+        background: #444;
+      }
+/*envelope*/
+.envelope_container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh; /* Full page height */
+}
+      .valentines {
+        position: relative;
+        top:50px;
+        cursor: pointer;
+        animation: up 3s linear infinite;
+      }
+      .envelope {
+        position: relative;
+        width: 300px;
+        height:200px;
+        background-color: #f08080;
+      }
+      .envelope:before {
+        background-color: #f08080;
+        content:"";
+        position: absolute;
+        width: 212px;
+        height: 212px;
+        transform: rotate(45deg);
+        top:-105px;
+        left:44px;
+        border-radius:30px 0 0 0;
+      }
+      .card {
+        position: absolute;
+        background-color: #eae2b7;
+        width: 270px;
+        height: 170px;
+        top:5px;
+        left:15px;
+        box-shadow: -5px -5px 100px rgba(0,0,0,0.4);
+      }
+      .card:before {
+        content:"";
+        position: absolute;
+        border:3px solid #003049;
+        border-style: dotted;
+        width: 240px;
+        heighT: 140px;
+        left:12px;
+        top:12px;
+      }
+      .text {
+        position: absolute;
+        font-family: 'Brush Script MT', cursive;
+        font-size: 28px;
+        text-align: center;
+        line-height:25px;
+        top:19px;
+        left:85px;
+        color: #003049;
+      }
+      .heart {
+        background-color: #d62828;
+        display: inline-block;
+        height: 30px;
+        margin: 0 10px;
+        position: relative;
+        top: 110px;
+        left:105px;
+        transform: rotate(-45deg);
+        width: 30px;
+      }
+      .heart:before,
+      .heart:after {
+        content: "";
+        background-color: #d62828;
+        border-radius: 50%;
+        height: 30px;
+        position: absolute;
+        width: 30px;
+      }
+      .heart:before {
+        top: -15px;
+        left: 0;
+      }
+      .heart:after {
+        left: 15px;
+        top: 0;
+      }
+      .front {
+        position: absolute;
+        border-right: 180px solid #f4978e;
+        border-top: 95px solid transparent;
+        border-bottom: 100px solid transparent;
+        left:120px;
+        top:5px;
+        width:0;
+        height:0;
+        z-index:10;
+      }
+      .front:before {
+        position: absolute;
+        content:"";
+        border-left: 300px solid #f8ad9d;
+        border-top: 195px solid transparent;
+        left:-120px;
+        top:-95px;
+        width:0;
+        height:0;
+      }
+      .shadow {
+        position: absolute;
+        width: 330px;
+        height: 25px;
+        border-radius:50%;
+        background-color: rgba(0,0,0,0.3);
+        top:265px;
+        left:-15px;
+        animation: scale 3s linear infinite;
+        z-index:-1;
+      }
+      @keyframes up {
+        0%, 100% {
+          transform: translateY(0);
+        }
+        50% {
+          transform: translateY(-30px);
+        }
+      }
+      @keyframes scale {
+        0%, 100% {
+          transform: scaleX(1);
+        }
+        50% {
+          transform: scaleX(0.85);
+        }
+      }
+      .hearts {
+        position: absolute
+      }
+      .one, .two, .three, .four, .five {
+        background-color: red;
+        display: inline-block;
+        height: 10px;
+        margin: 0 10px;
+        position: relative;
+        transform: rotate(-45deg);
+        width: 10px;
+        top:50px;
+      }
+      .one:before,
+      .one:after, .two:before, .two:after, .three:before, .three:after, .four:before, .four:after, .five:before, .five:after {
+        content: "";
+        background-color: red;
+        border-radius: 50%;
+        height: 10px;
+        position: absolute;
+        width: 10px;
+      }
+      .one:before, .two:before, .three:before, .four:before, .five:before {
+        top: -5px;
+        left: 0;
+      }
+      .one:after, .two:after, .three:after, .four:after, .five:after {
+        left: 5px;
+        top: 0;
+      }
+      .one {
+        left:10px;
+        animation: heart 1s ease-out infinite;
+      }
+      .two {
+        left:30px;
+        animation: heart 2s ease-out infinite;
+      }
+      .three {
+        left:50px;
+        animation: heart 1.5s ease-out infinite;
+      }
+      .four {
+        left:70px;
+        animation: heart 2.3s ease-out infinite;
+      }
+      .five {
+        left:90px;
+        animation: heart 1.7s ease-out infinite;
+      }
+      @keyframes heart {
+        0%{
+          transform: translateY(0) rotate(-45deg) scale(0.3);
+          opacity: 1;
+        }
+        100%{
+          transform: translateY(-150px) rotate(-45deg) scale(1.3);
+          opacity: 0.5;
+        }
+      }
+      /*gallery*/
+      /* New wrapper class to avoid modifying body */
+      .xyz {
+        display: flex;
+        flex-direction: column; /* Arrange items vertically */
+        align-items: center; /* Center horizontally */
+        justify-content: flex-start; /* Align content to the top */
+        height: auto; /* Allow content to grow instead of forcing full height */
+        margin: 0;
+        min-height: 100vh;
+        overflow: hidden;
+        padding: 40px 20px; /* Add padding for spacing */
+      }
+      .w3-container {
+        text-align: center; /* Center text */
+        max-width: 700px; /* Set width limit */
+      }
+      /* Make the paragraphs visible */
+      .xyz p {
+        font-size: 18px; /* Increase font size */
+        color: #333; /* Darker color for readability */
+        line-height: 1.6; /* Improve spacing */
+        margin-bottom: 20px; /* Add spacing between paragraphs */
+      }/* Headline Container */
+      #hedlinecontainer {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-top: 20px;
+        margin-bottom: 60px;
+      }
+      #shine {
+        font-size: 60px;
+        font-weight: bold;
+        color: rgba(255, 0, 102, 0.3);
+        z-index: 10;
+        background: -webkit-gradient(linear, left top, right top, from(#222), to(#222), color-stop(0.5, #fff)) 0 0 no-repeat;
+        -webkit-background-size: 150px;
+        -webkit-background-clip: text;
+        -webkit-animation-name: shine;
+        -webkit-animation-duration: 3s;
+        -webkit-animation-iteration-count: infinite;
+        text-shadow: 0 0px 0px rgba(233, 85, 189, 0.419);
+      }
+      @-webkit-keyframes shine {
+        0%, 10% { background-position: -1000px; }
+        20% { background-position: top left; }
+        90% { background-position: top right; }
+        100% { background-position: 1000px; }
+      }
+      /* Image Gallery */
+      .gallery {
+        --d: 10s;
+        display: grid;
+        place-items: center;
+        width: 220px;
+        margin: auto;
+      }
+      .gallery > img {
+        grid-area: 1/1;
+        width: 100%;
+        aspect-ratio: 1;
+        object-fit: cover;
+        border: 10px solid #f2f2f2;
+        box-shadow: 0 0 4px #0007;
+        z-index: 2;
+        animation: slide var(--d) infinite, z-order var(--d) infinite steps(1);
+      }
+      .gallery img:last-child {
+        animation-name: slide, z-order-last;
+      }
+      .gallery > img:nth-child(1) { animation-delay: calc(0*var(--d)); --r: 16deg; }
+      .gallery > img:nth-child(2) { animation-delay: calc(-0.2*var(--d)); --r: -1deg; }
+      .gallery > img:nth-child(3) { animation-delay: calc(-0.4*var(--d)); --r: -19deg; }
+      .gallery > img:nth-child(4) { animation-delay: calc(-0.6*var(--d)); --r: 6deg; }
+      .gallery > img:nth-child(5) { animation-delay: calc(-0.8*var(--d)); --r: -8deg; }
+      @keyframes slide {
+        10% { transform: translateX(120%) rotate(var(--r)); }
+        0%, 100%, 20% { transform: translateX(0%) rotate(var(--r)); }
+      }
+      @keyframes z-order {
+        10%, 20% { z-index: 1; }
+        80% { z-index: 2; }
+      }
+      @keyframes z-order-last {
+        10%, 20% { z-index: 1; }
+        90% { z-index: 2; }
+      }
+      /* Responsive Styles */
+      @media only screen and (max-width: 600px) {
+        #shine { font-size: 22px; }
+        .gallery {
+          width: 150px;
+          margin-left: auto;
+          margin-right: auto;
+        }
+      }
+      #photobooth h5 {
+        font-size: 26px; /* Larger font */
+        margin-bottom: 30px; /* Increase gap below heading */
+      }
+      .photobooth-container {
+        text-align: center;
+        padding: 20px;
+      }
+      /* Adjust input and buttons */
+      .file-upload {
+        font-size: 18px;
+        margin-bottom: 20px; /* Space below file input */
+      }
+      h4 {
+        font-size: 22px;
+        margin-top: 20px;
+        margin-bottom: 15px; /* Add spacing */
+      }
+      /* Background color options */
+      .color-options {
+        display: flex;
+        justify-content: center;
+        gap: 15px; /* Increased gap between buttons */
+        margin-bottom: 20px; /* Add space below */
+      }
+      .color-options button {
+        width: 40px;
+        height: 40px;
+        border: none;
+        cursor: pointer;
+        border-radius: 50%;
+        transition: transform 0.3s ease-in-out;
+      }
+      .color-options button:hover {
+        transform: scale(1.1);
+      }
+      /* Adjust button size and spacing */
+      .btn {
+        font-size: 20px;
+        padding: 12px 24px;
+        margin-top: 15px; /* Space above */
+        margin-bottom: 20px; /* Space below */
+        cursor: pointer;
+      }
+      /* Photobooth preview */
+      .photobooth-preview {
+        margin-top: 30px; /* More space above preview */
+      }
+      /* Adjust download button */
+      #downloadBtn {
+        font-size: 18px;
+        padding: 10px 20px;
+        margin-top: 20px; /* Space above download button */
+      }
+      /* General Center Alignment */
+.center-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  width: 100%;
+}
+/* Specific Fix for the Photobooth */
+#photobooth {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  margin: auto;
+  width: 100%;
+  max-width: 600px; /* Adjust this width as needed */
+}
+/* Specific Fix for the Question Section */
+#question-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  margin: auto;
+  width: 100%;
+  max-width: 600px;
+}
+    </style>
+  </head>
+<body>
+<!-- Top Navigation Bar -->
+<div class="navbar">
+  <a href="#home">Home</a>
+  <a href="#about">About</a>
+  <a href="#photobooth">Photobooth</a>
+  <a href="#thequestion">THE QUESTION</a>
+</div>
+<!-- Header with image -->
+<header class="bgimg w3-display-container w3-grayscale-min" id="home">
+  <div class="w3-display-middle w3-center">
+    <span class="w3-text-white" style="font-size:70px; background: rgba(0, 0, 0, 0.5); padding: 10px;">
+      Our Story
+    </span>
+  </div>
+</header>
+<!-- About Section -->
+<div class="xyz">
+  <div class="w3-container" id="about">
+    <div class="w3-content" >
+      <h5 class="w3-center w3-padding-64">
+        <span class="w3-text-white" style="font-size:70px; background: rgba(0, 0, 0, 0.5); padding: 10px;">
+          About
+        </span>
+        <h2>US</h2>
+      </h5>
+      <p>
+        Some love stories are written in the stars, but ours was crafted in the little moments—the laughter,
+        the inside jokes, the late-night conversations, and the quiet understanding in each other's eyes.
+        This space is a celebration of those moments, a digital time capsule of our journey together. ❤️
+      </p>
+        <section id="about-us"></section>
+        <h2>Our Story: A Timeless Symphony</h2>
+    <p><strong>Ananya Dhiman</strong>—a name as graceful as the rhythm of our journey.</p>
+    <p class="quote">Some people love with soft words and quiet gestures.<br>
+      She loves like a storm—loud, relentless, impossible to ignore.</p>
+      <p class="description">
+          She fights with me over everything—big things, small things, things that don’t even matter.
+          But beneath all the stubbornness, I see it… the way she chooses me, over and over again.
+          Even when I make it difficult. Even when I don't deserve it.
+      </p>
+      <p class="description">
+          Loving me isn’t easy, I know that. Yet, somehow, she does it anyway—with fierce arguments,
+          with late-night apologies, with the kind of patience only she can have for me.
+      </p>
+      <p class="ending">
+          She is the hurricane and the safe place all at once. And maybe that’s the most beautiful kind of love there is.
+      </p>
+    <p><strong>April 11</strong></p>
+        <li>✨ First glance at <strong>12:30 PM</strong>, a quiet spark.</li>
+        <li>✨ First ‘yes’ at <strong>4:40 PM</strong>, a promise whispered between us.</li>
+        <li>✨ First kiss at <strong>5:15 PM</strong>, where words became unnecessary.</li>
+    <p><strong>April 25</strong></p>
+        <li>🖤 First hickey at <strong>5:25 PM</strong>, a stolen moment that lingered.</li>
+    <p><strong>April 28</strong></p>
+        <li>💌 Officially together. ACTUALLY, It is 11th !!!!!!!!!!!</li>
+    <p><strong>May 7</strong></p>
+        <li>💞 Completely in my arms.</li>
+    <p><strong>May 20</strong></p>
+        <li>💫 Hehe.</li>
+    <p><strong>June 26</strong></p>
+        <li>🌧️ A day where time stood still.</li>
+    <p><strong>July 14</strong></p>
+        <li>💧 Saw her cry for the first time, a moment that made me want to shield her forever.</li>
+    <h3>What She Loves</h3>
+        <li>☕ Cold coffee</li>
+        <li>🥝 Kiwi</li>
+        <li>🥭 Mango</li>
+        <li>🍜 Maggi</li>
+    <h3>Her Favorite Moments</h3>
+        <li>🌅 Watching the sunrise while enjoying <strong>Yeh Jawaani Hai Deewani</strong>, where love felt infinite.</li>
+</section>
+      <!-- Headline Section -->
+      <div id="hedlinecontainer">
+        <div id="shine">The Day We Celebrate US! 💞</div>
+      </div>
+      <!-- Image Gallery -->
+      <div class="gallery">
+        <img src="p.jpg" alt="a girl">
+        <img src="p1.jpg" alt="a girl">
+        <img src="p2.jpg" alt="a girl">
+        <img src="p3.jpg" alt="a girl">
+        <img src="p4.jpg" alt="a girl">
+        <img src="p5.jpg" alt="a girl">
+        <img src="p6.jpg" alt="a girl">
+        <img src="p7.jpg" alt="a girl">
+      </div>
+      <p>
+        I still remember that night like it was yesterday. The soft hum of the engine had faded, leaving just the quiet rustle of the trees and the warmth between us. This wasn’t just any place—it became our place. The spot where nervous glances turned into steady gazes, where unspoken words found their meaning, and where, in the stillness of the moment, we shared our first kiss.
+It was gentle, electric, perfect. The kind of kiss that lingers, not just on lips but in memory—forever tied to this place, this feeling, us. Now, every time I see this photo, my heart rewinds to that night, to you, to us. And I smile, knowing that was just the beginning.
+      </p>
+      <!-- Original Image -->
+      <img src="place1.jpg" style="width:100%;max-width:1000px" class="w3-margin-top">
+    </div>
+  </div>
+</div>
+<!-- Photobooth Section -->
+<div class="w3-container" id="photobooth" class="center-content">
+  <div class="w3-content" style="max-width:700px">
+    <h5 class="w3-center w3-padding-64">
+      <span class="w3-text-white" style="font-size:70px; background: rgba(0, 0, 0, 0.5); padding: 10px;">
+        Photobooth
+      </span>
+    <button class="photobooth-btn" onclick="window.location.href='https://retroflash.netlify.app/';">
+        📸 Open Photobooth
+    </button>
+      <!-- JavaScript for Photobooth -->
+      <script>
+        function openPhotobooth() {
+          window.open("photobooth\index.html", "_self"); // Opens in same tab
+      }
+function moveNoButton() {
+    let noBtn = document.getElementById("no-btn");
+    // Add shaking animation
+    noBtn.style.position = "relative"; // Ensure button stays in place
+    noBtn.classList.add("shake-animation"); // Apply animation
+}
+// Stop shaking when the mouse leaves (optional)
+function stopShaking() {
+    let noBtn = document.getElementById("no-btn");
+    noBtn.classList.remove("shake-animation"); // Remove animation
+}
+</script>
+<div class="w3-container w3-center w3-padding-64" style="background: radial-gradient(circle, rgb(199, 185, 159), rgb(199, 185, 159)); border-radius: 10px; box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.1);">
+  <h5 class="w3-padding-64">
+    <span style="font-size: 70px; color: white; background: rgba(252, 217, 89, 0.5); padding: 15px; border-radius: 10px; text-shadow: 0 0 10px #ff00ff, 0 0 20px #ff00ff;">
+      The Question
+    </span>
+  </h5>
+  <h6 class="w3-padding-48">
+    <span style="font-size: 24px; color: #fff; background: #ff007f; padding: 10px 20px; border-radius: 5px; display: inline-block; text-shadow: 0 0 10px white;">
+      Do you wish to continue, kind women?
+    </span>
+  </h6>
+  <div style="margin-top: 40px; position: relative;">
+    <button id="yes-btn" onclick="goToNextPage()"
+      style="font-size: 24px; padding: 15px 30px; margin: 20px; border: none; border-radius: 10px; font-weight: bold; cursor: pointer; background: #bac873; color: black; box-shadow: 0 0 10px #abc5a7, 0 0 20px #a4ac77; transition: all 0.3s ease;">
+      yea, I guess 🥱
+    </button>
+    <button id="no-btn" onmouseover="moveNoButton()"
+      style="font-size: 24px; padding: 15px 30px; margin: 20px; border: none; border-radius: 10px; font-weight: bold; cursor: pointer; background: #c48995; color: white; box-shadow: 0 0 10px #bc6f7e, 0 0 20px #db7a8e; transition: all 0.3s ease; position: relative;">
+      NO!!!! EWWWW WTF 🤮
+    </button>
+  </div>
+</div>
+<script>
+  function goToNextPage() {
+    document.body.innerHTML = `
+      <div class="w3-container w3-center w3-padding-64">
+        <div class="envelope_container" onclick="openEnvelope()">
+          <div class="valentines">
+            <div class="envelope"></div>
+            <div class="front"></div>
+            <div class="card">
+              <div class="text" id="message">HEHEH Good!<br> lubu forever! 💖</div>
+              <div class="heart"></div>
+            </div>
+          </div>
+        </div>
+        <h6 class="w3-padding-48">
+    <span style="font-size: 24px; color: #fff; background: rgb(199, 185, 159); padding: 10px 20px; border-radius: 5px; display: inline-block; text-shadow: 0 0 10px white;">
+      Well, i guess thats it. Its not much but its honest work. Please like, share and subscribe LOLLLLLL!!!! Whenever in doubt, or during fights, open this website and know that I always love you and I ain't going anywhere.
+    </span>
+  </h6>
+      </div>
+    `;
+}
+function openEnvelope() {
+    let envelope = document.querySelector(".envelope");
+    let card = document.querySelector(".card");
+    let message = document.getElementById("message");
+    // Add opening animation
+    envelope.classList.add("open");
+    card.classList.add("slide-out");
+    // Reveal message after delay
+    setTimeout(() => {
+        message.style.opacity = "1";
+    }, 1000);
+}
+</script>
+</script>
+<audio id="bg-music" autoplay loop>
+  <source src="musik.mp3" type="audio/mp3">
+  Your browser does not support the audio element.
+</audio>
+</body>
+</html>