|
|
<!DOCTYPE html> |
|
|
<html lang="es"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Los $10 Pesos Más Caros | Humor en la Gasera</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Oswald:wght@400;700&display=swap" rel="stylesheet"> |
|
|
<style> |
|
|
.custom-bg { |
|
|
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPgogIDxsaW5lYXJHcmFkaWVudCBpZD0iZyIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZmYwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZjAwIiBzdG9wLW9wYWNpdHk9IjAuMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNnKSIvPgo8L3N2Zz4='); |
|
|
} |
|
|
.font-bebas { |
|
|
font-family: 'Bebas Neue', cursive; |
|
|
} |
|
|
.font-oswald { |
|
|
font-family: 'Oswald', sans-serif; |
|
|
} |
|
|
.gas-tank { |
|
|
position: relative; |
|
|
width: 100px; |
|
|
height: 150px; |
|
|
background: #FF0000; |
|
|
border-radius: 10px 10px 30px 30px; |
|
|
border: 5px solid #000; |
|
|
} |
|
|
.gas-tank:before { |
|
|
content: ""; |
|
|
position: absolute; |
|
|
top: -15px; |
|
|
left: 20px; |
|
|
width: 60px; |
|
|
height: 30px; |
|
|
background: #FF0000; |
|
|
border-radius: 50%; |
|
|
border: 5px solid #000; |
|
|
} |
|
|
.gas-tank:after { |
|
|
content: ""; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 40px; |
|
|
width: 20px; |
|
|
height: 15px; |
|
|
background: #000; |
|
|
} |
|
|
.hose { |
|
|
position: relative; |
|
|
width: 120px; |
|
|
height: 20px; |
|
|
background: #000; |
|
|
border-radius: 10px; |
|
|
} |
|
|
.hose:after { |
|
|
content: ""; |
|
|
position: absolute; |
|
|
right: -10px; |
|
|
top: 5px; |
|
|
width: 15px; |
|
|
height: 10px; |
|
|
background: #FF0000; |
|
|
border-radius: 50%; |
|
|
} |
|
|
.pulse { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
@keyframes pulse { |
|
|
0% { transform: scale(1); } |
|
|
50% { transform: scale(1.05); } |
|
|
100% { transform: scale(1); } |
|
|
} |
|
|
.rotate-hover:hover { |
|
|
animation: rotate 0.5s ease; |
|
|
} |
|
|
@keyframes rotate { |
|
|
0% { transform: rotate(0deg); } |
|
|
25% { transform: rotate(5deg); } |
|
|
50% { transform: rotate(0deg); } |
|
|
75% { transform: rotate(-5deg); } |
|
|
100% { transform: rotate(0deg); } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-100 font-oswald"> |
|
|
|
|
|
<div id="qrWelcome" class="fixed inset-0 bg-black bg-opacity-90 flex items-center justify-center z-50"> |
|
|
<div class="bg-yellow-400 p-8 rounded-lg max-w-md mx-4 text-center pulse"> |
|
|
<div class="flex justify-center mb-6"> |
|
|
<div class="gas-tank"></div> |
|
|
<div class="hose -ml-4 mt-10"></div> |
|
|
</div> |
|
|
<h1 class="text-4xl font-bebas text-red-600 mb-4">¡PÁSELE JOVEN!</h1> |
|
|
<p class="text-xl mb-6">Aquí sí le llenamos el tanque... de carcajadas por solo $10 pesitos extra</p> |
|
|
<button onclick="closeQRWelcome()" class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-6 rounded-full text-lg transition duration-300 transform hover:scale-105"> |
|
|
Entrar al sitio |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<header class="custom-bg shadow-lg sticky top-0 z-40"> |
|
|
<div class="container mx-auto px-4 py-3 flex flex-col md:flex-row justify-between items-center"> |
|
|
<div class="flex items-center mb-4 md:mb-0"> |
|
|
<div class="gas-tank mr-4"></div> |
|
|
<h1 class="text-3xl font-bebas text-white"> |
|
|
<span class="text-yellow-300">Los $10</span> <span class="text-red-500">Pesos</span> <span class="text-green-400">Más Caros</span> |
|
|
</h1> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="bg-black bg-opacity-40 text-white px-4 py-2 rounded-full"> |
|
|
<span class="font-bold">Visitas:</span> <span id="visitCount" class="text-yellow-300">0</span> |
|
|
</div> |
|
|
<button class="bg-yellow-400 hover:bg-yellow-500 text-black font-bold py-2 px-4 rounded-full transition duration-300 rotate-hover"> |
|
|
Subir Meme |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="container mx-auto px-4 py-8"> |
|
|
|
|
|
<div class="mb-8"> |
|
|
<h2 class="text-2xl font-bebas text-red-600 mb-4">Categorías</h2> |
|
|
<div class="flex flex-wrap gap-3"> |
|
|
<button class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-full transition duration-300">Todos</button> |
|
|
<button class="bg-yellow-400 hover:bg-yellow-500 text-black px-4 py-2 rounded-full transition duration-300">Historias Reales</button> |
|
|
<button class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-full transition duration-300">Memes</button> |
|
|
<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-full transition duration-300">Videos Cortos</button> |
|
|
<button class="bg-purple-500 hover:bg-purple-600 text-white px-4 py-2 rounded-full transition duration-300">Carrilla del Día</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-lg overflow-hidden transition duration-300 hover:shadow-xl"> |
|
|
<div class="relative"> |
|
|
<img src="https://via.placeholder.com/600x400/FF0000/FFFFFF?text=Meme+Gasero" alt="Meme gasero" class="w-full h-48 object-cover"> |
|
|
<div class="absolute bottom-2 right-2 bg-black bg-opacity-70 text-white px-2 py-1 rounded text-sm"> |
|
|
Meme |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="text-xl font-bold mb-2">Cuando te cobran los $10 extra y ni siquiera te dicen "gracias"</h3> |
|
|
<p class="text-gray-600 mb-4">Subido por: Anónimo</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<button class="flex items-center space-x-1 text-red-500 hover:text-red-700"> |
|
|
<span class="text-2xl">😂</span> |
|
|
<span id="likeCount1">42</span> |
|
|
</button> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="text-gray-500 hover:text-blue-500"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" /> |
|
|
</svg> |
|
|
</button> |
|
|
<button class="text-gray-500 hover:text-green-500"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" /> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-lg overflow-hidden transition duration-300 hover:shadow-xl"> |
|
|
<div class="relative"> |
|
|
<img src="https://via.placeholder.com/600x400/FFFF00/000000?text=Video+Gasero" alt="Video gasero" class="w-full h-48 object-cover"> |
|
|
<div class="absolute bottom-2 right-2 bg-black bg-opacity-70 text-white px-2 py-1 rounded text-sm"> |
|
|
Video |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="text-xl font-bold mb-2">El despachador cuando ve que traes bombona de 20kg</h3> |
|
|
<p class="text-gray-600 mb-4">Subido por: El Gasero Feliz</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<button class="flex items-center space-x-1 text-red-500 hover:text-red-700"> |
|
|
<span class="text-2xl">😂</span> |
|
|
<span id="likeCount2">128</span> |
|
|
</button> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="text-gray-500 hover:text-blue-500"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" /> |
|
|
</svg> |
|
|
</button> |
|
|
<button class="text-gray-500 hover:text-green-500"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" /> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-lg overflow-hidden transition duration-300 hover:shadow-xl"> |
|
|
<div class="relative"> |
|
|
<img src="https://via.placeholder.com/600x400/00FF00/000000?text=Historia+Real" alt="Historia real" class="w-full h-48 object-cover"> |
|
|
<div class="absolute bottom-2 right-2 bg-black bg-opacity-70 text-white px-2 py-1 rounded text-sm"> |
|
|
Historia Real |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="text-xl font-bold mb-2">"Es por el seguro" - La excusa más usada para los $10 extra</h3> |
|
|
<p class="text-gray-600 mb-4">Subido por: Don Chente</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<button class="flex items-center space-x-1 text-red-500 hover:text-red-700"> |
|
|
<span class="text-2xl">😂</span> |
|
|
<span id="likeCount3">75</span> |
|
|
</button> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="text-gray-500 hover:text-blue-500"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" /> |
|
|
</svg> |
|
|
</button> |
|
|
<button class="text-gray-500 hover:text-green-500"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" /> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-lg overflow-hidden transition duration-300 hover:shadow-xl"> |
|
|
<div class="relative"> |
|
|
<img src="https://via.placeholder.com/600x400/FF00FF/FFFFFF?text=Carrilla+del+Día" alt="Carrilla del día" class="w-full h-48 object-cover"> |
|
|
<div class="absolute bottom-2 right-2 bg-black bg-opacity-70 text-white px-2 py-1 rounded text-sm"> |
|
|
Carrilla |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="text-xl font-bold mb-2">Cuando preguntas por qué son $10 más y te responden con otra pregunta</h3> |
|
|
<p class="text-gray-600 mb-4">Subido por: El Ruco del Gas</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<button class="flex items-center space-x-1 text-red-500 hover:text-red-700"> |
|
|
<span class="text-2xl">😂</span> |
|
|
<span id="likeCount4">210</span> |
|
|
</button> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="text-gray-500 hover:text-blue-500"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" /> |
|
|
</svg> |
|
|
</button> |
|
|
<button class="text-gray-500 hover:text-green-500"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" /> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-lg overflow-hidden transition duration-300 hover:shadow-xl"> |
|
|
<div class="relative"> |
|
|
<img src="https://via.placeholder.com/600x400/0000FF/FFFFFF?text=Meme+Gasero" alt="Meme gasero" class="w-full h-48 object-cover"> |
|
|
<div class="absolute bottom-2 right-2 bg-black bg-opacity-70 text-white px-2 py-1 rounded text-sm"> |
|
|
Meme |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="text-xl font-bold mb-2">El gesto del despachador cuando le dices que no traes cambio</h3> |
|
|
<p class="text-gray-600 mb-4">Subido por: Anónimo</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<button class="flex items-center space-x-1 text-red-500 hover:text-red-700"> |
|
|
<span class="text-2xl">😂</span> |
|
|
<span id="likeCount5">156</span> |
|
|
</button> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="text-gray-500 hover:text-blue-500"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" /> |
|
|
</svg> |
|
|
</button> |
|
|
<button class="text-gray-500 hover:text-green-500"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" /> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-lg overflow-hidden transition duration-300 hover:shadow-xl"> |
|
|
<div class="relative"> |
|
|
<img src="https://via.placeholder.com/600x400/FF9900/000000?text=Video+Gasero" alt="Video gasero" class="w-full h-48 object-cover"> |
|
|
<div class="absolute bottom-2 right-2 bg-black bg-opacity-70 text-white px-2 py-1 rounded text-sm"> |
|
|
Video |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="text-xl font-bold mb-2">"Es que subió el gas" - El clásico cuando preguntas por el precio</h3> |
|
|
<p class="text-gray-600 mb-4">Subido por: La Doña del Gas</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<button class="flex items-center space-x-1 text-red-500 hover:text-red-700"> |
|
|
<span class="text-2xl">😂</span> |
|
|
<span id="likeCount6">89</span> |
|
|
</button> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="text-gray-500 hover:text-blue-500"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" /> |
|
|
</svg> |
|
|
</button> |
|
|
<button class="text-gray-500 hover:text-green-500"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" /> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="uploadModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
|
|
<div class="bg-white rounded-xl p-6 w-full max-w-md"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="text-xl font-bold">Sube tu contenido</h3> |
|
|
<button onclick="closeUploadModal()" class="text-gray-500 hover:text-gray-700"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<form id="uploadForm" class="space-y-4"> |
|
|
<div> |
|
|
<label class="block text-gray-700 mb-2">Tipo de contenido</label> |
|
|
<select class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500"> |
|
|
<option>Meme</option> |
|
|
<option>Video Corto</option> |
|
|
<option>Historia Real</option> |
|
|
<option>Carrilla del Día</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-gray-700 mb-2">Título</label> |
|
|
<input type="text" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500" placeholder="Ej. Cuando te cobran los $10 extra..."> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-gray-700 mb-2">Contenido</label> |
|
|
<div class="border-2 border-dashed border-gray-300 rounded-lg p-4 text-center"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" /> |
|
|
</svg> |
|
|
<p class="mt-2">Arrastra tu imagen o video aquí</p> |
|
|
<p class="text-sm text-gray-500">o haz clic para seleccionar</p> |
|
|
<input type="file" class="hidden"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center"> |
|
|
<input type="checkbox" id="anonymous" class="mr-2"> |
|
|
<label for="anonymous" class="text-gray-700">Subir como anónimo</label> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-end space-x-3"> |
|
|
<button type="button" onclick="closeUploadModal()" class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-100">Cancelar</button> |
|
|
<button type="submit" class="px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600">Subir</button> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-800 text-white py-8"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
<div> |
|
|
<h3 class="text-xl font-bebas mb-4">Los $10 Pesos Más Caros</h3> |
|
|
<p class="text-gray-400">El lugar donde la picardía mexicana y el gas LP se encuentran para crear las mejores historias, memes y videos.</p> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-xl font-bebas mb-4">Visitas</h3> |
|
|
<canvas id="visitsChart" class="w-full h-40"></canvas> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-xl font-bebas mb-4">Comparte</h3> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="bg-blue-600 hover:bg-blue-700 w-10 h-10 rounded-full flex items-center justify-center"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"> |
|
|
<path d="M22.675 0h-21.35c-.732 0-1.325.593-1.325 1.325v21.351c0 .731.593 1.324 1.325 1.324h11.495v-9.294h-3.128v-3.622h3.128v-2.671c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12v9.293h6.116c.73 0 1.323-.593 1.323-1.325v-21.35c0-.732-.593-1.325-1.325-1.325z"/> |
|
|
</svg> |
|
|
</a> |
|
|
<a href="#" class="bg-blue-400 hover:bg-blue-500 w-10 h-10 rounded-full flex items-center justify-center"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"> |
|
|
<path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/> |
|
|
</svg> |
|
|
</a> |
|
|
<a href="#" class="bg-red-600 hover:bg-red-700 w-10 h-10 rounded-full flex items-center justify-center"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"> |
|
|
<path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"/> |
|
|
</svg> |
|
|
</a> |
|
|
<a href="#" class="bg-pink-600 hover:bg-pink-700 w-10 h-10 rounded-full flex items-center justify-center"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"> |
|
|
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/> |
|
|
</svg> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400"> |
|
|
<p>© 2023 Los $10 Pesos Más Caros. Todos los derechos reservados. | <a href="#" class="hover:text-white">Términos</a> | <a href="#" class="hover:text-white">Privacidad</a></p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
|
|
<script> |
|
|
|
|
|
function closeQRWelcome() { |
|
|
document.getElementById('qrWelcome').classList.add('hidden'); |
|
|
incrementVisitCount(); |
|
|
} |
|
|
|
|
|
|
|
|
function incrementVisitCount() { |
|
|
let count = localStorage.getItem('visitCount') || 0; |
|
|
count = parseInt(count) + 1; |
|
|
localStorage.setItem('visitCount', count); |
|
|
document.getElementById('visitCount').textContent = count; |
|
|
|
|
|
|
|
|
updateChartData(count); |
|
|
} |
|
|
|
|
|
|
|
|
function openUploadModal() { |
|
|
document.getElementById('uploadModal').classList.remove('hidden'); |
|
|
} |
|
|
|
|
|
function closeUploadModal() { |
|
|
document.getElementById('uploadModal').classList.add('hidden'); |
|
|
} |
|
|
|
|
|
|
|
|
document.querySelectorAll('[id^="likeCount"]').forEach(button => { |
|
|
button.addEventListener('click', function() { |
|
|
let count = parseInt(this.textContent); |
|
|
this.textContent = count + 1; |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
function updateChartData(currentCount) { |
|
|
const ctx = document.getElementById('visitsChart').getContext('2d'); |
|
|
|
|
|
|
|
|
let chartData = JSON.parse(localStorage.getItem('chartData')) || { |
|
|
labels: [], |
|
|
data: [] |
|
|
}; |
|
|
|
|
|
|
|
|
const now = new Date(); |
|
|
const timeString = now.getHours() + ':' + now.getMinutes(); |
|
|
|
|
|
chartData.labels.push(timeString); |
|
|
chartData.data.push(currentCount); |
|
|
|
|
|
|
|
|
if (chartData.labels.length > 7) { |
|
|
chartData.labels.shift(); |
|
|
chartData.data.shift(); |
|
|
} |
|
|
|
|
|
|
|
|
localStorage.setItem('chartData', JSON.stringify(chartData)); |
|
|
|
|
|
|
|
|
if (window.visitsChart) { |
|
|
window.visitsChart.data.labels = chartData.labels; |
|
|
window.visitsChart.data.datasets[0].data = chartData.data; |
|
|
window.visitsChart.update(); |
|
|
} else { |
|
|
window.visitsChart = new Chart(ctx, { |
|
|
type: 'line', |
|
|
data: { |
|
|
labels: chartData.labels, |
|
|
datasets: [{ |
|
|
label: 'Visitas', |
|
|
data: chartData.data, |
|
|
backgroundColor: 'rgba(255, 99, 132, 0.2)', |
|
|
borderColor: 'rgba(255, 99, 132, 1)', |
|
|
borderWidth: 2, |
|
|
tension: 0.4, |
|
|
fill: true |
|
|
}] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
plugins: { |
|
|
legend: { |
|
|
display: false |
|
|
} |
|
|
}, |
|
|
scales: { |
|
|
y: { |
|
|
beginAtZero: true |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
if (!localStorage.getItem('visitCount')) { |
|
|
localStorage.setItem('visitCount', Math.floor(Math.random() * 500) + 100); |
|
|
} |
|
|
|
|
|
document.getElementById('visitCount').textContent = localStorage.getItem('visitCount'); |
|
|
|
|
|
|
|
|
if (localStorage.getItem('chartData')) { |
|
|
updateChartData(localStorage.getItem('visitCount')); |
|
|
} else { |
|
|
|
|
|
const now = new Date(); |
|
|
const dummyData = { |
|
|
labels: [], |
|
|
data: [] |
|
|
}; |
|
|
|
|
|
for (let i = 6; i >= 0; i--) { |
|
|
const time = new Date(now.getTime() - i * 3600000); |
|
|
dummyData.labels.push(time.getHours() + ':' + time.getMinutes()); |
|
|
dummyData.data.push(Math.floor(Math.random() * 100) + parseInt(localStorage.getItem('visitCount')) - 50); |
|
|
} |
|
|
|
|
|
localStorage.setItem('chartData', JSON.stringify(dummyData)); |
|
|
updateChartData(localStorage.getItem('visitCount')); |
|
|
} |
|
|
|
|
|
|
|
|
const urlParams = new URLSearchParams(window.location.search); |
|
|
if (!urlParams.has('qr') && !sessionStorage.getItem('qrShown')) { |
|
|
document.getElementById('qrWelcome').classList.add('hidden'); |
|
|
incrementVisitCount(); |
|
|
sessionStorage.setItem('qrShown', 'true'); |
|
|
} |
|
|
|
|
|
|
|
|
document.querySelector('header button').addEventListener('click', openUploadModal); |
|
|
|
|
|
|
|
|
document.getElementById('uploadForm').addEventListener('submit', function(e) { |
|
|
e.preventDefault(); |
|
|
alert('¡Contenido subido con éxito! (Simulación)'); |
|
|
closeUploadModal(); |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=crl82/mms-gas" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
