├── public ├── fondo.jpg ├── fondo2.jpg └── vite.svg ├── postcss.config.js ├── src ├── index.css ├── assets │ ├── depositphotos_1104107-stock-photo-valentine.jpg │ └── react.svg ├── main.jsx ├── App.css └── App.jsx ├── vite.config.js ├── tailwind.config.js ├── .gitignore ├── index.html ├── README.md ├── .eslintrc.cjs └── package.json /public/fondo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Maxsoll159/proyectoSanValentin/HEAD/public/fondo.jpg -------------------------------------------------------------------------------- /public/fondo2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Maxsoll159/proyectoSanValentin/HEAD/public/fondo2.jpg -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | .fondo{ 6 | background-image: url("/fondo2.jpg"); 7 | 8 | } -------------------------------------------------------------------------------- /src/assets/depositphotos_1104107-stock-photo-valentine.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Maxsoll159/proyectoSanValentin/HEAD/src/assets/depositphotos_1104107-stock-photo-valentine.jpg -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react-swc' 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 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | ¿Quieres ser mi San Valentin? 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /.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/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | max-width: 1280px; 3 | margin: 0 auto; 4 | padding: 2rem; 5 | text-align: center; 6 | } 7 | 8 | .logo { 9 | height: 6em; 10 | padding: 1.5em; 11 | will-change: filter; 12 | transition: filter 300ms; 13 | } 14 | .logo:hover { 15 | filter: drop-shadow(0 0 2em #646cffaa); 16 | } 17 | .logo.react:hover { 18 | filter: drop-shadow(0 0 2em #61dafbaa); 19 | } 20 | 21 | @keyframes logo-spin { 22 | from { 23 | transform: rotate(0deg); 24 | } 25 | to { 26 | transform: rotate(360deg); 27 | } 28 | } 29 | 30 | @media (prefers-reduced-motion: no-preference) { 31 | a:nth-of-type(2) .logo { 32 | animation: logo-spin infinite 20s linear; 33 | } 34 | } 35 | 36 | .card { 37 | padding: 2em; 38 | } 39 | 40 | .read-the-docs { 41 | color: #888; 42 | } 43 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "proyectosanvalentin", 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 | "js-confetti": "^0.12.0", 14 | "react": "^18.2.0", 15 | "react-dom": "^18.2.0" 16 | }, 17 | "devDependencies": { 18 | "@types/react": "^18.2.43", 19 | "@types/react-dom": "^18.2.17", 20 | "@vitejs/plugin-react-swc": "^3.5.0", 21 | "autoprefixer": "^10.4.17", 22 | "eslint": "^8.55.0", 23 | "eslint-plugin-react": "^7.33.2", 24 | "eslint-plugin-react-hooks": "^4.6.0", 25 | "eslint-plugin-react-refresh": "^0.4.5", 26 | "postcss": "^8.4.34", 27 | "tailwindcss": "^3.4.1", 28 | "vite": "^5.0.8" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/App.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import JSConfetti from 'js-confetti' 3 | function App() { 4 | 5 | 6 | const jsConfetti = new JSConfetti() 7 | const [randomValor, setRandomValor] = useState({}) 8 | 9 | const [imagenCargada, setImagenCargada] = useState(false); 10 | const [agrandar, setAgrandar] = useState(45) 11 | 12 | 13 | const [valueSi, setValueSi] = useState(false) 14 | 15 | let random = [{ 16 | id: 1, 17 | description: "Di si por favor", 18 | img: "https://i.pinimg.com/originals/db/aa/c1/dbaac13f6278b91a15e480752b8a7242.gif" 19 | }, 20 | { 21 | id: 1, 22 | description: "Piénsalo de nuevo.", 23 | img: "https://i.pinimg.com/originals/77/6b/21/776b215bed3deeef47fd3aa657685a18.gif" 24 | } 25 | , 26 | { 27 | id: 2, 28 | description: "Vamos, atrévete a decir que sí.", 29 | img: "https://www.gifmaniacos.es/wp-content/uploads/2019/05/gatitos-kawaii-gifmaniacos.es-19.gif" 30 | }, 31 | { 32 | id: 3, 33 | description: "No tengas miedo, será genial.", 34 | img: "https://i.pinimg.com/originals/e1/c3/88/e1c388133e0f998e25bb17c837b74a14.gif" 35 | }, 36 | { 37 | id: 4, 38 | description: "Confía en mí, será divertido.", 39 | img: "https://media.tenor.com/Bn88VELdNI8AAAAi/peach-goma.gif" 40 | }, 41 | { 42 | id: 5, 43 | description: "No tengas dudas, te hará sonreír.", 44 | img: "https://i.pinimg.com/originals/c6/b3/0d/c6b30d1a2dc178aeb92de63295d4ae64.gif" 45 | }, 46 | { 47 | id: 6, 48 | description: "Te prometo que será inolvidable.", 49 | img: "https://media.tenor.com/N2oqtqaB_G0AAAAi/peach-goma.gif" 50 | }, 51 | { 52 | id: 7, 53 | description: "No dejes que el miedo te detenga.", 54 | img: "https://i.pinimg.com/originals/db/aa/c1/dbaac13f6278b91a15e480752b8a7242.gif" 55 | }, 56 | { 57 | id: 8, 58 | description: "Confía en el destino, nos está dando una señal.", 59 | img: "https://media.tenor.com/cbEccaK9QxMAAAAi/peach-goma.gif" 60 | }, 61 | { 62 | id: 9, 63 | description: "Confía en mí.", 64 | img: "https://i.pinimg.com/originals/db/aa/c1/dbaac13f6278b91a15e480752b8a7242.gif" 65 | }, 66 | { 67 | id: 10, 68 | description: "No te arrepentirás.", 69 | img: "https://media.tenor.com/I7KdFaMzUq4AAAAi/peach-goma.gif" 70 | }] 71 | 72 | const randomResponse = () => { 73 | let index = Math.floor(Math.random() * 11); 74 | console.log(random[index]) 75 | if (agrandar <= 500) { 76 | setAgrandar(agrandar + 10) 77 | } 78 | setRandomValor(random[index]); 79 | } 80 | 81 | 82 | const handleImageLoad = () => { 83 | setImagenCargada(true); 84 | } 85 | 86 | 87 | return ( 88 |
89 | { 90 | !valueSi ? ( 91 |
92 |

¿Quieres ser mi San Valentin?

93 | San Valentin 95 |
96 | 108 | 116 |
117 |
118 | ) : ( 119 |
120 |

Sabia que dirias que si ❤️!

121 | 122 | 123 |
124 | ) 125 | } 126 |
127 | ) 128 | } 129 | 130 | export default App 131 | --------------------------------------------------------------------------------