Auto commit: 2026-06-30T00:36:43.730Z
This commit is contained in:
Flatlogic Bot
parent
06ee114953
commit
fb5b5166c4
@ -25,9 +25,23 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="tech-loader" aria-hidden="true">
|
||||
<div class="loader-orb"></div>
|
||||
<span>Conectando soluciones digitales...</span>
|
||||
<div id="techLoader" class="tech-loader" role="status" aria-live="polite" aria-label="Cargando App Tecno Store">
|
||||
<div class="loader-grid" aria-hidden="true"></div>
|
||||
<div class="loader-particles" aria-hidden="true">
|
||||
<span></span><span></span><span></span><span></span><span></span><span></span>
|
||||
</div>
|
||||
<div class="loader-card">
|
||||
<div class="loader-brand"><span class="loader-logo">APP</span><span>Tecno Store</span></div>
|
||||
<div class="loader-core" aria-hidden="true">
|
||||
<span class="loader-ring loader-ring-outer"></span>
|
||||
<span class="loader-ring loader-ring-inner"></span>
|
||||
<span class="loader-scan"></span>
|
||||
<span class="loader-chip"><i class="bi bi-cpu"></i></span>
|
||||
</div>
|
||||
<p class="loader-title">Cargando experiencia tecnológica</p>
|
||||
<p class="loader-copy">Conectando catálogo, pagos QR y soporte WhatsApp...</p>
|
||||
<div class="loader-progress" aria-hidden="true"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav class="navbar navbar-expand-lg navbar-dark app-nav sticky-top">
|
||||
@ -70,6 +84,17 @@
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', function () {
|
||||
var loader = document.getElementById('techLoader');
|
||||
if (!loader) return;
|
||||
window.setTimeout(function () { loader.classList.add('is-hidden'); }, 450);
|
||||
});
|
||||
window.setTimeout(function () {
|
||||
var loader = document.getElementById('techLoader');
|
||||
if (loader) loader.classList.add('is-hidden');
|
||||
}, 3200);
|
||||
</script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
|
||||
|
||||
@ -67,24 +67,191 @@ a { text-decoration: none; }
|
||||
z-index: 2000;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
gap: 1rem;
|
||||
background: radial-gradient(circle, #0b3149, var(--navy));
|
||||
color: #dff8ff;
|
||||
animation: loaderExit .9s ease 1.35s forwards;
|
||||
overflow: hidden;
|
||||
color: #e9fbff;
|
||||
background:
|
||||
radial-gradient(circle at 18% 16%, rgba(0, 209, 255, .26), transparent 28rem),
|
||||
radial-gradient(circle at 86% 78%, rgba(0, 242, 169, .22), transparent 26rem),
|
||||
linear-gradient(135deg, #061724 0%, #082c43 58%, #031019 100%);
|
||||
isolation: isolate;
|
||||
pointer-events: none;
|
||||
animation: loaderAutoExit .7s ease 3s forwards;
|
||||
}
|
||||
.loader-orb {
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
.tech-loader::before,
|
||||
.tech-loader::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: -18%;
|
||||
z-index: -1;
|
||||
}
|
||||
.tech-loader::before {
|
||||
opacity: .2;
|
||||
background-image:
|
||||
linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px);
|
||||
background-size: 46px 46px;
|
||||
transform: perspective(720px) rotateX(62deg) scale(1.15);
|
||||
animation: loaderGridMove 5.5s linear infinite;
|
||||
}
|
||||
.tech-loader::after {
|
||||
opacity: .55;
|
||||
background: linear-gradient(180deg, transparent 0%, rgba(0, 209, 255, .16) 48%, rgba(0, 242, 169, .12) 52%, transparent 100%);
|
||||
height: 32%;
|
||||
top: -34%;
|
||||
animation: loaderSweep 2.2s ease-in-out infinite;
|
||||
}
|
||||
.tech-loader.is-hidden {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: scale(1.015);
|
||||
transition: opacity .55s ease, visibility .55s ease, transform .55s ease;
|
||||
}
|
||||
.loader-grid {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background:
|
||||
radial-gradient(circle, rgba(255,255,255,.22) 1px, transparent 1.5px) 0 0 / 34px 34px,
|
||||
linear-gradient(120deg, transparent 40%, rgba(0,209,255,.10), transparent 60%);
|
||||
mask-image: radial-gradient(circle at center, #000 0%, transparent 72%);
|
||||
opacity: .32;
|
||||
}
|
||||
.loader-card {
|
||||
position: relative;
|
||||
width: min(90vw, 440px);
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
border: 1px solid rgba(255,255,255,.16);
|
||||
border-radius: 2rem;
|
||||
background: linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.055));
|
||||
box-shadow: 0 28px 90px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255,255,255,.18);
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
.loader-brand {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: .7rem;
|
||||
margin-bottom: 1.25rem;
|
||||
font-family: 'Space Grotesk', 'Manrope', sans-serif;
|
||||
font-weight: 800;
|
||||
letter-spacing: -.03em;
|
||||
}
|
||||
.loader-logo {
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
width: 2.8rem;
|
||||
height: 2.8rem;
|
||||
border-radius: 1rem;
|
||||
color: var(--navy);
|
||||
background: linear-gradient(135deg, var(--secondary), var(--primary));
|
||||
box-shadow: 0 0 34px rgba(0, 209, 255, .42);
|
||||
font-size: .85rem;
|
||||
}
|
||||
.loader-core {
|
||||
position: relative;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 9.8rem;
|
||||
height: 9.8rem;
|
||||
margin: 0 auto 1.25rem;
|
||||
}
|
||||
.loader-core::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 16%;
|
||||
border-radius: 50%;
|
||||
border: 2px solid rgba(255,255,255,.15);
|
||||
background: conic-gradient(from 0deg, var(--primary), var(--secondary), transparent, var(--primary));
|
||||
mask: radial-gradient(circle, transparent 48%, #000 50%);
|
||||
animation: spin 1s linear infinite;
|
||||
background: radial-gradient(circle, rgba(0, 209, 255, .32), transparent 66%);
|
||||
filter: blur(8px);
|
||||
animation: loaderPulse 1.8s ease-in-out infinite;
|
||||
}
|
||||
.tech-loader span { margin-top: 7rem; position: absolute; font-weight: 800; letter-spacing: .02em; }
|
||||
.loader-ring {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background: conic-gradient(from 0deg, var(--primary), var(--secondary), transparent 34%, var(--accent), var(--primary));
|
||||
-webkit-mask: radial-gradient(circle, transparent 56%, #000 58%);
|
||||
mask: radial-gradient(circle, transparent 56%, #000 58%);
|
||||
}
|
||||
.loader-ring-outer { inset: 0; animation: spin 1.25s linear infinite; }
|
||||
.loader-ring-inner { inset: 1.45rem; opacity: .72; animation: spinReverse 1.8s linear infinite; }
|
||||
.loader-scan {
|
||||
position: absolute;
|
||||
inset: 2.35rem;
|
||||
border: 1px solid rgba(0, 242, 169, .55);
|
||||
border-radius: 1.35rem;
|
||||
background:
|
||||
linear-gradient(90deg, transparent, rgba(0, 242, 169, .22), transparent),
|
||||
rgba(6, 23, 36, .58);
|
||||
box-shadow: inset 0 0 22px rgba(0, 242, 169, .18);
|
||||
animation: loaderScan 1.6s ease-in-out infinite;
|
||||
}
|
||||
.loader-chip {
|
||||
position: relative;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 3.8rem;
|
||||
height: 3.8rem;
|
||||
border-radius: 1.15rem;
|
||||
color: var(--navy);
|
||||
background: linear-gradient(135deg, var(--accent), var(--secondary));
|
||||
box-shadow: 0 0 34px rgba(0, 242, 169, .38);
|
||||
font-size: 1.55rem;
|
||||
animation: chipFloat 1.9s ease-in-out infinite;
|
||||
}
|
||||
.loader-title {
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
font-family: 'Space Grotesk', 'Manrope', sans-serif;
|
||||
font-size: clamp(1.25rem, 4vw, 1.75rem);
|
||||
font-weight: 800;
|
||||
letter-spacing: -.04em;
|
||||
}
|
||||
.loader-copy {
|
||||
margin: .45rem auto 1.25rem;
|
||||
max-width: 30ch;
|
||||
color: rgba(233, 251, 255, .76);
|
||||
font-size: .96rem;
|
||||
}
|
||||
.loader-progress {
|
||||
width: 100%;
|
||||
height: .52rem;
|
||||
overflow: hidden;
|
||||
border-radius: 999px;
|
||||
background: rgba(255,255,255,.11);
|
||||
}
|
||||
.loader-progress span {
|
||||
display: block;
|
||||
width: 46%;
|
||||
height: 100%;
|
||||
border-radius: inherit;
|
||||
background: linear-gradient(90deg, var(--secondary), var(--primary), var(--accent));
|
||||
box-shadow: 0 0 22px rgba(0, 209, 255, .42);
|
||||
animation: loaderProgress 1.55s ease-in-out infinite;
|
||||
}
|
||||
.loader-particles span {
|
||||
position: absolute;
|
||||
width: .55rem;
|
||||
height: .55rem;
|
||||
border-radius: 50%;
|
||||
background: var(--primary);
|
||||
box-shadow: 0 0 22px currentColor;
|
||||
opacity: .7;
|
||||
animation: particleFloat 4.5s ease-in-out infinite;
|
||||
}
|
||||
.loader-particles span:nth-child(1) { left: 14%; top: 22%; color: var(--primary); animation-delay: 0s; }
|
||||
.loader-particles span:nth-child(2) { left: 78%; top: 18%; color: var(--secondary); animation-delay: .35s; }
|
||||
.loader-particles span:nth-child(3) { left: 18%; top: 78%; color: var(--accent); animation-delay: .75s; }
|
||||
.loader-particles span:nth-child(4) { left: 84%; top: 70%; color: var(--primary); animation-delay: 1s; }
|
||||
.loader-particles span:nth-child(5) { left: 49%; top: 10%; color: var(--secondary); animation-delay: 1.25s; }
|
||||
.loader-particles span:nth-child(6) { left: 52%; top: 88%; color: var(--accent); animation-delay: 1.55s; }
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
@keyframes loaderExit { to { opacity: 0; visibility: hidden; } }
|
||||
@keyframes spinReverse { to { transform: rotate(-360deg); } }
|
||||
@keyframes loaderGridMove { to { background-position: 92px 92px; } }
|
||||
@keyframes loaderSweep { 0% { transform: translateY(0); } 100% { transform: translateY(460%); } }
|
||||
@keyframes loaderPulse { 50% { transform: scale(1.12); opacity: .65; } }
|
||||
@keyframes loaderScan { 50% { transform: scale(.92); border-radius: 50%; } }
|
||||
@keyframes chipFloat { 50% { transform: translateY(-6px) scale(1.04); } }
|
||||
@keyframes particleFloat { 50% { transform: translate3d(18px, -24px, 0) scale(1.45); opacity: 1; } }
|
||||
@keyframes loaderProgress { 0% { transform: translateX(-115%); } 100% { transform: translateX(235%); } }
|
||||
@keyframes loaderAutoExit { to { opacity: 0; visibility: hidden; } }
|
||||
|
||||
.hero-section {
|
||||
position: relative;
|
||||
|
||||
@ -67,24 +67,191 @@ a { text-decoration: none; }
|
||||
z-index: 2000;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
gap: 1rem;
|
||||
background: radial-gradient(circle, #0b3149, var(--navy));
|
||||
color: #dff8ff;
|
||||
animation: loaderExit .9s ease 1.35s forwards;
|
||||
overflow: hidden;
|
||||
color: #e9fbff;
|
||||
background:
|
||||
radial-gradient(circle at 18% 16%, rgba(0, 209, 255, .26), transparent 28rem),
|
||||
radial-gradient(circle at 86% 78%, rgba(0, 242, 169, .22), transparent 26rem),
|
||||
linear-gradient(135deg, #061724 0%, #082c43 58%, #031019 100%);
|
||||
isolation: isolate;
|
||||
pointer-events: none;
|
||||
animation: loaderAutoExit .7s ease 3s forwards;
|
||||
}
|
||||
.loader-orb {
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
.tech-loader::before,
|
||||
.tech-loader::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: -18%;
|
||||
z-index: -1;
|
||||
}
|
||||
.tech-loader::before {
|
||||
opacity: .2;
|
||||
background-image:
|
||||
linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px);
|
||||
background-size: 46px 46px;
|
||||
transform: perspective(720px) rotateX(62deg) scale(1.15);
|
||||
animation: loaderGridMove 5.5s linear infinite;
|
||||
}
|
||||
.tech-loader::after {
|
||||
opacity: .55;
|
||||
background: linear-gradient(180deg, transparent 0%, rgba(0, 209, 255, .16) 48%, rgba(0, 242, 169, .12) 52%, transparent 100%);
|
||||
height: 32%;
|
||||
top: -34%;
|
||||
animation: loaderSweep 2.2s ease-in-out infinite;
|
||||
}
|
||||
.tech-loader.is-hidden {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: scale(1.015);
|
||||
transition: opacity .55s ease, visibility .55s ease, transform .55s ease;
|
||||
}
|
||||
.loader-grid {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background:
|
||||
radial-gradient(circle, rgba(255,255,255,.22) 1px, transparent 1.5px) 0 0 / 34px 34px,
|
||||
linear-gradient(120deg, transparent 40%, rgba(0,209,255,.10), transparent 60%);
|
||||
mask-image: radial-gradient(circle at center, #000 0%, transparent 72%);
|
||||
opacity: .32;
|
||||
}
|
||||
.loader-card {
|
||||
position: relative;
|
||||
width: min(90vw, 440px);
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
border: 1px solid rgba(255,255,255,.16);
|
||||
border-radius: 2rem;
|
||||
background: linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.055));
|
||||
box-shadow: 0 28px 90px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255,255,255,.18);
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
.loader-brand {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: .7rem;
|
||||
margin-bottom: 1.25rem;
|
||||
font-family: 'Space Grotesk', 'Manrope', sans-serif;
|
||||
font-weight: 800;
|
||||
letter-spacing: -.03em;
|
||||
}
|
||||
.loader-logo {
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
width: 2.8rem;
|
||||
height: 2.8rem;
|
||||
border-radius: 1rem;
|
||||
color: var(--navy);
|
||||
background: linear-gradient(135deg, var(--secondary), var(--primary));
|
||||
box-shadow: 0 0 34px rgba(0, 209, 255, .42);
|
||||
font-size: .85rem;
|
||||
}
|
||||
.loader-core {
|
||||
position: relative;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 9.8rem;
|
||||
height: 9.8rem;
|
||||
margin: 0 auto 1.25rem;
|
||||
}
|
||||
.loader-core::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 16%;
|
||||
border-radius: 50%;
|
||||
border: 2px solid rgba(255,255,255,.15);
|
||||
background: conic-gradient(from 0deg, var(--primary), var(--secondary), transparent, var(--primary));
|
||||
mask: radial-gradient(circle, transparent 48%, #000 50%);
|
||||
animation: spin 1s linear infinite;
|
||||
background: radial-gradient(circle, rgba(0, 209, 255, .32), transparent 66%);
|
||||
filter: blur(8px);
|
||||
animation: loaderPulse 1.8s ease-in-out infinite;
|
||||
}
|
||||
.tech-loader span { margin-top: 7rem; position: absolute; font-weight: 800; letter-spacing: .02em; }
|
||||
.loader-ring {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background: conic-gradient(from 0deg, var(--primary), var(--secondary), transparent 34%, var(--accent), var(--primary));
|
||||
-webkit-mask: radial-gradient(circle, transparent 56%, #000 58%);
|
||||
mask: radial-gradient(circle, transparent 56%, #000 58%);
|
||||
}
|
||||
.loader-ring-outer { inset: 0; animation: spin 1.25s linear infinite; }
|
||||
.loader-ring-inner { inset: 1.45rem; opacity: .72; animation: spinReverse 1.8s linear infinite; }
|
||||
.loader-scan {
|
||||
position: absolute;
|
||||
inset: 2.35rem;
|
||||
border: 1px solid rgba(0, 242, 169, .55);
|
||||
border-radius: 1.35rem;
|
||||
background:
|
||||
linear-gradient(90deg, transparent, rgba(0, 242, 169, .22), transparent),
|
||||
rgba(6, 23, 36, .58);
|
||||
box-shadow: inset 0 0 22px rgba(0, 242, 169, .18);
|
||||
animation: loaderScan 1.6s ease-in-out infinite;
|
||||
}
|
||||
.loader-chip {
|
||||
position: relative;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 3.8rem;
|
||||
height: 3.8rem;
|
||||
border-radius: 1.15rem;
|
||||
color: var(--navy);
|
||||
background: linear-gradient(135deg, var(--accent), var(--secondary));
|
||||
box-shadow: 0 0 34px rgba(0, 242, 169, .38);
|
||||
font-size: 1.55rem;
|
||||
animation: chipFloat 1.9s ease-in-out infinite;
|
||||
}
|
||||
.loader-title {
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
font-family: 'Space Grotesk', 'Manrope', sans-serif;
|
||||
font-size: clamp(1.25rem, 4vw, 1.75rem);
|
||||
font-weight: 800;
|
||||
letter-spacing: -.04em;
|
||||
}
|
||||
.loader-copy {
|
||||
margin: .45rem auto 1.25rem;
|
||||
max-width: 30ch;
|
||||
color: rgba(233, 251, 255, .76);
|
||||
font-size: .96rem;
|
||||
}
|
||||
.loader-progress {
|
||||
width: 100%;
|
||||
height: .52rem;
|
||||
overflow: hidden;
|
||||
border-radius: 999px;
|
||||
background: rgba(255,255,255,.11);
|
||||
}
|
||||
.loader-progress span {
|
||||
display: block;
|
||||
width: 46%;
|
||||
height: 100%;
|
||||
border-radius: inherit;
|
||||
background: linear-gradient(90deg, var(--secondary), var(--primary), var(--accent));
|
||||
box-shadow: 0 0 22px rgba(0, 209, 255, .42);
|
||||
animation: loaderProgress 1.55s ease-in-out infinite;
|
||||
}
|
||||
.loader-particles span {
|
||||
position: absolute;
|
||||
width: .55rem;
|
||||
height: .55rem;
|
||||
border-radius: 50%;
|
||||
background: var(--primary);
|
||||
box-shadow: 0 0 22px currentColor;
|
||||
opacity: .7;
|
||||
animation: particleFloat 4.5s ease-in-out infinite;
|
||||
}
|
||||
.loader-particles span:nth-child(1) { left: 14%; top: 22%; color: var(--primary); animation-delay: 0s; }
|
||||
.loader-particles span:nth-child(2) { left: 78%; top: 18%; color: var(--secondary); animation-delay: .35s; }
|
||||
.loader-particles span:nth-child(3) { left: 18%; top: 78%; color: var(--accent); animation-delay: .75s; }
|
||||
.loader-particles span:nth-child(4) { left: 84%; top: 70%; color: var(--primary); animation-delay: 1s; }
|
||||
.loader-particles span:nth-child(5) { left: 49%; top: 10%; color: var(--secondary); animation-delay: 1.25s; }
|
||||
.loader-particles span:nth-child(6) { left: 52%; top: 88%; color: var(--accent); animation-delay: 1.55s; }
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
@keyframes loaderExit { to { opacity: 0; visibility: hidden; } }
|
||||
@keyframes spinReverse { to { transform: rotate(-360deg); } }
|
||||
@keyframes loaderGridMove { to { background-position: 92px 92px; } }
|
||||
@keyframes loaderSweep { 0% { transform: translateY(0); } 100% { transform: translateY(460%); } }
|
||||
@keyframes loaderPulse { 50% { transform: scale(1.12); opacity: .65; } }
|
||||
@keyframes loaderScan { 50% { transform: scale(.92); border-radius: 50%; } }
|
||||
@keyframes chipFloat { 50% { transform: translateY(-6px) scale(1.04); } }
|
||||
@keyframes particleFloat { 50% { transform: translate3d(18px, -24px, 0) scale(1.45); opacity: 1; } }
|
||||
@keyframes loaderProgress { 0% { transform: translateX(-115%); } 100% { transform: translateX(235%); } }
|
||||
@keyframes loaderAutoExit { to { opacity: 0; visibility: hidden; } }
|
||||
|
||||
.hero-section {
|
||||
position: relative;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user