|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Library - CanvasCrafter Studio</title> |
|
|
<link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
|
|
body { font-family: 'Inter', sans-serif; } |
|
|
.gradient-bg { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } |
|
|
.glass-effect { backdrop-filter: blur(10px); background: rgba(255, 255, 255, 0.1); } |
|
|
.hover-scale { transition: all 0.3s ease; } |
|
|
.hover-scale:hover { transform: scale(1.05); } |
|
|
</style> |
|
|
</head> |
|
|
<body class="min-h-screen gradient-bg"> |
|
|
|
|
|
<nav class="glass-effect border-b border-white/20"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex justify-between h-16 items-center"> |
|
|
<div class="flex items-center"> |
|
|
<i data-feather="image" class="text-white w-8 h-8 mr-3"></i> |
|
|
<span class="text-white text-xl font-bold">CanvasCrafter Studio</span> |
|
|
</div> |
|
|
<div class="hidden md:flex space-x-8"> |
|
|
<a href="index.html" class="text-white/80 hover:text-white transition-colors">Home</a> |
|
|
<a href="templates.html" class="text-white/80 hover:text-white transition-colors">Templates</a> |
|
|
<a href="editor.html" class="text-white/80 hover:text-white transition-colors">Editor</a> |
|
|
<a href="library.html" class="text-white font-semibold">Library</a> |
|
|
</div> |
|
|
<button class="bg-white/20 text-white px-4 py-2 rounded-lg hover:bg-white/30 transition-colors"> |
|
|
My Account |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section class="py-12 px-4"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<h1 class="text-4xl font-bold text-white text-center mb-4">My Library</h1> |
|
|
<p class="text-white/70 text-center mb-12 max-w-2xl mx-auto"> |
|
|
Access your Jellyfin media library and browse through your collection of movies, TV shows, and more. |
|
|
Select any item to start creating custom posters. |
|
|
</p> |
|
|
|
|
|
|
|
|
<div class="glass-effect rounded-2xl p-6 mb-8"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-3 h-3 bg-green-400 rounded-full mr-3 animate-pulse"></div> |
|
|
<span class="text-white font-medium">Connected to Jellyfin Server</span> |
|
|
</div> |
|
|
<button class="text-white/60 hover:text-white transition-colors"> |
|
|
<i data-feather="settings" class="w-5 h-5"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex flex-wrap gap-4 justify-center mb-12"> |
|
|
<button class="glass-effect text-white px-6 py-3 rounded-xl font-medium hover-scale active">Movies</button> |
|
|
<button class="glass-effect text-white/60 px-6 py-3 rounded-xl font-medium hover-scale">TV Shows</button> |
|
|
<button class="glass-effect text-white/60 px-6 py-3 rounded-xl font-medium hover-scale">Anime</button> |
|
|
<button class="glass-effect text-white/60 px-6 py-3 rounded-xl font-medium hover-scale">Collections</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-6"> |
|
|
|
|
|
<div class="hover-scale cursor-pointer"> |
|
|
<div class="aspect-[2/3] bg-white/10 rounded-xl mb-2 overflow-hidden"> |
|
|
<img src="http://static.photos/movie/200x300/101" alt="Movie Poster" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<h3 class="text-white text-sm font-medium truncate">Inception</h3> |
|
|
<p class="text-white/60 text-xs">2010 • Sci-Fi</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="hover-scale cursor-pointer"> |
|
|
<div class="aspect-[2/3] bg-white/10 rounded-xl mb-2 overflow-hidden"> |
|
|
<img src="http://static.photos/movie/200x300/102" alt="Movie Poster" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<h3 class="text-white text-sm font-medium truncate">The Dark Knight</h3> |
|
|
<p class="text-white/60 text-xs">2008 • Action</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="hover-scale cursor-pointer"> |
|
|
<div class="aspect-[2/3] bg-white/10 rounded-xl mb-2 overflow-hidden"> |
|
|
<img src="http://static.photos/movie/200x300/103" alt="Movie Poster" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<h3 class="text-white text-sm font-medium truncate">Interstellar</h3> |
|
|
<p class="text-white/60 text-xs">2014 • Drama</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="hover-scale cursor-pointer"> |
|
|
<div class="aspect-[2/3] bg-white/10 rounded-xl mb-2 overflow-hidden"> |
|
|
<img src="http://static.photos/movie/200x300/104" alt="Movie Poster" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<h3 class="text-white text-sm font-medium truncate">The Matrix</h3> |
|
|
<p class="text-white/60 text-xs">1999 • Sci-Fi</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="hover-scale cursor-pointer"> |
|
|
<div class="aspect-[2/3] bg-white/10 rounded-xl mb-2 overflow-hidden"> |
|
|
<img src="http://static.photos/movie/200x300/105" alt="Movie Poster" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<h3 class="text-white text-sm font-medium truncate">Blade Runner 2049</h3> |
|
|
<p class="text-white/60 text-xs">2017 • Sci-Fi</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="hover-scale cursor-pointer"> |
|
|
<div class="aspect-[2/3] bg-white/10 rounded-xl mb-2 overflow-hidden"> |
|
|
<img src="http://static.photos/movie/200x300/106" alt="Movie Poster" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<h3 class="text-white text-sm font-medium truncate">Pulp Fiction</h3> |
|
|
<p class="text-white/60 text-xs">1994 • Crime</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="hover-scale cursor-pointer"> |
|
|
<div class="aspect-[2/3] bg-white/10 rounded-xl mb-2 overflow-hidden"> |
|
|
<img src="http://static.photos/movie/200x300/107" alt="Movie Poster" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<h3 class="text-white text-sm font-medium truncate">The Shawshank Redemption</h3> |
|
|
<p class="text-white/60 text-xs">1994 • Drama</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="hover-scale cursor-pointer"> |
|
|
<div class="aspect-[2/3] bg-white/10 rounded-xl mb-2 overflow-hidden"> |
|
|
<img src="http://static.photos/movie/200x300/108" alt="Movie Poster" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<h3 class="text-white text-sm font-medium truncate">Fight Club</h3> |
|
|
<p class="text-white/60 text-xs">1999 • Drama</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="hover-scale cursor-pointer"> |
|
|
<div class="aspect-[2/3] bg-white/10 rounded-xl mb-2 overflow-hidden"> |
|
|
<img src="http://static.photos/movie/200x300/109" alt="Movie Poster" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<h3 class="text-white text-sm font-medium truncate">Goodfellas</h3> |
|
|
<p class="text-white/60 text-xs">1990 • Crime</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="hover-scale cursor-pointer"> |
|
|
<div class="aspect-[2/3] bg-white/10 rounded-xl mb-2 overflow-hidden"> |
|
|
<img src="http://static.photos/movie/200x300/110" alt="Movie Poster" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<h3 class="text-white text-sm font-medium truncate">The Godfather</h3> |
|
|
<p class="text-white/60 text-xs">1972 • Crime</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="hover-scale cursor-pointer"> |
|
|
<div class="aspect-[2/3] bg-white/10 rounded-xl mb-2 overflow-hidden"> |
|
|
<img src="http://static.photos/movie/200x300/111" alt="Movie Poster" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<h3 class="text-white text-sm font-medium truncate">Forrest Gump</h3> |
|
|
<p class="text-white/60 text-xs">1994 • Drama</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="hover-scale cursor-pointer"> |
|
|
<div class="aspect-[2/3] bg-white/10 rounded-xl mb-2 overflow-hidden"> |
|
|
<img src="http://static.photos/movie/200x300/112" alt="Movie Poster" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<h3 class="text-white text-sm font-medium truncate">The Prestige</h3> |
|
|
<p class="text-white/60 text-xs">2006 • Mystery</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex justify-center mt-12"> |
|
|
<button class="glass-effect text-white px-8 py-3 rounded-xl font-medium hover-scale"> |
|
|
Load More Media |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<script> |
|
|
feather.replace(); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.hover-scale').forEach(item => { |
|
|
item.addEventListener('click', function() { |
|
|
|
|
|
const title = this.querySelector('h3').textContent; |
|
|
|
|
|
|
|
|
this.style.transform = 'scale(0.95)'; |
|
|
setTimeout(() => { |
|
|
this.style.transform = ''; |
|
|
|
|
|
window.location.href = `editor.html?media=${encodeURIComponent(title)}`; |
|
|
}, 200); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.glass-effect').forEach(button => { |
|
|
button.addEventListener('click', function() { |
|
|
|
|
|
document.querySelectorAll('.glass-effect').forEach(tab => { |
|
|
tab.classList.remove('active', 'text-white'); |
|
|
tab.classList.add('text-white/60'); |
|
|
}); |
|
|
|
|
|
|
|
|
this.classList.add('active', 'text-white'); |
|
|
this.classList.remove('text-white/60'); |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
