Spaces:

kadirnar
/

Personal-Activity

Running

File size: 10,021 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Hugging Face Heatmaps</title>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@700;800&display=swap" rel="stylesheet">
  <style>
    body {
      background: #18191a;
      color: #fff;
      font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
      margin: 0;
      padding: 0;
    }
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 32px 20px 64px 20px;
    }
    .modern-title {
      font-weight: 800;
      font-size: 2.8rem;
      background: linear-gradient(90deg, #ffb347 0%, #ffcc33 60%, #00c3ff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-fill-color: transparent;
      margin-bottom: 24px;
      display: flex;
      align-items: center;
      gap: 18px;
      letter-spacing: -1px;
      animation: fadeInDown 1.2s cubic-bezier(.18,.89,.32,1.28);
    }
    .modern-title .hf-logo {
      display: flex;
      align-items: center;
      height: 2.8rem;
      width: 2.8rem;
      margin-right: 4px;
      flex-shrink: 0;
    }
    .modern-title .hf-logo img, .modern-title .hf-logo svg {
      height: 100%;
      width: 100%;
      display: block;
    }
    .star-call {
      margin-bottom: 34px;
      font-size: 1.15rem;
      color: #ffcc33;
      background: #232526;
      border-radius: 14px;
      padding: 12px 18px;
      display: inline-block;
      box-shadow: 0 2px 14px #0003;
      font-weight: 700;
      animation: fadeIn 1.1s cubic-bezier(.18,.89,.32,1.28);
    }
    .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;
      grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
      gap: 36px;
    }
    .heatmap-card {
      background: linear-gradient(135deg, #232526 0%, #2c3e50 100%);
      border-radius: 24px;
      box-shadow: 0 8px 36px #0007, 0 1.5px 8px #00c3ff44;
      padding: 24px 18px 18px 18px;
      display: flex;
      flex-direction: column;
      align-items: center;
      transition: transform 0.25s cubic-bezier(.22,1,.36,1), box-shadow 0.23s;
      position: relative;
      overflow: hidden;
      border: 1.5px solid #232526;
      animation: cardFadeIn 1.2s cubic-bezier(.18,.89,.32,1.28);
    }
    .heatmap-card::before {
      content: '';
      position: absolute;
      top: -60px;
      right: -60px;
      width: 120px;
      height: 120px;
      background: radial-gradient(circle at 40% 40%, #ffcc33aa 0%, #00c3ff00 100%);
      z-index: 0;
      pointer-events: none;
      transition: opacity 0.3s;
      opacity: 0.5;
    }
    .heatmap-card:hover {
      transform: translateY(-12px) scale(1.025);
      box-shadow: 0 16px 52px #00c3ff44, 0 2px 18px #ffb34733;
      border: 1.5px solid #ffcc33;
    }
    .heatmap-card:hover::before {
      opacity: 0.9;
    }
    .heatmap-label {
      position: relative;
      z-index: 1;
      font-size: 1.3rem;
      font-weight: 800;
      letter-spacing: 0.5px;
      margin-bottom: 16px;
      color: #ffcc33;
      text-shadow: 0 2px 12px #0008;
      text-align: center;
      animation: fadeInUp 1.1s cubic-bezier(.18,.89,.32,1.28);
    }
    .scroll-tip {
      color: #aaa;
      font-size: 1rem;
      margin: 12px 0 0 0;
      text-align: center;
      letter-spacing: 0.1px;
      user-select: none;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      opacity: 0.85;
      animation: fadeIn 1.8s 1s both;
    }
    .scroll-tip .arrow {
      font-size: 1.3em;
      animation: arrowMove 1.2s infinite alternate cubic-bezier(.18,.89,.32,1.28);
      display: inline-block;
      vertical-align: middle;
    }
    .delete-btn {
      position: absolute;
      top: 14px;
      right: 18px;
      background: rgba(34, 34, 34, 0.85);
      border: none;
      color: #ffb347;
      font-size: 1.3rem;
      font-weight: bold;
      border-radius: 50%;
      width: 32px;
      height: 32px;
      cursor: pointer;
      z-index: 2;
      transition: background 0.2s, color 0.2s, transform 0.15s;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 1px 6px #0005;
    }
    .delete-btn:hover {
      background: #ffb347;
      color: #222;
      transform: scale(1.13) rotate(12deg);
    }
    iframe {
      width: 100%;
      height: 260px;
      border-radius: 10px;
      border: none;
      background: #222;
      margin-bottom: 0;
      box-shadow: 0 1px 12px #0005;
      z-index: 1;
      animation: fadeIn 1.5s cubic-bezier(.18,.89,.32,1.28);
    }
    @media (max-width: 700px) {
      .modern-title {
        font-size: 1.5rem;
      }
      .container {
        padding: 12px 4px 32px 4px;
      }
      .heatmap-label {
        font-size: 1.09rem;
      }
      iframe {
        height: 180px;
      }
      .search-row input[type="text"] {
        width: 120px;
      }
      .modern-title .hf-logo {
        height: 2rem;
        width: 2rem;
      }
    }
    /* Animations */
    @keyframes fadeInDown {
      0% { opacity: 0; transform: translateY(-40px);}
      100% { opacity: 1; transform: translateY(0);}
    }
    @keyframes fadeInUp {
      0% { opacity: 0; transform: translateY(40px);}
      100% { opacity: 1; transform: translateY(0);}
    }
    @keyframes fadeIn {
      0% { opacity: 0;}
      100% { opacity: 1;}
    }
    @keyframes cardFadeIn {
      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="hf-logo">
        <img src="https://huggingface.co/front/assets/huggingface_logo-noborder.svg" alt="Hugging Face">
      </span>
      My Hugging Face Heatmaps
    </h1>

    <div class="star-call">
      If you like this Space, please give it a star!
    </div>

    <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">
        <button class="delete-btn" title="Remove this card" onclick="this.parentElement.remove()">✖️</button>
        <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-card">
        <button class="delete-btn" title="Remove this card" onclick="this.parentElement.remove()">✖️</button>
        <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-card">
        <button class="delete-btn" title="Remove this card" onclick="this.parentElement.remove()">✖️</button>
        <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 = `
        <button class="delete-btn" title="Remove this card" onclick="this.parentElement.remove()">✖️</button>
        <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>