Upload index.html

index.html

@@ -20,6 +20,29 @@
             position: absolute;
             z-index: 50;
         }
+        /* Carousel */
+        .line-clamp-2 {
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+        }
+
+        .line-clamp-3 {
+            display: -webkit-box;
+            -webkit-line-clamp: 3;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+        }
+
+        .scrollbar-hide {
+            -ms-overflow-style: none;
+            scrollbar-width: none;
+        }
+
+        .scrollbar-hide::-webkit-scrollbar {
+            display: none;
+        }
 
     </style>
 </head>
@@ -47,34 +70,34 @@
                     
                     <!-- Research Areas -->
                     <div class="flex items-center space-x-4">
-                        <div class="relative dropdown-hover">
-                            <a href="/efficiency" class="text-sm 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="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#environmental" class="block text-xs text-gray-600 hover:text-blue-600 py-1 transition-colors">Environmental impact</a>
-                                <a href="/efficiency#costs" class="block text-xs text-gray-600 hover:text-blue-600 py-1 transition-colors">Energy & financial costs</a>
-                                <a href="/efficiency#compute" class="block text-xs text-gray-600 hover:text-blue-600 py-1 transition-colors">Compute efficiency</a>
+                                <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">
-                            <a href="/personal" class="text-sm 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="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#interactions" class="block text-xs text-gray-600 hover:text-blue-600 py-1 transition-colors">Personal interactions</a>
+                                <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">
-                            <a href="/rights" class="text-sm 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="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#existing" class="block text-xs text-gray-600 hover:text-blue-600 py-1 transition-colors">Existing regulation</a>
-                                <a href="/rights#new" class="block text-xs text-gray-600 hover:text-blue-600 py-1 transition-colors">AI-specific regulation</a>
-                                <a href="/rights#opensource" class="block text-xs text-gray-600 hover:text-blue-600 py-1 transition-colors">Open-source in regulation</a>
+                                <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">
-                            <a href="/ecosystems" class="text-sm 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="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>
@@ -88,10 +111,10 @@
                     <!-- 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">About</a>
+                    <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 0 0114 0z" />
+                            <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>
@@ -103,128 +126,19 @@
     <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;">
-            <nav class="p-4">
-                <h3 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-3">On This Page</h3>
-                <ul class="space-y-1">
-                    <li><a href="#intro" class="page-nav-link block px-3 py-2 text-sm text-blue-600 bg-blue-50 rounded-md">Team Introduction</a></li>
-                    <li class="ml-4">
-                        <ul class="space-y-1">
-                            <li><a href="#recent-featured-works" class="page-nav-link block px-3 py-2 text-xs text-blue-600 bg-blue-50 rounded-md">Recent & Featured Works</a></li>
-                            <li><a href="#team-members" class="page-nav-link block px-3 py-2 text-xs text-blue-600 bg-blue-50 rounded-md">Team Members</a></li>        
-                        </ul>
-                    </li>
-                    <li><a href="#research-areas-header" class="page-nav-link block px-3 py-2 text-sm text-gray-700 hover:text-gray-900 hover:bg-gray-50 rounded-md transition-colors">Research Areas</a></li>
-                    <li class="ml-4">
-                        <ul class="space-y-1">
-                            <li><a href="#efficiency" class="page-nav-link block px-3 py-2 text-xs text-gray-600 hover:text-gray-800 hover:bg-gray-50 rounded-md transition-colors">Efficiency & Environment</a></li>
-                            <li><a href="#personal" class="page-nav-link block px-3 py-2 text-xs text-gray-600 hover:text-gray-800 hover:bg-gray-50 rounded-md transition-colors">Consent & Personal Interactions</a></li>
-                            <li><a href="#rights" class="page-nav-link block px-3 py-2 text-xs text-gray-600 hover:text-gray-800 hover:bg-gray-50 rounded-md transition-colors">Rights & Regulation</a></li>
-                            <li><a href="#ecosystems" class="page-nav-link block px-3 py-2 text-xs text-gray-600 hover:text-gray-800 hover:bg-gray-50 rounded-md transition-colors">Socio-Economic & Technical Ecosystems</a></li>
-                        </ul>
-                    </li>
-                </ul>
-            </nav>
+            <!-- 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">
-                <!-- Team Introduction Section -->
-                <section id="intro" class="mb-12">
-                    <!-- Part 1: Team Introduction and Research Areas -->
-                    <div class="bg-white rounded-lg shadow-sm p-8 mb-6">
-                        <h3 class="text-3xl font-bold text-gray-900 mb-6">Team Introduction</h3>
-                
-                        <!-- Research Areas Introduction -->
-                        <div class="mb-8">
-                            <p class="text-gray-700 leading-relaxed mb-6">We're a multidisciplinary team working on research and regulatory questions related to AI systems &mdash; their (open) development, governance, and impact on society at large. Our work spans four key inter-connected areas where AI technology intersects with society:</p>
-                            
-                            <!-- Research Areas Navigation -->
-                            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-                                <button 
-                                    onclick="scrollToSection('efficiency')"
-                                    class="group p-4 bg-gradient-to-br from-blue-50 to-blue-100 hover:from-blue-100 hover:to-blue-200 rounded-lg border border-blue-200 hover:border-blue-300 transition-all duration-200 text-left"
-                                >
-                                    <h4 class="font-semibold text-blue-900 group-hover:text-blue-800 text-sm mb-1">Efficiency & Environment</h4>
-                                    <p class="text-xs text-blue-700 group-hover:text-blue-600">Costs, energy, sustainability</p>
-                                </button>
-                                
-                                <button 
-                                    onclick="scrollToSection('personal')"
-                                    class="group p-4 bg-gradient-to-br from-green-50 to-green-100 hover:from-green-100 hover:to-green-200 rounded-lg border border-green-200 hover:border-green-300 transition-all duration-200 text-left"
-                                >
-                                    <h4 class="font-semibold text-green-900 group-hover:text-green-800 text-sm mb-1">Consent & Personal Interactions</h4>
-                                    <p class="text-xs text-green-700 group-hover:text-green-600">Personal interactions, agency</p>
-                                </button>
-                                
-                                <button 
-                                    onclick="scrollToSection('rights')"
-                                    class="group p-4 bg-gradient-to-br from-purple-50 to-purple-100 hover:from-purple-100 hover:to-purple-200 rounded-lg border border-purple-200 hover:border-purple-300 transition-all duration-200 text-left"
-                                >
-                                    <h4 class="font-semibold text-purple-900 group-hover:text-purple-800 text-sm mb-1">Rights & Regulation</h4>
-                                    <p class="text-xs text-purple-700 group-hover:text-purple-600">Legal frameworks, compliance</p>
-                                </button>
-                                
-                                <button 
-                                    onclick="scrollToSection('ecosystems')"
-                                    class="group p-4 bg-gradient-to-br from-orange-50 to-orange-100 hover:from-orange-100 hover:to-orange-200 rounded-lg border border-orange-200 hover:border-orange-300 transition-all duration-200 text-left"
-                                >
-                                    <h4 class="font-semibold text-orange-900 group-hover:text-orange-800 text-sm mb-1">Socio-Economic & Technical Ecosystems</h4>
-                                    <p class="text-xs text-orange-700 group-hover:text-orange-600">Markets, labor, power dynamics</p>
-                                </button>
-                            </div>
-
-                            <!-- Perspective and Positionality -->
-                            <div class="mt-8 px-4 py-4 bg-gradient-to-r from-orange-50 to-yellow-50 border-l-4 border-orange-300 rounded-r-lg">
-                                <p class="font-bold text-center text-orange-900 mb-2">🤗 Perspective and Positionality</p>
-                                <p class="text-orange-800 italic leading-relaxed">
-                                    Our work on these topics is shaped by the context of our work at Hugging Face, which is the main platform for open and collaborative development and sharing of Artificial Intelligence artifacts. As a result, much of our work discusses the specific roles of openness and transparency in shaping AI technology into a more equitable and better-governed category of technology.
-                                </p>
-                            </div>
-                        </div>
-
-                        
-
-                        <!-- Recent & Featured Works -->
-                        <div id="recent-featured-works" class="mb-12 border-t border-gray-200 pt-6">
-                            <h4 class="text-lg font-semibold text-gray-900 mb-4">Recent & Featured Works</h4>
-                            <div class="mb-8">
-                                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-                                    <p>TODO: add a carousel of recent and featured works</p>
-                                </div>
-                            </div>
-                        </div>
-
-
-                        <!-- Team and Collaborators -->
-                        <div id="team-members" class="border-t border-gray-200 pt-6">
-                            <h4 class="text-lg font-semibold text-gray-900 mb-4">Team Members</h4>
-                            <div class="mb-4">
-                                <div id="team-grid" class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                                    <!-- Team members will be inserted here by JavaScript -->
-                                </div>
-                            </div>                            
-                            <div class="prose text-gray-700">
-                                <p>We also work closely with 
-                                    <a href="https://huggingface.co/irenesolaiman" class="text-blue-600 hover:text-blue-800 transition-colors" target="_blank">Irene Solaiman</a> (Chief Policy Officer), 
-                                    <a href="https://huggingface.co/evijit" class="text-blue-600 hover:text-blue-800 transition-colors" target="_blank">Avijit Ghosh</a> (Applied Policy Researcher) in the policy team, 
-                                    and with <a href="https://huggingface.co/meg" class="text-blue-600 hover:text-blue-800 transition-colors" target="_blank">Meg Mitchell</a> (Chief Ethics Scientist), 
-                                    and <a href="https://huggingface.co/brunatrevelin" class="text-blue-600 hover:text-blue-800 transition-colors" target="_blank">Bruna Trevelin</a> (Legal Counsel)!
-                                </p>
-                            </div>
-                        </div>
+                <!-- Content will be loaded dynamically by the SPA router -->
+                <div class="bg-white rounded-lg shadow-sm p-8">
+                    <div class="text-center py-8">
+                        <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto mb-4"></div>
+                        <p class="text-gray-600">Loading...</p>
                     </div>
-                </section>
-
-                <!-- Research Areas Header -->
-                <div id="research-areas-header" class="text-center mb-12">
-                    <h2 class="text-3xl font-bold text-gray-900">Research Areas</h2>
                 </div>
-
-                <!-- Research Areas -->
-                <section id="research-areas" class="space-y-8">
-                    <!-- Area cards will be inserted here by JavaScript -->
-                </section>
             </div>
         </main>
 
@@ -249,6 +163,14 @@
     <!-- Overlay for mobile -->
     <div id="sidebar-overlay" class="fixed inset-0 bg-black bg-opacity-50 z-30 hidden"></div>
 
-    <script src="js/main.js"></script>
+    <!-- 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">
+        <svg class="w-5 h-5 transform group-hover:scale-110 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path>
+        </svg>
+        <span class="sr-only">Scroll to top</span>
+    </button>
+
+    <script type="module" src="js/main.js"></script>
 </body>
-</html>
+</html>