Untitled

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sorry, Sakshi 🌻</title>
<style>
    body {
                font-family: 'Comic Sans MS', cursive, sans-serif;
                        background: linear-gradient(120deg, #fdd6e0, #ffd1dc);
                                display: flex;
                                        flex-direction: column;
                                                align-items: center;
                                                        justify-content: flex-start;
                                                                text-align: center;
                                                                        overflow: hidden;
                                                                                padding-top: 50px;
                                                                                        height: 100vh;
    }
        h1 {
                    color: #ff4d6d;
                            font-size: 2.2em;
                                    margin-bottom: 15px;
        }
            p {
                        font-size: 1.2em;
                                margin-bottom: 30px;
                                        color: #555;
                                                max-width: 90%;
            }
                #buttons {
                            position: relative;
                                    width: 100%;
                                            height: 150px;
                }
                    button {
                                padding: 15px 25px;
                                        font-size: 1.1em;
                                                border: none;
                                                        border-radius: 12px;
                                                                cursor: pointer;
                                                                        margin: 10px;
                                                                                transition: all 0.2s ease;
                                                                                        background-color: #ffb6c1;
                                                                                                color: #fff;
                                                                                                        box-shadow: 0 4px 6px rgba(0,0,0,0.2);
                                                                                                                position: absolute;
                    }
                        .floatItem {
                                    position: absolute;
                                            pointer-events: none;
                                                    font-size: 1.5em;
                                                            opacity: 0.9;
                                                                    animation: floatDown linear forwards;
                        }
                            @keyframes floatDown {
                                        0% { transform: translateY(-50px) rotate(0deg); opacity: 1; }
                                                100% { transform: translateY(100vh) rotate(360deg); opacity: 0; }
                            }
                            </style>
                            </head>
                            <body>

                            <div id="content">
                                <h1>Hey Sakshi 🌻</h1>
                                    <p>Sakshi, I am really sorry for what I did. I will make sure it never happens. I can understand what you are going through. I am really sorry, my phooljhadi 🌻</p>
                                    </div>

                                    <div id="buttons">
                                        <button id="forgiveBtn">I Forgaved You 💖</button>
                                            <button id="angryBtn">No, I'm still angry 😡</button>
                                            </div>

                                            <script>
                                            const forgiveBtn = document.getElementById('forgiveBtn');
                                            const angryBtn = document.getElementById('angryBtn');

                                            // Angry button dodge
                                            function moveAngryBtn() {
                                                    const containerHeight = 150;
                                                        const x = Math.random() * (window.innerWidth - angryBtn.offsetWidth - 20);
                                                            const y = Math.random() * (containerHeight - angryBtn.offsetHeight);
                                                                angryBtn.style.left = x + 'px';
                                                                    angryBtn.style.top = y + 'px';
                                            }
                                            angryBtn.addEventListener('touchstart', e => { e.preventDefault(); moveAngryBtn(); moveAngryBtn(); });

                                            // Create a floating flower or heart
                                            function createFloatItem() {
                                                    const item = document.createElement('div');
                                                        item.classList.add('floatItem');
                                                            const symbols = ['🌸','🌼','🌻','💐','🌺','🌷','💖','💛','❤️','💝'];
                                                                item.textContent = symbols[Math.floor(Math.random()*symbols.length)];
                                                                    item.style.left = Math.random()*window.innerWidth + 'px';
                                                                        item.style.fontSize = (Math.random()*25 + 15) + 'px';
                                                                            item.style.animationDuration = (3 + Math.random()*2) + 's';
                                                                                item.style.transform = `rotate(${Math.random()*360}deg)`;
                                                                                    document.body.appendChild(item);
                                                                                        setTimeout(()=> item.remove(), 5000);
                                            }

                                            // Forgive button click
                                            forgiveBtn.addEventListener('click', () => {
                                                    forgiveBtn.style.display = 'none';
                                                        angryBtn.style.display = 'none';
                                                            const content = document.getElementById('content');
                                                                content.innerHTML = `<h1>Thanks a lot, your forgiveness is appreciated! 💖</h1>`;
                                                                    document.body.style.background = "linear-gradient(120deg, #a8edea, #fed6e3)";

                                                                        // Smooth shower of flowers and hearts
                                                                            const interval = setInterval(createFloatItem, 100);
                                                                                setTimeout(() => clearInterval(interval), 7000); // 7 seconds shower
                                            });
                                            </script>

                                            </body>
                                            </html>
                                            })
                                            }
                                            }
                            }
                        }
                    }
                }
            }
        }
    }