MuXolotl.github.io/index.html at main · MuXolotl/MuXolotl.github.io · GitHub

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
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="icon" type="image/png" href="images/icon.png">
    <link rel="apple-touch-icon" href="images/icon.png">

    <title>MuXolotl — Программы и игры</title>

    <meta name="description" content="MuXolotl — open source программы, Google Colab блокноты и игры.">
    <meta name="keywords" content="MuXolotl, конвертер, colab, RVC, AI covers, open source, программы, игры">
    <meta name="author" content="MuXolotl">

    <meta property="og:type" content="website">
    <meta property="og:url" content="https://muxolotl.github.io/">
    <meta property="og:title" content="MuXolotl — Программы и игры">
    <meta property="og:description" content="Open source программы и игры. Конвертер медиафайлов, Google Colab блокноты и другие проекты.">

    <meta name="theme-color" content="#030712">

    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">

    <script src="components.js"></script>
</head>
<body class="bg-gray-950 text-gray-100 min-h-screen overflow-x-hidden">
    <div class="fixed inset-0 z-0 overflow-hidden pointer-events-none">
        <div class="blob blob-1"></div>
        <div class="blob blob-2"></div>
        <div class="blob blob-3"></div>
    </div>

    <app-navbar></app-navbar>

    <section class="pt-16 pb-20 px-6 relative z-10">
        <div class="max-w-6xl mx-auto text-center">
            <div class="relative flex flex-col items-center mb-5">
                <img src="images/icon.png" alt="Logo" class="absolute top-0 w-64 h-64 object-contain z-0 pointer-events-none select-none">
                <h1 class="text-5xl md:text-6xl font-bold relative z-10 pt-46">
                    <span class="gradient-text">MuXolotl</span>
                </h1>
            </div>
            <p class="text-xl text-gray-400 max-w-2xl mx-auto mb-10 leading-relaxed">
                Разрабатываю программы и игры. Все проекты с открытым исходным кодом.
            </p>
            <div class="flex flex-col sm:flex-row gap-4 justify-center">
                <a href="#software" data-track="nav:projects" class="px-8 py-3 bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg font-medium hover:opacity-90 transition">Мои проекты</a>
                <a href="#contact" data-track="nav:contact" class="px-8 py-3 border border-gray-700 rounded-lg font-medium hover:bg-gray-800 transition">Связаться</a>
            </div>
        </div>
    </section>

    <section id="about" class="py-20 px-6 bg-gray-900/50 relative z-10">
        <div class="max-w-6xl mx-auto">
            <h2 class="text-3xl font-bold text-center mb-4">О проекте</h2>
            <div class="w-20 h-1 bg-gradient-to-r from-blue-500 to-purple-600 mx-auto mb-12 rounded-full"></div>

            <div class="grid md:grid-cols-3 gap-8">
                <div class="bg-gray-800/50 border border-gray-700/50 rounded-xl p-6 text-center card-hover">
                    <div class="w-14 h-14 bg-blue-500/10 rounded-xl flex items-center justify-center mx-auto mb-4">
                        <svg class="w-7 h-7 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/>
                        </svg>
                    </div>
                    <h3 class="text-lg font-semibold mb-2">Программы</h3>
                    <p class="text-gray-400 text-sm">Утилиты для повседневных задач</p>
                </div>

                <div class="bg-gray-800/50 border border-gray-700/50 rounded-xl p-6 text-center card-hover">
                    <div class="w-14 h-14 bg-purple-500/10 rounded-xl flex items-center justify-center mx-auto mb-4">
                        <svg class="w-7 h-7 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/>
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                    </div>
                    <h3 class="text-lg font-semibold mb-2">Игры</h3>
                    <p class="text-gray-400 text-sm">Игровые проекты в разработке</p>
                </div>

                <div class="bg-gray-800/50 border border-gray-700/50 rounded-xl p-6 text-center card-hover">
                    <div class="w-14 h-14 bg-green-500/10 rounded-xl flex items-center justify-center mx-auto mb-4">
                        <svg class="w-7 h-7 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                        </svg>
                    </div>
                    <h3 class="text-lg font-semibold mb-2">Open Source</h3>
                    <p class="text-gray-400 text-sm">Весь код открыт на GitHub</p>
                </div>
            </div>
        </div>
    </section>

    <section id="software" class="py-20 px-6 relative z-10">
        <div class="max-w-6xl mx-auto">
            <h2 class="text-3xl font-bold text-center mb-4">Программы</h2>
            <div class="w-20 h-1 bg-gradient-to-r from-blue-500 to-purple-600 mx-auto mb-12 rounded-full"></div>

            <div class="carousel-wrapper group/carousel">
                <button class="carousel-btn prev" aria-label="Previous">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                    </svg>
                </button>
                <button class="carousel-btn next" aria-label="Next">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                    </svg>
                </button>

                <div class="carousel-track">
                    <div class="carousel-item">
                        <a href="colab.html" data-track="nav:colab-page" class="bg-gray-800/50 border border-gray-700/50 rounded-xl overflow-hidden card-hover block h-full flex flex-col">
                            <div class="h-40 w-full bg-gradient-to-br from-orange-900/20 to-yellow-900/20 flex items-center justify-center relative overflow-hidden">
                                <div class="absolute inset-0 opacity-20" style="background-image: radial-gradient(circle at 2px 2px, rgba(251, 146, 60, 0.5) 1px, transparent 0); background-size: 20px 20px;"></div>
                                <svg class="w-16 h-16 text-orange-500 shadow-lg" viewBox="0 0 24 24" fill="currentColor">
                                    <path d="M15.71 16.71c-1.12.29-2.75.24-4.05-.34-.32-.15-.36-.18-.74-.18-1.75 0-3.44 1.15-4.18 2.86-.75 1.73-.29 3.73 1.15 5.04 1.43 1.31 3.58 1.39 5.11.21 1.54-1.2 2.34-3.19 2.03-5.08-.15-.95-.67-2.26-1.32-2.51zm-2.2 5.23c-.64.5-1.59.45-2.2-.09-.61-.54-.78-1.46-.38-2.15.39-.68 1.24-1.05 2.01-.86.78.18 1.35.88 1.37 1.68.01.8-.35 1.42-.8 1.42zm3.23-8.57c-.89-.57-2.29-.77-3.52-.51-.31.07-.38.05-.72.05-1.83 0-3.68 1.08-4.59 2.87-.91 1.8-1.08 3.96-.41 6.12.67 2.16 2.44 3.73 4.72 4.19 2.28.45 4.72-.41 6.1-2.15.67-.85 1.57-2.53 1.59-3.48.04-1.89-1.18-3.79-3.17-5.09z"/>
                                    <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zm0-2a8 8 0 110-16 8 8 0 010 16z" fill-opacity="0.3"/>
                                </svg>
                            </div>
                            <div class="p-6 flex-1 flex flex-col">
                                <div class="flex items-center justify-between mb-3">
                                    <h3 class="text-lg font-semibold">Google Colab</h3>
                                </div>
                                <p class="text-gray-400 text-sm mb-4 flex-1">Блокноты Google Colab: тренировка моделей и каверы</p>
                                <div class="flex items-center gap-2 flex-wrap mt-auto">
                                    <span class="px-2 py-1 bg-blue-500/20 text-blue-400 text-xs rounded">Открыть</span>
                                </div>
                            </div>
                        </a>
                    </div>

                    <div class="carousel-item">
                        <a href="converter/index.html" data-track="nav:converter-page" class="bg-gray-800/50 border border-gray-700/50 rounded-xl overflow-hidden card-hover block h-full flex flex-col group">
                            <div class="h-40 w-full overflow-hidden">
                                <img src="images/converter-screenshot.png" alt="MuXolotl-Converter" class="h-full w-full object-cover transition duration-500 group-hover:scale-105" onerror="handleImageError(this)">
                            </div>
                            <div class="p-6 flex-1 flex flex-col">
                                <div class="flex items-center justify-between mb-3">
                                    <h3 class="text-lg font-semibold">MuXolotl-Converter</h3>
                                    <span class="version-tag px-2 py-1 bg-blue-500/20 text-blue-400 text-xs rounded-full font-medium">v1.0.2</span>
                                </div>
                                <p class="text-gray-400 text-sm mb-4 flex-1">Конвертер медиафайлов с простым интерфейсом</p>
                                <div class="flex items-center gap-2 flex-wrap mt-auto">
                                    <span class="px-2 py-1 bg-amber-500/20 text-amber-400 text-xs rounded">В разработке</span>
                                    <span class="px-2 py-1 bg-green-500/20 text-green-400 text-xs rounded">Open Source</span>
                                </div>
                                <div class="github-stats mt-4 pt-4 border-t border-gray-700/50">
                                    <div class="github-stat loading" data-stat="stars">
                                        <svg fill="currentColor" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg>
                                        <span class="count">--</span>
                                    </div>
                                    <div class="github-stat loading" data-stat="downloads">
                                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><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>
                                        <span class="count">--</span>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>

                    <div class="carousel-item">
                        <div class="bg-gray-800/30 border border-dashed border-gray-700/50 rounded-xl p-6 flex flex-col items-center justify-center h-full text-center min-h-[300px]">
                            <svg class="w-12 h-12 text-gray-600 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
                            </svg>
                            <p class="text-gray-500">Новые проекты скоро</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="games" class="py-20 px-6 bg-gray-900/50 relative z-10">
        <div class="max-w-6xl mx-auto">
            <h2 class="text-3xl font-bold text-center mb-4">Игры</h2>
            <div class="w-20 h-1 bg-gradient-to-r from-blue-500 to-purple-600 mx-auto mb-12 rounded-full"></div>
            <div class="text-center py-16">
                <div class="w-20 h-20 bg-purple-500/10 rounded-2xl flex items-center justify-center mx-auto mb-6">
                    <svg class="w-10 h-10 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z"/>
                    </svg>
                </div>
                <h3 class="text-2xl font-semibold mb-4 text-gray-200">Скоро</h3>
                <p class="text-gray-400 max-w-md mx-auto">Игровые проекты в процессе разработки</p>
            </div>
        </div>
    </section>

    <section id="contact" class="py-20 px-6 relative z-10">
        <div class="max-w-6xl mx-auto">
            <h2 class="text-3xl font-bold text-center mb-4">Контакты</h2>
            <div class="w-20 h-1 bg-gradient-to-r from-blue-500 to-purple-600 mx-auto mb-12 rounded-full"></div>
            <div class="max-w-xl mx-auto text-center">
                <p class="text-gray-400 mb-8">Есть вопросы, идеи или просто хочешь написать? Найди меня на GitHub.</p>
                <div class="flex flex-col sm:flex-row gap-4 justify-center">
                    <a href="https://github.com/MuXolotl" target="_blank" rel="noopener noreferrer" data-track="nav:github-profile" class="flex items-center justify-center gap-3 px-6 py-3 bg-gray-800 border border-gray-700 rounded-lg hover:bg-gray-700 transition">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
                        </svg>
                        GitHub
                    </a>
                </div>
            </div>
        </div>
    </section>

    <app-footer></app-footer>

    <button id="scrollTopBtn" class="scroll-top-btn" aria-label="Scroll to top">
        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"/>
        </svg>
    </button>

    <script src="https://www.gstatic.com/firebasejs/10.14.1/firebase-app-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/10.14.1/firebase-auth-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/10.14.1/firebase-database-compat.js"></script>
    <script src="analytics.js"></script>
    <script src="main.js"></script>
</body>
</html>