Webleb - UI Elements

HTML

<!DOCTYPE html>

<head>

<title>Sleep Tracker - Premium</title>

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

-webkit-tap-highlight-color: transparent;

}

:root {

--primary-purple: #7C3AED;

--primary-lavender: #A78BFA;

--primary-pink: #F472B6;

--deep-purple: #5B21B6;

--soft-purple: #8B5CF6;

--glass-bg: rgba(255, 255, 255, 0.08);

--glass-border: rgba(255, 255, 255, 0.15);

--text-primary: #FFFFFF;

--text-secondary: rgba(255, 255, 255, 0.7);

--text-tertiary: rgba(255, 255, 255, 0.5);

--shadow-soft: 0 8px 32px rgba(0, 0, 0, 0.12);

--shadow-glow: 0 0 40px rgba(167, 139, 250, 0.3);

}

body {

font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

background: #0F0F1A;

min-height: 100vh;

display: flex;

justify-content: center;

align-items: center;

overflow-x: hidden;

}

.app-container {

width: 100%;

max-width: 414px;

min-height: 100vh;

background: linear-gradient(180deg,

#7C3AED 0%,

#8B5CF6 15%,

#A78BFA 35%,

#C4B5FD 55%,

#DDD6FE 75%,

#EDE9FE 90%,

#F5F3FF 100%);

position: relative;

overflow: hidden;

}

/* Moon Glow Effect */

.moon-glow {

position: absolute;

top: 40px;

left: 30px;

width: 60px;

height: 60px;

background: radial-gradient(circle,

rgba(255, 255, 255, 0.95) 0%,

rgba(255, 255, 255, 0.7) 30%,

rgba(255, 255, 255, 0.3) 60%,

transparent 100%);

border-radius: 50%;

filter: blur(2px);

box-shadow:

0 0 30px rgba(255, 255, 255, 0.6),

0 0 60px rgba(255, 255, 255, 0.3),

0 0 90px rgba(167, 139, 250, 0.2);

animation: moonPulse 4s ease-in-out infinite;

}

@keyframes moonPulse {

0%, 100% {

transform: scale(1);

box-shadow:

0 0 30px rgba(255, 255, 255, 0.6),

0 0 60px rgba(255, 255, 255, 0.3),

0 0 90px rgba(167, 139, 250, 0.2);

}

50% {

transform: scale(1.05);

box-shadow:

0 0 40px rgba(255, 255, 255, 0.8),

0 0 80px rgba(255, 255, 255, 0.4),

0 0 120px rgba(167, 139, 250, 0.3);

}

/* Profile Avatar */

.profile-avatar {

position: absolute;

top: 40px;

right: 25px;

width: 44px;

height: 44px;

border-radius: 50%;

background: linear-gradient(135deg, #F472B6, #EC4899);

padding: 2px;

cursor: pointer;

transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}

.profile-avatar:hover {

transform: scale(1.08);

}

.profile-avatar img {

width: 100%;

height: 100%;

border-radius: 50%;

object-fit: cover;

border: 2px solid rgba(255, 255, 255, 0.3);

}

/* Main Content */

.main-content {

padding: 110px 24px 24px;

position: relative;

z-index: 10;

}

.greeting {

text-align: center;

color: var(--text-primary);

font-size: 15px;

font-weight: 500;

letter-spacing: 0.3px;

margin-bottom: 8px;

text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

}

.sleep-duration {

text-align: center;

color: var(--text-primary);

font-size: 56px;

font-weight: 700;

letter-spacing: -1.5px;

line-height: 1.1;

margin-bottom: 12px;

text-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);

}

.sleep-info {

text-align: center;

color: var(--text-secondary);

font-size: 14px;

font-weight: 400;

margin-bottom: 4px;

}

.sleep-time {

text-align: center;

color: var(--text-tertiary);

font-size: 13px;

font-weight: 400;

}

/* Wave Chart Container */

.wave-container {

position: relative;

height: 120px;

margin: 24px 0;

overflow: visible;

}

.wave-svg {

width: 100%;

height: 100%;

overflow: visible;

}

.wave-path {

fill: none;

stroke: rgba(255, 255, 255, 0.85);

stroke-width: 2.5;

stroke-linecap: round;

stroke-linejoin: round;

filter: drop-shadow(0 2px 8px rgba(255, 255, 255, 0.3));

}

.wave-area {

fill: url(#waveGradient);

opacity: 0.25;

}

/* Draggable Slider */

.slider-container {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

pointer-events: none;

}

.slider-handle {

position: absolute;

width: 28px;

height: 28px;

background: linear-gradient(145deg, #FFFFFF, #F0F0F0);

border-radius: 50%;

box-shadow:

0 4px 15px rgba(0, 0, 0, 0.2),

0 0 0 4px rgba(255, 255, 255, 0.2),

inset 0 -2px 4px rgba(0, 0, 0, 0.1);

cursor: grab;

pointer-events: auto;

transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease;

display: flex;

align-items: center;

justify-content: center;

}

.slider-handle::before {

content: '';

width: 8px;

height: 8px;

background: linear-gradient(135deg, #7C3AED, #A78BFA);

border-radius: 50%;

}

.slider-handle:active {

cursor: grabbing;

transform: scale(1.15);

box-shadow:

0 6px 20px rgba(0, 0, 0, 0.25),

0 0 0 6px rgba(255, 255, 255, 0.3),

inset 0 -2px 4px rgba(0, 0, 0, 0.1);

}

.slider-tooltip {

position: absolute;

bottom: 40px;

left: 50%;

transform: translateX(-50%) scale(0);

background: rgba(0, 0, 0, 0.85);

color: white;

padding: 8px 14px;

border-radius: 10px;

font-size: 12px;

font-weight: 600;

white-space: nowrap;

opacity: 0;

transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

pointer-events: none;

}

.slider-tooltip::after {

content: '';

position: absolute;

top: 100%;

left: 50%;

transform: translateX(-50%);

border: 6px solid transparent;

border-top-color: rgba(0, 0, 0, 0.85);

}

.slider-handle.active .slider-tooltip,

.slider-handle:hover .slider-tooltip {

transform: translateX(-50%) scale(1);

opacity: 1;

}

/* Time Filters */

.time-filters {

display: flex;

justify-content: center;

gap: 10px;

margin: 20px 0 28px;

padding: 0 8px;

}

.filter-btn {

padding: 8px 16px;

border: none;

background: transparent;

color: var(--text-secondary);

font-size: 13px;

font-weight: 500;

font-family: inherit;

border-radius: 20px;

cursor: pointer;

transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

position: relative;

overflow: hidden;

}

.filter-btn::before {

content: '';

position: absolute;

inset: 0;

background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0.05));

border-radius: inherit;

opacity: 0;

transition: opacity 0.3s ease;

}

.filter-btn:hover {

color: var(--text-primary);

background: rgba(255, 255, 255, 0.08);

}

.filter-btn:hover::before {

opacity: 1;

}

.filter-btn.active {

color: var(--text-primary);

background: rgba(255, 255, 255, 0.15);

box-shadow:

0 0 20px rgba(255, 255, 255, 0.2),

inset 0 1px 1px rgba(255, 255, 255, 0.2);

}

.filter-btn.active::before {

opacity: 1;

}

/* Stats Cards */

.stats-container {

display: grid;

grid-template-columns: 1fr 1fr;

gap: 14px;

margin-bottom: 24px;

}

.stat-card {

background: rgba(255, 255, 255, 0.12);

backdrop-filter: blur(20px);

-webkit-backdrop-filter: blur(20px);

border: 1px solid rgba(255, 255, 255, 0.18);

border-radius: 24px;

padding: 20px 16px;

text-align: center;

transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);

box-shadow:

0 8px 32px rgba(0, 0, 0, 0.1),

inset 0 1px 1px rgba(255, 255, 255, 0.15);

}

.stat-card:hover {

transform: translateY(-4px) scale(1.02);

background: rgba(255, 255, 255, 0.18);

box-shadow:

0 12px 40px rgba(0, 0, 0, 0.15),

0 0 30px rgba(167, 139, 250, 0.2),

inset 0 1px 1px rgba(255, 255, 255, 0.2);

}

.stat-icon {

width: 36px;

height: 36px;

margin: 0 auto 12px;

background: rgba(255, 255, 255, 0.15);

border-radius: 12px;

display: flex;

align-items: center;

justify-content: center;

transition: all 0.3s ease;

}

.stat-card:hover .stat-icon {

background: rgba(255, 255, 255, 0.25);

transform: scale(1.1);

}

.stat-icon svg {

width: 18px;

height: 18px;

stroke: white;

stroke-width: 2;

fill: none;

}

.stat-value {

color: var(--text-primary);

font-size: 22px;

font-weight: 700;

margin-bottom: 4px;

letter-spacing: -0.3px;

}

.stat-label {

color: var(--text-secondary);

font-size: 12px;

font-weight: 500;

}

/* Music Player */

.music-player {

background: rgba(255, 255, 255, 0.15);

backdrop-filter: blur(25px);

-webkit-backdrop-filter: blur(25px);

border: 1px solid rgba(255, 255, 255, 0.2);

border-radius: 28px;

padding: 16px 18px;

display: flex;

align-items: center;

gap: 14px;

margin-bottom: 20px;

box-shadow:

0 12px 40px rgba(0, 0, 0, 0.15),

inset 0 1px 1px rgba(255, 255, 255, 0.2);

transition: all 0.3s ease;

}

.music-player:hover {

background: rgba(255, 255, 255, 0.2);

box-shadow:

0 16px 50px rgba(0, 0, 0, 0.2),

inset 0 1px 1px rgba(255, 255, 255, 0.25);

}

.album-art {

width: 56px;

height: 56px;

border-radius: 16px;

overflow: hidden;

flex-shrink: 0;

box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);

position: relative;

}

.album-art::after {

content: '';

position: absolute;

inset: 0;

background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent);

}

.album-art img {

width: 100%;

height: 100%;

object-fit: cover;

transition: transform 0.5s ease;

}

.music-player:hover .album-art img {

transform: scale(1.08);

}

.track-info {

flex: 1;

min-width: 0;

}

.track-name {

color: var(--text-primary);

font-size: 15px;

font-weight: 600;

margin-bottom: 4px;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

}

.track-count {

color: var(--text-tertiary);

font-size: 12px;

font-weight: 500;

}

.player-controls {

display: flex;

align-items: center;

gap: 12px;

}

.control-btn {

width: 42px;

height: 42px;

border: none;

background: rgba(255, 255, 255, 0.2);

border-radius: 50%;

cursor: pointer;

display: flex;

align-items: center;

justify-content: center;

transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);

}

.control-btn:hover {

background: rgba(255, 255, 255, 0.3);

transform: scale(1.1);

box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);

}

.control-btn:active {

transform: scale(0.95);

}

.control-btn svg {

width: 18px;

height: 18px;

fill: white;

transition: all 0.2s ease;

}

.play-btn svg {

width: 20px;

height: 20px;

margin-left: 2px;

}

.play-btn.playing .play-icon {

display: none;

}

.play-btn .pause-icon {

display: none;

}

.play-btn.playing .pause-icon {

display: block;

}

/* Bottom Tab Bar */

.tab-bar {

background: rgba(255, 255, 255, 0.12);

backdrop-filter: blur(30px);

-webkit-backdrop-filter: blur(30px);

border: 1px solid rgba(255, 255, 255, 0.15);

border-radius: 32px;

margin: 0 20px 24px;

padding: 12px 16px;

display: flex;

justify-content: space-around;

align-items: center;

box-shadow:

0 12px 40px rgba(0, 0, 0, 0.15),

inset 0 1px 1px rgba(255, 255, 255, 0.15);

}

.tab-item {

display: flex;

flex-direction: column;

align-items: center;

gap: 6px;

padding: 8px 16px;

cursor: pointer;

border-radius: 20px;

transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

position: relative;

}

.tab-item::before {

content: '';

position: absolute;

inset: 0;

background: linear-gradient(135deg, rgba(124, 58, 237, 0.3), rgba(167, 139, 250, 0.2));

border-radius: inherit;

opacity: 0;

transition: opacity 0.3s ease;

}

.tab-item:hover {

background: rgba(255, 255, 255, 0.08);

}

.tab-item.active::before {

opacity: 1;

}

.tab-item.active {

background: rgba(124, 58, 237, 0.15);

}

.tab-icon {

width: 24px;

height: 24px;

position: relative;

z-index: 1;

transition: all 0.3s ease;

}

.tab-item:hover .tab-icon {

transform: translateY(-2px);

}

.tab-item.active .tab-icon {

filter: drop-shadow(0 0 8px rgba(124, 58, 237, 0.6));

}

.tab-icon svg {

width: 100%;

height: 100%;

stroke: var(--text-secondary);

stroke-width: 1.8;

fill: none;

transition: all 0.3s ease;

}

.tab-item.active .tab-icon svg {

stroke: url(#tabGradient);

stroke-width: 2.2;

}

.tab-label {

font-size: 11px;

font-weight: 500;

color: var(--text-secondary);

position: relative;

z-index: 1;

transition: all 0.3s ease;

}

.tab-item.active .tab-label {

color: var(--text-primary);

font-weight: 600;

}

/* Background Decorative Elements */

.bg-glow-1 {

position: absolute;

top: -100px;

right: -100px;

width: 350px;

height: 350px;

background: radial-gradient(circle, rgba(244, 114, 182, 0.4) 0%, transparent 70%);

border-radius: 50%;

filter: blur(60px);

pointer-events: none;

}

.bg-glow-2 {

position: absolute;

bottom: 200px;

left: -150px;

width: 300px;

height: 300px;

background: radial-gradient(circle, rgba(167, 139, 250, 0.35) 0%, transparent 70%);

border-radius: 50%;

filter: blur(50px);

pointer-events: none;

}

/* Responsive */

@media (max-width: 380px) {

.main-content {

padding: 100px 20px 20px;

}

.sleep-duration {

font-size: 48px;

}

.time-filters {

gap: 6px;

}

.filter-btn {

padding: 6px 12px;

font-size: 12px;

}

.tab-bar {

margin: 0 16px 20px;

padding: 10px 12px;

}

.tab-item {

padding: 6px 12px;

}

/* Animation for page load */

@keyframes fadeInUp {

from {

opacity: 0;

transform: translateY(20px);

}

to {

opacity: 1;

transform: translateY(0);

}

.animate-in {

animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;

}

.delay-1 { animation-delay: 0.1s; opacity: 0; }

.delay-2 { animation-delay: 0.2s; opacity: 0; }

.delay-3 { animation-delay: 0.3s; opacity: 0; }

.delay-4 { animation-delay: 0.4s; opacity: 0; }

.delay-5 { animation-delay: 0.5s; opacity: 0; }

</style>

</head>

<body>

<defs>

</linearGradient>

</linearGradient>

</defs>

</svg>

</div>

<p class="greeting animate-in delay-1">Good Morning, Jennifer</p>

<p class="sleep-info animate-in delay-3">Light sleep</p>

</svg>

</div>

</div>

</svg>

</div>

<div class="stat-label">Average Sleep Time</div>

</div>

</svg>

</div>

<div class="stat-label">Longest Streak</div>

</div>

</div>

<div class="track-name">Mountain Vibes</div>

<div class="track-count">14 tracks</div>

</div>

</svg>

</svg>

</button>

</svg>

</button>

</div>

</svg>

</div>

<span class="tab-label">Sleep</span>

</div>

</svg>

</div>

<span class="tab-label">Sounds</span>

</div>

</svg>

</div>

<span class="tab-label">Meditation</span>

</div>

</svg>

</div>

<span class="tab-label">Stories</span>

</div>

// Wave Chart Data and Animation

const waveData = [

{ x: 0, y: 70 },

{ x: 30, y: 55 },

{ x: 60, y: 75 },

{ x: 90, y: 45 },

{ x: 120, y: 80 },

{ x: 150, y: 50 },

{ x: 180, y: 65 },

{ x: 210, y: 40 },

{ x: 240, y: 70 },

{ x: 270, y: 55 },

{ x: 300, y: 75 },

{ x: 330, y: 60 },

{ x: 366, y: 50 }

];

function generateSmoothPath(data) {

if (data.length < 2) return '';

let path = `M ${data[0].x} ${data[0].y}`;

for (let i = 1; i < data.length; i++) {

const prev = data[i - 1];

const curr = data[i];

const next = data[i + 1] || curr;

const cp1x = prev.x + (curr.x - prev.x) * 0.5;

const cp1y = prev.y;

const cp2x = curr.x - (next.x - prev.x) * 0.15;

const cp2y = curr.y;

path += ` C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${curr.x} ${curr.y}`;

}

return path;

}

function generateAreaPath(data) {

const linePath = generateSmoothPath(data);

return `${linePath} L 366 120 L 0 120 Z`;

}

// Initialize Wave Chart

function initWaveChart() {

const wavePath = document.querySelector('.wave-path');

const waveArea = document.querySelector('.wave-area');

const pathString = generateSmoothPath(waveData);

const areaString = generateAreaPath(waveData);

wavePath.setAttribute('d', pathString);

waveArea.setAttribute('d', areaString);

// Animate wave path

const pathLength = wavePath.getTotalLength();

wavePath.style.strokeDasharray = pathLength;

wavePath.style.strokeDashoffset = pathLength;

setTimeout(() => {

wavePath.style.transition = 'stroke-dashoffset 1.5s cubic-bezier(0.4, 0, 0.2, 1)';

wavePath.style.strokeDashoffset = '0';

}, 300);

}

// Draggable Slider

function initSlider() {

const sliderHandle = document.getElementById('sliderHandle');

const waveContainer = document.querySelector('.wave-container');

const wavePath = document.querySelector('.wave-path');

let isDragging = false;

let currentX = 150;

const containerWidth = 366;

function getYAtX(x) {

const point = wavePath.getPointAtLength(

(x / containerWidth) * wavePath.getTotalLength()

);

return point.y;

}

function updateSliderPosition(x) {

x = Math.max(14, Math.min(x, containerWidth - 14));

currentX = x;

const y = getYAtX(x);

const percentage = (x / containerWidth) * 100;

sliderHandle.style.left = `${percentage}%`;

sliderHandle.style.top = `${y - 14}px`;

// Update tooltip time

const hours = Math.floor(2 + (x / containerWidth) * 5);

const minutes = Math.floor((x / containerWidth) * 60);

const tooltip = sliderHandle.querySelector('.slider-tooltip');

tooltip.textContent = `${hours}:${minutes.toString().padStart(2, '0')} AM`;

}

// Initial position

setTimeout(() => updateSliderPosition(150), 500);

sliderHandle.addEventListener('mousedown', (e) => {

isDragging = true;

sliderHandle.classList.add('active');

e.preventDefault();

});

sliderHandle.addEventListener('touchstart', (e) => {

isDragging = true;

sliderHandle.classList.add('active');

}, { passive: true });

document.addEventListener('mousemove', (e) => {

if (!isDragging) return;

const rect = waveContainer.getBoundingClientRect();

const x = ((e.clientX - rect.left) / rect.width) * containerWidth;

updateSliderPosition(x);

});

document.addEventListener('touchmove', (e) => {

if (!isDragging) return;

const rect = waveContainer.getBoundingClientRect();

const touch = e.touches[0];

const x = ((touch.clientX - rect.left) / rect.width) * containerWidth;

updateSliderPosition(x);

}, { passive: true });

document.addEventListener('mouseup', () => {

isDragging = false;

sliderHandle.classList.remove('active');

});

document.addEventListener('touchend', () => {

isDragging = false;

sliderHandle.classList.remove('active');

});

}

// Time Filters

function initFilters() {

const filterBtns = document.querySelectorAll('.filter-btn');

filterBtns.forEach(btn => {

btn.addEventListener('click', () => {

filterBtns.forEach(b => b.classList.remove('active'));

btn.classList.add('active');

// Animate wave on filter change

const wavePath = document.querySelector('.wave-path');

wavePath.style.transition = 'none';

wavePath.style.strokeDashoffset = wavePath.getTotalLength();

setTimeout(() => {

wavePath.style.transition = 'stroke-dashoffset 1s cubic-bezier(0.4, 0, 0.2, 1)';

wavePath.style.strokeDashoffset = '0';

}, 50);

});

}

// Music Player Controls

function initMusicPlayer() {

const playBtn = document.getElementById('playBtn');

const nextBtn = document.getElementById('nextBtn');

let isPlaying = false;

playBtn.addEventListener('click', () => {

isPlaying = !isPlaying;

playBtn.classList.toggle('playing', isPlaying);

// Add pulse animation to album art

const albumArt = document.querySelector('.album-art');

if (isPlaying) {

albumArt.style.animation = 'pulse 2s ease-in-out infinite';

} else {

albumArt.style.animation = 'none';

}

});

nextBtn.addEventListener('click', () => {

// Rotate album art on next

const albumArt = document.querySelector('.album-art img');

albumArt.style.transform = 'scale(0.9) rotate(5deg)';

setTimeout(() => {

albumArt.style.transform = 'scale(1) rotate(0deg)';

}, 200);

});

}

// Tab Bar

function initTabBar() {

const tabItems = document.querySelectorAll('.tab-item');

tabItems.forEach(item => {

item.addEventListener('click', () => {

tabItems.forEach(t => t.classList.remove('active'));

item.classList.add('active');

// Micro-interaction: scale bounce

item.style.transform = 'scale(0.92)';

setTimeout(() => {

item.style.transform = 'scale(1)';

}, 150);

});

}

// Add pulse animation keyframes

const style = document.createElement('style');

style.textContent = `

@keyframes pulse {

0%, 100% { transform: scale(1); }

50% { transform: scale(1.03); }

}

`;

document.head.appendChild(style);

// Initialize all components

document.addEventListener('DOMContentLoaded', () => {

initWaveChart();

initSlider();

initFilters();

initMusicPlayer();

initTabBar();

});

</script>

</body>

</html>

CSS

JS

Metehan

Recommended