Spaces:

kadirnar
/

Personal-Activity

Running

App Files Files Community

kadirnar commited on Aug 8, 2025

Commit

732cfdf

verified ·

1 Parent(s): 90a3beb

Update index.html

Browse files

Files changed (1) hide show

index.html +93 -30

index.html CHANGED Viewed

@@ -32,16 +32,49 @@
       letter-spacing: -1px;
       animation: fadeInDown 1.2s cubic-bezier(.18,.89,.32,1.28);
     }
-    .modern-title .hf-logo {
-      height: 2.7rem;
-      width: 2.7rem;
-      display: inline-block;
-      vertical-align: middle;
       margin-right: 8px;
-      filter: drop-shadow(0 2px 12px #0005);
-      background: #fff;
-      border-radius: 50%;
-      padding: 3px;
     }
     .card-grid {
       display: grid;
@@ -115,10 +148,6 @@
       display: inline-block;
       vertical-align: middle;
     }
-    @keyframes arrowMove {
-      from { transform: translateX(0);}
-      to { transform: translateX(12px);}
-    }
     iframe {
       width: 100%;
       height: 260px;
@@ -143,6 +172,9 @@
       iframe {
         height: 180px;
       }
     }
     /* Animations */
     @keyframes fadeInDown {
@@ -161,33 +193,30 @@
       0% { opacity: 0; transform: scale(0.98);}
       100% { opacity: 1; transform: scale(1);}
     }
   </style>
 </head>
 <body>
   <div class="container">
     <h1 class="modern-title">
-      <span class="hf-logo">
-        <svg viewBox="0 0 40 40" width="38" height="38" xmlns="http://www.w3.org/2000/svg">
-          <circle cx="20" cy="20" r="20" fill="#fff" />
-          <g>
-            <ellipse cx="20" cy="20" rx="18" ry="18" fill="#ffd21e"/>
-            <ellipse cx="14" cy="17" rx="2.5" ry="3" fill="#fff"/>
-            <ellipse cx="26" cy="17" rx="2.5" ry="3" fill="#fff"/>
-            <ellipse cx="14" cy="17" rx="1.2" ry="1.5" fill="#222"/>
-            <ellipse cx="26" cy="17" rx="1.2" ry="1.5" fill="#222"/>
-            <path d="M13 26 q7 5 14 0" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round"/>
-          </g>
-        </svg>
-      </span>
       My Hugging Face Heatmaps
     </h1>
-    <div class="card-grid">
       <div class="heatmap-card">
         <div class="heatmap-label">Kadir Nar</div>
         <iframe src="https://cfahlgren1-model-release-heatmap.hf.space/kadirnar"></iframe>
         <div class="scroll-tip">
-          <span>En güncel aktiviteler için sağa kaydırın</span>
           <span class="arrow">➡️</span>
         </div>
       </div>
@@ -195,7 +224,7 @@
         <div class="heatmap-label">OpenSpeechHub</div>
         <iframe src="https://cfahlgren1-model-release-heatmap.hf.space/OpenSpeechHub"></iframe>
         <div class="scroll-tip">
-          <span>En güncel aktiviteler için sağa kaydırın</span>
           <span class="arrow">➡️</span>
         </div>
       </div>
@@ -203,11 +232,45 @@
         <div class="heatmap-label">Closed-TTS</div>
         <iframe src="https://cfahlgren1-model-release-heatmap.hf.space/Closed-TTS"></iframe>
         <div class="scroll-tip">
-          <span>En güncel aktiviteler için sağa kaydırın</span>
           <span class="arrow">➡️</span>
         </div>
       </div>
     </div>
   </div>
 </body>
 </html>

       letter-spacing: -1px;
       animation: fadeInDown 1.2s cubic-bezier(.18,.89,.32,1.28);
     }
+    .modern-title .emoji {
+      font-size: 2.3rem;
       margin-right: 8px;
+      vertical-align: middle;
+    }
+    .search-row {
+      display: flex;
+      gap: 12px;
+      align-items: center;
+      margin-bottom: 38px;
+      animation: fadeInDown 1.3s cubic-bezier(.18,.89,.32,1.28);
+    }
+    .search-row input[type="text"] {
+      font-family: inherit;
+      font-size: 1.1rem;
+      padding: 10px 16px;
+      border-radius: 12px;
+      border: 1.5px solid #222;
+      background: #232526;
+      color: #fff;
+      outline: none;
+      width: 240px;
+      transition: border 0.2s;
+    }
+    .search-row input[type="text"]:focus {
+      border: 1.5px solid #ffcc33;
+    }
+    .search-row button {
+      font-family: inherit;
+      font-size: 1.1rem;
+      padding: 10px 22px;
+      border-radius: 12px;
+      border: none;
+      background: linear-gradient(90deg, #ffb347 0%, #ffcc33 80%);
+      color: #222;
+      font-weight: 800;
+      cursor: pointer;
+      transition: background 0.2s, color 0.2s;
+      box-shadow: 0 2px 10px #ffb34722;
+    }
+    .search-row button:hover {
+      background: linear-gradient(90deg, #00c3ff 0%, #ffcc33 100%);
+      color: #fff;
     }
     .card-grid {
       display: grid;
       display: inline-block;
       vertical-align: middle;
     }
     iframe {
       width: 100%;
       height: 260px;
       iframe {
         height: 180px;
       }
+      .search-row input[type="text"] {
+        width: 120px;
+      }
     }
     /* Animations */
     @keyframes fadeInDown {
       0% { opacity: 0; transform: scale(0.98);}
       100% { opacity: 1; transform: scale(1);}
     }
+    @keyframes arrowMove {
+      from { transform: translateX(0);}
+      to { transform: translateX(12px);}
+    }
   </style>
 </head>
 <body>
   <div class="container">
     <h1 class="modern-title">
+      <span class="emoji">🤗</span>
       My Hugging Face Heatmaps
     </h1>
+    <form class="search-row" id="searchForm" autocomplete="off" onsubmit="return false;">
+      <input type="text" id="usernameInput" placeholder="Enter username or org..." required>
+      <button type="submit">Add Heatmap</button>
+    </form>
+    <div class="card-grid" id="cardGrid">
       <div class="heatmap-card">
         <div class="heatmap-label">Kadir Nar</div>
         <iframe src="https://cfahlgren1-model-release-heatmap.hf.space/kadirnar"></iframe>
         <div class="scroll-tip">
+          <span>Scroll right for the latest activity</span>
           <span class="arrow">➡️</span>
         </div>
       </div>
         <div class="heatmap-label">OpenSpeechHub</div>
         <iframe src="https://cfahlgren1-model-release-heatmap.hf.space/OpenSpeechHub"></iframe>
         <div class="scroll-tip">
+          <span>Scroll right for the latest activity</span>
           <span class="arrow">➡️</span>
         </div>
       </div>
         <div class="heatmap-label">Closed-TTS</div>
         <iframe src="https://cfahlgren1-model-release-heatmap.hf.space/Closed-TTS"></iframe>
         <div class="scroll-tip">
+          <span>Scroll right for the latest activity</span>
           <span class="arrow">➡️</span>
         </div>
       </div>
     </div>
   </div>
+  <script>
+    const cardGrid = document.getElementById('cardGrid');
+    const searchForm = document.getElementById('searchForm');
+    const usernameInput = document.getElementById('usernameInput');
+    searchForm.addEventListener('submit', function() {
+      const username = usernameInput.value.trim();
+      if (!username) return;
+      // Check if already exists
+      const exists = Array.from(cardGrid.querySelectorAll('.heatmap-label')).some(label =>
+        label.textContent.trim().toLowerCase() === username.toLowerCase()
+      );
+      if (exists) {
+        usernameInput.value = '';
+        return;
+      }
+      // Create card
+      const card = document.createElement('div');
+      card.className = 'heatmap-card';
+      card.innerHTML = `
+        <div class="heatmap-label">${username}</div>
+        <iframe src="https://cfahlgren1-model-release-heatmap.hf.space/${encodeURIComponent(username)}"></iframe>
+        <div class="scroll-tip">
+          <span>Scroll right for the latest activity</span>
+          <span class="arrow">➡️</span>
+        </div>
+      `;
+      cardGrid.appendChild(card);
+      usernameInput.value = '';
+    });
+  </script>
 </body>
 </html>