Hugging Face's logo

Spaces:
Raversray
/
subswipe-pro-dashboard
Running

App Files Community
subswipe-pro-dashboard / index.html
Raversray's picture
Raversray
perfect the scaling maintain the design and everything
d5d97b9 verified
raw
history blame contribute delete
11.3 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="theme-color" content="#121212">
<title>Subscription Portal UI - Liquid Glass</title>
<style>
/* --- 1. Reset & Base Styles --- */
body {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background-color: #0a0a0a; /* Very deep dark background */
color: white;
display: flex;
justify-content: center;
height: 100vh;
overflow: hidden;
}
/* Mobile Container & Background Blobs for Glass Effect */
.app-container {
width: 100%;
max-width: 400px;
height: 100%;
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
background: #121212;
}
/* These blurred blobs create the colors that the glass will distort */
.app-container::before {
content: '';
position: absolute;
top: 20%;
left: -100px;
width: 300px;
height: 300px;
background: #1DB954; /* Spotify Green Blob */
filter: blur(90px);
opacity: 0.4;
z-index: 0;
}
.app-container::after {
content: '';
position: absolute;
bottom: 10%;
right: -100px;
width: 300px;
height: 300px;
background: #E50914; /* Netflix Red Blob */
filter: blur(90px);
opacity: 0.3;
z-index: 0;
}
/* --- THE LIQUID GLASS CLASS --- */
.glass {
background: rgba(40, 40, 40, 0.4); /* Semi-transparent dark */
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5); /* Deep shadow */
backdrop-filter: blur( 15px ); /* The key blur effect */
-webkit-backdrop-filter: blur( 15px ); /* Safari support */
border: 1px solid rgba( 255, 255, 255, 0.1 ); /* Subtle white edge */
}
/* --- 2. Header --- */
.header {
padding: 30px 25px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 10;
}
.header h1 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: 0.5px;}
.header .revenue { color: #1DB954; font-weight: 700; font-size: 16px; text-shadow: 0 0 10px rgba(29, 185, 84, 0.3);}
/* --- 3. The Card Stack --- */
.card-stack {
flex: 1;
position: relative;
display: flex;
justify-content: center;
align-items: center;
z-index: 10;
}
.card {
width: 85%;
height: 58%;
border-radius: 24px;
position: absolute;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 25px;
box-sizing: border-box;
transition:All 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
/* Applying the glass effect to the card */
background: rgba(50, 50, 50, 0.3);
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
backdrop-filter: blur( 20px );
-webkit-backdrop-filter: blur( 20px );
border-top: 1px solid rgba( 255, 255, 255, 0.2 );
border-left: 1px solid rgba( 255, 255, 255, 0.2 );
}
/* Service Branding Badge - Mini Glass */
.service-badge {
align-self: flex-start;
padding: 6px 14px;
border-radius: 50px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
/* Glass style for badge */
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(5px);
border: 1px solid rgba(255,255,255,0.1);
}
/* CSS Dot instead of Emoji */
.dot {
height: 8px;
width: 8px;
border-radius: 50%;
display: inline-block;
margin-right: 8px;
}
/* Client Details */
.client-info h2 { font-size: 30px; margin: 0 0 10px 0; font-weight: 800; }
.client-info p { color: rgba(255,255,255,0.7); margin: 0; font-size: 15px; font-weight: 500;}
.expiry-warning { color: #ff5555; font-size: 14px; margin-top: 15px; display: block; font-weight: 600; letter-spacing: 0.5px;}
/* --- 4. Action Area --- */
.actions {
padding: 0 30px 110px 30px;
display: flex;
justify-content: space-between;
gap: 15px;
z-index: 10;
}
.btn-action {
flex: 1;
height: 55px;
border-radius: 20px;
border: none;
font-size: 15px;
font-weight: 700;
cursor: pointer;
transition: transform 0.1s;
display: flex;
justify-content: center;
align-items: center;
text-transform: uppercase;
letter-spacing: 1px;
}
.btn-action:active { transform: scale(0.97); }
.btn-message {
background-color: transparent;
color: white;
border: 2px solid rgba(255,255,255,0.3);
}
.btn-renew {
background-color: #1DB954;
color: #0a0a0a;
box-shadow: 0 5px 15px rgba(29, 185, 84, 0.3);
}
/* --- 5. Bottom Navigation (Glass) --- */
.bottom-nav {
position: absolute;
bottom: 0;
width: 100%;
height: 85px;
display: flex;
justify-content: space-around;
align-items: center;
z-index: 20;
padding-bottom: 10px;
/* Glass Nav */
background: rgba(30, 30, 30, 0.6);
backdrop-filter: blur( 20px );
-webkit-backdrop-filter: blur( 20px );
border-top: 1px solid rgba( 255, 255, 255, 0.1 );
}
.nav-item {
display: flex;
flex-direction: column;
align-items: center;
color: rgba(255,255,255,0.5);
font-size: 11px;
font-weight: 600;
gap: 6px;
cursor: pointer;
width: 60px;
}
.nav-item.active { color: #1DB954; }
.nav-item.active .nav-box { background: #1DB954; border:none;}
/* Simple CSS boxes instead of emojis for nav */
.nav-box {
width: 24px;
height: 24px;
border-radius: 8px;
border: 2px solid rgba(255,255,255,0.3);
transition: 0.2s;
}
.nav-add-btn {
width: 45px;
height: 45px;
background: linear-gradient(135deg, #1DB954, #1ed760);
border-radius: 15px;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
color: #0a0a0a;
box-shadow: 0 5px 15px rgba(29, 185, 84, 0.4);
}
/* --- Animations --- */
.swipe-right {
transform: translateX(130%) rotate(15deg) scale(0.8) !important;
opacity: 0 !important;
}
.swipe-left {
transform: translateX(-130%) rotate(-15deg) scale(0.8) !important;
opacity: 0 !important;
}
</style>
</head>
<body>
<div class="app-container">
<div class="header">
<div>
<div style="font-size:13px; color:rgba(255,255,255,0.6); margin-bottom:4px;">Hello Admin,</div>
<h1>Overview</h1>
</div>
<div class="revenue">ZMW 4,500</div>
</div>
<div class="card-stack" id="cardStack">
</div>
<div class="actions">
<button class="btn-action btn-message" onclick="swipeLeft()">
Message
</button>
<button class="btn-action btn-renew" onclick="swipeRight()">
Renew Client
</button>
</div>
<div class="bottom-nav">
<div class="nav-item active">
<div class="nav-box"></div>
<span>Home</span>
</div>
<div class="nav-item">
<div class="nav-box"></div>
<span>List</span>
</div>
<div class="nav-item">
<div class="nav-add-btn">+</div>
</div>
<div class="nav-item">
<div class="nav-box"></div>
<span>Stats</span>
</div>
</div>
</div>
<script>
// Mock Data
const clients = [
{ name: "Chanda Mumba", service: "Netflix Premium", expiry: "EXPIRES IN 2 DAYS", color: "#E50914" },
{ name: "John Banda", service: "Spotify Duo", expiry: "EXPIRES TOMORROW", color: "#1DB954" },
{ name: "Sarah Lungu", service: "Apple Music", expiry: "EXPIRES TODAY", color: "#FC3C44" },
];
const stack = document.getElementById('cardStack');
let activeIndex = clients.length - 1;
function renderCards() {
stack.innerHTML = '';
clients.forEach((client, index) => {
const card = document.createElement('div');
card.className = `card`;
// Stack styling
let scale = 1 - (clients.length - 1 - index) * 0.06;
let translateY = (clients.length - 1 - index) * 15;
let zIndex = index;
let opacity = 1 - (clients.length - 1 - index) * 0.3;
card.style.zIndex = zIndex;
card.style.transform = `scale(${scale}) translateY(-${translateY}px)`;
card.style.opacity = opacity;
card.innerHTML = `
<div class="service-badge" style="color:${client.color};">
<span class="dot" style="background-color:${client.color}"></span>${client.service}
</div>
<div class="client-info">
<h2>${client.name}</h2>
<p>${client.service} Plan</p>
<span class="expiry-warning" style="color:${client.color}">${client.expiry}</span>
</div>
`;
stack.appendChild(card);
});
}
renderCards();
function swipeRight() {
if(activeIndex < 0) return;
const cards = document.querySelectorAll('.card');
cards[activeIndex].classList.add('swipe-right');
setTimeout(() => { activeIndex--; }, 200);
}
function swipeLeft() {
if(activeIndex < 0) return;
const cards = document.querySelectorAll('.card');
cards[activeIndex].classList.add('swipe-left');
setTimeout(() => {
alert(`Opening WhatsApp for ${clients[activeIndex].name}...`);
activeIndex--;
}, 300);
}
</script>
</body>
</html>