From b3cd3f701353f6b602fe622c570d4cc05d62d7fd Mon Sep 17 00:00:00 2001
From: mohha123547 <mo5833933@gmail.com>
Date: Mon, 27 Oct 2025 04:21:47 -0700
Subject: [PATCH] Add initial HTML structure for Valentine page

---
 website | 325 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 325 insertions(+)
 create mode 100644 website
diff --git a/website b/website
new file mode 100644
index 0000000..6c55270
--- /dev/null
+++ b/website
@@ -0,0 +1,325 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width,initial-scale=1" />
+  <title>BE MY VALENTINE♥</title>
+  <link rel="stylesheet" href="styles.css">
+  <style>
+    body {
+      padding: 25px;
+      background: linear-gradient(135deg, #ffafbd, #ffc0cb);
+      color: #333;
+      font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      min-height: 100vh;
+      margin: 0;
+      flex-direction: column;
+      position: relative;
+      overflow-x: hidden;
+      height: 100vh;
+    }
+
+    .title {
+      color: #5C6AC4;
+      font-family: "Playfair Display", serif;
+      text-align: center;
+      font-size: 2.5rem;
+      margin-bottom: 20px;
+      text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
+      animation: glow 2s infinite alternate;
+    }
+    
+    @keyframes glow {
+      from { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #e60073, 0 0 20px #e60073; }
+      to { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6; }
+    }
+    
+    .image-container {
+      text-align: center;
+      margin: 20px 0;
+      max-width: 90%;
+    }
+    
+    .wedding-image {
+      max-width: 100%;
+      height: auto;
+      border-radius: 15px;
+      box-shadow: 0 8px 16px rgba(0,0,0,0.15);
+      transition: transform 0.3s ease;
+    }
+    
+    .wedding-image:hover {
+      transform: scale(1.05);
+    }
+    
+    .buttons-container {
+      display: flex;
+      justify-content: center;
+      gap: 20px;
+      width: 100%;
+      margin-top: 30px;
+      padding: 0 25px;
+      flex-wrap: wrap;
+    }
+    
+    .btn {
+      padding: 15px 30px;
+      font-size: 1.2rem;
+      border: none;
+      border-radius: 50px;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      font-weight: bold;
+      background-color: #333;
+      color: #fff;
+      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+      min-width: 120px;
+      flex: 1;
+      max-width: 180px;
+    }
+    
+    .yes-btn {
+      background: linear-gradient(to right, #ff6b6b, #ff8e8e);
+      color: white;
+    }
+    
+    .no-btn {
+      background: linear-gradient(to right, #4ecdc4, #7eddd6);
+      color: white;
+    }
+    
+    .btn:hover {
+      transform: translateY(-5px) scale(1.05);
+      box-shadow: 0 8px 16px rgba(0,0,0,0.3);
+    }
+    
+    .btn:active {
+      transform: translateY(0) scale(0.98);
+    }
+    
+    .section {
+      display: none;
+      text-align: center;
+      padding: 30px;
+      margin-top: 20px;
+      background: rgba(255, 255, 255, 0.9);
+      border-radius: 15px;
+      box-shadow: 0 8px 32px rgba(0,0,0,0.1);
+      max-width: 90%;
+      animation: fadeIn 0.5s ease;
+    }
+    
+    @keyframes fadeIn {
+      from { opacity: 0; transform: translateY(20px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    
+    .active {
+      display: block;
+    }
+    
+    .back-btn {
+      margin-top: 20px;
+      background: linear-gradient(to right, #5C6AC4, #7a8bc4);
+      color: white;
+      padding: 12px 24px;
+    }
+    
+    .floating-emoji {
+      position: absolute;
+      font-size: 24px;
+      animation: float 15s infinite linear;
+      z-index: -1;
+      user-select: none;
+    }
+    
+    @keyframes float {
+      0% {
+        transform: translateY(100vh) rotate(0deg);
+        opacity: 0;
+      }
+      10% {
+        opacity: 1;
+      }
+      90% {
+        opacity: 1;
+      }
+      100% {
+        transform: translateY(-100px) rotate(360deg);
+        opacity: 0;
+      }
+    }
+    
+    .name-input {
+      margin: 20px 0;
+      padding: 10px 15px;
+      border-radius: 50px;
+      border: 2px solid #5C6AC4;
+      font-size: 1.1rem;
+      width: 80%;
+      max-width: 300px;
+      text-align: center;
+    }
+    
+    .message {
+      font-size: 1.2rem;
+      margin: 20px 0;
+      line-height: 1.6;
+    }
+    
+    @media (max-width: 768px) {
+      .title {
+        font-size: 2rem;
+      }
+      
+      .buttons-container {
+        flex-direction: column;
+        align-items: center;
+        gap: 15px;
+      }
+      
+      .btn {
+        width: 80%;
+        max-width: 250px;
+      }
+      
+      .section {
+        padding: 20px;
+      }
+    }
+    
+    .heart {
+      animation: pulse 1.5s infinite;
+    }
+    
+    @keyframes pulse {
+      0% { transform: scale(1); }
+      50% { transform: scale(1.1); }
+      100% { transform: scale(1); }
+    }
+    
+    .letter {
+      font-family: "Georgia", serif;
+      font-size: 1.1rem;
+      line-height: 1.8;
+      text-align: left;
+      max-width: 600px;
+      margin: 0 auto;
+      padding: 20px;
+      background: rgba(255, 255, 255, 0.8);
+      border-radius: 10px;
+      box-shadow: 0 4px 15px rgba(0,0,0,0.1);
+    }
+    
+    .letter h3 {
+      color: #ff6b6b;
+      text-align: center;
+      margin-top: 0;
+    }
+    
+    .letter p {
+      margin: 15px 0;
+    }
+    
+    .letter .signature {
+      text-align: right;
+      font-style: italic;
+      margin-top: 30px;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <h1 class="title">BE MY VALENTINE♥</h1>
+    <div class="image-container">
+      <img src="https://uploads.onecompiler.io/437vq7ujm/442jzbdb2/download%20(8).jpg" alt="Valentine Photo" class="wedding-image">
+    </div>
+    <div class="buttons-container">
+      <button class="btn yes-btn" onclick="showSection('yes-section')" aria-label="Yes, I want to be your Valentine">YES</button>
+      <button class="btn no-btn" onclick="showSection('no-section')" aria-label="No, I don't want to be your Valentine">NO</button>
+    </div>
+  </div>
+  
+  <div id="yes-section" class="section">
+    <h2 class="title">YAY! I KNEW YOU'D SAY YES! ❤️</h2>
+    <p class="message">Thank you for being my Valentine! I'm so happy you chose to be with me.</p>
+    <img src="https://uploads.onecompiler.io/437vq7ujm/442jzbdb2/5bdb0e92-e0a9-47af-a8c2-62ea8df8f5e9.jpg" alt="Happy Valentine" class="wedding-image">
+    <br>
+    <button class="btn back-btn" onclick="showMainPage()">BACK</button>
+  </div>
+  
+  <div id="no-section" class="section">
+    <h2 class="title">OH NO! BUT I LOVE YOU ANYWAY! ❤️</h2>
+    <p class="message">Even if you said no, I still want to be your Valentine. You're amazing!</p>
+    <img src="https://uploads.onecompiler.io/437vq7ujm/442jzbdb2/ff8e42cb-1315-4463-a826-4f77d7b95be9.jpg" alt="Sweet Valentine" class="wedding-image">
+    <br>
+    <button class="btn back-btn" onclick="showMainPage()">BACK</button>
+  </div>
+
+  <div id="love-letter-section" class="section">
+    <h2 class="title">A LOVE LETTER FOR YOU</h2>
+    <div class="letter">
+      <h3>My Dearest Valentine,</h3>
+      <p>Every moment with you feels like a beautiful dream. Your smile lights up my world, and your presence makes every day brighter.</p>
+      <p>I cherish all the memories we've created together and look forward to making more unforgettable moments.</p>
+      <p>You are not just my Valentine, but my best friend, my partner, and my greatest joy.</p>
+      <p>With all my love,</p>
+      <p class="signature">Your Valentine</p>
+    </div>
+    <br>
+    <button class="btn back-btn" onclick="showMainPage()">BACK</button>
+  </div>
+
+  <script>
+    // Create floating emojis
+    function createFloatingEmojis() {
+      const emojis = ['❤️', '💕', '💖', '💗', '💓', '💞', '💘', '💝', '💌', '💋', '🌹', '💐', '🌸', '🌺'];
+      const container = document.body;
+      
+      for (let i = 0; i < 30; i++) {
+        const emoji = document.createElement('div');
+        emoji.className = 'floating-emoji';
+        emoji.textContent = emojis[Math.floor(Math.random() * emojis.length)];
+        
+        // Random position
+        emoji.style.left = Math.random() * 100 + 'vw';
+        emoji.style.animationDuration = (Math.random() * 10 + 10) + 's';
+        emoji.style.animationDelay = Math.random() * 5 + 's';
+        emoji.style.fontSize = (Math.random() * 20 + 15) + 'px';
+        emoji.style.opacity = Math.random() * 0.7 + 0.3;
+        
+        container.appendChild(emoji);
+      }
+    }
+    
+    // Call the function when page loads
+    window.onload = createFloatingEmojis;
+    
+    function showSection(sectionId) {
+      // Hide all sections
+      document.querySelectorAll('.section').forEach(section => {
+        section.classList.remove('active');
+      });
+      
+      // Show the selected section
+      document.getElementById(sectionId).classList.add('active');
+      
+      // Hide the main content (buttons and title)
+      document.querySelector('.container').style.display = 'none';
+    }
+    
+    function showMainPage() {
+      // Hide all sections
+      document.querySelectorAll('.section').forEach(section => {
+        section.classList.remove('active');
+      });
+      
+      // Show the main content (buttons and title)
+      document.querySelector('.container').style.display = 'block';
+    }
+  </script>
+</body>
+</html>
