Json026/DSA_Tutorials

1<!DOCTYPE html>2<html lang="en">3<head>4    <meta charset="UTF-8">5    <meta name="viewport" content="width=device-width, initial-scale=1.0">6    <title>Surprise for Mummy</title>7    <style>8        /* --- CSS STYLES --- */9        body {10            margin: 0;11            padding: 0;12            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;13            background: linear-gradient(180deg, #fff5f7 0%, #fce4ec 100%);14            display: flex;15            flex-direction: column;16            align-items: center;17            min-height: 100vh;18            color: #4a4a4a;19        }20 21        header {22            margin-top: 40px;23            text-align: center;24        }25 26        h1 { color: #d81b60; font-weight: 300; }27 28        /* Balloon Area */29        .balloon-container {30            display: flex;31            gap: 20px;32            margin: 50px 0;33            flex-wrap: wrap;34            justify-content: center;35        }36 37        .balloon {38            width: 70px;39            height: 90px;40            border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;41            cursor: pointer;42            transition: transform 0.2s ease-in-out;43            box-shadow: inset -5px -5px 10px rgba(0,0,0,0.1);44            animation: float 3s ease-in-out infinite;45        }46 47        @keyframes float {48            0%, 100% { transform: translateY(0); }49            50% { transform: translateY(-15px); }50        }51 52        .balloon:hover { transform: scale(1.2); }53 54        /* Polaroid Popup Overlay */55        .overlay {56            display: none; /* Hidden by default */57            position: fixed;58            top: 0; left: 0;59            width: 100%; height: 100%;60            background: rgba(0, 0, 0, 0.7);61            justify-content: center;62            align-items: center;63            z-index: 1000;64        }65 66        .polaroid {67            background: white;68            padding: 15px 15px 50px 15px;69            box-shadow: 0 15px 30px rgba(0,0,0,0.3);70            text-align: center;71            max-width: 300px;72            border-radius: 2px;73        }74 75        .polaroid img {76            width: 100%;77            height: 350px;78            object-fit: cover; /* Keeps photo from stretching */79            border: 1px solid #eee;80        }81 82        .caption {83            margin-top: 20px;84            font-size: 1.2rem;85            font-family: 'Cursive', sans-serif;86            color: #d81b60;87        }88 89        .close-btn {90            margin-top: 20px;91            padding: 8px 20px;92            background: #d81b60;93            color: white;94            border: none;95            border-radius: 20px;96            cursor: pointer;97        }98    </style>99</head>100<body>101 102    <header>103        <h1>Pop a Balloon, Mummy! 🎈</h1>104        <p>Each one has a special memory inside.</p>105    </header>106 107    <div class="balloon-container">108        <div class="balloon" style="background-color: #ff80ab;" onclick="openSurprise(0)"></div>109        <div class="balloon" style="background-color: #ba68c8;" onclick="openSurprise(1)"></div>110        <div class="balloon" style="background-color: #4fc3f7;" onclick="openSurprise(2)"></div>111    </div>112 113    <div class="overlay" id="overlay">114        <div class="polaroid">115            <img id="display-image" src="" alt="Memory">116            <div class="caption" id="display-caption"></div>117            <button class="close-btn" onclick="closeSurprise()">Close</button>118        </div>119    </div>120 121    <script>122        /* --- CONFIGURATION --- */123        // Change the links below to your own photos!124        const myMemories = [125            {126                image: "YOUR_IMAGE_URL_HERE_1.jpg", 127                text: "The prettiest woman I know! ✨"128            },129            {130                image: "YOUR_IMAGE_URL_HERE_2.jpg", 131                text: "Always by my side. ❤️"132            },133            {134                image: "YOUR_IMAGE_URL_HERE_3.jpg", 135                text: "Growing up to be just like you. 🌸"136            }137        ];138 139        function openSurprise(index) {140            const data = myMemories[index];141            document.getElementById('display-image').src = data.image;142            document.getElementById('display-caption').innerText = data.text;143            document.getElementById('overlay').style.display = 'flex';144        }145 146        function closeSurprise() {147            document.getElementById('overlay').style.display = 'none';148        }149    </script>150 151</body>152</html>