Spaces:

hfmlsoc
/

overview

Running

App Files Files Community

yjernite HF Staff commited on Sep 25

Commit

50d87da

verified ·

1 Parent(s): 98f8ae8

Upload index.html

Browse files

Files changed (1) hide show

index.html +124 -45

index.html CHANGED Viewed

@@ -5,7 +5,21 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Machine Learning and Society at 🤗</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <style>
         /* Only essential custom styles for dropdowns */
         .dropdown-hover:hover .dropdown-content {
             opacity: 1;
@@ -44,64 +58,118 @@
             display: none;
         }
-    </style>
 </head>
-<body class="bg-gray-50">
     <!-- Top Navigation -->
-    <header class="bg-white shadow-sm border-b border-gray-200 fixed top-0 left-0 right-0 z-50">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <!-- First Line: Main Title -->
-            <div class="text-center py-4 border-b border-gray-100">
-                <h1 class="text-2xl font-bold text-gray-900">Machine Learning and Society at 🤗</h1>
             </div>
             <!-- Second Line: Navigation -->
-            <nav class="flex justify-between items-center h-12">
                 <div class="flex items-center">
                     <button id="sidebar-toggle" class="p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 transition-colors">
-                        <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
-                        </svg>
                     </button>
-                    <a href="/" class="text-blue-600 bg-blue-50 px-4 py-2 rounded-md text-sm font-medium ml-3">Home</a>
                     <!-- Visual separator -->
                     <div class="mx-6 h-6 w-px bg-gray-300"></div>
                     <!-- Research Areas -->
-                    <div class="flex items-center space-x-4">
-                        <div class="relative dropdown-hover text-center">
-                            <a href="/efficiency#overview" class="text-sm text-center text-gray-700 hover:text-blue-600 font-medium px-3 py-2 rounded-md transition-colors hover:bg-gray-50">Efficiency & Environment</a>
                             <div class="dropdown-content bg-white shadow-lg rounded-lg p-4 min-w-48 top-full left-0">
-                                <a href="/efficiency#environment" class="block text-xs text-gray-600 hover:text-blue-600 py-1 transition-colors">Environmental impact</a>
-                                <a href="/efficiency#measuring" class="block text-xs text-gray-600 hover:text-blue-600 py-1 transition-colors">Energy & financial costs</a>
-                                <a href="/efficiency#efficient" class="block text-xs text-gray-600 hover:text-blue-600 py-1 transition-colors">Compute efficiency</a>
                             </div>
                         </div>
-                        <div class="relative dropdown-hover text-center">
-                            <a href="/personal#overview" class="text-sm text-center text-gray-700 hover:text-blue-600 font-medium px-3 py-2 rounded-md transition-colors hover:bg-gray-50">Consent & Personal Interactions</a>
                             <div class="dropdown-content bg-white shadow-lg rounded-lg p-4 min-w-48 top-full left-0">
-                                <a href="/personal#interaction" class="block text-xs text-gray-600 hover:text-blue-600 py-1 transition-colors">Personal interactions</a>
-                                <a href="/personal#privacy" class="block text-xs text-gray-600 hover:text-blue-600 py-1 transition-colors">Consent & privacy</a>
                             </div>
                         </div>
-                        <div class="relative dropdown-hover text-center">
-                            <a href="/rights#overview" class="text-sm text-center text-gray-700 hover:text-blue-600 font-medium px-3 py-2 rounded-md transition-colors hover:bg-gray-50">Rights & Regulation</a>
                             <div class="dropdown-content bg-white shadow-lg rounded-lg p-4 min-w-48 top-full left-0">
-                                <a href="/rights#general" class="block text-xs text-gray-600 hover:text-blue-600 py-1 transition-colors">Existing regulation</a>
-                                <a href="/rights#specific" class="block text-xs text-gray-600 hover:text-blue-600 py-1 transition-colors">AI-specific regulation</a>
-                                <a href="/rights#open" class="block text-xs text-gray-600 hover:text-blue-600 py-1 transition-colors">Open-source in regulation</a>
                             </div>
                         </div>
-                        <div class="relative dropdown-hover text-center">
-                            <a href="/ecosystems#overview" class="text-sm text-center text-gray-700 hover:text-blue-600 font-medium px-3 py-2 rounded-md transition-colors hover:bg-gray-50">Socio-economic & Technical Ecosystems</a>
                             <div class="dropdown-content bg-white shadow-lg rounded-lg p-4 min-w-48 top-full left-0">
-                                <a href="/ecosystems#labor" class="block text-xs text-gray-600 hover:text-blue-600 py-1 transition-colors">Labor impacts</a>
-                                <a href="/ecosystems#power" class="block text-xs text-gray-600 hover:text-blue-600 py-1 transition-colors">Power & monopolies</a>
-                                <a href="/ecosystems#usage" class="block text-xs text-gray-600 hover:text-blue-600 py-1 transition-colors">AI usage patterns</a>
                             </div>
                         </div>
                     </div>
@@ -111,11 +179,11 @@
                     <!-- Visual separator -->
                     <div class="mx-6 h-6 w-px bg-gray-300"></div>
-                    <a href="/about" class="text-gray-700 hover:text-blue-600 px-4 py-2 rounded-md text-sm font-medium transition-colors hover:bg-gray-50">Resources & Press</a>
                     <button id="search-toggle" class="p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 transition-colors ml-3">
-                        <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0z" />
-                        </svg>
                     </button>
                 </div>
             </nav>
@@ -123,14 +191,12 @@
     </header>
     <!-- Main Layout -->
-    <div class="flex" style="padding-top: 104px;">
         <!-- Left Sidebar - Page Navigation -->
-        <aside id="left-sidebar" class="fixed left-0 h-full w-64 bg-white shadow-sm border-r border-gray-200 overflow-y-auto transition-transform duration-300" style="top: 104px;">
-            <!-- Sidebar content will be populated by the router -->
-        </aside>
         <!-- Main Content -->
-        <main class="flex-1 transition-all duration-300" id="main-content" style="margin-left: 256px;">
             <div class="max-w-4xl mx-auto px-6 py-8">
                 <!-- Content will be loaded dynamically by the SPA router -->
                 <div class="bg-white rounded-lg shadow-sm p-8">
@@ -143,9 +209,7 @@
         </main>
         <!-- Right Sidebar - Search (Collapsible) -->
-        <aside id="search-sidebar" class="fixed right-0 h-full w-80 bg-white shadow-sm border-l border-gray-200 transform translate-x-full z-40 transition-transform duration-300" style="top: 104px;">
-            <div class="p-4">
-                <div class="flex items-center justify-between mb-4">
                     <h3 class="text-lg font-semibold text-gray-900">Search</h3>
                     <button id="search-close" class="p-1 rounded-md text-gray-400 hover:text-gray-500 transition-colors">
                         <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -153,15 +217,29 @@
                         </svg>
                     </button>
                 </div>
-                <div class="text-gray-500 text-center py-8">
-                    <p>Search functionality coming soon...</p>
                 </div>
             </div>
         </aside>
     </div>
     <!-- Overlay for mobile -->
-    <div id="sidebar-overlay" class="fixed inset-0 bg-black bg-opacity-50 z-30 hidden"></div>
     <!-- Scroll to Top Button -->
     <button id="scroll-to-top" class="fixed bottom-6 right-6 w-12 h-12 bg-blue-600 hover:bg-blue-700 text-white rounded-full shadow-lg hover:shadow-xl transition-all duration-300 opacity-0 invisible z-50 flex items-center justify-center group">
@@ -171,6 +249,7 @@
         <span class="sr-only">Scroll to top</span>
     </button>
     <script type="module" src="js/main.js"></script>
 </body>
 </html>

     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Machine Learning and Society at 🤗</title>
     <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Google Fonts Import -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Source+Sans+Pro:wght@400;600&display=swap" rel="stylesheet">
     <style>
+        /* Apply fonts to base elements */
+        body {
+            font-family: 'Source Sans Pro', sans-serif;
+            --header-height: 150px; /* Define header height as a CSS variable, adjusted for larger title */
+        }
+        h1, h2, h3, h4, h5, h6 {
+            font-family: 'Montserrat', sans-serif;
+        }
         /* Only essential custom styles for dropdowns */
         .dropdown-hover:hover .dropdown-content {
             opacity: 1;
             display: none;
         }
+        /* Search results scrolling */
+        #search-results {
+            scrollbar-width: thin;
+            scrollbar-color: #cbd5e0 #f7fafc;
+        }
+        #search-results::-webkit-scrollbar {
+            width: 6px;
+        }
+        #search-results::-webkit-scrollbar-track {
+            background: #f7fafc;
+        }
+        #search-results::-webkit-scrollbar-thumb {
+            background: #cbd5e0;
+            border-radius: 3px;
+        }
+        #search-results::-webkit-scrollbar-thumb:hover {
+            background: #a0aec0;
+        }
+        /* Overall background styling */
+        #overall-background {
+            background-attachment: fixed;
+        }
+        /* Semi-transparent overlays for header and sidebars */
+        header, #left-sidebar, #search-sidebar {
+            background: rgba(255, 255, 255, 0.6);
+        }
+        /* Ensure content is readable over background */
+        header *, #left-sidebar *, #search-sidebar * {
+            position: relative;
+            z-index: 1;
+        }
+        </style>
 </head>
+<body class="bg-gray-50 text-gray-800">
+    <!-- Overall Background Image - Only for header and sidebars -->
+    <div id="overall-background" class="fixed opacity-100 z-40 pointer-events-none" style="top: 0; left: 0; right: 0; height: var(--header-height);">
+        <img src="images/background_ai.png" alt="" class="w-full h-full object-cover object-top">
+    </div>
+    <!-- Left Sidebar Background -->
+    <div id="left-sidebar-background" class="fixed opacity-60 z-0 pointer-events-none" style="top: 0; left: 0; right: 0; width: 256px; bottom: 0;">
+        <img src="images/background_ai.png" alt="" class="w-full h-full object-cover object-left">
+    </div>
+    <!-- Right Sidebar Background (when open) -->
+    <div id="right-sidebar-background" class="fixed opacity-60 z-0 pointer-events-none hidden" style="top: var(--header-height); right: 0; width: 320px; bottom: 0;">
+        <img src="images/background_ai.png" alt="" class="w-full h-full object-cover object-right">
+    </div>
     <!-- Top Navigation -->
+    <header class="bg-white/60 shadow-sm border-b border-gray-200 fixed top-0 left-0 right-0 z-50">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <!-- First Line: Main Title -->
+            <div class="text-center py-6 border-b border-gray-100">
+                <h1 class="text-3xl font-bold text-gray-800">Machine Learning and Society at 🤗</h1>
             </div>
             <!-- Second Line: Navigation -->
+            <nav class="flex justify-between items-center h-16">
                 <div class="flex items-center">
                     <button id="sidebar-toggle" class="p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 transition-colors">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+                        </svg>
                     </button>
+                    <a href="/" class="text-blue-600 bg-blue-50 px-5 py-2 rounded-md text-base font-medium ml-6"><b>Home</b></a>
                     <!-- Visual separator -->
                     <div class="mx-6 h-6 w-px bg-gray-300"></div>
                     <!-- Research Areas -->
+                    <div class="flex items-left space-x-6 justify-left">
+                        <div class="relative dropdown-hover">
+                            <a href="/efficiency#overview" class="text-base text-center text-gray-700 hover:text-blue-600 font-medium px-4 py-2 rounded-md transition-colors block hover:bg-gray-50"><b>Efficiency, Costs, and Environment</b></a>
                             <div class="dropdown-content bg-white shadow-lg rounded-lg p-4 min-w-48 top-full left-0">
+                                <a href="/efficiency#environment" class="block text-md text-gray-600 hover:text-blue-600 py-1 transition-colors">Environmental impact</a>
+                                <a href="/efficiency#measuring" class="block text-md text-gray-600 hover:text-blue-600 py-1 transition-colors">Energy & financial costs</a>
+                                <a href="/efficiency#efficient" class="block text-md text-gray-600 hover:text-blue-600 py-1 transition-colors">Compute efficiency</a>
                             </div>
                         </div>
+                        <div class="relative dropdown-hover">
+                            <a href="/personal#overview" class="text-base text-center text-gray-700 hover:text-blue-600 font-medium px-4 py-2 rounded-md transition-colors block hover:bg-gray-50"><b>Consent and Personal Interactions</b></a>
                             <div class="dropdown-content bg-white shadow-lg rounded-lg p-4 min-w-48 top-full left-0">
+                                <a href="/personal#interaction" class="block text-md text-gray-600 hover:text-blue-600 py-1 transition-colors">Personal interactions</a>
+                                <a href="/personal#privacy" class="block text-md text-gray-600 hover:text-blue-600 py-1 transition-colors">Consent & privacy</a>
                             </div>
                         </div>
+                        <div class="relative dropdown-hover">
+                            <a href="/rights#overview" class="text-base text-center text-gray-700 hover:text-blue-600 font-medium px-4 py-2 rounded-md transition-colors block hover:bg-gray-50"><b>Rights and Regulations</b></a>
                             <div class="dropdown-content bg-white shadow-lg rounded-lg p-4 min-w-48 top-full left-0">
+                                <a href="/rights#general" class="block text-md text-gray-600 hover:text-blue-600 py-1 transition-colors">Existing regulation</a>
+                                <a href="/rights#specific" class="block text-md text-gray-600 hover:text-blue-600 py-1 transition-colors">AI-specific regulation</a>
+                                <a href="/rights#open" class="block text-md text-gray-600 hover:text-blue-600 py-1 transition-colors">Open-source in regulation</a>
                             </div>
                         </div>
+                        <div class="relative dropdown-hover">
+                            <a href="/ecosystems#overview" class="text-base text-center text-gray-700 hover:text-blue-600 font-medium px-4 py-2 rounded-md transition-colors block hover:bg-gray-50"><b>Socio-economic and Technical Ecosystems</b></a>
                             <div class="dropdown-content bg-white shadow-lg rounded-lg p-4 min-w-48 top-full left-0">
+                                <a href="/ecosystems#labor" class="block text-md text-gray-600 hover:text-blue-600 py-1 transition-colors">Labor impacts</a>
+                                <a href="/ecosystems#power" class="block text-md text-gray-600 hover:text-blue-600 py-1 transition-colors">Power & monopolies</a>
+                                <a href="/ecosystems#usage" class="block text-md text-gray-600 hover:text-blue-600 py-1 transition-colors">AI usage patterns</a>
                             </div>
                         </div>
                     </div>
                     <!-- Visual separator -->
                     <div class="mx-6 h-6 w-px bg-gray-300"></div>
+                    <a href="/about" class="text-gray-700 hover:text-blue-600 px-4 py-2 rounded-md text-base font-medium transition-colors block hover:bg-gray-50"><b>Resources & Press</b></a>
                     <button id="search-toggle" class="p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 transition-colors ml-3">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
+                        </svg>
                     </button>
                 </div>
             </nav>
     </header>
     <!-- Main Layout -->
+    <div id="main-layout" class="flex" style="padding-top: var(--header-height);">
         <!-- Left Sidebar - Page Navigation -->
+        <aside id="left-sidebar" class="fixed left-0 h-full w-64 bg-white/85 shadow-sm border-r border-gray-200 overflow-y-auto transition-transform duration-300 z-10" style="top: var(--header-height);">        </aside>
         <!-- Main Content -->
+        <main class="flex-1 transition-all duration-300" id="main-content" style="margin-left: 256px; padding-left: 1rem; padding-right: 1rem;">
             <div class="max-w-4xl mx-auto px-6 py-8">
                 <!-- Content will be loaded dynamically by the SPA router -->
                 <div class="bg-white rounded-lg shadow-sm p-8">
         </main>
         <!-- Right Sidebar - Search (Collapsible) -->
+        <aside id="search-sidebar" class="fixed right-0 h-full w-80 bg-white/85 backdrop-blur-sm shadow-sm border-l border-gray-200 transform translate-x-full z-40 transition-transform duration-300" style="top: var(--header-height);">                <div class="flex items-center justify-between mb-4">
                     <h3 class="text-lg font-semibold text-gray-900">Search</h3>
                     <button id="search-close" class="p-1 rounded-md text-gray-400 hover:text-gray-500 transition-colors">
                         <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                         </svg>
                     </button>
                 </div>
+                <!-- Search Input -->
+                <div class="mb-4">
+                    <input
+                        type="text"
+                        id="search-input"
+                        placeholder="Search artifacts and resources..."
+                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                    >
+                </div>
+                <!-- Search Results - Fixed height with proper scrolling -->
+                <div id="search-results" class="overflow-y-auto" style="height: calc(100vh - 193px);">
+                    <div class="text-gray-500 text-center py-8">
+                        <p>Enter a search term to find artifacts and resources...</p>
+                    </div>
                 </div>
             </div>
         </aside>
     </div>
     <!-- Overlay for mobile -->
+    <div id="sidebar-overlay" class="fixed inset-0 bg-black bg-opacity-30 z-30 hidden"></div>
     <!-- Scroll to Top Button -->
     <button id="scroll-to-top" class="fixed bottom-6 right-6 w-12 h-12 bg-blue-600 hover:bg-blue-700 text-white rounded-full shadow-lg hover:shadow-xl transition-all duration-300 opacity-0 invisible z-50 flex items-center justify-center group">
         <span class="sr-only">Scroll to top</span>
     </button>
+    <script src="https://cdn.jsdelivr.net/npm/minisearch@6.0.1/dist/umd/index.js"></script>
     <script type="module" src="js/main.js"></script>
 </body>
 </html>