Spaces:

Raversray
/

subswipe-pro-dashboard

Running

App Files Files Community

Raversray commited on Nov 20, 2025

Commit

d5d97b9

verified ·

1 Parent(s): 329a622

perfect the scaling maintain the design and everything

Browse files

Files changed (3) hide show

index.html +171 -103
script.js +3 -3
style.css +9 -7

index.html CHANGED Viewed

@@ -2,17 +2,16 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Subscription Portal UI</title>
-    <link rel="stylesheet" href="style.css">
-    <script src="script.js"></script>
     <style>
-        /* --- 1. Reset & Base Styles (Dark Mode) --- */
-body {
             margin: 0;
             padding: 0;
             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-            background-color: #121212; /* Deep Black */
             color: white;
             display: flex;
             justify-content: center;
@@ -20,193 +19,273 @@ body {
             overflow: hidden;
         }
-        /* Mobile Container */
         .app-container {
             width: 100%;
             max-width: 400px;
             height: 100%;
-            background-color: #181818;
             position: relative;
             display: flex;
             flex-direction: column;
-            box-shadow: 0 0 20px rgba(0,0,0,0.5);
         }
         /* --- 2. Header --- */
         .header {
-            padding: 20px;
             display: flex;
             justify-content: space-between;
             align-items: center;
         }
-        .header h1 { margin: 0; font-size: 24px; font-weight: 800; }
-        .header .revenue { color: #1DB954; font-weight: bold; font-size: 14px; }
-        /* --- 3. The Card Stack (Central Focus) --- */
         .card-stack {
             flex: 1;
             position: relative;
             display: flex;
             justify-content: center;
             align-items: center;
-            perspective: 1000px;
         }
         .card {
             width: 85%;
-            height: 60%;
-            background: linear-gradient(145deg, #2a2a2a, #222);
-            border-radius: 20px;
             position: absolute;
-            box-shadow: 0 10px 25px rgba(0,0,0,0.5);
             display: flex;
             flex-direction: column;
             justify-content: space-between;
             padding: 25px;
             box-sizing: border-box;
-            transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.4s;
-            border: 1px solid #333;
         }
-        /* Service Branding */
         .service-badge {
             align-self: flex-start;
-            background: rgba(255,255,255,0.1);
-            padding: 5px 12px;
             border-radius: 50px;
             font-size: 12px;
-            font-weight: bold;
             text-transform: uppercase;
-            display: flex;
-            align-items: center;
-            gap: 5px;
         }
-        .spotify-theme .service-badge { color: #1DB954; border: 1px solid #1DB954; }
-        .netflix-theme .service-badge { color: #E50914; border: 1px solid #E50914; }
         /* Client Details */
-        .client-info h2 { font-size: 28px; margin: 0 0 5px 0; }
-        .client-info p { color: #888; margin: 0; font-size: 14px; }
-        .expiry-warning { color: #ff4b4b; font-size: 13px; margin-top: 10px; display: block; }
-        /* --- 4. Action Area (Thumb Zone) --- */
         .actions {
-            padding: 0 30px 120px 30px; /* Extra bottom padding for nav bar */
             display: flex;
             justify-content: space-between;
-            gap: 20px;
         }
         .btn-action {
             flex: 1;
-            height: 60px;
-            border-radius: 30px;
             border: none;
-            font-size: 16px;
-            font-weight: bold;
             cursor: pointer;
             transition: transform 0.1s;
             display: flex;
             justify-content: center;
             align-items: center;
-            gap: 10px;
         }
-        .btn-action:active { transform: scale(0.95); }
-        .btn-whatsapp {
-            background-color: #333;
             color: white;
         }
         .btn-renew {
-            background-color: #1DB954; /* Spotify Green */
-            color: black;
-            box-shadow: 0 0 15px rgba(29, 185, 84, 0.4);
         }
-        /* --- 5. Bottom Navigation (Fixed) --- */
         .bottom-nav {
             position: absolute;
             bottom: 0;
             width: 100%;
-            height: 80px;
-            background: #121212;
             display: flex;
             justify-content: space-around;
             align-items: center;
-            border-top: 1px solid #333;
         }
         .nav-item {
             display: flex;
             flex-direction: column;
             align-items: center;
-            color: #666;
-            font-size: 10px;
-            gap: 4px;
             cursor: pointer;
         }
         .nav-item.active { color: #1DB954; }
-        .nav-icon { font-size: 24px; }
         /* --- Animations --- */
         .swipe-right {
-            transform: translateX(120%) rotate(15deg) !important;
             opacity: 0 !important;
         }
         .swipe-left {
-            transform: translateX(-120%) rotate(-15deg) !important;
             opacity: 0 !important;
         }
     </style>
 </head>
 <body>
-<custom-navbar></custom-navbar>
 <div class="app-container">
-<div class="header">
         <div>
-            <div style="font-size:12px; color:#888;">Welcome back,</div>
-            <h1>Dashboard</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-whatsapp" onclick="swipeLeft()">
-            <span>💬 Message</span>
         </button>
         <button class="btn-action btn-renew" onclick="swipeRight()">
-            <span>✅ Renew</span>
         </button>
     </div>
     <div class="bottom-nav">
         <div class="nav-item active">
-            <span class="nav-icon">⚡</span>
-            <span>Pulse</span>
         </div>
         <div class="nav-item">
-            <span class="nav-icon">📇</span>
-            <span>Clients</span>
         </div>
         <div class="nav-item">
-            <span class="nav-icon" style="color:white; font-size:32px;">+</span>
         </div>
         <div class="nav-item">
-            <span class="nav-icon">📊</span>
             <span>Stats</span>
         </div>
     </div>
 </div>
 <script>
-    // Mock Data for the Interface
     const clients = [
-        { name: "Chanda Mumba", service: "Netflix Premium", expiry: "Expires in 2 days", theme: "netflix-theme", color: "#E50914" },
-        { name: "John Banda", service: "Spotify Duo", expiry: "Expires Tomorrow", theme: "spotify-theme", color: "#1DB954" },
-        { name: "Sarah Lungu", service: "Apple Music", expiry: "Expires Today", theme: "spotify-theme", color: "#FC3C44" },
     ];
     const stack = document.getElementById('cardStack');
@@ -216,62 +295,51 @@ body {
         stack.innerHTML = '';
         clients.forEach((client, index) => {
             const card = document.createElement('div');
-            card.className = `card ${client.theme}`;
-            // Stack effect: cards behind are smaller and darker
-            let scale = 1 - (clients.length - 1 - index) * 0.05;
-            let translateY = (clients.length - 1 - index) * 10;
             let zIndex = index;
             card.style.zIndex = zIndex;
             card.style.transform = `scale(${scale}) translateY(-${translateY}px)`;
             card.innerHTML = `
-                <div class="service-badge" style="border-color:${client.color}; color:${client.color}">
-                    <span>●</span> ${client.service}
                 </div>
                 <div class="client-info">
                     <h2>${client.name}</h2>
-                    <p>${client.service}</p>
-                    <span class="expiry-warning">${client.expiry}</span>
                 </div>
             `;
             stack.appendChild(card);
         });
     }
-    // Initial Render
     renderCards();
-    // Simulate Swipe Right (Renew)
     function swipeRight() {
         if(activeIndex < 0) return;
         const cards = document.querySelectorAll('.card');
-        const topCard = cards[activeIndex];
-        topCard.classList.add('swipe-right');
-        setTimeout(() => {
-            activeIndex--;
-            // Reset/Re-render logic would go here in real app
-        }, 200);
     }
-    // Simulate Swipe Left (Message)
     function swipeLeft() {
         if(activeIndex < 0) return;
         const cards = document.querySelectorAll('.card');
-        const topCard = cards[activeIndex];
-        topCard.classList.add('swipe-left');
-        // Simulate opening WhatsApp
-        setTimeout(() => {
             alert(`Opening WhatsApp for ${clients[activeIndex].name}...`);
-            activeIndex--;
         }, 300);
     }
 </script>
-<script src="components/navbar.js"></script>
-<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 </body>
 </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;
             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');
         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>

script.js CHANGED Viewed

@@ -44,9 +44,9 @@ function renderCards() {
     clients.forEach((client, index) => {
         const card = document.createElement('div');
         card.className = `card ${client.theme}`;
-        let scale = 1 - (clients.length - 1 - index) * 0.05;
-        let translateY = (clients.length - 1 - index) * 10;
-        let zIndex = index;
         card.style.zIndex = zIndex;
         card.style.transform = `scale(${scale}) translateY(-${translateY}px)`;

     clients.forEach((client, index) => {
         const card = document.createElement('div');
         card.className = `card ${client.theme}`;
+        let scale = 1 - (clients.length - 1 - index) * 0.04;
+        let translateY = (clients.length - 1 - index) * 8;
+let zIndex = index;
         card.style.zIndex = zIndex;
         card.style.transform = `scale(${scale}) translateY(-${translateY}px)`;

style.css CHANGED Viewed

@@ -11,20 +11,21 @@ body {
     overflow: hidden;
     margin-top: 60px; /* Space for fixed navbar */
 }
 /* Mobile Container */
 .app-container {
     width: 100%;
-    max-width: 400px;
     height: calc(100% - 60px);
     background-color: #181818;
     position: relative;
     display: flex;
     flex-direction: column;
     box-shadow: 0 0 20px rgba(0,0,0,0.5);
-    margin-top: 60px;
 }
 /* --- 2. Header --- */
 .header {
     padding: 20px;
@@ -44,10 +45,12 @@ body {
     align-items: center;
     perspective: 1000px;
 }
 .card {
     width: 85%;
-    height: 60%;
     background: linear-gradient(145deg, #2a2a2a, #222);
     border-radius: 20px;
     position: absolute;
@@ -60,7 +63,6 @@ body {
     transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.4s;
     border: 1px solid #333;
 }
 /* Service Branding */
 .service-badge {
     align-self: flex-start;

     overflow: hidden;
     margin-top: 60px; /* Space for fixed navbar */
 }
 /* Mobile Container */
 .app-container {
     width: 100%;
+    max-width: 420px;
+    min-width: 320px;
     height: calc(100% - 60px);
+    min-height: 600px;
     background-color: #181818;
     position: relative;
     display: flex;
     flex-direction: column;
     box-shadow: 0 0 20px rgba(0,0,0,0.5);
+    margin: 60px auto 0;
+    overflow: hidden;
 }
 /* --- 2. Header --- */
 .header {
     padding: 20px;
     align-items: center;
     perspective: 1000px;
 }
 .card {
     width: 85%;
+    min-width: 280px;
+    height: 55vh;
+    min-height: 400px;
+    max-height: 500px;
     background: linear-gradient(145deg, #2a2a2a, #222);
     border-radius: 20px;
     position: absolute;
     transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.4s;
     border: 1px solid #333;
 }
 /* Service Branding */
 .service-badge {
     align-self: flex-start;