links / interactive.html
minispace's picture
Optimize and sanitize public codebase: remove all comments, explanatory notes, backend training data, and verify security isolation
9b14626
Raw History Blame Contribute Delete
43.4 kB
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Nuestras Apps — Ecosistema utilitario, interactivo y plataformas digitales de alto rendimiento.">
<title>Interactive | Neo Studio</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@700;800;900&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<style>
body {
background-color: #090d16;
color: #f8fafc;
overflow-x: hidden;
font-family: 'Plus Jakarta Sans', sans-serif;
}
img, svg, .apple-icon-box {
-webkit-user-drag: none !important;
user-drag: none !important;
user-select: none !important;
}
.desktop-app-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 14px 10px !important;
width: 100% !important;
max-width: 480px !important;
margin: 0 auto !important;
opacity: 0.55;
filter: blur(2px);
}
.apple-icon-box {
width: 72px !important;
height: 72px !important;
border-radius: 18px !important;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 20px rgba(0,0,0,0.35);
}
.apple-icon-box svg {
width: 34px !important;
height: 34px !important;
stroke: #ffffff;
}
.apple-icon-label {
font-size: 0.76rem !important;
font-weight: 700;
color: #cbd5e1;
margin-top: 6px !important;
text-align: center;
}
@media (max-width: 600px) {
.desktop-app-grid {
grid-template-columns: repeat(4, 1fr) !important;
gap: 12px 8px !important;
max-width: 360px !important;
}
.apple-icon-box {
width: 64px !important;
height: 64px !important;
border-radius: 16px !important;
}
.apple-icon-box svg {
width: 30px !important;
height: 30px !important;
}
}
.apps-blur-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(9, 13, 22, 0.78);
backdrop-filter: blur(14px) saturate(180%);
-webkit-backdrop-filter: blur(14px) saturate(180%);
z-index: 999;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.apps-overlay-content {
text-align: center;
max-width: 540px;
width: 100%;
animation: fadeInOverlay 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes fadeInOverlay {
from { opacity: 0; transform: scale(0.92); }
to { opacity: 1; transform: scale(1); }
}
.apps-badge {
display: inline-block;
color: #38bdf8;
font-size: 0.82rem;
font-weight: 800;
letter-spacing: 2.5px;
text-transform: uppercase;
margin-bottom: 12px;
background: rgba(56, 189, 248, 0.12);
border: 1px solid rgba(56, 189, 248, 0.3);
padding: 4px 16px;
border-radius: 20px;
}
.apps-main-title {
font-family: 'Outfit', sans-serif;
font-size: clamp(2.2rem, 5vw, 3.2rem);
font-weight: 900;
color: #ffffff;
margin-bottom: 14px;
line-height: 1.15;
background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.apps-subtitle {
font-size: 0.95rem;
color: #94a3b8;
line-height: 1.65;
max-width: 480px;
margin: 0 auto 28px;
}
.apps-back-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
color: #ffffff;
font-size: 0.9rem;
font-weight: 800;
padding: 12px 24px;
border-radius: 14px;
text-decoration: none;
transition: all 0.25s ease;
}
.apps-back-btn:hover {
background: #38bdf8;
color: #0f172a;
border-color: #38bdf8;
transform: translateY(-2px);
}
:root {
--font-size-h1: clamp(1.3rem, 4.5vw + 0.5rem, 2.4rem);
--font-size-h2: clamp(1.1rem, 3.5vw + 0.4rem, 1.8rem);
--font-size-h3: clamp(0.95rem, 2.5vw + 0.3rem, 1.3rem);
--font-size-hero: clamp(1.4rem, 5vw + 0.4rem, 2.5rem);
--font-size-modal: clamp(1.15rem, 3.5vw + 0.4rem, 1.6rem);
}
h1, .main-title, .hero-text h1 {
font-size: var(--font-size-hero) !important;
line-height: 1.2 !important;
word-break: break-word !important;
overflow-wrap: break-word !important;
}
h2, .section-heading h2, .catalog-title, .dash-title, .form-title {
font-size: var(--font-size-h2) !important;
line-height: 1.25 !important;
word-break: break-word !important;
}
h3, .card-title {
font-size: var(--font-size-h3) !important;
line-height: 1.3 !important;
word-break: break-word !important;
}
.modal-title {
font-size: var(--font-size-modal) !important;
line-height: 1.2 !important;
}
@media (max-width: 768px) {
.top-bar {
font-size: 0.72rem !important;
padding: 6px 10px !important;
}
.store-header, .header-inner, .page-header {
padding: 10px 14px !important;
gap: 10px !important;
}
.header-inner {
display: flex !important;
flex-wrap: wrap !important;
justify-content: space-between !important;
align-items: center !important;
}
.nav-left {
gap: 8px !important;
flex-shrink: 0;
}
.logo-img, .brand-logo-text {
height: 38px !important;
font-size: 1.2rem !important;
}
.search-bar {
order: 3 !important;
width: 100% !important;
max-width: 100% !important;
margin-top: 4px !important;
}
.controls-right {
order: 2 !important;
gap: 6px !important;
}
.back-link, .back-button {
padding: 4px 10px !important;
font-size: 0.78rem !important;
}
.live-rate-badge, .location-badge, .lang-switch-btn {
font-size: 0.7rem !important;
padding: 4px 8px !important;
}
.hero-banner {
padding: 20px 16px !important;
border-radius: 16px !important;
margin-bottom: 20px !important;
}
.modal-content {
max-height: 92vh !important;
overflow-y: auto !important;
border-radius: 18px !important;
}
.modal-details {
padding: 18px !important;
}
.product-card {
border-radius: 14px !important;
}
}
@media (max-width: 480px) {
.hero-text h1, .main-title {
font-size: 1.3rem !important;
}
.card-body {
padding: 12px !important;
}
}
.logo-mask-wrapper,
.stand-logo-wrapper,
.interactive-vector-wrapper {
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
}
.cube-beat .cube-bg {
background-position: center center !important;
}
@media (max-width: 768px) {
.cubes-grid {
gap: 18px !important;
}
.cube-card {
aspect-ratio: 1 / 1.30 !important;
padding: 18px 14px 16px 14px !important;
transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
aspect-ratio 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
box-shadow 0.4s ease !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
}
.cube-card:hover, .cube-card:active {
aspect-ratio: 1 / 1.35 !important;
transform: translateY(-4px) scale(1.01) !important;
}
.cube-header {
position: relative !important;
z-index: 10 !important;
}
.cube-footer {
position: relative !important;
z-index: 10 !important;
margin-top: auto !important;
}
.cube-title {
font-size: clamp(1.1rem, 4vw, 1.35rem) !important;
line-height: 1.2 !important;
text-shadow: 0 2px 8px rgba(0,0,0,0.85) !important;
}
}
.cubes-grid {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 16px !important;
width: 100% !important;
max-width: 480px !important;
margin: 0 auto !important;
}
@media (max-width: 768px) {
.cubes-grid {
max-width: 360px !important;
gap: 14px !important;
}
}
.copyright a {
color: #38bdf8 !important;
text-decoration: none !important;
font-weight: 700 !important;
transition: color 0.2s ease;
}
.copyright a:hover {
color: #8b5cf6 !important;
text-decoration: underline !important;
}
</style>
</head>
<body>
<div class="bg-radial bg-radial-1"></div>
<div class="bg-radial bg-radial-2"></div>
<div class="bg-grid"></div>
<div class="container page-container">
<header class="page-header">
<a href="index.html" class="back-button">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
<path d="M19 12H5M12 19l-7-7 7-7"/>
</svg>
<span>Volver</span>
</a>
</header>
<main class="interactive-content text-center">
<div class="section-title-wrapper text-center" style="margin-bottom: 20px;">
<span class="cube-tag tag-violet margin-auto">Experiencias</span>
<h1 class="main-title">Interactive</h1>
</div>
<div class="desktop-app-grid">
<div class="app-slot-item">
<div class="apple-icon-box" style="background: linear-gradient(135deg, #10b981 0%, #059669 100%); shadow: 0 4px 14px rgba(0,0,0,0.3);">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 1v22M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>
</svg>
</div>
<span class="apple-icon-label">Conversor Divisas</span>
</div>
<div class="app-slot-item">
<div class="apple-icon-box" style="background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%); shadow: 0 4px 14px rgba(0,0,0,0.3);">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
</svg>
</div>
<span class="apple-icon-label">Vector Studio</span>
</div>
<div class="app-slot-item">
<div class="apple-icon-box" style="background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%); shadow: 0 4px 14px rgba(0,0,0,0.3);">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
<path d="M18 20V10M12 20V4M6 20v-6"/>
</svg>
</div>
<span class="apple-icon-label">Pi Analytics</span>
</div>
<div class="app-slot-item">
<div class="apple-icon-box" style="background: linear-gradient(135deg, #a855f7 0%, #7e22ce 100%); shadow: 0 4px 14px rgba(0,0,0,0.3);">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/>
</svg>
</div>
<span class="apple-icon-label">AI Engine</span>
</div>
<div class="app-slot-item">
<div class="apple-icon-box" style="background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%); shadow: 0 4px 14px rgba(0,0,0,0.3);">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>
</svg>
</div>
<span class="apple-icon-label">Cyber Vault</span>
</div>
<div class="app-slot-item">
<div class="apple-icon-box" style="background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%); shadow: 0 4px 14px rgba(0,0,0,0.3);">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
<line x1="6" y1="12" x2="10" y2="12"/><line x1="8" y1="10" x2="8" y2="14"/><circle cx="15" cy="13" r="1"/><circle cx="17.5" cy="10.5" r="1"/>
</svg>
</div>
<span class="apple-icon-label">Game Hub</span>
</div>
<div class="app-slot-item">
<div class="apple-icon-box" style="background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); shadow: 0 4px 14px rgba(0,0,0,0.3);">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
<rect x="2" y="3" width="7" height="7"/><rect x="15" y="3" width="7" height="7"/><rect x="9" y="14" width="7" height="7"/>
</svg>
</div>
<span class="apple-icon-label">Logic Flow</span>
</div>
<div class="app-slot-item">
<div class="apple-icon-box" style="background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%); shadow: 0 4px 14px rgba(0,0,0,0.3);">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
<path d="M2 10v4M6 6v12M10 3v18M14 8v8M18 5v14M22 10v4"/>
</svg>
</div>
<span class="apple-icon-label">Sound Lab</span>
</div>
<div class="app-slot-item">
<div class="apple-icon-box" style="background: linear-gradient(135deg, #84cc16 0%, #65a30d 100%); shadow: 0 4px 14px rgba(0,0,0,0.3);">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="13.5" cy="6.5" r=".5"/><circle cx="17.5" cy="10.5" r=".5"/><circle cx="8.5" cy="7.5" r=".5"/><circle cx="6.5" cy="12.5" r=".5"/><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.92 0 1.7-.75 1.7-1.68 0-.44-.17-.86-.44-1.18-.28-.32-.44-.73-.44-1.18 0-.93.75-1.68 1.68-1.68h2c3.04 0 5.5-2.46 5.5-5.5 0-5.5-4.5-9-10-9z"/>
</svg>
</div>
<span class="apple-icon-label">Pixel Canvas</span>
</div>
<div class="app-slot-item">
<div class="apple-icon-box" style="background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); shadow: 0 4px 14px rgba(0,0,0,0.3);">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/>
</svg>
</div>
<span class="apple-icon-label">Code Terminal</span>
</div>
<div class="app-slot-item">
<div class="apple-icon-box" style="background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%); shadow: 0 4px 14px rgba(0,0,0,0.3);">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
<path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"/>
</svg>
</div>
<span class="apple-icon-label">Cloud Mesh</span>
</div>
<div class="app-slot-item">
<div class="apple-icon-box" style="background: linear-gradient(135deg, #d946ef 0%, #c026d3 100%); shadow: 0 4px 14px rgba(0,0,0,0.3);">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
</svg>
</div>
<span class="apple-icon-label">Spatial 3D</span>
</div>
<div class="app-slot-item">
<div class="apple-icon-box" style="background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%); shadow: 0 4px 14px rgba(0,0,0,0.3);">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
</svg>
</div>
<span class="apple-icon-label">Fast Speed</span>
</div>
<div class="app-slot-item">
<div class="apple-icon-box" style="background: linear-gradient(135deg, #f97316 0%, #c2410c 100%); shadow: 0 4px 14px rgba(0,0,0,0.3);">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
<path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/>
</svg>
</div>
<span class="apple-icon-label">Camera FX</span>
</div>
<div class="app-slot-item">
<div class="apple-icon-box" style="background: linear-gradient(135deg, #64748b 0%, #334155 100%); shadow: 0 4px 14px rgba(0,0,0,0.3);">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
<ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/>
</svg>
</div>
<span class="apple-icon-label">Database DB</span>
</div>
<div class="app-slot-item">
<div class="apple-icon-box" style="background: linear-gradient(135deg, #0ea5e9 0%, #0369a1 100%); shadow: 0 4px 14px rgba(0,0,0,0.3);">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
<polygon points="12 2 19 21 12 17 5 21 12 2"/>
</svg>
</div>
<span class="apple-icon-label">Navigator</span>
</div>
<div class="app-slot-item">
<div class="apple-icon-box" style="background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%); shadow: 0 4px 14px rgba(0,0,0,0.3);">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
<polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/>
</svg>
</div>
<span class="apple-icon-label">Render Pro</span>
</div>
<div class="app-slot-item">
<div class="apple-icon-box" style="background: linear-gradient(135deg, #10b981 0%, #047857 100%); shadow: 0 4px 14px rgba(0,0,0,0.3);">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
</svg>
</div>
<span class="apple-icon-label">Security Shield</span>
</div>
<div class="app-slot-item">
<div class="apple-icon-box" style="background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%); shadow: 0 4px 14px rgba(0,0,0,0.3);">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
<rect x="2" y="4" width="20" height="16" rx="2"/><path d="M12 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"/>
</svg>
</div>
<span class="apple-icon-label">Crypto Wallet</span>
</div>
<div class="app-slot-item">
<div class="apple-icon-box" style="background: linear-gradient(135deg, #ec4899 0%, #be185d 100%); shadow: 0 4px 14px rgba(0,0,0,0.3);">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
<path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/>
</svg>
</div>
<span class="apple-icon-label">Music Beat</span>
</div>
<div class="app-slot-item">
<div class="apple-icon-box" style="background: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%); shadow: 0 4px 14px rgba(0,0,0,0.3);">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/>
</svg>
</div>
<span class="apple-icon-label">Docs AI</span>
</div>
<div class="app-slot-item">
<div class="apple-icon-box" style="background: linear-gradient(135deg, #a855f7 0%, #6b21a8 100%); shadow: 0 4px 14px rgba(0,0,0,0.3);">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 21V9"/>
</svg>
</div>
<span class="apple-icon-label">Pixel CAD</span>
</div>
<div class="app-slot-item">
<div class="apple-icon-box" style="background: linear-gradient(135deg, #f43f5e 0%, #9f1239 100%); shadow: 0 4px 14px rgba(0,0,0,0.3);">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/>
</svg>
</div>
<span class="apple-icon-label">Task Motion</span>
</div>
<div class="app-slot-item">
<div class="apple-icon-box" style="background: linear-gradient(135deg, #14b8a6 0%, #115e59 100%); shadow: 0 4px 14px rgba(0,0,0,0.3);">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/>
</svg>
</div>
<span class="apple-icon-label">Graph Stats</span>
</div>
<div class="app-slot-item">
<div class="apple-icon-box" style="background: linear-gradient(135deg, #fb923c 0%, #c2410c 100%); shadow: 0 4px 14px rgba(0,0,0,0.3);">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 19l7-7 3 3-7 7-3-3z"/><path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"/>
</svg>
</div>
<span class="apple-icon-label">Design Kit</span>
</div>
<div class="app-slot-item">
<div class="apple-icon-box" style="background: linear-gradient(135deg, #818cf8 0%, #3730a3 100%); shadow: 0 4px 14px rgba(0,0,0,0.3);">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="9"/><path d="M12 3v18M3 12h18"/>
</svg>
</div>
<span class="apple-icon-label">Audio Synth</span>
</div>
<div class="app-slot-item">
<div class="apple-icon-box" style="background: linear-gradient(135deg, #f472b6 0%, #9d174d 100%); shadow: 0 4px 14px rgba(0,0,0,0.3);">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
<rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"/><line x1="7" y1="2" x2="7" y2="22"/><line x1="17" y1="2" x2="17" y2="22"/><line x1="2" y1="12" x2="22" y2="12"/>
</svg>
</div>
<span class="apple-icon-label">Video Studio</span>
</div>
<div class="app-slot-item">
<div class="apple-icon-box" style="background: linear-gradient(135deg, #2dd4bf 0%, #0f766e 100%); shadow: 0 4px 14px rgba(0,0,0,0.3);">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="5" r="3"/><circle cx="5" cy="19" r="3"/><circle cx="19" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="12" y2="8"/><line x1="15.41" y1="13.51" x2="12" y2="8"/>
</svg>
</div>
<span class="apple-icon-label">Network Mesh</span>
</div>
</div>
</main>
<footer class="site-footer">
<p class="copyright">Sitio creado con Neo Studio</p>
</footer>
</div>
<div class="apps-blur-overlay">
<div class="apps-overlay-content">
<span class="apps-badge">PRÓXIMAMENTE</span>
<h1 class="apps-main-title">Nuestras Apps</h1>
<p class="apps-subtitle">Desarrollando un ecosistema integral de herramientas utilitarias, algoritmos interactivos, motores de juego y soluciones digitales de alto rendimiento.</p>
<a href="index.html" class="apps-back-btn">← Volver al inicio</a>
</div>
</div>
<script>
document.addEventListener('dragstart', function(e) {
if (e.target.tagName === 'IMG' || e.target.tagName === 'SVG' || e.target.closest('img')) {
e.preventDefault();
}
});
</script>
<script>
document.addEventListener('contextmenu', function(e) { e.preventDefault(); });
document.addEventListener('keydown', function(e) {
if (e.keyCode === 123 ||
(e.ctrlKey && e.shiftKey && (e.keyCode === 73 || e.keyCode === 74 || e.keyCode === 67)) ||
(e.ctrlKey && (e.keyCode === 85 || e.keyCode === 83)) ||
(e.metaKey && e.altKey && (e.keyCode === 73 || e.keyCode === 74)) ||
(e.metaKey && (e.keyCode === 85 || e.keyCode === 83))) {
e.preventDefault();
return false;
}
});
document.addEventListener('dragstart', function(e) { e.preventDefault(); });
</script>
<script>
(function() {
setTimeout(function() {
try {
const pageName = document.title || window.location.pathname;
const startTime = Date.now();
const dateStr = new Date().toLocaleDateString('es-AR', { day: '2-digit', month: 'long', year: 'numeric' });
const timeStr = new Date().toLocaleTimeString('es-AR', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
const userAgent = navigator.userAgent;
let deviceStr = 'Desktop';
if (/Mobi|Android|iPhone|iPad/i.test(userAgent)) deviceStr = 'Móvil / Celular';
let currentRecordIndex = -1;
function saveVisit(ip, city, country, flag) {
let logs = JSON.parse(localStorage.getItem('site_visitor_history') || '[]');
const visitRecord = {
id: Date.now(),
date: dateStr,
time: timeStr,
page: pageName,
ip: ip || 'Desconocida',
city: city || 'Desconocida',
country: country || 'Desconocido',
flag: flag || '🌐',
device: deviceStr,
durationSec: 1
};
logs.push(visitRecord);
if (logs.length > 500) logs = logs.slice(-500);
localStorage.setItem('site_visitor_history', JSON.stringify(logs));
currentRecordIndex = logs.length - 1;
}
fetch('https://ipapi.co/json/')
.then(res => res.json())
.then(data => {
saveVisit(data.ip, data.city, data.country_name, data.country_code ? String.fromCodePoint(...[...data.country_code.toUpperCase()].map(c => 127397 + c.charCodeAt())) : '🌐');
})
.catch(() => {
saveVisit('Oculta', 'Local', 'Argentina', '🇦🇷');
});
setInterval(() => {
if (currentRecordIndex < 0) return;
const elapsed = Math.round((Date.now() - startTime) / 1000);
let logs = JSON.parse(localStorage.getItem('site_visitor_history') || '[]');
if (logs[currentRecordIndex]) {
logs[currentRecordIndex].durationSec = elapsed;
localStorage.setItem('site_visitor_history', JSON.stringify(logs));
}
}, 3000);
} catch(e) {}
}, 100);
})();
</script>
<script id="script-ajuste-de-textos">
(function ajusteDeTextos() {
function adaptTextAndHeaders() {
const width = window.innerWidth;
document.documentElement.style.setProperty('--window-width', width + 'px');
const headings = document.querySelectorAll('.hero-text h1, .main-title, .modal-title, .section-heading h2');
headings.forEach(h => {
if (width < 500) {
h.style.letterSpacing = '-0.3px';
} else {
h.style.letterSpacing = 'normal';
}
});
}
window.addEventListener('resize', adaptTextAndHeaders);
window.addEventListener('orientationchange', adaptTextAndHeaders);
document.addEventListener('DOMContentLoaded', adaptTextAndHeaders);
adaptTextAndHeaders();
})();
</script>
<script>
(function() {
try {
const pageTitle = document.title.split('|')[0].trim() || 'Inicio';
const now = new Date();
const dateStr = now.toLocaleDateString('es-AR', { day: '2-digit', month: 'long', year: 'numeric' });
const timeStr = now.toLocaleTimeString('es-AR', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
let userId = localStorage.getItem('neo_visitor_uid');
if (!userId) {
userId = 'USR-' + Math.floor(1000 + Math.random() * 9000);
localStorage.setItem('neo_visitor_uid', userId);
}
let userName = localStorage.getItem('lead_user_name') || 'Anónimo (' + userId + ')';
const ua = navigator.userAgent || '';
let deviceType = 'Desktop';
let brandModel = 'PC / Genérico';
let osName = 'Desconocido';
if (/iPhone/i.test(ua)) {
deviceType = 'Móvil';
brandModel = 'Apple iPhone';
osName = 'iOS ' + ((ua.match(/OS ([\d_]+)/) || [])[1] || '').replace(/_/g, '.');
} else if (/iPad/i.test(ua)) {
deviceType = 'Tablet';
brandModel = 'Apple iPad';
osName = 'iPadOS';
} else if (/Android/i.test(ua)) {
deviceType = /Mobile/i.test(ua) ? 'Móvil' : 'Tablet';
osName = 'Android ' + ((ua.match(/Android ([\d.]+)/) || [])[1] || '');
if (/SM-|Samsung/i.test(ua)) brandModel = 'Samsung Galaxy';
else if (/Motorola|Moto/i.test(ua)) brandModel = 'Motorola';
else if (/Xiaomi|Redmi|POCO/i.test(ua)) brandModel = 'Xiaomi / Redmi';
else if (/Pixel/i.test(ua)) brandModel = 'Google Pixel';
else brandModel = 'Android Genérico';
} else if (/Macintosh|Mac OS X/i.test(ua)) {
deviceType = 'Desktop';
brandModel = 'Apple Mac / MacBook';
osName = 'macOS ' + ((ua.match(/Mac OS X ([\d_]+)/) || [])[1] || '').replace(/_/g, '.');
} else if (/Windows NT/i.test(ua)) {
deviceType = 'Desktop';
brandModel = 'Windows PC';
const ver = (ua.match(/Windows NT ([\d.]+)/) || [])[1];
osName = ver === '10.0' ? 'Windows 10/11' : ('Windows ' + ver);
} else if (/Linux/i.test(ua)) {
deviceType = 'Desktop';
brandModel = 'Linux PC';
osName = 'Linux';
}
let browserName = 'Navegador Web';
let browserVer = '';
if (/Chrome\/([\d.]+)/.test(ua) && !/Edg|OPR|SamsungBrowser/.test(ua)) {
browserName = 'Google Chrome';
browserVer = RegExp.$1.split('.')[0];
} else if (/Safari\/([\d.]+)/.test(ua) && !/Chrome/.test(ua)) {
browserName = 'Apple Safari';
browserVer = ((ua.match(/Version\/([\d.]+)/) || [])[1] || '').split('.')[0];
} else if (/Firefox\/([\d.]+)/.test(ua)) {
browserName = 'Mozilla Firefox';
browserVer = RegExp.$1.split('.')[0];
} else if (/Edg\/([\d.]+)/.test(ua)) {
browserName = 'Microsoft Edge';
browserVer = RegExp.$1.split('.')[0];
} else if (/SamsungBrowser\/([\d.]+)/.test(ua)) {
browserName = 'Samsung Internet';
browserVer = RegExp.$1.split('.')[0];
} else if (/OPR\/([\d.]+)/.test(ua)) {
browserName = 'Opera';
browserVer = RegExp.$1.split('.')[0];
}
const fullBrowser = browserName + (browserVer ? ' v' + browserVer : '');
const screenRes = (screen.width || window.innerWidth) + 'x' + (screen.height || window.innerHeight);
const dpr = window.devicePixelRatio ? window.devicePixelRatio.toFixed(1) + 'x' : '1x';
const orientation = (screen.orientation ? screen.orientation.type : (window.innerWidth > window.innerHeight ? 'Horizontal' : 'Vertical')).includes('portrait') ? 'Vertical' : 'Horizontal';
const cores = navigator.hardwareConcurrency ? navigator.hardwareConcurrency + ' núcleos' : 'N/D';
const ram = navigator.deviceMemory ? navigator.deviceMemory + ' GB' : 'N/D';
const language = navigator.language || 'es-AR';
const referrer = document.referrer ? (new URL(document.referrer).hostname || 'Externo') : 'Directo';
let connType = 'WiFi / Conexión Rápida';
if (navigator.connection) {
connType = (navigator.connection.effectiveType || '').toUpperCase() + (navigator.connection.downlink ? ' (' + navigator.connection.downlink + ' Mbps)' : '');
}
let batteryLevel = 'N/D';
if (navigator.getBattery) {
navigator.getBattery().then(b => {
batteryLevel = Math.round(b.level * 100) + '% ' + (b.charging ? '⚡' : '🔋');
}).catch(()=>{});
}
let sessionRoutes = JSON.parse(sessionStorage.getItem('neo_routes') || '[]');
if (!sessionRoutes.length || sessionRoutes[sessionRoutes.length - 1] !== pageTitle) {
sessionRoutes.push(pageTitle);
sessionStorage.setItem('neo_routes', JSON.stringify(sessionRoutes));
}
const sessionStart = Date.now();
function saveOrMergeVisitor(geo) {
let logs = JSON.parse(localStorage.getItem('site_visitor_history') || '[]');
let userMap = {};
logs.forEach(l => {
const key = l.uid || l.ip || 'USR-UNKNOWN';
if (!userMap[key]) {
userMap[key] = l;
if (!l.sessions) {
l.sessions = [{ time: l.firstTime || l.time, page: l.page, duration: l.durationSec || 1 }];
}
} else {
userMap[key].visitsToday = (userMap[key].visitsToday || 1) + 1;
userMap[key].durationSec = (userMap[key].durationSec || 0) + (l.durationSec || 1);
userMap[key].lastTime = l.lastTime || l.time || userMap[key].lastTime;
(l.routes || []).forEach(r => {
if (!userMap[key].routes.includes(r)) userMap[key].routes.push(r);
});
if (l.sessions) {
userMap[key].sessions = userMap[key].sessions.concat(l.sessions);
}
}
});
if (!userMap[userId]) {
userMap[userId] = {
id: Date.now(),
uid: userId,
name: userName,
date: dateStr,
firstTime: timeStr,
lastTime: timeStr,
visitsToday: 1,
page: pageTitle,
routes: sessionRoutes,
sessions: [{ time: timeStr, page: pageTitle, duration: 1 }],
ip: geo.ip || 'Oculta',
city: geo.city || 'Desconocida',
region: geo.region || 'Buenos Aires',
country: geo.country_name || 'Argentina',
flag: geo.flag || '🇦🇷',
isp: geo.org || '—',
postal: geo.postal || '—',
deviceType: deviceType,
brandModel: brandModel,
os: osName,
browser: fullBrowser,
screen: screenRes,
dpr: dpr,
orientation: orientation,
cores: cores,
ram: ram,
lang: language,
referrer: referrer,
connection: connType,
battery: batteryLevel,
durationSec: 1
};
} else {
const u = userMap[userId];
u.visitsToday = (u.visitsToday || 1) + 1;
u.lastTime = timeStr;
u.page = pageTitle;
sessionRoutes.forEach(r => {
if (!u.routes.includes(r)) u.routes.push(r);
});
if (!u.sessions) u.sessions = [];
u.sessions.push({ time: timeStr, page: pageTitle, duration: 1 });
if (geo.ip && u.ip === 'Oculta') u.ip = geo.ip;
if (geo.city && u.city === 'Desconocida') {
u.city = geo.city;
u.region = geo.region;
u.country = geo.country_name;
u.flag = geo.flag;
u.isp = geo.org;
}
u.connection = connType;
u.battery = batteryLevel;
}
const cleanList = Object.values(userMap);
localStorage.setItem('site_visitor_history', JSON.stringify(cleanList));
}
fetch('https://ipapi.co/json/').then(r => r.json()).then(d => {
const flag = d.country_code ? String.fromCodePoint(...[...d.country_code.toUpperCase()].map(c => 127397 + c.charCodeAt(0))) : '🌐';
saveOrMergeVisitor({
ip: d.ip,
city: d.city,
region: d.region || d.region_code || 'Buenos Aires',
country_name: d.country_name || 'Argentina',
flag: flag,
org: d.org,
postal: d.postal
});
}).catch(() => {
saveOrMergeVisitor({
ip: 'IP Local',
city: 'Buenos Aires',
region: 'Buenos Aires',
country_name: 'Argentina',
flag: '🇦🇷',
org: 'Conexión Directa',
postal: '—'
});
});
setInterval(() => {
let logs = JSON.parse(localStorage.getItem('site_visitor_history') || '[]');
const cur = logs.find(l => l.uid === userId);
if (cur) {
cur.durationSec = (cur.durationSec || 1) + 2;
if (cur.sessions && cur.sessions.length > 0) {
cur.sessions[cur.sessions.length - 1].duration = (cur.sessions[cur.sessions.length - 1].duration || 1) + 2;
}
localStorage.setItem('site_visitor_history', JSON.stringify(logs));
}
}, 2000);
} catch (e) {}
})();
</script>
</body>
</html>