Article-Generator

Running

App Files Files Community

reach-vb HF Staff commited on Jan 2

Commit

79fd234

verified ·

1 Parent(s): 43c25b6

Update index.html (#1)

Browse files

- Update index.html (f34e34aeb4f5dcc5cda14648fcc42f030f963969)

Files changed (1) hide show

index.html +371 -19

index.html CHANGED Viewed

@@ -1,19 +1,371 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Timeline Template</title>
+  <style>
+    body {
+      font-family: 'Arial', sans-serif;
+      background-color: #f4f4f9;
+      color: #333;
+      margin: 0;
+      padding: 0;
+      overflow-x: scroll;
+      scrollbar-width: thin;
+      -ms-overflow-style: -ms-autohiding-scrollbar;
+    }
+    .timeline {
+      display: flex;
+      flex-direction: row;
+      padding: 20px;
+      gap: 10px;
+      overflow-x: auto;
+    }
+    .month {
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+      width: 300px;
+      flex: 0 0 300px;
+    }
+    .month h3 {
+      margin: 0;
+      padding: 10px;
+      background-color: #6200ea;
+      color: white;
+      border-radius: 5px;
+      text-align: center;
+    }
+    .event {
+      background-color: white;
+      padding: 10px;
+      border-radius: 5px;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      position: relative;
+      transition: all 0.3s ease;
+    }
+    /* Make category-1 events more prominent */
+    .event:has(.tag.open-source) {
+      background-color: #e8f5e9;
+      border-left: 4px solid #4caf50;
+      transform: scale(1.02);
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+    }
+    /* Slightly dim category-2 events */
+    .event:has(.tag.api-only) {
+      background-color: #fafafa;
+      border-left: 4px solid #f44336;
+    }
+    /* Hover effects */
+    .event:has(.tag.open-source):hover {
+      transform: scale(1.03);
+      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
+    }
+    .event h4 {
+      margin: 0;
+      font-size: 14px;
+    }
+    .event p {
+      margin: 5px 0 0;
+      font-size: 12px;
+      color: #666;
+    }
+    .tag {
+      display: inline-block;
+      padding: 2px 5px;
+      font-size: 10px;
+      border-radius: 3px;
+      margin-top: 5px;
+    }
+    .tag.open-source {
+      background-color: #4caf50;
+      color: white;
+    }
+    .tag.api-only {
+      background-color: #f44336;
+      color: white;
+    }
+    .event p a {
+      color: #4caf50;
+      text-decoration: none;
+    }
+    .event p a:hover {
+      text-decoration: underline;
+    }
+    .github-link {
+      text-align: center;
+      padding: 8px;
+      background-color: #24292e;
+      color: white;
+      font-size: 14px;
+    }
+    .github-link a {
+      color: white;
+      text-decoration: none;
+    }
+    .github-link a:hover {
+      text-decoration: underline;
+    }
+    /* Scrollbar styles */
+    body::-webkit-scrollbar {
+      height: 8px;
+    }
+    body::-webkit-scrollbar-track {
+      background: #f1f1f1;
+    }
+    body::-webkit-scrollbar-thumb {
+      background: #888;
+      border-radius: 4px;
+    }
+    body::-webkit-scrollbar-thumb:hover {
+      background: #555;
+    }
+    .tag.text {
+      background-color: #9c27b0;
+      color: white;
+    }
+    .tag.audio {
+      background-color: #ff9800;
+      color: white;
+    }
+    .tag.vision {
+      background-color: #03a9f4;
+      color: white;
+    }
+    .tag.multimodal {
+      background-color: #795548;
+      color: white;
+    }
+    .tag.announcement {
+      background-color: #607d8b;
+      color: white;
+    }
+    .filter-group {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 15px;
+      padding: 20px 0;
+      background-color: white;
+      border-bottom: 1px solid #eee;
+    }
+    .toggle-container {
+      display: flex;
+      gap: 8px;
+    }
+    .dropdown-filters {
+      display: flex;
+      gap: 8px;
+    }
+    .toggle-button {
+      padding: 6px 12px;
+      border: 1px solid #ddd;
+      border-radius: 15px;
+      background-color: white;
+      font-size: 13px;
+      cursor: pointer;
+      transition: all 0.2s ease;
+    }
+    .toggle-button.active {
+      background-color: #2196f3;
+      border-color: #2196f3;
+      color: white;
+    }
+    select {
+      padding: 6px 12px;
+      border: 1px solid #ddd;
+      border-radius: 15px;
+      font-size: 13px;
+      background-color: white;
+      cursor: pointer;
+    }
+    .counter-container {
+      text-align: center;
+      padding: 15px;
+      font-size: 14px;
+      color: #666;
+      background-color: #f8f9fa;
+    }
+    .counter-item span {
+      font-weight: bold;
+      color: #2196f3;
+    }
+    .counter-divider {
+      margin: 0 10px;
+      color: #ddd;
+    }
+  </style>
+</head>
+<body>
+  <div class="github-link">
+    <a href="#" target="_blank">View on GitHub</a>
+  </div>
+  <div class="filter-group">
+    <div class="toggle-container">
+      <button class="toggle-button active" data-filter="all">All Models</button>
+      <button class="toggle-button" data-filter="open-source">Open Source</button>
+      <button class="toggle-button" data-filter="api-only">API Only</button>
+    </div>
+    <div class="dropdown-filters">
+      <select id="modalityFilter" onchange="filterByModality(this.value)">
+        <option value="all">All Modalities</option>
+        <option value="text">Text</option>
+        <option value="audio">Audio</option>
+        <option value="vision">Vision</option>
+        <option value="multimodal">Multimodal</option>
+      </select>
+      <select id="typeFilter" onchange="filterByType(this.value)">
+        <option value="all">All Types</option>
+        <option value="model">Models</option>
+        <option value="announcement">Announcements</option>
+      </select>
+    </div>
+  </div>
+  <div class="counter-container">
+    <span class="counter-item">
+      <span id="open-source-count">0</span> Open Source
+    </span>
+    <span class="counter-divider">·</span>
+    <span class="counter-item">
+      <span id="api-only-count">0</span> API Only
+    </span>
+  </div>
+  <div class="timeline">
+    <div class="month">
+      <h3>January 2025</h3>
+      <div class="event">
+        <h4>GPT-5 Announcement</h4>
+        <p>OpenAI announces GPT-5 development completion</p>
+        <span class="tag api-only">API Only</span>
+        <span class="tag text">Text</span>
+        <span class="tag announcement">Announcement</span>
+      </div>
+      <div class="event">
+        <h4>Anthropic Claude 4</h4>
+        <p>Anthropic releases Claude 4 with enhanced reasoning</p>
+        <span class="tag api-only">API Only</span>
+        <span class="tag text">Text</span>
+      </div>
+    </div>
+    <div class="month">
+      <h3>February 2025</h3>
+      <div class="event">
+        <h4>Meta's AudioCraft 2.0</h4>
+        <p>Open source audio generation model</p>
+        <span class="tag open-source">Open Weights</span>
+        <span class="tag audio">Audio</span>
+      </div>
+      <div class="event">
+        <h4>Google Gemini Ultra</h4>
+        <p>Next generation multimodal model</p>
+        <span class="tag api-only">API Only</span>
+        <span class="tag multimodal">Multimodal</span>
+      </div>
+    </div>
+    <div class="month">
+      <h3>March 2025</h3>
+      <div class="event">
+        <h4>Stability AI ImageGen V5</h4>
+        <p>Open source image generation</p>
+        <span class="tag open-source">Open Weights</span>
+        <span class="tag vision">Vision</span>
+      </div>
+    </div>
+  </div>
+  <script>
+    function updateCounts() {
+      const openSourceCount = document.querySelectorAll('.tag.open-source').length;
+      const apiOnlyCount = document.querySelectorAll('.tag.api-only').length;
+      document.getElementById('open-source-count').textContent = openSourceCount;
+      document.getElementById('api-only-count').textContent = apiOnlyCount;
+    }
+    let currentFilters = {
+      category: 'all',
+      modality: 'all',
+      type: 'all'
+    };
+    function filterByModality(modality) {
+      currentFilters.modality = modality;
+      applyFilters();
+    }
+    function filterByType(type) {
+      currentFilters.type = type;
+      applyFilters();
+    }
+    function filterEvents(category) {
+      // Update button states
+      const buttons = document.querySelectorAll('.toggle-button');
+      buttons.forEach(button => {
+        button.classList.remove('active');
+        if (button.getAttribute('data-filter') === category) {
+          button.classList.add('active');
+        }
+      });
+      currentFilters.category = category;
+      applyFilters();
+    }
+    function applyFilters() {
+      const events = document.querySelectorAll('.event');
+      events.forEach(event => {
+        const matchesCategory = currentFilters.category === 'all' ||
+          event.querySelector(`.tag.${currentFilters.category}`);
+        const matchesModality = currentFilters.modality === 'all' ||
+          event.querySelector(`.tag.${currentFilters.modality}`);
+        const matchesType = currentFilters.type === 'all' ||
+          (currentFilters.type === 'announcement' ?
+            event.querySelector('.tag.announcement') :
+            !event.querySelector('.tag.announcement'));
+        event.style.display = (matchesCategory && matchesModality && matchesType) ? 'block' : 'none';
+      });
+      // Check for empty months and hide them
+      const months = document.querySelectorAll('.month');
+      months.forEach(month => {
+        const visibleEvents = Array.from(month.querySelectorAll('.event')).filter(event =>
+          event.style.display !== 'none'
+        );
+        month.style.display = visibleEvents.length > 0 ? 'flex' : 'none';
+      });
+      updateCounts();
+    }
+    // Update event listeners when the page loads
+    document.addEventListener('DOMContentLoaded', function() {
+      const buttons = document.querySelectorAll('.toggle-button');
+      buttons.forEach(button => {
+        button.addEventListener('click', function() {
+          filterEvents(this.getAttribute('data-filter'));
+        });
+      });
+      updateCounts();
+    });
+  </script>
+</body>
+</html>