|
|
<!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> |
|
|
|
|
|
<script type="importmap"> |
|
|
{ |
|
|
"imports": { |
|
|
"lit-html": "https://cdn.jsdelivr.net/npm/lit-html@3/+esm" |
|
|
} |
|
|
} |
|
|
</script> |
|
|
|
|
|
<script type="module"> |
|
|
import { areasData, getNavigationData, homeBackgroundImage, overallBackgroundImage } from './js/data/areas.js'; |
|
|
window.areasData = areasData; |
|
|
window.navigationAreas = getNavigationData(); |
|
|
window.homeBackgroundImage = homeBackgroundImage; |
|
|
window.overallBackgroundImage = overallBackgroundImage; |
|
|
console.log('✓ Areas loaded in head:', Object.keys(areasData).length); |
|
|
</script> |
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></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> |
|
|
|
|
|
html, body { |
|
|
overflow-x: hidden; |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
|
|
|
body { |
|
|
font-family: 'Source Sans Pro', sans-serif; |
|
|
--header-height: 100px; |
|
|
} |
|
|
|
|
|
h1, h2, h3, h4, h5, h6 { |
|
|
font-family: 'Montserrat', sans-serif; |
|
|
} |
|
|
|
|
|
|
|
|
#main-layout, #main-content { |
|
|
max-width: 100vw; |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
@media (max-width: 1023px) { |
|
|
.mobile-menu-hidden { |
|
|
display: none; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
@media (min-width: 769px) { |
|
|
.nav-line-scroll { |
|
|
overflow-x: auto; |
|
|
overflow-y: hidden; |
|
|
white-space: nowrap; |
|
|
} |
|
|
|
|
|
.nav-line-scroll::-webkit-scrollbar { |
|
|
height: 4px; |
|
|
} |
|
|
|
|
|
.nav-line-scroll::-webkit-scrollbar-track { |
|
|
background: #f1f1f1; |
|
|
} |
|
|
|
|
|
.nav-line-scroll::-webkit-scrollbar-thumb { |
|
|
background: #888; |
|
|
border-radius: 2px; |
|
|
} |
|
|
} |
|
|
|
|
|
.backdrop-blur-md { |
|
|
backdrop-filter: blur(12px); |
|
|
-webkit-backdrop-filter: blur(12px); |
|
|
} |
|
|
|
|
|
.backdrop-blur-sm { |
|
|
backdrop-filter: blur(8px); |
|
|
-webkit-backdrop-filter: blur(8px); |
|
|
} |
|
|
|
|
|
|
|
|
.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; |
|
|
} |
|
|
|
|
|
.drop-shadow-lg { |
|
|
filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3)); |
|
|
} |
|
|
|
|
|
.scrollbar-hide { |
|
|
-ms-overflow-style: none; |
|
|
scrollbar-width: none; |
|
|
} |
|
|
|
|
|
.scrollbar-hide::-webkit-scrollbar { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
|
|
|
.overflow-y-auto::-webkit-scrollbar { |
|
|
width: 4px; |
|
|
} |
|
|
|
|
|
.overflow-y-auto::-webkit-scrollbar-track { |
|
|
background: transparent; |
|
|
} |
|
|
|
|
|
.overflow-y-auto::-webkit-scrollbar-thumb { |
|
|
background: #cbd5e0; |
|
|
border-radius: 2px; |
|
|
} |
|
|
|
|
|
.overflow-y-auto::-webkit-scrollbar-thumb:hover { |
|
|
background: #a0aec0; |
|
|
} |
|
|
|
|
|
|
|
|
#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; |
|
|
} |
|
|
|
|
|
#overall-background img { |
|
|
object-fit: cover; |
|
|
object-position: left top; |
|
|
} |
|
|
|
|
|
#page-background { |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
#page-background img { |
|
|
height: 100%; |
|
|
width: auto; |
|
|
min-width: 100%; |
|
|
object-fit: cover; |
|
|
object-position: left top; |
|
|
} |
|
|
|
|
|
|
|
|
header, #search-sidebar { |
|
|
background: rgba(255, 255, 255, 0.6); |
|
|
} |
|
|
|
|
|
|
|
|
header *, #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-left-top"> |
|
|
</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" style="height: var(--header-height);" x-data="{ |
|
|
mobileMenuOpen: false, |
|
|
areas: window.navigationAreas || [], |
|
|
currentArea: null, |
|
|
init() { |
|
|
// Listen for navigation changes |
|
|
window.addEventListener('navigation-changed', (e) => { |
|
|
this.currentArea = e.detail.currentArea; |
|
|
}); |
|
|
// Get initial current area from Alpine store if available |
|
|
if (window.Alpine && window.Alpine.store('navigation')) { |
|
|
this.currentArea = window.Alpine.store('navigation').currentArea; |
|
|
} |
|
|
}, |
|
|
isActiveArea(areaId) { |
|
|
return this.currentArea === areaId; |
|
|
} |
|
|
}"> |
|
|
<div class="h-full flex items-stretch"> |
|
|
|
|
|
<div class="flex items-center justify-between flex-1 xl:flex-initial border-r-0 xl:border-r border-gray-300 px-4 xl:px-6"> |
|
|
<a href="/" class="text-lg xl:text-xl font-bold text-gray-800 leading-tight hover:text-blue-600 transition-colors"> |
|
|
<span class="block">Machine Learning</span> |
|
|
<span class="block">and Society at 🤗</span> |
|
|
</a> |
|
|
|
|
|
|
|
|
<button @click="mobileMenuOpen = !mobileMenuOpen" class="xl:hidden p-2 text-gray-600"> |
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
|
|
<path x-show="!mobileMenuOpen" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path> |
|
|
<path x-show="mobileMenuOpen" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="hidden xl:block flex-1"></div> |
|
|
|
|
|
|
|
|
<div class="hidden xl:flex items-stretch ml-auto" style="padding-right: 2rem;"> |
|
|
|
|
|
<div class="flex items-center border-r border-gray-200"> |
|
|
<a :href="areas[0] ? `/${areas[0].id}` : '#'" |
|
|
class="flex items-center justify-center px-8 py-2 text-xl font-semibold transition-colors border-r border-gray-200" |
|
|
:class="isActiveArea(areas[0]?.id) ? 'text-blue-600 bg-blue-50' : 'text-gray-700 hover:text-blue-600 hover:bg-blue-50/50'" |
|
|
x-text="areas[0]?.navTitle || 'Area 1'"></a> |
|
|
|
|
|
<a :href="areas[1] ? `/${areas[1].id}` : '#'" |
|
|
class="flex items-center justify-center px-8 py-2 text-xl font-semibold transition-colors border-r border-gray-200" |
|
|
:class="isActiveArea(areas[1]?.id) ? 'text-blue-600 bg-blue-50' : 'text-gray-700 hover:text-blue-600 hover:bg-blue-50/50'" |
|
|
x-text="areas[1]?.navTitle || 'Area 2'"></a> |
|
|
|
|
|
<a :href="areas[2] ? `/${areas[2].id}` : '#'" |
|
|
class="flex items-center justify-center px-8 py-2 text-xl font-semibold transition-colors" |
|
|
:class="isActiveArea(areas[2]?.id) ? 'text-blue-600 bg-blue-50' : 'text-gray-700 hover:text-blue-600 hover:bg-blue-50/50'" |
|
|
x-text="areas[2]?.navTitle || 'Area 3'"></a> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex flex-col"> |
|
|
<a href="/about" |
|
|
class="flex items-center justify-center px-8 py-2 text-lg font-medium text-gray-700 hover:text-blue-600 hover:bg-blue-50/50 transition-colors border-b border-gray-200 flex-1">Press</a> |
|
|
|
|
|
<button id="search-toggle" class="flex items-center justify-center px-8 py-2 text-gray-700 hover:text-blue-600 hover:bg-blue-50/50 transition-colors flex-1"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> |
|
|
<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> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div x-show="mobileMenuOpen" |
|
|
x-transition |
|
|
@click.away="mobileMenuOpen = false" |
|
|
class="xl:hidden absolute top-full left-0 right-0 bg-white shadow-lg border-b border-gray-200 z-40" |
|
|
x-data="mobileTopicNav()"> |
|
|
<div class="px-4 py-3 space-y-2 max-h-[70vh] overflow-y-auto"> |
|
|
|
|
|
<div> |
|
|
<p class="px-3 text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2">Research Areas</p> |
|
|
|
|
|
<template x-for="area in areas" :key="area.id"> |
|
|
<div class="mb-2"> |
|
|
<a :href="`/${area.id}`" |
|
|
class="block px-3 py-2 text-sm font-semibold text-gray-800 hover:bg-blue-50 hover:text-blue-600 rounded transition-colors" |
|
|
x-text="area.title"></a> |
|
|
|
|
|
<div class="ml-4 mt-1 space-y-1"> |
|
|
<template x-for="topic in area.topics" :key="topic.id"> |
|
|
<a :href="`/${area.id}/${topic.id}`" |
|
|
class="block px-3 py-1.5 text-xs text-gray-600 hover:bg-blue-50 hover:text-blue-600 rounded transition-colors" |
|
|
x-text="topic.name"></a> |
|
|
</template> |
|
|
</div> |
|
|
</div> |
|
|
</template> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="border-t border-gray-200 pt-2"> |
|
|
<a href="/about" class="block px-3 py-2 text-base font-medium text-gray-700 hover:bg-blue-50 hover:text-blue-600 rounded transition-colors">Press</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div id="main-layout" class="flex" style="padding-top: var(--header-height);"> |
|
|
|
|
|
<main class="flex-1 transition-all duration-300 overflow-x-hidden" id="main-content"> |
|
|
<div class="w-full py-8"> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow-sm p-8 mx-4 sm:mx-6 lg:mx-8" style="max-width: min(90%, 1400px); margin-left: auto; margin-right: auto;"> |
|
|
<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"> |
|
|
<p class="text-xs text-gray-500">We have produced or collaborated on a fair amount of papers, writings, and technical artifacts over the years. Use the search functionality here to navigate those!</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-4"> |
|
|
<input |
|
|
type="text" |
|
|
id="search-input" |
|
|
placeholder="Search works by the ML & Society team" |
|
|
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 related works by the ML & Society team.</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 src="js/alpine-init.js"></script> |
|
|
|
|
|
<script type="module" src="js/bootstrap.js"></script> |
|
|
</body> |
|
|
</html> |
|
|
|
