|
|
<!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> |
|
|
|
|
|
<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> |
|
|
|
|
|
body { |
|
|
font-family: 'Source Sans Pro', sans-serif; |
|
|
--header-height: 150px; |
|
|
} |
|
|
|
|
|
h1, h2, h3, h4, h5, h6 { |
|
|
font-family: 'Montserrat', sans-serif; |
|
|
} |
|
|
|
|
|
.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; |
|
|
} |
|
|
|
|
|
|
|
|
#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 { |
|
|
background-attachment: fixed; |
|
|
} |
|
|
|
|
|
|
|
|
header, #left-sidebar, #search-sidebar { |
|
|
background: rgba(255, 255, 255, 0.6); |
|
|
} |
|
|
|
|
|
|
|
|
header *, #left-sidebar *, #search-sidebar * { |
|
|
position: relative; |
|
|
z-index: 1; |
|
|
} |
|
|
|
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 text-gray-800"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<div class="mx-6 h-6 w-px bg-gray-300"></div> |
|
|
|
|
|
|
|
|
<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> |
|
|
</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-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> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div id="main-layout" class="flex" style="padding-top: var(--header-height);"> |
|
|
|
|
|
<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 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"> |
|
|
|
|
|
<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/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"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<div id="sidebar-overlay" class="fixed inset-0 bg-black bg-opacity-30 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 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> |
|
|
|
