|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>AI Copyright Lawsuit Timeline</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/[email protected]/papaparse.min.js"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
.timeline-container { |
|
|
position: relative; |
|
|
max-width: 1200px; |
|
|
margin: 0 auto; |
|
|
} |
|
|
|
|
|
.timeline-container::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
width: 6px; |
|
|
background-color: #3b82f6; |
|
|
top: 0; |
|
|
bottom: 0; |
|
|
left: 50%; |
|
|
margin-left: -3px; |
|
|
border-radius: 10px; |
|
|
} |
|
|
|
|
|
.timeline-card { |
|
|
padding: 10px 40px; |
|
|
position: relative; |
|
|
width: 50%; |
|
|
box-sizing: border-box; |
|
|
} |
|
|
|
|
|
.timeline-card::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
width: 25px; |
|
|
height: 25px; |
|
|
background-color: white; |
|
|
border: 4px solid #3b82f6; |
|
|
border-radius: 50%; |
|
|
top: 15px; |
|
|
z-index: 1; |
|
|
} |
|
|
|
|
|
.left { |
|
|
left: 0; |
|
|
} |
|
|
|
|
|
.right { |
|
|
left: 50%; |
|
|
} |
|
|
|
|
|
.left::after { |
|
|
right: -12px; |
|
|
} |
|
|
|
|
|
.right::after { |
|
|
left: -12px; |
|
|
} |
|
|
|
|
|
.timeline-content { |
|
|
padding: 20px 30px; |
|
|
background-color: white; |
|
|
position: relative; |
|
|
border-radius: 6px; |
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); |
|
|
} |
|
|
|
|
|
@media screen and (max-width: 768px) { |
|
|
.timeline-container::after { |
|
|
left: 31px; |
|
|
} |
|
|
|
|
|
.timeline-card { |
|
|
width: 100%; |
|
|
padding-left: 70px; |
|
|
padding-right: 25px; |
|
|
} |
|
|
|
|
|
.timeline-card::after { |
|
|
left: 18px; |
|
|
} |
|
|
|
|
|
.left::after, .right::after { |
|
|
left: 18px; |
|
|
} |
|
|
|
|
|
.right { |
|
|
left: 0%; |
|
|
} |
|
|
} |
|
|
|
|
|
.status-pending { |
|
|
background-color: #f59e0b; |
|
|
} |
|
|
|
|
|
.status-dismissed { |
|
|
background-color: #6b7280; |
|
|
} |
|
|
|
|
|
.status-active { |
|
|
background-color: #3b82f6; |
|
|
} |
|
|
|
|
|
.status-ruling { |
|
|
background-color: #a855f7; |
|
|
} |
|
|
|
|
|
.expandable { |
|
|
max-height: 0; |
|
|
overflow: hidden; |
|
|
transition: max-height 0.3s ease-out; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 min-h-screen"> |
|
|
<div class="container mx-auto px-4 py-8"> |
|
|
<header class="mb-12 text-center"> |
|
|
<h1 class="text-4xl font-bold text-blue-600 mb-4">AI Copyright Lawsuit Timeline</h1> |
|
|
<p class="text-lg text-gray-600 max-w-2xl mx-auto"> |
|
|
<b>WIP - DUMMY DATA</b>Tracking legal cases involving artificial intelligence and copyright issues. This timeline visualizes key lawsuits, their status, and outcomes. |
|
|
</p> |
|
|
</header> |
|
|
|
|
|
<div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6 max-w-4xl mx-auto"> |
|
|
<h3 class="text-lg font-bold text-blue-800 mb-2">Expert Commentary in Media (Sample Data)</h3> |
|
|
<p class="text-gray-700 mb-3">Example of legal expert commentary on AI copyright cases (placeholder links):</p> |
|
|
<ul class="space-y-2"> |
|
|
<li> |
|
|
<a href="https://www.example.com/expert1" target="_blank" class="text-blue-600 hover:underline flex items-center"> |
|
|
<i class="fas fa-external-link-alt mr-2 text-xs"></i> |
|
|
"The AI Copyright Battles That Could Shape the Future" - Law Review |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="https://www.example.com/expert2" target="_blank" class="text-blue-600 hover:underline flex items-center"> |
|
|
<i class="fas fa-external-link-alt mr-2 text-xs"></i> |
|
|
"Why AI Training May Qualify as Fair Use" - Tech Policy Journal |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="https://www.example.com/expert3" target="_blank" class="text-blue-600 hover:underline flex items-center"> |
|
|
<i class="fas fa-external-link-alt mr-2 text-xs"></i> |
|
|
"The Precedent Set by Authors Guild v. Google" - Copyright Today |
|
|
</a> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-center mb-8"> |
|
|
<div class="relative w-full max-w-md"> |
|
|
<input type="text" id="searchInput" placeholder="Search cases..." class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
<i class="fas fa-search absolute right-3 top-3 text-gray-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-center mb-6"> |
|
|
<div class="flex flex-wrap gap-2 justify-center"> |
|
|
<button class="filter-btn px-4 py-2 rounded-full bg-yellow-100 text-yellow-700 hover:bg-yellow-200 transition" data-filter="pending"> |
|
|
Pending |
|
|
</button> |
|
|
<button class="filter-btn px-4 py-2 rounded-full bg-blue-100 text-blue-700 hover:bg-blue-200 transition" data-filter="active"> |
|
|
Active |
|
|
</button> |
|
|
<button class="filter-btn px-4 py-2 rounded-full bg-purple-100 text-purple-700 hover:bg-purple-200 transition" data-filter="ruling"> |
|
|
Ruling |
|
|
</button> |
|
|
<button class="filter-btn px-4 py-2 rounded-full bg-gray-100 text-gray-700 hover:bg-gray-200 transition" data-filter="dismissed"> |
|
|
Dismissed |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="timeline-container" id="timeline"></div> |
|
|
|
|
|
<script> |
|
|
|
|
|
function createCard(data, idx) { |
|
|
const side = idx % 2 === 0 ? 'left' : 'right'; |
|
|
const stamp = data.status.toLowerCase(); |
|
|
return ` |
|
|
<div class="timeline-card ${side}" data-status="${stamp}" data-search=" |
|
|
${data.caseName} ${data.plaintiffs} ${data.defendants} ${data.filed} ${data.court} |
|
|
"> |
|
|
<div class="timeline-content"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<h2 class="text-xl font-bold text-gray-800">${data.caseName}</h2> |
|
|
<span class="px-3 py-1 rounded-full text-xs font-semibold text-white status-${stamp}"> |
|
|
${stamp.charAt(0).toUpperCase()+stamp.slice(1)} |
|
|
</span> |
|
|
</div> |
|
|
<div class="flex flex-wrap gap-2 mb-3"> |
|
|
<span class="bg-gray-100 px-2 py-1 rounded text-xs"> |
|
|
<i class="fas fa-user-tie mr-1"></i>${data.plaintiffs} |
|
|
</span> |
|
|
<span class="bg-gray-100 px-2 py-1 rounded text-xs"> |
|
|
<i class="fas fa-user-shield mr-1"></i>${data.defendants} |
|
|
</span> |
|
|
</div> |
|
|
<div class="text-sm text-gray-600 mb-3"> |
|
|
<span class="mr-3"> |
|
|
<i class="far fa-calendar mr-1"></i>Filed: ${data.filed} |
|
|
</span> |
|
|
<span> |
|
|
<i class="fas fa-gavel mr-1"></i>Court: ${data.court} |
|
|
</span> |
|
|
</div> |
|
|
<!-- ← insert the summary here --> |
|
|
<p class="text-gray-700 mb-3">${data.summary}</p> |
|
|
<a href="${data.link}" target="_blank" class="text-blue-600 hover:underline text-sm flex items-center"> |
|
|
<i class="fas fa-file-pdf mr-2"></i>View Documents |
|
|
</a> |
|
|
</div> |
|
|
</div>`; |
|
|
} |
|
|
|
|
|
|
|
|
Papa.parse('cases.csv', { |
|
|
download: true, |
|
|
header: true, |
|
|
skipEmptyLines: true, |
|
|
complete: ({ data }) => { |
|
|
const container = document.getElementById('timeline'); |
|
|
data.forEach((row, i) => { |
|
|
container.insertAdjacentHTML('beforeend', createCard(row, i)); |
|
|
}); |
|
|
attachFiltersAndSearch(); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
function attachFiltersAndSearch() { |
|
|
document.querySelectorAll('.filter-btn').forEach(btn => { |
|
|
btn.addEventListener('click', () => { |
|
|
const f = btn.dataset.filter; |
|
|
document.querySelectorAll('.timeline-card').forEach(c => { |
|
|
c.style.display = (f==='all' || c.dataset.status===f) ? 'block' : 'none'; |
|
|
}); |
|
|
document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('bg-blue-200','bg-orange-200','bg-green-200','bg-gray-200')); |
|
|
const bg = btn.classList.contains('bg-blue-100') ? 'bg-blue-200' |
|
|
: btn.classList.contains('bg-orange-100') ? 'bg-orange-200' |
|
|
: btn.classList.contains('bg-green-100') ? 'bg-green-200' |
|
|
: 'bg-gray-200'; |
|
|
btn.classList.add(bg); |
|
|
}); |
|
|
}); |
|
|
|
|
|
document.getElementById('searchInput').addEventListener('input', e => { |
|
|
const term = e.target.value.toLowerCase(); |
|
|
document.querySelectorAll('.timeline-card').forEach(c => { |
|
|
c.style.display = c.dataset.search.toLowerCase().includes(term) ? 'block' : 'none'; |
|
|
}); |
|
|
}); |
|
|
} |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=fdaudens/ai-copyright-lawsuits" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
