spaces-dashboard

Sleeping

App Files Files Community

mrfakename commited on Dec 7, 2025

Commit

a2bc252

1 Parent(s): 0a899b3

fix ui

Browse files

Files changed (2) hide show

templates/dashboard.html +64 -60
templates/index.html +23 -28

templates/dashboard.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Dashboard - Spaces Dashboard</title>
     <style>
         * {
             margin: 0;
@@ -12,20 +12,21 @@
         }
         body {
             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
-            background: #f5f5f5;
             min-height: 100vh;
         }
         .navbar {
-            background: white;
             padding: 1rem 2rem;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
             display: flex;
             justify-content: space-between;
             align-items: center;
         }
         .navbar h1 {
-            font-size: 1.4rem;
-            color: #333;
         }
         .user-info {
             display: flex;
@@ -33,67 +34,70 @@
             gap: 1rem;
         }
         .avatar {
-            width: 40px;
-            height: 40px;
             border-radius: 50%;
             object-fit: cover;
         }
         .username {
-            font-weight: 600;
-            color: #333;
         }
         .logout-btn {
-            background: #ff4444;
-            color: white;
-            padding: 8px 16px;
-            border-radius: 6px;
             text-decoration: none;
-            font-size: 0.9rem;
-            transition: background 0.2s;
         }
         .logout-btn:hover {
-            background: #cc0000;
         }
         .main {
-            max-width: 1200px;
-            margin: 2rem auto;
-            padding: 0 2rem;
         }
         .welcome {
-            background: white;
-            padding: 2rem;
-            border-radius: 12px;
-            margin-bottom: 2rem;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
         }
         .welcome h2 {
-            color: #333;
             margin-bottom: 0.5rem;
         }
         .welcome p {
             color: #666;
         }
-        .info-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-            gap: 1rem;
         }
-        .info-card {
-            background: white;
-            padding: 1.5rem;
-            border-radius: 12px;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
         }
-        .info-card h3 {
-            color: #333;
-            margin-bottom: 0.5rem;
-            font-size: 0.9rem;
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
         }
-        .info-card p {
             color: #666;
-            font-size: 1.1rem;
         }
     </style>
 </head>
@@ -102,39 +106,39 @@
         <h1>Spaces Dashboard</h1>
         <div class="user-info">
             {% if user.avatar_url %}
-            <img src="{{ user.avatar_url }}" alt="Avatar" class="avatar">
             {% endif %}
             <span class="username">{{ user.username }}</span>
-            <a href="/logout" class="logout-btn">Logout</a>
         </div>
     </nav>
     <main class="main">
         <div class="welcome">
-            <h2>Welcome, {{ user.name or user.username }}!</h2>
-            <p>You have successfully signed in with your Hugging Face account.</p>
         </div>
-        <div class="info-grid">
-            <div class="info-card">
-                <h3>Username</h3>
-                <p>{{ user.username }}</p>
             </div>
             {% if user.name %}
-            <div class="info-card">
-                <h3>Name</h3>
-                <p>{{ user.name }}</p>
             </div>
             {% endif %}
             {% if user.email %}
-            <div class="info-card">
-                <h3>Email</h3>
-                <p>{{ user.email }}</p>
             </div>
             {% endif %}
-            <div class="info-card">
-                <h3>User ID</h3>
-                <p>{{ user.sub }}</p>
             </div>
         </div>
     </main>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dashboard</title>
     <style>
         * {
             margin: 0;
         }
         body {
             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+            background: #0a0a0a;
+            color: #e5e5e5;
             min-height: 100vh;
         }
         .navbar {
+            border-bottom: 1px solid #1a1a1a;
             padding: 1rem 2rem;
             display: flex;
             justify-content: space-between;
             align-items: center;
         }
         .navbar h1 {
+            font-size: 0.875rem;
+            font-weight: 500;
+            color: #888;
         }
         .user-info {
             display: flex;
             gap: 1rem;
         }
         .avatar {
+            width: 28px;
+            height: 28px;
             border-radius: 50%;
             object-fit: cover;
         }
         .username {
+            font-size: 0.875rem;
+            color: #e5e5e5;
         }
         .logout-btn {
+            color: #666;
+            font-size: 0.75rem;
             text-decoration: none;
+            transition: color 0.2s;
         }
         .logout-btn:hover {
+            color: #e5e5e5;
         }
         .main {
+            max-width: 600px;
+            margin: 0 auto;
+            padding: 4rem 2rem;
         }
         .welcome {
+            margin-bottom: 3rem;
         }
         .welcome h2 {
+            font-size: 1.25rem;
+            font-weight: 500;
+            letter-spacing: -0.02em;
             margin-bottom: 0.5rem;
         }
         .welcome p {
             color: #666;
+            font-size: 0.875rem;
         }
+        .info-list {
+            display: flex;
+            flex-direction: column;
+            gap: 1px;
+            background: #1a1a1a;
+            border-radius: 8px;
+            overflow: hidden;
+        }
+        .info-item {
+            background: #0a0a0a;
+            padding: 1rem 1.25rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
         }
+        .info-item:first-child {
+            padding-top: 1.25rem;
         }
+        .info-item:last-child {
+            padding-bottom: 1.25rem;
         }
+        .info-label {
             color: #666;
+            font-size: 0.8125rem;
+        }
+        .info-value {
+            font-size: 0.875rem;
+            color: #e5e5e5;
         }
     </style>
 </head>
         <h1>Spaces Dashboard</h1>
         <div class="user-info">
             {% if user.avatar_url %}
+            <img src="{{ user.avatar_url }}" alt="" class="avatar">
             {% endif %}
             <span class="username">{{ user.username }}</span>
+            <a href="/logout" class="logout-btn">Sign out</a>
         </div>
     </nav>
     <main class="main">
         <div class="welcome">
+            <h2>{{ user.name or user.username }}</h2>
+            <p>Signed in with Hugging Face</p>
         </div>
+        <div class="info-list">
+            <div class="info-item">
+                <span class="info-label">Username</span>
+                <span class="info-value">{{ user.username }}</span>
             </div>
             {% if user.name %}
+            <div class="info-item">
+                <span class="info-label">Name</span>
+                <span class="info-value">{{ user.name }}</span>
             </div>
             {% endif %}
             {% if user.email %}
+            <div class="info-item">
+                <span class="info-label">Email</span>
+                <span class="info-value">{{ user.email }}</span>
             </div>
             {% endif %}
+            <div class="info-item">
+                <span class="info-label">ID</span>
+                <span class="info-value">{{ user.sub }}</span>
             </div>
         </div>
     </main>

templates/index.html CHANGED Viewed

@@ -12,53 +12,48 @@
         }
         body {
             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
             min-height: 100vh;
             display: flex;
             align-items: center;
             justify-content: center;
         }
         .container {
-            background: white;
-            padding: 3rem;
-            border-radius: 16px;
-            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
             text-align: center;
-            max-width: 400px;
-            width: 90%;
         }
         h1 {
-            color: #333;
             margin-bottom: 0.5rem;
-            font-size: 1.8rem;
         }
         .subtitle {
             color: #666;
-            margin-bottom: 2rem;
         }
         .login-btn {
             display: inline-flex;
             align-items: center;
-            gap: 10px;
-            background: #ffcc00;
-            color: #1a1a1a;
-            padding: 14px 28px;
-            border-radius: 8px;
             text-decoration: none;
-            font-weight: 600;
-            font-size: 1rem;
-            transition: all 0.2s ease;
-            border: none;
-            cursor: pointer;
         }
         .login-btn:hover {
-            background: #e6b800;
-            transform: translateY(-2px);
-            box-shadow: 0 4px 12px rgba(255, 204, 0, 0.4);
         }
         .login-btn svg {
-            width: 24px;
-            height: 24px;
         }
     </style>
 </head>
@@ -66,10 +61,10 @@
     <div class="container">
         <h1>Spaces Dashboard</h1>
         <p class="subtitle">Manage your Hugging Face Spaces</p>
-        <a href="/login" class="login-btn">
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-                <path fill="#FFD21E" d="M50 5C25.1 5 5 25.1 5 50s20.1 45 45 45 45-20.1 45-45S74.9 5 50 5z"/>
-                <path fill="#1a1a1a" d="M35 40c-4.4 0-8 3.6-8 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm30 0c-4.4 0-8 3.6-8 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8z"/>
             </svg>
             Sign in with Hugging Face
         </a>

         }
         body {
             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+            background: #0a0a0a;
+            color: #e5e5e5;
             min-height: 100vh;
             display: flex;
             align-items: center;
             justify-content: center;
         }
         .container {
             text-align: center;
+            padding: 2rem;
         }
         h1 {
+            font-size: 1.5rem;
+            font-weight: 500;
+            letter-spacing: -0.02em;
             margin-bottom: 0.5rem;
         }
         .subtitle {
             color: #666;
+            font-size: 0.875rem;
+            margin-bottom: 3rem;
         }
         .login-btn {
             display: inline-flex;
             align-items: center;
+            gap: 8px;
+            background: transparent;
+            color: #e5e5e5;
+            padding: 10px 20px;
+            border: 1px solid #333;
+            border-radius: 6px;
             text-decoration: none;
+            font-size: 0.875rem;
+            transition: border-color 0.2s, background 0.2s;
         }
         .login-btn:hover {
+            border-color: #555;
+            background: #111;
         }
         .login-btn svg {
+            width: 18px;
+            height: 18px;
         }
     </style>
 </head>
     <div class="container">
         <h1>Spaces Dashboard</h1>
         <p class="subtitle">Manage your Hugging Face Spaces</p>
+        <a href="/login" target="_blank" class="login-btn">
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+                <path fill="#fff" d="M50 5C25.1 5 5 25.1 5 50s20.1 45 45 45 45-20.1 45-45S74.9 5 50 5z"/>
+                <path fill="#0a0a0a" d="M35 40c-4.4 0-8 3.6-8 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm30 0c-4.4 0-8 3.6-8 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8z"/>
             </svg>
             Sign in with Hugging Face
         </a>