├── CNAME ├── pls.gif ├── demo.gif ├── README.md ├── LICENSE ├── index.html ├── script.js └── style.css /CNAME: -------------------------------------------------------------------------------- 1 | send-this-to-your-crush.live -------------------------------------------------------------------------------- /pls.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cocomo29/send-this-to-your-crush/HEAD/pls.gif -------------------------------------------------------------------------------- /demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cocomo29/send-this-to-your-crush/HEAD/demo.gif -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Send This to Your Crush 💘 2 | Have a crush and want to ask them out? Why not send them a landing page instead of a boring old text message or awkward in-person confession? With [send-this-to-your-crush.live](http://send-this-to-your-crush.live/) you can express your love in style with a cute message and fun interactions! 3 |
4 | demo 5 |
6 | 7 | # Contributing 🤝 8 | Have an idea to make this landing page even better? Feel free to contribute by forking the repository and submitting a pull request. But please, keep it 💖-friendly (we're trying to win hearts, not offend them!). 9 | 10 | # Disclaimer ⚠️ 11 | We cannot guarantee that this landing page will result in a successful date or relationship. Use at your own risk (but hey, at least you tried, right?). 12 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Haroon Abbasi 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 12 | 13 | 14 | 17 | Will You Go on a Date With Me? 18 | 19 | 20 | 21 | 22 |
23 |

Will You Go on a Date With Me? 👉👈

24 | 25 |
26 |
27 | 28 | 29 |
30 | Please 31 |
32 |
33 | 34 | 35 |
36 |
37 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | // Get the "No" button element 2 | const noButton = document.getElementById("no-button"); 3 | 4 | // Add a mouseover event listener to move the "No" button randomly 5 | noButton.addEventListener("mouseover", () => { 6 | const x = Math.floor(Math.random() * window.innerWidth); 7 | const y = Math.floor(Math.random() * window.innerHeight); 8 | 9 | // Restrict the "No" button's movement within the bounds of the screen 10 | const buttonWidth = noButton.offsetWidth; 11 | const buttonHeight = noButton.offsetHeight; 12 | const maxX = window.innerWidth - buttonWidth; 13 | const maxY = window.innerHeight - buttonHeight; 14 | const adjustedX = x < maxX ? x : maxX; 15 | const adjustedY = y < maxY ? y : maxY; 16 | 17 | // Apply the new position to the button 18 | noButton.style.position = "absolute"; 19 | noButton.style.left = `${adjustedX}px`; 20 | noButton.style.top = `${adjustedY}px`; 21 | }); 22 | 23 | // Get the "Yes" button element 24 | const yesButton = document.getElementById("yes-button"); 25 | 26 | // Add a click event listener to create confetti 27 | yesButton.addEventListener("click", () => { 28 | 29 | var confettiElement = document.getElementById('confetti-canvas'); 30 | var confettiSettings = { target: confettiElement, max: 729, size: 1, animate: true, props: ['circle', 'square', 'triangle', 'line'], colors: [[165,104,246],[230,61,135],[0,199,228],[253,214,126]], clock: 25, rotate: true,start_from_edge: true, respawn: true }; 31 | 32 | yesButton.style.display = "none"; 33 | noButton.style.display = "none"; 34 | 35 | var gif = document.getElementById("gif"); 36 | var header = document.getElementById("main"); 37 | header.style.display = "none"; 38 | gif.style.display = "none"; 39 | 40 | //change the style of the confetti canvas 41 | confettiElement.style.position = "absolute"; 42 | confettiElement.style.top = "0"; 43 | confettiElement.style.left = "0"; 44 | confettiElement.style.width = "100%"; 45 | confettiElement.style.height = "100%"; 46 | confettiElement.style.zIndex = "1000"; 47 | 48 | 49 | var confetti = new ConfettiGenerator(confettiSettings); 50 | 51 | confetti.render(); 52 | 53 | let p = document.createElement("p"); 54 | p.innerText = "Congrats you made the right choice 🎉 \nDM me the time and venue 😉"; 55 | p.style.fontSize = "2rem"; 56 | p.style.fontWeight = "bold"; 57 | p.style.textAlign = "center"; 58 | p.style.position = "absolute"; 59 | p.style.top = "50%"; 60 | p.style.left = "50%"; 61 | p.style.transform = "translate(-50%, -50%)"; 62 | document.body.appendChild(p); 63 | }); 64 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | html, 8 | body { 9 | height: 100%; 10 | } 11 | 12 | body { 13 | display: flex; 14 | flex-direction: column; 15 | justify-content: space-between; 16 | font-family: sans-serif; 17 | font-size: 1.2rem; 18 | background-color: #f2f2f2; 19 | } 20 | 21 | header { 22 | background-color: #333; 23 | color: #fff; 24 | padding: 1rem; 25 | text-align: center; 26 | } 27 | 28 | main { 29 | display: flex; 30 | flex-direction: column; 31 | align-items: center; 32 | justify-content: center; 33 | height: 100%; 34 | } 35 | 36 | .gif-container { 37 | margin-bottom: 1rem; 38 | } 39 | 40 | .gif-container img { 41 | max-width: 100%; 42 | height: auto; 43 | 44 | } 45 | 46 | .button-container { 47 | display: flex; 48 | justify-content: center; 49 | } 50 | 51 | button { 52 | padding: 1rem 2rem; 53 | margin: 0 1rem; 54 | border-radius: 5px; 55 | border: none; 56 | font-weight: bold; 57 | cursor: pointer; 58 | transition: transform 0.2s; 59 | } 60 | 61 | button:hover { 62 | transform: scale(1.1); 63 | } 64 | 65 | #no-button { 66 | background-color: #e74c3c; 67 | color: #fff; 68 | } 69 | 70 | #no-button:hover { 71 | animation: shake 0.5s; 72 | animation-iteration-count: infinite; 73 | } 74 | 75 | @keyframes shake { 76 | 0% { 77 | transform: translate(0, 0); 78 | } 79 | 25% { 80 | transform: translate(-5px, 0); 81 | } 82 | 50% { 83 | transform: translate(0, -5px); 84 | } 85 | 75% { 86 | transform: translate(5px, 0); 87 | } 88 | 100% { 89 | transform: translate(0, 0); 90 | } 91 | } 92 | 93 | #yes-button { 94 | background-color: #2ecc71; 95 | color: #fff; 96 | } 97 | #confetti-canvas { 98 | width: 0%; 99 | height: 0%; 100 | } 101 | 102 | .octo-arm { 103 | animation: rotateTail 2s ease-in-out infinite; 104 | } 105 | 106 | @keyframes rotateTail { 107 | 0% { 108 | transform: rotate(0); 109 | } 110 | 20% { 111 | transform: rotate(20deg); 112 | } 113 | 40% { 114 | transform: rotate(0deg); 115 | } 116 | 60% { 117 | transform: rotate(-20deg); 118 | } 119 | 80% { 120 | transform: rotate(0deg); 121 | } 122 | 100% { 123 | transform: rotate(0); 124 | } 125 | } 126 | 127 | 128 | 129 | @media screen and (max-width: 768px) { 130 | header { 131 | font-size: 1.5rem; 132 | } 133 | main { 134 | padding: 1rem; 135 | } 136 | .gif-container { 137 | /* margin-top: 20px; */ 138 | margin-bottom: 0.5rem; 139 | } 140 | button { 141 | padding: 0.5rem 1rem; 142 | margin: 0.5rem; 143 | font-size: 1rem; 144 | } 145 | } 146 | --------------------------------------------------------------------------------