Merge pull request #871 from SonitBahl/SonitBahl-patch-1

Ayushparikh-code · web-flow · commit f886bcd5d923 · 2024-10-29T11:45:48.000+05:30
Button escape project
diff --git a/DateGuarantee/Readme.md b/DateGuarantee/Readme.md
@@ -0,0 +1,18 @@
+# DateGuarantee
+
+Welcome to the DateGuarantee project! This web-based application helps users make confident choices by presenting a simple yes/no question. When users click the "No" button, it moves away, leaving only the "Yes" button to click.
+
+## Features
+
+- Interactive interface with a yes/no choice
+- Dynamic movement of the "No" button when clicked
+- Customizable background video
+
+## Getting Started
+
+### Prerequisites
+
+Make sure you have a basic web server set up to serve the HTML files.
+
+## Note
+Please remember to add a bg.mp4 to have a custom background.
diff --git a/DateGuarantee/congrats.html b/DateGuarantee/congrats.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="styles.css">
+    <title>Congratulations!</title>
+</head>
+<body>
+
+<video id="bgVideo" autoplay loop muted>
+    <source src="bg.mp4" type="video/mp4">
+</video>
+
+<h1>YAY <3</h1>
+
+<script src="script.js"></script>
+</body>
+</html>
diff --git a/DateGuarantee/index.html b/DateGuarantee/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="styles.css">
+    <title>Date</title>
+</head>
+<body>
+
+<video id="bgVideo" autoplay loop muted>
+    <source src="bg.mp4" type="video/mp4">
+</video>
+
+<h1>Date?</h1>
+<div class="button-container">
+    <button id="yesBtn" onclick="redirectToCongrats()">Yes</button>
+    <button id="noBtn" onclick="moveNoButton()">No</button>
+</div>
+
+<script src="script.js"></script>
+</body>
+</html>
diff --git a/DateGuarantee/script.js b/DateGuarantee/script.js
@@ -0,0 +1,16 @@
+function redirectToCongrats() {
+    window.location.href = 'congrats.html';
+}
+
+function moveNoButton() {
+    const button = document.getElementById('noBtn');
+    const maxX = window.innerWidth - button.offsetWidth;
+    const maxY = window.innerHeight - button.offsetHeight;
+
+    const newX = Math.floor(Math.random() * maxX);
+    const newY = Math.floor(Math.random() * maxY);
+
+    button.style.position = 'absolute'; 
+    button.style.left = `${newX}px`;
+    button.style.top = `${newY}px`;
+}
diff --git a/DateGuarantee/styles.css b/DateGuarantee/styles.css
@@ -0,0 +1,36 @@
+body {
+    margin: 0;
+    padding: 0;
+    height: 100vh;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+}
+
+#bgVideo {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    z-index: -1;
+}
+
+.button-container {
+    text-align: center;
+    z-index: 1;
+}
+
+button {
+    padding: 10px 20px;
+    font-size: 16px;
+    cursor: pointer;
+    display: block;
+    margin: 10px auto;
+}
+
+h1 {
+    text-align: center;
+    color: white;
+}
