266 lines
19 KiB
HTML
266 lines
19 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Icono WhatsApp Bot Manager</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
background: #f0f0f0;
|
|
padding: 20px;
|
|
text-align: center;
|
|
}
|
|
.icon-container {
|
|
display: inline-block;
|
|
margin: 20px;
|
|
padding: 20px;
|
|
background: white;
|
|
border-radius: 15px;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
|
}
|
|
.icon-title {
|
|
margin: 10px 0;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
.download-btn {
|
|
display: inline-block;
|
|
padding: 8px 16px;
|
|
background: #25D366;
|
|
color: white;
|
|
text-decoration: none;
|
|
border-radius: 5px;
|
|
margin: 5px;
|
|
font-size: 12px;
|
|
}
|
|
.icon-preview {
|
|
margin: 10px 0;
|
|
}
|
|
h1 {
|
|
color: #25D366;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>🤖 Iconos WhatsApp Bot Manager</h1>
|
|
<p>Haz clic derecho en cualquier icono → "Guardar imagen como..." para descargar</p>
|
|
|
|
<!-- Icono Principal 512x512 -->
|
|
<div class="icon-container">
|
|
<div class="icon-title">Icono Principal (512x512)</div>
|
|
<div class="icon-preview">
|
|
<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
|
|
<!-- Fondo circular con gradiente -->
|
|
<defs>
|
|
<radialGradient id="bgGradient" cx="50%" cy="30%" r="70%">
|
|
<stop offset="0%" style="stop-color:#34D366;stop-opacity:1" />
|
|
<stop offset="100%" style="stop-color:#25D366;stop-opacity:1" />
|
|
</radialGradient>
|
|
<linearGradient id="botGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#ffffff;stop-opacity:1" />
|
|
<stop offset="100%" style="stop-color:#f0f0f0;stop-opacity:1" />
|
|
</linearGradient>
|
|
</defs>
|
|
|
|
<!-- Círculo de fondo -->
|
|
<circle cx="256" cy="256" r="240" fill="url(#bgGradient)" stroke="#1aa347" stroke-width="8"/>
|
|
|
|
<!-- Cabeza del robot -->
|
|
<circle cx="256" cy="200" r="80" fill="url(#botGradient)" stroke="#25D366" stroke-width="4"/>
|
|
|
|
<!-- Ojos del robot -->
|
|
<circle cx="230" cy="180" r="12" fill="#25D366"/>
|
|
<circle cx="282" cy="180" r="12" fill="#25D366"/>
|
|
<circle cx="230" cy="180" r="6" fill="white"/>
|
|
<circle cx="282" cy="180" r="6" fill="white"/>
|
|
|
|
<!-- Antenas -->
|
|
<line x1="220" y1="140" x2="210" y2="110" stroke="#25D366" stroke-width="6" stroke-linecap="round"/>
|
|
<line x1="292" y1="140" x2="302" y2="110" stroke="#25D366" stroke-width="6" stroke-linecap="round"/>
|
|
<circle cx="210" cy="110" r="8" fill="#25D366"/>
|
|
<circle cx="302" cy="110" r="8" fill="#25D366"/>
|
|
|
|
<!-- Boca/pantalla -->
|
|
<rect x="220" y="200" width="72" height="24" rx="12" fill="#25D366"/>
|
|
<rect x="224" y="204" width="64" height="16" rx="8" fill="white"/>
|
|
|
|
<!-- Cuerpo del robot -->
|
|
<rect x="200" y="280" width="112" height="120" rx="20" fill="url(#botGradient)" stroke="#25D366" stroke-width="4"/>
|
|
|
|
<!-- Brazos -->
|
|
<rect x="150" y="300" width="50" height="20" rx="10" fill="url(#botGradient)" stroke="#25D366" stroke-width="3"/>
|
|
<rect x="312" y="300" width="50" height="20" rx="10" fill="url(#botGradient)" stroke="#25D366" stroke-width="3"/>
|
|
|
|
<!-- Manos con símbolos de mensaje -->
|
|
<circle cx="125" cy="310" r="18" fill="#25D366"/>
|
|
<circle cx="387" cy="310" r="18" fill="#25D366"/>
|
|
|
|
<!-- Símbolos de chat en las manos -->
|
|
<path d="M115 305 Q125 300 135 305 Q135 315 125 320 Q115 315 115 305 Z" fill="white"/>
|
|
<path d="M377 305 Q387 300 397 305 Q397 315 387 320 Q377 315 377 305 Z" fill="white"/>
|
|
|
|
<!-- Panel de control en el pecho -->
|
|
<rect x="220" y="320" width="72" height="40" rx="8" fill="#25D366"/>
|
|
<circle cx="240" cy="335" r="6" fill="white"/>
|
|
<circle cx="256" cy="335" r="6" fill="white"/>
|
|
<circle cx="272" cy="335" r="6" fill="white"/>
|
|
<rect x="230" y="345" width="52" height="6" rx="3" fill="white"/>
|
|
|
|
<!-- Piernas -->
|
|
<rect x="220" y="400" width="24" height="40" rx="12" fill="url(#botGradient)" stroke="#25D366" stroke-width="3"/>
|
|
<rect x="268" y="400" width="24" height="40" rx="12" fill="url(#botGradient)" stroke="#25D366" stroke-width="3"/>
|
|
|
|
<!-- Pies -->
|
|
<ellipse cx="232" cy="450" rx="20" ry="12" fill="#25D366"/>
|
|
<ellipse cx="280" cy="450" rx="20" ry="12" fill="#25D366"/>
|
|
|
|
<!-- Burbujas de chat decorativas -->
|
|
<circle cx="100" cy="150" r="20" fill="white" fill-opacity="0.8" stroke="#25D366" stroke-width="2"/>
|
|
<path d="M90 145 Q100 140 110 145 Q110 155 100 160 Q90 155 90 145 Z" fill="white" fill-opacity="0.8" stroke="#25D366" stroke-width="2"/>
|
|
<circle cx="95" cy="150" r="3" fill="#25D366"/>
|
|
<circle cx="105" cy="150" r="3" fill="#25D366"/>
|
|
|
|
<circle cx="420" cy="180" r="25" fill="white" fill-opacity="0.8" stroke="#25D366" stroke-width="2"/>
|
|
<path d="M405 175 Q420 170 435 175 Q435 185 420 190 Q405 185 405 175 Z" fill="white" fill-opacity="0.8" stroke="#25D366" stroke-width="2"/>
|
|
<circle cx="415" cy="180" r="3" fill="#25D366"/>
|
|
<circle cx="425" cy="180" r="3" fill="#25D366"/>
|
|
|
|
<!-- Texto W -->
|
|
<text x="256" y="490" text-anchor="middle" font-family="Arial Black, sans-serif" font-size="24" fill="white" font-weight="bold">BOT</text>
|
|
</svg>
|
|
</div>
|
|
<a href="data:image/svg+xml;charset=utf-8,%3Csvg width='512' height='512' viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3CradialGradient id='bgGradient' cx='50%25' cy='30%25' r='70%25'%3E%3Cstop offset='0%25' style='stop-color:%2334D366;stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:%2325D366;stop-opacity:1' /%3E%3C/radialGradient%3E%3ClinearGradient id='botGradient' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%23ffffff;stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:%23f0f0f0;stop-opacity:1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='256' cy='256' r='240' fill='url(%23bgGradient)' stroke='%231aa347' stroke-width='8'/%3E%3Ccircle cx='256' cy='200' r='80' fill='url(%23botGradient)' stroke='%2325D366' stroke-width='4'/%3E%3Ccircle cx='230' cy='180' r='12' fill='%2325D366'/%3E%3Ccircle cx='282' cy='180' r='12' fill='%2325D366'/%3E%3Ccircle cx='230' cy='180' r='6' fill='white'/%3E%3Ccircle cx='282' cy='180' r='6' fill='white'/%3E%3Cline x1='220' y1='140' x2='210' y2='110' stroke='%2325D366' stroke-width='6' stroke-linecap='round'/%3E%3Cline x1='292' y1='140' x2='302' y2='110' stroke='%2325D366' stroke-width='6' stroke-linecap='round'/%3E%3Ccircle cx='210' cy='110' r='8' fill='%2325D366'/%3E%3Ccircle cx='302' cy='110' r='8' fill='%2325D366'/%3E%3Crect x='220' y='200' width='72' height='24' rx='12' fill='%2325D366'/%3E%3Crect x='224' y='204' width='64' height='16' rx='8' fill='white'/%3E%3Crect x='200' y='280' width='112' height='120' rx='20' fill='url(%23botGradient)' stroke='%2325D366' stroke-width='4'/%3E%3Crect x='150' y='300' width='50' height='20' rx='10' fill='url(%23botGradient)' stroke='%2325D366' stroke-width='3'/%3E%3Crect x='312' y='300' width='50' height='20' rx='10' fill='url(%23botGradient)' stroke='%2325D366' stroke-width='3'/%3E%3Ccircle cx='125' cy='310' r='18' fill='%2325D366'/%3E%3Ccircle cx='387' cy='310' r='18' fill='%2325D366'/%3E%3Cpath d='M115 305 Q125 300 135 305 Q135 315 125 320 Q115 315 115 305 Z' fill='white'/%3E%3Cpath d='M377 305 Q387 300 397 305 Q397 315 387 320 Q377 315 377 305 Z' fill='white'/%3E%3Crect x='220' y='320' width='72' height='40' rx='8' fill='%2325D366'/%3E%3Ccircle cx='240' cy='335' r='6' fill='white'/%3E%3Ccircle cx='256' cy='335' r='6' fill='white'/%3E%3Ccircle cx='272' cy='335' r='6' fill='white'/%3E%3Crect x='230' y='345' width='52' height='6' rx='3' fill='white'/%3E%3Crect x='220' y='400' width='24' height='40' rx='12' fill='url(%23botGradient)' stroke='%2325D366' stroke-width='3'/%3E%3Crect x='268' y='400' width='24' height='40' rx='12' fill='url(%23botGradient)' stroke='%2325D366' stroke-width='3'/%3E%3Cellipse cx='232' cy='450' rx='20' ry='12' fill='%2325D366'/%3E%3Cellipse cx='280' cy='450' rx='20' ry='12' fill='%2325D366'/%3E%3Ccircle cx='100' cy='150' r='20' fill='white' fill-opacity='0.8' stroke='%2325D366' stroke-width='2'/%3E%3Cpath d='M90 145 Q100 140 110 145 Q110 155 100 160 Q90 155 90 145 Z' fill='white' fill-opacity='0.8' stroke='%2325D366' stroke-width='2'/%3E%3Ccircle cx='95' cy='150' r='3' fill='%2325D366'/%3E%3Ccircle cx='105' cy='150' r='3' fill='%2325D366'/%3E%3Ccircle cx='420' cy='180' r='25' fill='white' fill-opacity='0.8' stroke='%2325D366' stroke-width='2'/%3E%3Cpath d='M405 175 Q420 170 435 175 Q435 185 420 190 Q405 185 405 175 Z' fill='white' fill-opacity='0.8' stroke='%2325D366' stroke-width='2'/%3E%3Ccircle cx='415' cy='180' r='3' fill='%2325D366'/%3E%3Ccircle cx='425' cy='180' r='3' fill='%2325D366'/%3E%3Ctext x='256' y='490' text-anchor='middle' font-family='Arial Black, sans-serif' font-size='24' fill='white' font-weight='bold'%3EBOT%3C/text%3E%3C/svg%3E" download="whatsapp-bot-icon-512.svg" class="download-btn">Descargar SVG</a>
|
|
</div>
|
|
|
|
<!-- Icono Mediano 256x256 -->
|
|
<div class="icon-container">
|
|
<div class="icon-title">Icono Mediano (256x256)</div>
|
|
<div class="icon-preview">
|
|
<svg width="256" height="256" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
|
|
<defs>
|
|
<radialGradient id="bgGradient2" cx="50%" cy="30%" r="70%">
|
|
<stop offset="0%" style="stop-color:#34D366;stop-opacity:1" />
|
|
<stop offset="100%" style="stop-color:#25D366;stop-opacity:1" />
|
|
</radialGradient>
|
|
<linearGradient id="botGradient2" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#ffffff;stop-opacity:1" />
|
|
<stop offset="100%" style="stop-color:#f0f0f0;stop-opacity:1" />
|
|
</linearGradient>
|
|
</defs>
|
|
<circle cx="256" cy="256" r="240" fill="url(#bgGradient2)" stroke="#1aa347" stroke-width="8"/>
|
|
<circle cx="256" cy="200" r="80" fill="url(#botGradient2)" stroke="#25D366" stroke-width="4"/>
|
|
<circle cx="230" cy="180" r="12" fill="#25D366"/>
|
|
<circle cx="282" cy="180" r="12" fill="#25D366"/>
|
|
<circle cx="230" cy="180" r="6" fill="white"/>
|
|
<circle cx="282" cy="180" r="6" fill="white"/>
|
|
<line x1="220" y1="140" x2="210" y2="110" stroke="#25D366" stroke-width="6" stroke-linecap="round"/>
|
|
<line x1="292" y1="140" x2="302" y2="110" stroke="#25D366" stroke-width="6" stroke-linecap="round"/>
|
|
<circle cx="210" cy="110" r="8" fill="#25D366"/>
|
|
<circle cx="302" cy="110" r="8" fill="#25D366"/>
|
|
<rect x="220" y="200" width="72" height="24" rx="12" fill="#25D366"/>
|
|
<rect x="224" y="204" width="64" height="16" rx="8" fill="white"/>
|
|
<rect x="200" y="280" width="112" height="120" rx="20" fill="url(#botGradient2)" stroke="#25D366" stroke-width="4"/>
|
|
<rect x="220" y="320" width="72" height="40" rx="8" fill="#25D366"/>
|
|
<circle cx="240" cy="335" r="6" fill="white"/>
|
|
<circle cx="256" cy="335" r="6" fill="white"/>
|
|
<circle cx="272" cy="335" r="6" fill="white"/>
|
|
<text x="256" y="490" text-anchor="middle" font-family="Arial Black, sans-serif" font-size="24" fill="white" font-weight="bold">BOT</text>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Icono Pequeño 128x128 -->
|
|
<div class="icon-container">
|
|
<div class="icon-title">Icono Pequeño (128x128)</div>
|
|
<div class="icon-preview">
|
|
<svg width="128" height="128" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
|
|
<defs>
|
|
<radialGradient id="bgGradient3" cx="50%" cy="30%" r="70%">
|
|
<stop offset="0%" style="stop-color:#34D366;stop-opacity:1" />
|
|
<stop offset="100%" style="stop-color:#25D366;stop-opacity:1" />
|
|
</radialGradient>
|
|
</defs>
|
|
<circle cx="256" cy="256" r="240" fill="url(#bgGradient3)" stroke="#1aa347" stroke-width="12"/>
|
|
<circle cx="256" cy="200" r="80" fill="white" stroke="#25D366" stroke-width="6"/>
|
|
<circle cx="230" cy="180" r="15" fill="#25D366"/>
|
|
<circle cx="282" cy="180" r="15" fill="#25D366"/>
|
|
<circle cx="230" cy="180" r="8" fill="white"/>
|
|
<circle cx="282" cy="180" r="8" fill="white"/>
|
|
<rect x="220" y="200" width="72" height="24" rx="12" fill="#25D366"/>
|
|
<rect x="200" y="280" width="112" height="120" rx="20" fill="white" stroke="#25D366" stroke-width="6"/>
|
|
<rect x="220" y="320" width="72" height="40" rx="8" fill="#25D366"/>
|
|
<text x="256" y="480" text-anchor="middle" font-family="Arial Black, sans-serif" font-size="36" fill="white" font-weight="bold">🤖</text>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Favicon 64x64 -->
|
|
<div class="icon-container">
|
|
<div class="icon-title">Favicon (64x64)</div>
|
|
<div class="icon-preview">
|
|
<svg width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
|
|
<circle cx="32" cy="32" r="28" fill="#25D366" stroke="#1aa347" stroke-width="2"/>
|
|
<circle cx="32" cy="24" r="12" fill="white" stroke="#25D366" stroke-width="1"/>
|
|
<circle cx="28" cy="22" r="2" fill="#25D366"/>
|
|
<circle cx="36" cy="22" r="2" fill="#25D366"/>
|
|
<rect x="26" y="25" width="12" height="4" rx="2" fill="#25D366"/>
|
|
<rect x="24" y="36" width="16" height="16" rx="3" fill="white" stroke="#25D366" stroke-width="1"/>
|
|
<rect x="26" y="40" width="12" height="6" rx="2" fill="#25D366"/>
|
|
<circle cx="29" cy="43" r="1" fill="white"/>
|
|
<circle cx="32" cy="43" r="1" fill="white"/>
|
|
<circle cx="35" cy="43" r="1" fill="white"/>
|
|
</svg>
|
|
</div>
|
|
<a href="data:image/svg+xml;charset=utf-8,%3Csvg width='64' height='64' viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='32' cy='32' r='28' fill='%2325D366' stroke='%231aa347' stroke-width='2'/%3E%3Ccircle cx='32' cy='24' r='12' fill='white' stroke='%2325D366' stroke-width='1'/%3E%3Ccircle cx='28' cy='22' r='2' fill='%2325D366'/%3E%3Ccircle cx='36' cy='22' r='2' fill='%2325D366'/%3E%3Crect x='26' y='25' width='12' height='4' rx='2' fill='%2325D366'/%3E%3Crect x='24' y='36' width='16' height='16' rx='3' fill='white' stroke='%2325D366' stroke-width='1'/%3E%3Crect x='26' y='40' width='12' height='6' rx='2' fill='%2325D366'/%3E%3Ccircle cx='29' cy='43' r='1' fill='white'/%3E%3Ccircle cx='32' cy='43' r='1' fill='white'/%3E%3Ccircle cx='35' cy='43' r='1' fill='white'/%3E%3C/svg%3E" download="favicon.svg" class="download-btn">Descargar Favicon</a>
|
|
</div>
|
|
|
|
<!-- Icono Alternativo Circular -->
|
|
<div class="icon-container">
|
|
<div class="icon-title">Alternativo Circular (512x512)</div>
|
|
<div class="icon-preview">
|
|
<svg width="256" height="256" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
|
|
<defs>
|
|
<radialGradient id="bgGradient4" cx="50%" cy="30%" r="70%">
|
|
<stop offset="0%" style="stop-color:#34D366;stop-opacity:1" />
|
|
<stop offset="100%" style="stop-color:#1aa347;stop-opacity:1" />
|
|
</radialGradient>
|
|
</defs>
|
|
<circle cx="256" cy="256" r="240" fill="url(#bgGradient4)"/>
|
|
|
|
<!-- Chat bubble grande -->
|
|
<path d="M180 180 Q280 150 380 180 Q380 280 280 310 Q250 310 220 300 L180 320 Q180 280 180 180 Z" fill="white" stroke="#25D366" stroke-width="6"/>
|
|
|
|
<!-- Texto "BOT" dentro de la burbuja -->
|
|
<text x="280" y="250" text-anchor="middle" font-family="Arial Black, sans-serif" font-size="48" fill="#25D366" font-weight="bold">BOT</text>
|
|
|
|
<!-- Puntos de chat -->
|
|
<circle cx="240" cy="280" r="8" fill="#25D366"/>
|
|
<circle cx="270" cy="280" r="8" fill="#25D366"/>
|
|
<circle cx="300" cy="280" r="8" fill="#25D366"/>
|
|
|
|
<!-- Icono de robot pequeño -->
|
|
<circle cx="350" cy="200" r="20" fill="#25D366"/>
|
|
<circle cx="345" cy="195" r="4" fill="white"/>
|
|
<circle cx="355" cy="195" r="4" fill="white"/>
|
|
<rect x="342" y="205" width="16" height="8" rx="4" fill="white"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="margin-top: 40px; padding: 20px; background: white; border-radius: 10px; max-width: 600px; margin-left: auto; margin-right: auto;">
|
|
<h2>📋 Cómo usar estos iconos:</h2>
|
|
<ul style="text-align: left;">
|
|
<li><strong>Facebook/Meta App:</strong> Usa el icono de 512x512</li>
|
|
<li><strong>Favicon del sitio web:</strong> Usa el favicon de 64x64</li>
|
|
<li><strong>Documentación/Marketing:</strong> Cualquier tamaño según necesites</li>
|
|
<li><strong>Formato:</strong> Los iconos son SVG (escalables sin pérdida de calidad)</li>
|
|
<li><strong>Colores:</strong> Verde WhatsApp oficial (#25D366)</li>
|
|
</ul>
|
|
|
|
<h3>💡 Para convertir a PNG:</h3>
|
|
<p>Puedes usar herramientas online como <strong>convertio.co</strong> o <strong>cloudconvert.com</strong> para convertir SVG a PNG en el tamaño que necesites.</p>
|
|
</div>
|
|
|
|
</body>
|
|
</html> |