Hugging Face's logo

Spaces:
SquatchDev
/
mangaverse-dark
Running

App Files Community
mangaverse-dark
File size: 8,855 Bytes
6b53737
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MangaVerse Dark - Your Manga Universe</title>
    <link rel="icon" type="image/x-icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/%3E%3C/svg%3E">
    <link rel="stylesheet" href="style.css">
    <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>
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    gridTemplateColumns: {
                        'trending': 'repeat(auto-fill, minmax(280px, 1fr))',
                        'blog': 'repeat(auto-fill, minmax(320px, 1fr))',
                    },
                    aspectRatio: {
                        'manga-landscape': '16/9',
                        'manga-portrait': '2/3',
                    },
                    colors: {
                        gray: {
                            850: '#1a1d21',
                            950: '#0b0c0e',
                        }
                    }
                }
            }
        }
    </script>
</head>
<body class="bg-gray-950 text-gray-100 antialiased">
    <manga-navbar></manga-navbar>
    
    <main class="container mx-auto px-4 py-8 max-w-7xl">
        <!-- Hero Section -->
        <section class="mb-12">
            <div class="relative overflow-hidden rounded-2xl bg-gradient-to-br from-gray-800 via-gray-900 to-gray-950 p-8 md:p-12">
                <div class="absolute inset-0 opacity-10">
                    <img src="http://static.photos/nature/1200x630/42" alt="Hero" class="w-full h-full object-cover">
                </div>
                <div class="relative z-10">
                    <h1 class="text-4xl md:text-6xl font-bold mb-4 bg-gradient-to-r from-gray-300 to-gray-500 bg-clip-text text-transparent">
                        Tu Universo Manga
                    </h1>
                    <p class="text-lg md:text-xl text-gray-400 mb-6 max-w-2xl">
                        Descubre, explora y sumérgete en los mejores mangas del momento con una experiencia diseñada para verdaderos aficionados.
                    </p>
                    <div class="flex flex-wrap gap-4">
                        <a href="#tendencias" class="inline-flex items-center px-6 py-3 bg-gray-700 hover:bg-gray-600 rounded-lg font-semibold transition-all duration-300 transform hover:scale-105">
                            <i data-feather="trending-up" class="w-5 h-5 mr-2"></i>
                            Explorar Tendencias
                        </a>
                        <a href="#nuevos" class="inline-flex items-center px-6 py-3 border border-gray-700 hover:bg-gray-800 rounded-lg font-semibold transition-all duration-300">
                            <i data-feather="clock" class="w-5 h-5 mr-2"></i>
                            Últimos Capítulos
                        </a>
                    </div>
                </div>
            </div>
        </section>

        <!-- Tendencias Section -->
        <section id="tendencias" class="mb-16">
            <div class="flex items-center justify-between mb-6">
                <h2 class="text-3xl font-bold flex items-center">
                    <i data-feather="trending-up" class="w-8 h-8 mr-3 text-gray-400"></i>
                    Tendencias
                </h2>
                <a href="#" class="text-gray-400 hover:text-gray-200 flex items-center transition-colors duration-300">
                    Ver todo
                    <i data-feather="chevron-right" class="w-5 h-5 ml-1"></i>
                </a>
            </div>
            <div id="trending-grid" class="grid grid-cols-trending gap-4 max-h-[600px] overflow-hidden">
                <!-- Dynamic content -->
            </div>
        </section>

        <!-- Últimos añadidos populares Section -->
        <section id="populares" class="mb-16">
            <div class="flex items-center justify-between mb-6">
                <h2 class="text-3xl font-bold flex items-center">
                    <i data-feather="star" class="w-8 h-8 mr-3 text-gray-400"></i>
                    Últimos añadidos populares
                </h2>
                <div class="flex gap-2">
                    <button id="popular-prev" class="p-2 rounded-lg bg-gray-800 hover:bg-gray-700 transition-colors duration-300">
                        <i data-feather="chevron-left" class="w-5 h-5"></i>
                    </button>
                    <button id="popular-next" class="p-2 rounded-lg bg-gray-800 hover:bg-gray-700 transition-colors duration-300">
                        <i data-feather="chevron-right" class="w-5 h-5"></i>
                    </button>
                </div>
            </div>
            <div class="relative">
                <div id="popular-carousel" class="flex gap-4 overflow-x-hidden scroll-smooth pb-4">
                    <!-- Dynamic content -->
                </div>
            </div>
        </section>

        <!-- Nuevos capítulos Section -->
        <section id="nuevos" class="mb-16">
            <div class="flex items-center justify-between mb-6">
                <h2 class="text-3xl font-bold flex items-center">
                    <i data-feather="clock" class="w-8 h-8 mr-3 text-gray-400"></i>
                    Nuevos capítulos
                </h2>
                <div class="flex items-center gap-4">
                    <select id="chapter-filter" class="px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg text-gray-300 focus:outline-none focus:border-gray-500">
                        <option value="all">Todos</option>
                        <option value="today">Hoy</option>
                        <option value="week">Esta semana</option>
                    </select>
                </div>
            </div>
            <div id="chapters-list" class="grid grid-cols-1 lg:grid-cols-2 gap-3">
                <!-- Dynamic content -->
            </div>
            <div id="chapters-pagination" class="flex items-center justify-center gap-2 mt-8">
                <!-- Pagination -->
            </div>
        </section>

        <!-- Listas recomendadas Section -->
        <section id="listas" class="mb-16">
            <div class="flex items-center justify-between mb-6">
                <h2 class="text-3xl font-bold flex items-center">
                    <i data-feather="list" class="w-8 h-8 mr-3 text-gray-400"></i>
                    Listas recomendadas
                </h2>
                <div class="flex gap-2">
                    <button id="lists-prev" class="p-2 rounded-lg bg-gray-800 hover:bg-gray-700 transition-colors duration-300">
                        <i data-feather="chevron-left" class="w-5 h-5"></i>
                    </button>
                    <button id="lists-next" class="p-2 rounded-lg bg-gray-800 hover:bg-gray-700 transition-colors duration-300">
                        <i data-feather="chevron-right" class="w-5 h-5"></i>
                    </button>
                </div>
            </div>
            <div class="relative">
                <div id="lists-carousel" class="flex gap-4 overflow-x-hidden scroll-smooth pb-4">
                    <!-- Dynamic content -->
                </div>
            </div>
        </section>

        <!-- Blog Section -->
        <section id="blog" class="mb-16">
            <div class="flex items-center justify-between mb-6">
                <h2 class="text-3xl font-bold flex items-center">
                    <i data-feather="edit-3" class="w-8 h-8 mr-3 text-gray-400"></i>
                    Blog
                </h2>
                <a href="#" class="text-gray-400 hover:text-gray-200 flex items-center transition-colors duration-300">
                    Ver todos los artículos
                    <i data-feather="chevron-right" class="w-5 h-5 ml-1"></i>
                </a>
            </div>
            <div id="blog-grid" class="grid grid-cols-blog gap-6">
                <!-- Dynamic content -->
            </div>
        </section>
    </main>

    <manga-footer></manga-footer>

    <script src="components/navbar.js"></script>
    <script src="components/footer.js"></script>
    <script src="script.js"></script>
    <script>feather.replace();</script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html>