Ronniie/WhatsMyVibe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

first commit

Browse source
This commit is contained in:
Ronnie 2025-05-26 20:56:45 -04:00
commit 20b837bf29
4 changed files with 580 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

37
README.md Normal file
View file

@ -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!

61
index.html Normal file
View file

@ -0,0 +1,61 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>What's My Vibe? | Vibe Checker</title>
<!-- Favicon -->
<link rel="icon" type="image/png" sizes="32x32" href="https://upload.wikimedia.org/wikipedia/commons/6/69/SMirC-smile.svg">
<link rel="icon" type="image/png" sizes="16x16" href="https://upload.wikimedia.org/wikipedia/commons/6/69/SMirC-smile.svg">
<link rel="apple-touch-icon" href="https://upload.wikimedia.org/wikipedia/commons/6/69/SMirC-smile.svg">
<!-- Theme Colors -->
<meta name="theme-color" content="#23a6d5">
<meta name="msapplication-navbutton-color" content="#23a6d5">
<meta name="apple-mobile-web-app-status-bar-style" content="#23a6d5">
<!-- Primary Meta Tags -->
<meta name="title" content="What's My Vibe? | Vibe Checker">
<meta name="description" content="Check your current vibe with our fun and interactive vibe checker. Get instant vibe readings and discover your mood!">
<meta name="keywords" content="vibe checker, mood checker, vibe reading, mood reading, vibe test">
<meta name="author" content="WhatsMyVibe">
<meta name="robots" content="index, follow">
<meta name="language" content="English">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:title" content="What's My Vibe? | Vibe Checker">
<meta property="og:description" content="Check your current vibe with our fun and interactive vibe checker. Get instant vibe readings and discover your mood!">
<meta property="og:image" content="https://upload.wikimedia.org/wikipedia/commons/6/69/SMirC-smile.svg">
<meta property="og:image:width" content="96">
<meta property="og:image:height" content="96">
<meta property="og:site_name" content="What's My Vibe?">
<!-- Twitter -->
<meta property="twitter:card" content="summary">
<meta property="twitter:title" content="What's My Vibe? | Vibe Checker">
<meta property="twitter:description" content="Check your current vibe with our fun and interactive vibe checker. Get instant vibe readings and discover your mood!">
<meta property="twitter:image" content="https://upload.wikimedia.org/wikipedia/commons/6/69/SMirC-smile.svg">
<!-- styles -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- particles container -->
<div id="particles-js"></div>
<div class="container">
<h1 class="title">What's My Vibe?</h1>
<div class="vibe-container">
<span id="vibe" class="vibe">Click to Check</span>
</div>
<button id="checkButton" class="check-button">Read My Vibe</button>
</div>
<!-- scripts -->
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script src="script.js"></script>
</body>
</html>

347
script.js Normal file
View file

@ -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
});

135
styles.css Normal file
View file

@ -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;
}