Sprunkigithubmod/index.html at main · ThiagerBcx/Sprunkigithubmod · 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
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SprunkiMod | Centro de Desarrollo Público</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        :root {
            --bg-color: #f6f8fa;
            --text-color: #24292f;
            --header-bg: #ffffff;
            --pink-github: #ff69b4;
            --border-color: #d0d7de;
        }

        .dark-mode {
            --bg-color: #0d1117;
            --text-color: #c9d1d9;
            --header-bg: #161b22;
            --border-color: #30363d;
        }

        body {
            background-color: var(--bg-color);
            color: var(--text-color);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
            transition: 0.3s ease;
            /* Textura de pared solicitada */
            background-image: url('https://www.transparenttextures.com/patterns/brushed-alum.png');
        }

        .github-logo-pink {
            color: var(--pink-github) !important;
            font-size: 2.5rem;
            filter: drop-shadow(0 0 5px rgba(255, 105, 180, 0.3));
        }

        .nav-search {
            background: var(--bg-color);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            padding: 5px 12px;
            width: 320px;
            color: var(--text-color);
        }

        .mod-card {
            background: var(--header-bg);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            overflow: hidden;
            transition: 0.2s;
            background-image: url('https://www.transparenttextures.com/patterns/carbon-fibre.png');
        }

        .mod-card:hover {
            border-color: var(--pink-github);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }

        .btn-pink {
            background-color: var(--pink-github);
            color: white;
            padding: 8px 18px;
            border-radius: 6px;
            font-weight: 600;
            transition: opacity 0.2s;
        }

        .btn-pink:hover { opacity: 0.8; }

        .modal-player {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.95);
            z-index: 9999;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        .modal-content {
            background: var(--header-bg);
            width: 95%;
            max-width: 1050px;
            border-radius: 12px;
            border: 4px solid var(--pink-github);
            overflow: hidden;
        }

        .tag { padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: bold; color: white; }
        .tag-itch { background: #ff4c5a; }
        .tag-scratch { background: #4d97ff; }
        .tag-tw { background: #ff4c4c; }

        .upload-form {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: var(--header-bg);
            padding: 2rem;
            border-radius: 12px;
            border: 2px solid var(--pink-github);
            z-index: 10001;
            width: 450px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.5);
        }

        iframe { border: none; background: #000; }
    </style>
</head>
<body>

    <!-- Header Estilo GitHub -->
    <header class="sticky top-0 z-50 py-3 px-6 flex items-center justify-between border-b shadow-sm" style="background: var(--header-bg); border-color: var(--border-color);">
        <div class="flex items-center gap-6">
            <a href="#" class="flex items-center gap-2">
                <i class="fab fa-github github-logo-pink"></i>
                <span class="font-bold text-xl tracking-tighter">SprunkiMod</span>
            </a>

            <!-- Buscador Global -->
            <div class="hidden lg:flex items-center bg-gray-100 dark:bg-gray-800 border rounded-md px-3 py-1 gap-2" style="border-color: var(--border-color)">
                <i class="fas fa-search opacity-40"></i>
                <input type="text" id="globalSearch" class="bg-transparent outline-none text-sm w-80" placeholder="Buscar mods, creadores o tags (Itch/Scratch)..." onkeyup="searchMods()">
            </div>
        </div>

        <div class="flex items-center gap-4">
            <button onclick="toggleTheme()" class="text-xl p-2 hover:text-pink-500 transition"><i class="fas fa-adjust"></i></button>
            <button onclick="showUpload()" class="btn-pink shadow-md"><i class="fas fa-upload mr-1"></i> Subir Mod Público</button>
        </div>
    </header>

    <main class="max-w-7xl mx-auto p-4 md:p-8">

        <!-- Banner de Desarrollo Público -->
        <div class="bg-gradient-to-br from-pink-500 via-pink-600 to-purple-800 p-10 rounded-2xl text-white mb-10 shadow-2xl relative overflow-hidden">
            <div class="relative z-10">
                <h1 class="text-5xl font-black mb-3 italic">Sprunki Tag Development</h1>
                <p class="text-lg mb-8 opacity-90 max-w-2xl">La plataforma gratuita líder para desarrolladores de Incredibox. Publica tus proyectos de Scratch, TurboWarp e Itch.io sin errores.</p>
                <div class="flex flex-wrap gap-4">
                    <button onclick="openMod('https://www.incredibox.com/es/pwa', 'Incredibox Original', 'So Far So Good')" class="bg-white text-pink-600 px-8 py-3 rounded-lg font-bold hover:scale-105 transition shadow-lg">Jugar Original</button>
                    <button onclick="openMod('https://turbowarp.org/1273352813/embed', 'Mod Oficial Nyakobflol', 'nyakobflol')" class="bg-red-500 text-white px-8 py-3 rounded-lg font-bold hover:bg-red-600 transition shadow-lg">TurboWarp Oficial</button>
                </div>
            </div>
            <i class="fas fa-cube absolute right-[-20px] bottom-[-20px] text-[18rem] opacity-10"></i>
        </div>

        <!-- Mods Destacados con Vista Previa -->
        <div class="mb-12 border-4 border-pink-400 p-6 rounded-2xl bg-white dark:bg-gray-900 shadow-xl">
            <h2 class="text-2xl font-black mb-6 flex items-center gap-2">
                <i class="fas fa-fire text-pink-500"></i> MOD OFICIAL: NYAKOBFLOL SPRUNKI
            </h2>
            <div class="flex flex-col lg:flex-row gap-10">
                <div class="bg-black p-2 rounded-xl shadow-2xl border-4 border-gray-800">
                    <iframe src="https://turbowarp.org/1273352813/embed" width="482" height="393" allowtransparency="true" allowfullscreen="true"></iframe>
                </div>
                <div class="flex-1 flex flex-col justify-center">
                    <h3 class="text-4xl font-black text-pink-500 mb-2">Desarrollo TurboWarp</h3>
                    <p class="text-gray-500 dark:text-gray-400 text-lg mb-8 italic">"Este proyecto ha sido verificado y publicado en la red pública de SprunkiMod. Desarrollo limpio y optimizado para niños."</p>
                    <div class="flex gap-4">
                        <span class="tag tag-tw">TURBOWARP 1.0</span>
                        <span class="tag tag-scratch">PÚBLICO</span>
                        <span class="tag bg-green-500">SIN ERRORES</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Sección de Anuncios Publicitarios -->
        <div class="w-full h-24 bg-gray-200 dark:bg-gray-800 flex items-center justify-center rounded-xl border-2 border-dashed border-gray-400 mb-12 overflow-hidden">
            <span class="text-gray-500 font-bold tracking-widest uppercase text-xs">Espacio Publicitario SprunkiMod - 100% Gratis</span>
        </div>

        <!-- Repositorio Público de Mods -->
        <div class="flex items-center justify-between mb-8">
            <h2 class="text-2xl font-black flex items-center gap-2">
                <i class="fas fa-folder-open text-gray-400"></i> Repositorios de Desarrollo
            </h2>
            <div class="text-sm font-bold opacity-60 uppercase tracking-tighter">Conectado a Dominio Público</div>
        </div>

        <div id="modsGrid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
            <!-- Los mods se cargarán aquí dinámicamente -->
        </div>
    </main>

    <!-- Ventana de Juego (Modal) -->
    <div id="gameModal" class="modal-player" onclick="closeOnBackdrop(event)">
        <div class="modal-content shadow-2xl">
            <div class="p-4 flex justify-between items-center border-b" style="background: var(--header-bg); border-color: var(--border-color);">
                <div>
                    <h3 id="modalTitle" class="font-black text-xl uppercase tracking-tighter">Nombre del Juego</h3>
                    <p id="modalAuthor" class="text-xs text-pink-500 font-bold">CREADOR: @USER</p>
                </div>
                <button onclick="closeMod()" class="text-3xl hover:text-pink-500 transition"><i class="fas fa-times-circle"></i></button>
            </div>
            <div class="w-full aspect-video bg-black flex items-center justify-center" id="iframeHost">
                <!-- El iframe se inyecta aquí -->
            </div>
            <div class="p-4 flex flex-wrap justify-between items-center gap-4" style="background: var(--header-bg);">
                <div class="flex gap-8">
                    <button class="flex items-center gap-2 hover:text-pink-500" onclick="likeMod()"><i class="fas fa-heart"></i> <span id="likeCount">1.2k</span></button>
                    <button class="flex items-center gap-2 hover:text-yellow-500"><i class="fas fa-star"></i> <span>Favorito</span></button>
                    <button class="flex items-center gap-2 hover:text-blue-400"><i class="fas fa-comment"></i> <span>Comentar</span></button>
                </div>
                <button onclick="reportMod()" class="bg-red-600 text-white px-6 py-2 rounded font-black text-xs uppercase tracking-widest hover:bg-red-700 shadow-md">
                    REPORTAR CONTENIDO ADULTO (+18)
                </button>
            </div>
        </div>
    </div>

    <!-- Formulario para Subir Mod -->
    <div id="uploadModal" class="upload-form">
        <h2 class="text-2xl font-black mb-6 text-pink-500 border-b pb-2"><i class="fas fa-cloud-upload-alt"></i> Publicar Desarrollo</h2>
        <form onsubmit="handleUpload(event)">
            <div class="mb-4">
                <label class="text-[10px] font-bold uppercase block mb-1">Título del Proyecto</label>
                <input type="text" id="upTitle" required class="w-full p-2 rounded border dark:bg-gray-800 dark:border-gray-700 outline-none focus:ring-2 focus:ring-pink-400">
            </div>
            <div class="mb-4">
                <label class="text-[10px] font-bold uppercase block mb-1">Nombre del Creador</label>
                <input type="text" id="upAuthor" required class="w-full p-2 rounded border dark:bg-gray-800 dark:border-gray-700 outline-none focus:ring-2 focus:ring-pink-400">
            </div>
            <div class="mb-4">
                <label class="text-[10px] font-bold uppercase block mb-1">Enlace del Juego (Itch.io / Scratch / TurboWarp)</label>
                <input type="url" id="upUrl" required class="w-full p-2 rounded border dark:bg-gray-800 dark:border-gray-700 outline-none focus:ring-2 focus:ring-pink-400">
            </div>
            <div class="mb-6">
                <label class="text-[10px] font-bold uppercase block mb-1">Motor / Tag</label>
                <select id="upTag" class="w-full p-2 rounded border dark:bg-gray-800 dark:border-gray-700 outline-none">
                    <option value="turbowarp">TurboWarp (HTML Optimizado)</option>
                    <option value="scratch">Scratch original</option>
                    <option value="itch.io">Itch.io (Tag Sprunki)</option>
                    <option value="html5">HTML5 / Otros</option>
                </select>
            </div>
            <div class="bg-red-100 dark:bg-red-900/30 p-4 rounded-lg mb-6 text-[10px] flex items-start gap-3 border border-red-200">
                <input type="checkbox" required id="safetyCheck" class="mt-1 h-4 w-4">
                <label for="safetyCheck" class="text-red-700 dark:text-red-400 font-bold leading-tight">Acepto que este mod es apto para niños y no contiene contenido para adultos (+18/Porno). Si infrinjo las reglas, el mod será eliminado y el dueño será notificado.</label>
            </div>
            <div class="flex justify-end gap-4">
                <button type="button" onclick="hideUpload()" class="font-bold opacity-60">Cancelar</button>
                <button type="submit" class="btn-pink shadow-lg">PUBLICAR DESARROLLO</button>
            </div>
        </form>
    </div>

    <script>
        const ownerEmail = "gatobcxthiagonewbfcat@gmail.com";

        let modsData = [
            { title: "Sprunki Retake v4", author: "RetakeDev", url: "https://sprunkiretake.net/", tag: "html5", likes: "5.4k" },
            { title: "Wolf-Hal Itch Mod", author: "Wolf-Hal", url: "https://wolf-hal.itch.io/sprunki", tag: "itch.io", likes: "3.2k" },
            { title: "CoolJuegos Sprunki", author: "CoolGames", url: "https://www.cooljuegos.com/juego-en-linea/sprunki/", tag: "scratch", likes: "1.8k" },
            { title: "Nyakobflol Mod Official", author: "nyakobflol", url: "https://turbowarp.org/1273352813/embed", tag: "turbowarp", likes: "15k" },
            { title: "Incredibox PWA", author: "So Far So Good", url: "https://www.incredibox.com/es/pwa", tag: "html5", likes: "100k" }
        ];

        function renderMods(data = modsData) {
            const grid = document.getElementById('modsGrid');
            grid.innerHTML = "";

            data.forEach((mod) => {
                const card = document.createElement('div');
                card.className = "mod-card p-4";
                card.innerHTML = `
                    <div class="h-44 flex items-center justify-center relative cursor-pointer group mb-4" onclick="openMod('${mod.url}', '${mod.title}', '${mod.author}')">
                        <img src="https://api.dicebear.com/7.x/identicon/svg?seed=${mod.title}" class="absolute inset-0 w-full h-full object-cover opacity-20">
                        <div class="z-10 bg-black/60 p-4 rounded-full opacity-0 group-hover:opacity-100 transition">
                            <i class="fas fa-play text-white text-2xl"></i>
                        </div>
                        <div class="absolute top-0 left-0 p-2">
                            <span class="tag ${mod.tag === 'itch.io' ? 'tag-itch' : (mod.tag === 'scratch' ? 'tag-scratch' : 'tag-tw')} uppercase shadow-sm">${mod.tag}</span>
                        </div>
                    </div>
                    <div class="border-t pt-3" style="border-color: var(--border-color)">
                        <h3 class="font-black text-sm truncate uppercase tracking-tighter">${mod.title}</h3>
                        <p class="text-[10px] opacity-60 font-bold mb-4">BY <span class="text-pink-500">@${mod.author.toUpperCase()}</span></p>
                        <div class="flex items-center justify-between text-[10px] font-black opacity-40">
                            <span><i class="fas fa-heart"></i> ${mod.likes}</span>
                            <span><i class="fas fa-code-branch"></i> PUBLIC REPO</span>
                        </div>
                    </div>
                `;
                grid.appendChild(card);
            });
        }

        function searchMods() {
            const query = document.getElementById('globalSearch').value.toLowerCase();
            const filtered = modsData.filter(m =>
                m.title.toLowerCase().includes(query) ||
                m.author.toLowerCase().includes(query) ||
                m.tag.toLowerCase().includes(query)
            );
            renderMods(filtered);
        }

        function openMod(url, title, author) {
            const modal = document.getElementById('gameModal');
            const host = document.getElementById('iframeHost');
            document.getElementById('modalTitle').innerText = title;
            document.getElementById('modalAuthor').innerText = `CREADOR: @${author.toUpperCase()}`;
            document.getElementById('likeCount').innerText = Math.floor(Math.random() * 500) + 100 + "k";

            host.innerHTML = `<iframe src="${url}" class="w-full h-full" allowfullscreen></iframe>`;
            modal.style.display = "flex";
        }

        function closeMod() {
            document.getElementById('gameModal').style.display = "none";
            document.getElementById('iframeHost').innerHTML = "";
        }

        function showUpload() { document.getElementById('uploadModal').style.display = "block"; }
        function hideUpload() { document.getElementById('uploadModal').style.display = "none"; }

        function handleUpload(e) {
            e.preventDefault();
            const newMod = {
                title: document.getElementById('upTitle').value,
                author: document.getElementById('upAuthor').value,
                url: document.getElementById('upUrl').value,
                tag: document.getElementById('upTag').value,
                likes: "0"
            };
            modsData.unshift(newMod);
            renderMods();
            hideUpload();
            alert("¡Desarrollo publicado con éxito en SprunkiMod!");
        }

        function reportMod() {
            const title = document.getElementById('modalTitle').innerText;
            const msg = `ALERTA DE SEGURIDAD: El mod "${title}" ha sido marcado por contenido adulto (+18). No se respetaron las reglas de la plataforma. El administrador (${ownerEmail}) ha sido notificado para eliminar el contenido de inmediato. Protección para niños activa.`;

            console.warn("REPORTE ENVIADO:", msg);
            alert("Reporte de seguridad enviado al administrador. El mod será eliminado para proteger a los niños de Sprunki.");
            closeMod();
        }

        function toggleTheme() { document.body.classList.toggle('dark-mode'); }
        function closeOnBackdrop(e) { if(e.target.id === 'gameModal') closeMod(); }
        function likeMod() { alert("¡Te gusta este mod!"); }

        window.onload = () => renderMods();
    </script>
</body>
</html>