showLora / index.html
aiartxx's picture
Update index.html
8d71621 verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dayana - LoRA Models</title>
<!-- Tailwind CSS for styling -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Google Fonts -->
<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=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
/* Custom styles */
body {
font-family: 'Inter', sans-serif;
background-color: #111827; /* Tailwind gray-900 */
color: #f3f4f6; /* Tailwind gray-100 */
}
.model-card {
background-color: #1f2937; /* Tailwind gray-800 */
border-radius: 0.75rem;
border: 1px solid #374151; /* Tailwind gray-700 */
overflow: hidden;
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.model-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
}
.download-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.75rem 1.5rem;
border-radius: 0.5rem;
font-weight: 600;
text-decoration: none;
background-color: #3b82f6; /* Tailwind blue-500 */
color: white;
transition: background-color 0.2s;
}
.download-btn:hover {
background-color: #2563eb; /* Tailwind blue-600 */
}
video, img {
border-radius: 0.5rem;
border: 1px solid #4b5563; /* Tailwind gray-600 */
}
</style>
</head>
<body class="antialiased">
<!-- Main container -->
<div class="container mx-auto px-4 py-8 md:py-12">
<!-- Header section -->
<header class="text-center mb-12">
<h1 class="text-4xl md:text-5xl font-bold tracking-tight text-white">Dayana</h1>
</header>
<!-- Models grid -->
<div class="space-y-12">
<section id="wan" class="model-card p-6 md:p-8">
<div class="md:flex md:items-center md:justify-between mb-6">
<h2 class="text-3xl font-bold text-white">Dayana hunvideo</h2>
<a href="./D4yan4 HUNY [ytkjji19746d00c63tcd5]" class="download-btn mt-4 md:mt-0">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /></svg>
Download Model
</a>
</div>
<p class="text-gray-400 mb-6">hunyuan video lora.</p>
<!-- Media previews for WAN -->
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 md:gap-6">
<video src="./Adelise%20Verogandh%20WAN%20%5Buwqyqk1975ea1efdehbd6%5D/gen/jkwipv1975eeda02ev0.mp4" controls class="w-full h-auto"></video>
<video src="./Adelise%20Verogandh%20WAN%20%5Buwqyqk1975ea1efdehbd6%5D/gen/mwzyrn1975eeda543z1.mp4" controls class="w-full h-auto"></video>
<video src="./Adelise%20Verogandh%20WAN%20%5Buwqyqk1975ea1efdehbd6%5D/gen/pylulk1975eedac4cn2.mp4" controls class="w-full h-auto"></video>
<video src="./Adelise%20Verogandh%20WAN%20%5Buwqyqk1975ea1efdehbd6%5D/gen/swjhkm1975eedb356u3.mp4" controls class="w-full h-auto"></video>
</div>
</section>
</div>
</div>
</body>
</html>