Lofi_Pink

Dreamy Lofi · Cute Study Space 🌸

Dreamy Lofi · Cute Study Space is a single-page HTML application designed with a soft pastel, cute aesthetic (kawaii vibes). This interactive webpage is optimized to serve as a personal study dashboard, a productivity tab, or a live desktop wallpaper (via software like Lively Wallpaper or Wallpaper Engine).

✨ Key Features

1. Aesthetic Clock & Date

Main Display: Shows the hour and minute with a beautiful color gradient (pink - purple - peach) and a pulsing colon that blinks at a 1-second interval.

Smooth Seconds Bar: A sleek gradient progress bar (#ffb6c1 to #d4a0f7) at the center of the card that dynamically fills up to track the current minute.

Elegant Date & Day: Displays the current date in an elegant, italicized serif font alongside the day of the week in a clean, modern uppercase layout.

2. Pomodoro Productivity Timer

Circular SVG Progress Ring: Visualizes time progression with a smooth circular progress bar.

Dual Phases: Supports a 25-minute study session and a 5-minute break cycle with easy-to-use Start/Pause/Resume controls.

Session Tracker (Sakura Dots): Features 4 cherry blossom indicators (🌸). As you complete each 25-minute session, a sakura flower lights up to track your study sessions.

3. Smart Weather Widget

Automatically fetches your location to display the current temperature, weather conditions, and matching weather emojis.

3-Layer Fallback Mechanism:

Method 1: Browser Geolocation (high accuracy GPS) combined with Nominatim OpenStreetMap for reverse-geocoding the city name.

Method 2: IP-based geolocation fallbacks using public APIs (ipwho.is, ip-api.com, freeipapi.com).

Method 3: Auto IP-based weather retrieval via wttr.in.

4. Affirmations & Cozy Vibe Boosters

Floating Affirmations: Gentle encouragement words (e.g., "you got this", "keep going ♡", "proud of you") float up from random spots on the screen and fade away.

Affirmation Quotes: A rotating collection of comforting quotes displays at the bottom, updating automatically every 18 seconds.

Active Session Timer: Automatically tracks how long you have had the page open during your current study session (format: MM:SS).

5. High-Fidelity Interactive Effects

Glassmorphic Design: The main widget card uses backdrop-filter: blur(28px) to blend with the background, decorated with swaying seasonal emojis (🎀, 🌸, ✨, 🍃, 💕).

HTML5 Canvas Bokeh Background: A warm pastel gradient layered with 22 floating bokeh circles that drift and shift slowly.

Cherry Blossom Petals: A continuous rain of 28 realistic cherry blossom petals drifting downwards with random sway, rotation, and opacity.

Card Hover Effects: Hovering your cursor over the clock card triggers floating sparkles and hearts that rise from the cursor position.

Click Interaction Sparkles: Clicking anywhere on the screen (except on action buttons) generates a starburst particle effect, an expanding ripple ring, and a random floating emoji.