|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<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> |
|
|
|
|
|
.dropdown-hover:hover .dropdown-content { |
|
|
opacity: 1; |
|
|
visibility: visible; |
|
|
transform: translateY(0); |
|
|
} |
|
|
.dropdown-content { |
|
|
opacity: 0; |
|
|
visibility: hidden; |
|
|
transform: translateY(8px); |
|
|
transition: all 0.2s ease; |
|
|
position: absolute; |
|
|
z-index: 50; |
|
|
} |
|
|
|
|
|
.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> |
|
|
<body class="bg-gray-50"> |
|
|
|
|
|
<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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<div class="mx-6 h-6 w-px bg-gray-300"></div> |
|
|
|
|
|
|
|
|
<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> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center"> |
|
|
|
|
|
<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> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div class="flex" style="padding-top: 104px;"> |
|
|
|
|
|
<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;"> |
|
|
|
|
|
</aside> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
<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> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
|
|
|
<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"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
<div class="text-gray-500 text-center py-8"> |
|
|
<p>Search functionality coming soon...</p> |
|
|
</div> |
|
|
</div> |
|
|
</aside> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="sidebar-overlay" class="fixed inset-0 bg-black bg-opacity-50 z-30 hidden"></div> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
