<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hector's Coconut Empire - Mind Map</title>
<style>
/* Estilos Base y Transiciones */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
transition: all 0.4s ease;
margin: 0;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
h1 {
text-align: center;
margin-bottom: 20px;
}
/* Contenedor de Botones de Tema */
.theme-selector {
display: flex;
gap: 15px;
margin-bottom: 40px;
}
button {
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-weight: bold;
transition: transform 0.2s;
}
button:hover {
transform: scale(1.05);
}
/* Estructura del Mapa Mental (CSS Tree) */
.tree ul {
padding-top: 20px; position: relative;
transition: all 0.5s;
display: flex;
justify-content: center;
}
.tree li {
float: left; text-align: center;
list-style-type: none;
position: relative;
padding: 20px 5px 0 5px;
transition: all 0.5s;
}
/* Líneas conectoras */
.tree li::before, .tree li::after {
content: '';
position: absolute; top: 0; right: 50%;
border-top: 2px solid #ccc;
width: 50%; height: 20px;
}
.tree li::after {
right: auto; left: 50%;
border-left: 2px solid #ccc;
}
.tree li:only-child::after, .tree li:only-child::before {
display: none;
}
.tree li:only-child { padding-top: 0;}
.tree li:first-child::before, .tree li:last-child::after {
border: 0 none;
}
.tree li:first-child::after {
border-radius: 5px 0 0 0;
}
.tree li:last-child::before {
border-right: 2px solid #ccc;
border-radius: 0 5px 0 0;
}
.tree ul ul::before {
content: '';
position: absolute; top: 0; left: 50%;
border-left: 2px solid #ccc;
width: 0; height: 20px;
}
.tree li a {
border: 2px solid #ccc;
padding: 15px 20px;
text-decoration: none;
display: inline-block;
border-radius: 8px;
transition: all 0.5s;
font-weight: bold;
min-width: 120px;
}
/* =========================================
TEMA 1: CLÁSICO (Corporativo y Limpio)
========================================= */
body.theme-classic {
background-color: #f9f9f9;
color: #333;
}
body.theme-classic .tree li a {
background-color: #ffffff;
color: #333;
border-color: #888;
}
body.theme-classic button {
background-color: #e0e0e0;
color: #333;
border: 1px solid #888;
}
/* =========================================
TEMA 2: MODERNO (Oscuro y Neon)
========================================= */
body.theme-modern {
background-color: #121212;
color: #ffffff;
}
body.theme-modern .tree li a {
background-color: #1e1e1e;
color: #00e5ff;
border-color: #00e5ff;
box-shadow: 0 0 10px rgba(0, 229, 255, 0.2);
}
body.theme-modern .tree li::before, body.theme-modern .tree li::after, body.theme-modern .tree ul ul::before {
border-color: #555;
}
body.theme-modern button {
background-color: #333;
color: #00e5ff;
border: 1px solid #00e5ff;
}
/* =========================================
TEMA 3: TROPICAL (Hector's Vibe)
========================================= */
body.theme-tropical {
background-color: #fdf6e3;
color: #2c3e50;
}
body.theme-tropical .tree li a {
background-color: #27ae60;
color: #ffffff;
border-color: #2ecc71;
border-radius: 20px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
body.theme-tropical .tree li::before, body.theme-tropical .tree li::after, body.theme-tropical .tree ul ul::before {
border-color: #8e44ad;
border-width: 3px;
}
body.theme-tropical button {
background-color: #f39c12;
color: #fff;
border: none;
}
</style>
</head>
<body class="theme-tropical">
<h1>🥥 Hector's Coconut Empire Mind Map</h1>
<div class="theme-selector">
<button onclick="setTheme('theme-classic')">Clásico</button>
<button onclick="setTheme('theme-modern')">Moderno</button>
<button onclick="setTheme('theme-tropical')">Tropical</button>
</div>
<div class="tree">
<ul>
<li>
<a href="#">The Coconut Project</a>
<ul>
<li>
<a href="#">Fase 1: Miami Piloto</a>
<ul>
<li><a href="#">Triciclos Cashless</a></li>
<li><a href="#">Menú: Junyun & Agua</a></li>
<li><a href="#">Rastreo GPS en vivo</a></li>
</ul>
</li>
<li>
<a href="#">Fase 2: Escalamiento B2B</a>
<ul>
<li><a href="#">Hielo para Restaurantes</a></li>
<li><a href="#">Venta Mayorista</a></li>
</ul>
</li>
<li>
<a href="#">Fase 3: The Big Farm</a>
<ul>
<li><a href="#">5,000+ Matas (RD)</a></li>
<li><a href="#">Exportación a puertos (Miami)</a></li>
</ul>
</li>
<li>
<a href="#">Estructura de Startup</a>
<ul>
<li><a href="#">Levantamiento de Capital</a></li>
<li><a href="#">Permisología FDA/Local</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<script>
// Función para cambiar de tema dinámicamente
function setTheme(themeName) {
document.body.className = themeName;
}
</script>
</body>
</html>