├── bun.lockb ├── googlef0fe230af27a6356.html ├── public ├── favicon.ico ├── favicon-16x16.png ├── favicon-32x32.png ├── apple-touch-icon.png └── vite.svg ├── src ├── assets │ ├── bg.avif │ ├── bg1.webp │ ├── bg-1.webp │ ├── All You Need Is Love SVG Cut File.svg │ └── Love In The Air SVG Cut File.svg ├── main.jsx ├── index.css └── App.jsx ├── postcss.config.js ├── vite.config.js ├── tailwind.config.js ├── .gitignore ├── .eslintrc.cjs ├── package.json ├── LICENSE ├── README.md └── index.html /bun.lockb: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Xeven777/valentine/HEAD/bun.lockb -------------------------------------------------------------------------------- /googlef0fe230af27a6356.html: -------------------------------------------------------------------------------- 1 | google-site-verification: googlef0fe230af27a6356.html -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Xeven777/valentine/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /src/assets/bg.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Xeven777/valentine/HEAD/src/assets/bg.avif -------------------------------------------------------------------------------- /src/assets/bg1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Xeven777/valentine/HEAD/src/assets/bg1.webp -------------------------------------------------------------------------------- /src/assets/bg-1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Xeven777/valentine/HEAD/src/assets/bg-1.webp -------------------------------------------------------------------------------- /public/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Xeven777/valentine/HEAD/public/favicon-16x16.png -------------------------------------------------------------------------------- /public/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Xeven777/valentine/HEAD/public/favicon-32x32.png -------------------------------------------------------------------------------- /public/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Xeven777/valentine/HEAD/public/apple-touch-icon.png -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | export default { 3 | content: [ 4 | "./index.html", 5 | "./src/**/*.{js,ts,jsx,tsx}", 6 | ], 7 | theme: { 8 | extend: {}, 9 | }, 10 | plugins: [], 11 | } -------------------------------------------------------------------------------- /src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App.jsx' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:react/recommended', 7 | 'plugin:react/jsx-runtime', 8 | 'plugin:react-hooks/recommended', 9 | ], 10 | ignorePatterns: ['dist', '.eslintrc.cjs'], 11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 12 | settings: { react: { version: '18.2' } }, 13 | plugins: ['react-refresh'], 14 | rules: { 15 | 'react-refresh/only-export-components': [ 16 | 'warn', 17 | { allowConstantExport: true }, 18 | ], 19 | }, 20 | } 21 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Protest+Riot&display=swap"); 2 | @tailwind base; 3 | @tailwind components; 4 | @tailwind utilities; 5 | * { 6 | margin: 0; 7 | padding: 0; 8 | box-sizing: border-box; 9 | } 10 | :root { 11 | font-family: "Protest Riot", system-ui, Avenir, Helvetica, Arial, sans-serif; 12 | line-height: 1.5; 13 | font-weight: 400; 14 | font-synthesis: none; 15 | text-rendering: optimizeLegibility; 16 | -webkit-font-smoothing: antialiased; 17 | -moz-osx-font-smoothing: grayscale; 18 | } 19 | body { 20 | background: url("./assets/bg1.webp"); 21 | background-position: center; 22 | background-size: cover; 23 | background-attachment: fixed; 24 | } 25 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "valentine", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.2.0", 14 | "react-dom": "^18.2.0" 15 | }, 16 | "devDependencies": { 17 | "@types/react": "^18.2.43", 18 | "@types/react-dom": "^18.2.17", 19 | "@vitejs/plugin-react": "^4.2.1", 20 | "autoprefixer": "^10.4.17", 21 | "eslint": "^8.55.0", 22 | "eslint-plugin-react": "^7.33.2", 23 | "eslint-plugin-react-hooks": "^4.6.0", 24 | "eslint-plugin-react-refresh": "^0.4.5", 25 | "postcss": "^8.4.33", 26 | "tailwindcss": "^3.4.1", 27 | "vite": "^5.0.8" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 Anish 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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 🥰 Be My Valentine? 🥰 2 | 3 | ![Project Image](https://i.imgur.com/8q884zI.png) 4 | 5 | Welcome to the most adorable project you've ever seen! This is a special React application designed to ask that special someone: "Will you be my Valentine?". 6 | 7 | ## 💖 What's Inside? 💖 8 | [Link to site](https://formyvalentine.netlify.app) 9 | 10 | This project is built with love using React and Vite. It features a cute and interactive UI that playfully nudges the user towards saying "Yes" to being your Valentine. 11 | 12 | ## 🎁 Features 🎁 13 | 14 | - Cute and playful animations 15 | - Interactive buttons that respond to user interaction 16 | - Lovely images and heartwarming messages 17 | 18 | ## 🚀 Getting Started 🚀 19 | 20 | To get started with this project, follow these steps: 21 | 22 | 1. Clone the repository 23 | 2. Install the dependencies with `npm/pnpm/bun install` 24 | 3. Start the development server with `npm/pnpm/bun run dev` 25 | 26 | Now you're ready to ask the big question! 27 | 28 | ## 💕 Made with Love 💕 29 | 30 | This project was made with love by [Anish](https://github.com/xeven777). Feel free to use it to ask your own special someone to be your Valentine! 31 | 32 | ## 💌 Feedback and Contributions 💌 33 | 34 | Feedback and contributions are always welcome! Feel free to open an issue or submit a pull request. 35 | 36 | Happy Valentine's Day! 💘 37 | --- 38 | watching_count 39 | -------------------------------------------------------------------------------- /public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | Be my Valentine? 24 | 25 | 26 | 27 | 28 | 35 | 36 | 37 | 38 |
39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /src/App.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import lovesvg from "./assets/All You Need Is Love SVG Cut File.svg"; 3 | import lovesvg2 from "./assets/Love In The Air SVG Cut File.svg"; 4 | 5 | export default function Page() { 6 | const [noCount, setNoCount] = useState(0); 7 | const [yesPressed, setYesPressed] = useState(false); 8 | const yesButtonSize = noCount * 20 + 16; 9 | 10 | const handleNoClick = () => { 11 | setNoCount(noCount + 1); 12 | }; 13 | 14 | const getNoButtonText = () => { 15 | const phrases = [ 16 | "No", 17 | "Are you sure?", 18 | "Really sure?", 19 | "Think again!", 20 | "Last chance!", 21 | "Surely not?", 22 | "You might regret this!", 23 | "Give it another thought!", 24 | "Are you absolutely certain?", 25 | "This could be a mistake!", 26 | "Have a heart!", 27 | "Don't be so cold!", 28 | "Change of heart?", 29 | "Wouldn't you reconsider?", 30 | "Is that your final answer?", 31 | "You're breaking my heart ;(", 32 | "Is that your final answer?", 33 | "You're breaking my heart ;(", 34 | "Plsss? :( You're breaking my heart", 35 | ]; 36 | 37 | return phrases[Math.min(noCount, phrases.length - 1)]; 38 | }; 39 | 40 | return ( 41 |
42 | {yesPressed ? ( 43 | <> 44 | 45 |
46 | Ok Yayyyyy!!! 47 |
48 | 49 | ) : ( 50 | <> 51 | 55 | 59 | 63 |

64 | Will you be my Valentine? 65 |

66 |
67 | 74 | 80 |
81 | 82 | )} 83 |
85 | ); 86 | } 87 | 88 | const Footer = () => { 89 | return ( 90 | 95 | Made with{" "} 96 | 97 | ❤️ 98 | 99 | 100 | ); 101 | }; 102 | -------------------------------------------------------------------------------- /src/assets/All You Need Is Love SVG Cut File.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 9 | 47 | 135 | 136 | -------------------------------------------------------------------------------- /src/assets/Love In The Air SVG Cut File.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 9 | 56 | 152 | 153 | --------------------------------------------------------------------------------