Spaces:

bunkalab
/

mapping_the_OS_community

Running

App Files Files Community

Alcime commited on Sep 10, 2024

Commit

93fde69

verified ·

1 Parent(s): 090da2d

Update index.html

Browse files

Files changed (1) hide show

index.html +87 -20

index.html CHANGED Viewed

@@ -3,47 +3,114 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Hugging Face Network Graphs</title>
     <style>
         body {
-            font-family: Arial, sans-serif;
             line-height: 1.6;
-            color: #333;
-            max-width: 800px;
             margin: 0 auto;
             padding: 20px;
         }
         h1 {
-            color: #4a4a4a;
         }
         .graph-link {
             display: inline-block;
-            margin: 10px 0;
-            padding: 10px 15px;
-            background-color: #4a4a4a;
             color: white;
             text-decoration: none;
             border-radius: 5px;
-            transition: background-color 0.3s ease;
         }
         .graph-link:hover {
-            background-color: #666;
         }
     </style>
 </head>
 <body>
-    <h1>Hugging Face Network Graphs</h1>
-    <p>Welcome to the Hugging Face Network Graphs visualization page. Here you can explore two different network graphs representing relationships within the Hugging Face community.</p>
-    <h2>Available Graphs:</h2>
-    <a href="co_organization.html" class="graph-link">Hugging Face Organizations Network</a>
-    <p>This graph represents the network of Hugging Face organizations and their relationships.</p>
-    <a href="co_user.html" class="graph-link">Hugging Face Users Network</a>
-    <p>This graph shows the network of Hugging Face users and their interactions.</p>
     <footer>
-        <p>Created using data from Hugging Face. For more information, visit <a href="https://huggingface.co">huggingface.co</a>.</p>
     </footer>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Bunka Network Graphs</title>
     <style>
+        :root {
+            --primary-color: #4a4a4a;
+            --secondary-color: #6c757d;
+            --background-color: #f8f9fa;
+            --hover-color: #007bff;
+        }
         body {
+            font-family: 'Arial', sans-serif;
             line-height: 1.6;
+            color: var(--primary-color);
+            background-color: var(--background-color);
+            margin: 0;
+            padding: 0;
+            display: flex;
+            flex-direction: column;
+            min-height: 100vh;
+        }
+        .container {
+            max-width: 1200px;
             margin: 0 auto;
             padding: 20px;
+            flex-grow: 1;
+        }
+        header {
+            background-color: white;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            padding: 20px 0;
+            text-align: center;
+        }
+        .logo {
+            max-width: 200px;
+            height: auto;
         }
         h1 {
+            color: var(--primary-color);
+            margin-top: 20px;
+        }
+        .graph-links {
+            display: flex;
+            justify-content: center;
+            gap: 20px;
+            margin-top: 30px;
         }
         .graph-link {
             display: inline-block;
+            padding: 10px 20px;
+            background-color: var(--primary-color);
             color: white;
             text-decoration: none;
             border-radius: 5px;
+            transition: background-color 0.3s ease, transform 0.3s ease;
         }
         .graph-link:hover {
+            background-color: var(--hover-color);
+            transform: translateY(-3px);
+        }
+        .social-links {
+            display: flex;
+            justify-content: center;
+            gap: 15px;
+            margin-top: 30px;
+        }
+        .social-links a {
+            opacity: 0.7;
+            transition: opacity 0.3s ease;
+        }
+        .social-links a:hover {
+            opacity: 1;
+        }
+        .social-links img {
+            width: 30px;
+            height: 30px;
+        }
+        footer {
+            background-color: var(--secondary-color);
+            color: white;
+            text-align: center;
+            padding: 10px 0;
+            margin-top: 40px;
         }
     </style>
 </head>
 <body>
+    <header>
+        <img src="https://huggingface.co/spaces/bunkalab/README/raw/main/bunka_logo.png" alt="Bunka Logo" class="logo">
+        <h1>Bunka Network Graphs</h1>
+    </header>
+    <div class="container">
+        <p>Welcome to the Bunka Network Graphs visualization page. Explore two different network graphs representing relationships within the Hugging Face community.</p>
+        <div class="graph-links">
+            <a href="co_organization.html" class="graph-link">Hugging Face Organizations Network</a>
+            <a href="co_user.html" class="graph-link">Hugging Face Users Network</a>
+        </div>
+        <div class="social-links">
+            <a href="https://github.com/charlesdedampierre/BunkaTopics" target="_blank"><img src="https://qtyhiurxoicqmxzpktkd.supabase.co/storage/v1/object/sign/email-content/github-logo.png?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJlbWFpbC1jb250ZW50L2dpdGh1Yi1sb2dvLnBuZyIsImlhdCI6MTcyNDgzOTk3NywiZXhwIjoxNzg3OTExOTc3fQ.qPEnoJOVqTkWdquVPkMWZFYHv29q8pb5mbcVBGFZWTU&t=2024-08-28T10%3A12%3A58.108Z" alt="GitHub"></a>
+            <a href="https://huggingface.co/bunkalab" target="_blank"><img src="https://qtyhiurxoicqmxzpktkd.supabase.co/storage/v1/object/sign/email-content/hugging%20face.png?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJlbWFpbC1jb250ZW50L2h1Z2dpbmcgZmFjZS5wbmciLCJpYXQiOjE3MjQ4Mzk4NDAsImV4cCI6MTc4NzkxMTg0MH0.6gOtEK2BXc3kSL3PIswY0LJyvp790580Jm6vxztiFhw&t=2024-08-28T10%3A10%3A40.145Z" alt="Hugging Face"></a>
+            <a href="https://www.linkedin.com/company/85881815" target="_blank"><img src="https://qtyhiurxoicqmxzpktkd.supabase.co/storage/v1/object/sign/email-content/LinkedIn_logo_initials.png?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJlbWFpbC1jb250ZW50L0xpbmtlZEluX2xvZ29faW5pdGlhbHMucG5nIiwiaWF0IjoxNzI0ODQwMDQ1LCJleHAiOjE3ODc5MTIwNDV9.9d6MAK3x9LOmsYyB8KyGk5PPFGkPNoGjsW7wdxiZt3M&t=2024-08-28T10%3A14%3A05.996Z" alt="LinkedIn"></a>
+            <a href="https://discord.gg/3YRPVqXabQ" target="_blank"><img src="https://qtyhiurxoicqmxzpktkd.supabase.co/storage/v1/object/sign/email-content/discord.png?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJlbWFpbC1jb250ZW50L2Rpc2NvcmQucG5nIiwiaWF0IjoxNzI0ODM5ODc4LCJleHAiOjE3ODc5MTE4Nzh9.w1Ggb_Nh1UnjKeVujp_7ljAW0ZSP3ETNkYJLKuBZ_Zo&t=2024-08-28T10%3A11%3A18.993Z" alt="Discord"></a>
+        </div>
+    </div>
     <footer>
+        <p>Created by Bunka. For more information, visit <a href="https://huggingface.co/bunkalab" style="color: white;">bunkalab on Hugging Face</a>.</p>
     </footer>
 </body>
 </html>