From 20b837bf29096a233382c76bd22d0bea117e6b93 Mon Sep 17 00:00:00 2001 From: Ronnie Date: Mon, 26 May 2025 20:56:45 -0400 Subject: [PATCH] first commit --- README.md | 37 ++++++ index.html | 61 ++++++++++ script.js | 347 +++++++++++++++++++++++++++++++++++++++++++++++++++++ styles.css | 135 +++++++++++++++++++++ 4 files changed, 580 insertions(+) create mode 100644 README.md create mode 100644 index.html create mode 100644 script.js create mode 100644 styles.css diff --git a/README.md b/README.md new file mode 100644 index 0000000..01f8e6a --- /dev/null +++ b/README.md @@ -0,0 +1,37 @@ +# What's My Vibe? + +A fun, interactive web application that tells you your current vibe. Click the button to get a random vibe reading! + +## Features + +- Beautiful animated gradient background +- Interactive floating particles +- Random vibe generator +- Modern, clean UI +- Fully responsive design + +## How to Use + +1. Open `index.html` in your web browser +2. Click the "Read My Vibe" button +3. Get your vibe reading! + +## Technologies Used + +- HTML5 +- CSS3 +- JavaScript +- Particles.js for the interactive background + +## Local Development + +Simply clone the repository and open `index.html` in your browser. No build process or dependencies required! + +```bash +git clone https://github.com/yourusername/whats-my-vibe.git +cd whats-my-vibe +``` + +## License + +MIT License - feel free to use this project for whatever you want! \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..49bab16 --- /dev/null +++ b/index.html @@ -0,0 +1,61 @@ + + + + + + What's My Vibe? | Vibe Checker + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+

What's My Vibe?

+
+ Click to Check +
+ + +
+ + + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..fb30cab --- /dev/null +++ b/script.js @@ -0,0 +1,347 @@ +// List of possible vibes +const vibes = [ + "Crashing Out", + "I Want to Go Home", + "Need Coffee ASAP", + "Just Woke Up", + "Still in Bed", + "Can't Even", + "Too Tired for This", + "Why Am I Awake", + "Need a Nap", + "Brain Not Working", + "Just Vibing", + "Chilling Hard", + "Feeling Groovy", + "Vibing Hard", + "Peaceful Energy", + "Good Vibes", + "Vibing to the Max", + "Chillax Mode", + "Positive Vibes", + "Vibing with the Universe", + "Zen Vibes", + "Vibing on Cloud Nine", + "Good Energy", + "Vibing with the Flow", + "Chill and Relaxed", + "Vibing with Style", + "Not Today", + "Maybe Tomorrow", + "Can't Deal", + "Over It", + "Done with Everything", + "Need a Break", + "Too Much Going On", + "Brain is Fried", + "Need a Vacation", + "Counting Down to Weekend", + "Monday Blues", + "TGIF Mode", + "Weekend Mode", + "Holiday Mode", + "Vacation Brain", + "Beach Mode", + "Mountain Mode", + "City Mode", + "Night Owl Mode", + "Early Bird Mode", + "Coffee Addict", + "Tea Time", + "Music in My Head", + "Dance Mode", + "Art Mode", + "Creative Mode", + "Study Mode", + "Work Mode", + "Weekend Vibes", + "Vacation Vibes", + "Adventure Mode", + "Explorer Mode", + "Dream Mode", + "Fantasy Mode", + "Magical Mode", + "Mystical Mode", + "Spiritual Mode", + "Meditation Mode", + "Yoga Mode", + "Fitness Mode", + "Gaming Mode", + "Movie Mode", + "Book Mode", + "Poetry Mode", + "Nature Mode", + "Ocean Mode", + "Desert Mode", + "Arctic Mode", + "Tropical Mode", + "Urban Mode", + "Rural Mode", + "Space Mode", + "Galaxy Mode", + "Stellar Mode", + "Lunar Mode", + "Solar Mode", + "Cosmic Mode", + "Earth Mode", + "Fire Mode", + "Water Mode", + "Air Mode", + "Earth Mode", + "Crystal Mode", + "Gemstone Mode", + "Mineral Mode", + "Botanical Mode", + "Floral Mode", + "Garden Mode", + "Spring Mode", + "Summer Mode", + "Autumn Mode", + "Winter Mode", + "Festive Mode", + "Holiday Mode", + "Celebration Mode", + "Party Mode", + "Social Mode", + "Friendly Mode", + "Love Mode", + "Romantic Mode", + "Passionate Mode", + "Creative Flow", + "Artistic Flow", + "Musical Flow", + "Dance Flow", + "Poetic Flow", + "Literary Flow", + "Cinematic Flow", + "Theatrical Flow", + "Dramatic Flow", + "Comedic Flow", + "Humorous Flow", + "Witty Flow", + "Clever Flow", + "Intellectual Flow", + "Academic Flow", + "Scientific Flow", + "Mathematical Flow", + "Logical Flow", + "Analytical Flow", + "Philosophical Flow", + "Theoretical Flow", + "Practical Flow", + "Technical Flow", + "Digital Flow", + "Virtual Flow", + "Cyber Flow", + "Tech Flow", + "Innovative Flow", + "Inventive Flow", + "Creative Flow", + "Imaginative Flow", + "Fantastical Flow", + "Magical Flow", + "Mystical Flow", + "Spiritual Flow", + "Ethereal Flow", + "Celestial Flow", + "Astral Flow", + "Cosmic Flow", + "Universal Flow", + "Infinite Flow", + "Eternal Flow", + "Timeless Flow", + "Ageless Flow", + "Boundless Flow", + "Limitless Flow", + "Endless Flow", + "Need More Coffee", + "Too Much Coffee", + "Running on Empty", + "Barely Functioning", + "Just Surviving", + "Hanging in There", + "Making It Work", + "Faking It Till I Make It", + "Pretending to Adult", + "Adulting is Hard", + "Why Am I Like This", + "What Even Is Time", + "Lost in Thoughts", + "Brain on Autopilot", + "Auto-Pilot Mode", + "Zombie Mode", + "Sleepwalking", + "Daydreaming", + "Mind Wandering", + "Lost in Space", + "Floating Through Life", + "Drifting Away", + "Fading Fast", + "Need a Reset", + "System Overload", + "Brain.exe Has Stopped", + "404 Brain Not Found", + "Blue Screen of Life", + "Need to Reboot", + "Loading...", + "Buffering...", + "Processing...", + "Calculating...", + "Thinking...", + "Still Thinking...", + "Overthinking...", + "Analysis Paralysis", + "Decision Fatigue", + "Choice Overload", + "Too Many Options", + "Can't Decide", + "Indecisive Mode", + "Maybe Later", + "Procrastination Mode", + "Last Minute Mode", + "Deadline Mode", + "Panic Mode", + "Stress Mode", + "Anxiety Mode", + "Calm Mode", + "Chill Mode", + "Relaxed Mode", + "Peace Mode", + "Tranquil Mode", + "Serene Mode", + "Bliss Mode", + "Joy Mode", + "Happy Mode", + "Content Mode", + "Satisfied Mode", + "Grateful Mode", + "Blessed Mode", + "Thankful Mode", + "Appreciative Mode", + "Mindful Mode", + "Present Mode", + "Here and Now", + "Living in the Moment", + "Seizing the Day", + "Carpe Diem Mode", + "YOLO Mode", + "Living Life", + "Enjoying Life", + "Loving Life", + "Life is Good", + "Life is Beautiful", + "Life is Amazing", + "Life is Wonderful", + "Life is Perfect", + "Life is Great", + "Life is Awesome", + "Life is Fantastic", + "Life is Incredible", + "Life is Magical", + "Life is Mystical", + "Life is Spiritual", + "Life is Ethereal", + "Life is Celestial", + "Life is Cosmic", + "Life is Universal", + "Life is Infinite", + "Life is Eternal", + "Life is Timeless", + "Life is Ageless", + "Life is Boundless", + "Life is Limitless", + "Life is Endless" +]; + +// Get DOM elements +const vibeElement = document.getElementById('vibe'); +const checkButton = document.getElementById('checkButton'); + +// Function to get random vibe +function getRandomVibe() { + const randomIndex = Math.floor(Math.random() * vibes.length); + return vibes[randomIndex]; +} + +// Function to update vibe with animation +function updateVibe() { + vibeElement.classList.remove('changed'); + void vibeElement.offsetWidth; // Trigger reflow + vibeElement.classList.add('changed'); + vibeElement.textContent = getRandomVibe(); +} + +// Add click event listener to button +checkButton.addEventListener('click', updateVibe); + +// Initialize particles +particlesJS('particles-js', { + particles: { + number: { + value: 80, + density: { + enable: true, + value_area: 800 + } + }, + color: { + value: '#ffffff' + }, + shape: { + type: 'circle' + }, + opacity: { + value: 0.5, + random: false, + anim: { + enable: false + } + }, + size: { + value: 3, + random: true + }, + line_linked: { + enable: true, + distance: 150, + color: '#ffffff', + opacity: 0.4, + width: 1 + }, + move: { + enable: true, + speed: 2, + direction: 'none', + random: false, + straight: false, + out_mode: 'out', + bounce: false + } + }, + interactivity: { + detect_on: 'canvas', + events: { + onhover: { + enable: true, + mode: 'grab' + }, + onclick: { + enable: true, + mode: 'push' + }, + resize: true + }, + modes: { + grab: { + distance: 140, + line_linked: { + opacity: 1 + } + }, + push: { + particles_nb: 4 + } + } + }, + retina_detect: true +}); \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..7550b8f --- /dev/null +++ b/styles.css @@ -0,0 +1,135 @@ +/* reset some default browser styles */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* main page styles */ +body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; + min-height: 100vh; + display: flex; + align-items: center; + justify-content: center; + background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); + background-size: 400% 400%; + animation: gradient 15s ease infinite; + position: relative; + overflow: hidden; +} + +/* particles container */ +#particles-js { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + z-index: 1; +} + +/* center everything */ +.container { + text-align: center; + padding: 2rem; + position: relative; + z-index: 2; +} + +/* make the title look nice and fade in */ +.title { + font-size: 3.5rem; + margin-bottom: 2rem; + color: white; + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); + opacity: 0; + animation: fadeIn 1s ease forwards; +} + +/* vibe container styling */ +.vibe-container { + background-color: rgba(255, 255, 255, 0.1); + backdrop-filter: blur(10px); + padding: 2rem; + border-radius: 12px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + margin-bottom: 2rem; + transition: all 0.3s ease; +} + +/* make the vibe text big and bold */ +.vibe { + font-size: 2.5rem; + font-weight: bold; + color: white; + display: inline-block; + transition: all 0.3s ease; +} + +/* check button styling */ +.check-button { + background: rgba(255, 255, 255, 0.2); + border: none; + padding: 1rem 2rem; + font-size: 1.2rem; + color: white; + border-radius: 50px; + cursor: pointer; + transition: all 0.3s ease; + backdrop-filter: blur(5px); + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +} + +.check-button:hover { + background: rgba(255, 255, 255, 0.3); + transform: translateY(-2px); + box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2); +} + +.check-button:active { + transform: translateY(0); + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} + +/* gradient animation */ +@keyframes gradient { + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } + 100% { + background-position: 0% 50%; + } +} + +/* fade in animation for the title */ +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(-20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* vibe change animation */ +@keyframes vibeChange { + 0% { + transform: scale(1); + } + 50% { + transform: scale(1.1); + } + 100% { + transform: scale(1); + } +} + +.vibe.changed { + animation: vibeChange 0.5s ease; +} \ No newline at end of file