Spaces:

Connectaksa
/

glowing-frame-fixer-pro

Running

App Files Files Community

Connectaksa commited on Oct 29, 2025

Commit

71c9d6d

verified ·

1 Parent(s): 0aeb01e

make the code more clean

Browse files

Files changed (3) hide show

index.html +3 -144
script.js +54 -0
style.css +189 -18

index.html CHANGED Viewed

@@ -1,153 +1,12 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>Why Consulta</title>
-  <style>
-    :root{
-      --bg:#06294a;         /* primary */
-      --accent:#008bca;     /* accent */
-      --text-1:rgba(255,255,255,.92);
-      --text-2:rgba(255,255,255,.78);
-      --accent-20:rgba(0,139,202,.20);
-      --accent-30:rgba(0,139,202,.30);
-      --accent-40:rgba(0,139,202,.40);
-      --shadow-strong:0 10px 30px rgba(0,0,0,.5);
-      /* fluid scales */
-      --pad-x:clamp(1rem, 5vw, 10vw);
-      --pad-y:clamp(2rem, 6vw, 4rem);
-      --h1:clamp(1.5rem, 3vw + 1rem, 2.5rem);
-      --lead:clamp(1rem, .7vw + .9rem, 1.1rem);
-      --feature:clamp(1rem, .6vw + .9rem, 1.05rem);
-    }
-    *{box-sizing:border-box}
-    html,body{margin:0;padding:0;background:var(--bg);font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif}
-    img{max-width:100%;height:auto;display:block}
-    .whyconsulta{position:relative;overflow:hidden;min-height:100vh;background:var(--bg)}
-    /* Particles */
-    .particles{position:absolute;inset:0;pointer-events:none}
-    .particle{
-      position:absolute;border-radius:999px;
-      background:var(--accent-30);
-      box-shadow:0 0 10px 2px var(--accent-20);
-      animation:floatY 6s ease-in-out infinite, floatFade 6s ease-in-out infinite;
-    }
-    @keyframes floatY{0%{transform:translateY(0)}50%{transform:translateY(-30px)}100%{transform:translateY(0)}}
-    @keyframes floatFade{0%,100%{opacity:.3}50%{opacity:.6}}
-    .radial-overlay{
-      position:absolute;inset:0;pointer-events:none;
-      background:radial-gradient(circle at 30% 50%, var(--accent-20) 0%, transparent 50%);
-      animation:overlayPulse 8s ease-in-out infinite;
-    }
-    @keyframes overlayPulse{0%,100%{opacity:.3}50%{opacity:.5}}
-    .section{
-      position:relative;
-      display:grid;
-      grid-template-columns: 1fr 1fr;
-      gap:clamp(1rem, 3vw, 2rem);
-      padding:var(--pad-y) var(--pad-x);
-      align-items:center;
-    }
-    @media (max-width: 880px){
-      .section{grid-template-columns:1fr}
-    }
-    .content{max-width:60ch}
-    .visual{text-align:center}
-    /* Heading */
-    h1{
-      margin:0 0 1rem 0;color:var(--text-1);
-      font-weight:800;letter-spacing:.2px;font-size:var(--h1);line-height:1.15
-    }
-    .title-accent{color:var(--accent);position:relative;display:inline-block}
-    .underline{
-      height:4px;border-radius:999px;margin-top:.5rem;overflow:hidden;
-      background:linear-gradient(90deg,var(--accent),var(--accent));
-      background-size:200% 100%;position:relative
-    }
-    .underline .runner{
-      position:absolute;inset:0;background:linear-gradient(90deg,var(--accent),var(--accent));
-      background-size:200% 100%;animation:underlineRun 3s linear infinite
-    }
-    @keyframes underlineRun{0%{background-position:0% 50%}100%{background-position:100% 50%}}
-    .lead{color:var(--text-2);font-size:var(--lead);line-height:1.65;margin:0 0 1rem 0}
-    /* Features */
-    .features{list-style:none;padding:0;margin:1.25rem 0 0 0;display:flex;flex-direction:column;gap:clamp(.75rem,1.6vw,1rem)}
-    .feature{display:flex;align-items:center;gap:.75rem;position:relative;transform:translateX(-20px);opacity:0;transition:.5s ease}
-    .feature.in-view{transform:translateX(0);opacity:1}
-    .feature .icon-wrap{position:relative;display:inline-flex}
-    .feature .icon-glow{position:absolute;inset:0;border-radius:999px;filter:blur(6px);opacity:.6;background:var(--accent-40);animation:glowPulse 2s ease-in-out infinite}
-    @keyframes glowPulse{0%,100%{opacity:.5}50%{opacity:.8}}
-    .feature .text{color:var(--text-2);font-size:var(--feature)}
-    .feature:hover{transform:translateX(10px)}
-    /* Visual card with glowing border + parallax */
-    .frame{position:relative;display:inline-block;will-change:transform}
-    .glow-border{
-      position:absolute;inset:-6px;border-radius:1rem;filter:blur(8px);opacity:.4;
-      background:linear-gradient(45deg,var(--accent),var(--accent));
-      background-size:300% 300%;
-      animation:borderFlow 5s linear infinite;
-      z-index:0;
-    }
-@keyframes borderFlow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
-    .image-card{
-      position:relative;border-radius:1rem;overflow:hidden;box-shadow:var(--shadow-strong);z-index:1;
-      max-width:min(560px, 100%);
-      margin-inline:auto;
-      transform:translateZ(0); /* Create stacking context */
-    }
-.image-shimmer{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);background-size:200% 100%;transform:translateZ(0);opacity:0;transition:opacity .2s ease}
-    .frame:hover .image-shimmer{opacity:1;animation:shimmer 1s linear forwards}
-    @keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
-    /* In-view reveal helpers */
-    .reveal-up{opacity:0;transform:translateY(20px);transition:.6s ease}
-    .reveal-up.in-view{opacity:1;transform:translateY(0)}
-    .reveal-left{opacity:0;transform:translateX(-50px);transition:.8s ease}
-    .reveal-left.in-view{opacity:1;transform:translateX(0)}
-    .reveal-scale{opacity:0;transform:scale(.9);transition:.8s ease}
-    .reveal-scale.in-view{opacity:1;transform:scale(1)}
-    /* Ticker */
-    .ticker-wrap{
-      width:110%;transform:rotate(-2deg);padding:clamp(.9rem,2.2vw,20px) 0;margin:clamp(1.25rem, 3.5vw, 2.5rem) -5% 0;
-      position:relative;overflow:hidden;
-      background:linear-gradient(90deg,var(--accent),#39a9df,var(--accent),#39a9df,var(--accent));
-      background-size:200% 100%;
-      animation:tickerBg 8s linear infinite;
-    }
-    @keyframes tickerBg{0%{background-position:0% 50%}50%{background-position:200% 50%}100%{background-position:0% 50%}}
-    .ticker-gloss{position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);background-size:200% 100%;animation:gloss 3s linear infinite;pointer-events:none}
-    @keyframes gloss{0%{background-position:0% 0}100%{background-position:200% 0}}
-    .ticker{position:relative;display:flex;white-space:nowrap;will-change:transform;animation:marquee 18s linear infinite}
-    .ticker span{display:inline-flex;align-items:center;gap:.5rem;margin:0 clamp(.75rem, 2vw, 1.25rem);color:#012537;font-size:clamp(1rem, .8vw + .9rem, 1.2rem);text-shadow:0 1px 2px rgba(255,255,255,.3)}
-    .ticker .star{display:inline-block;animation:spin 2s linear infinite}
-    @keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
-    @keyframes spin{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(1.2)}100%{transform:rotate(360deg) scale(1)}}
-    .parallax{transform:translateY(var(--img-ty,0px)) rotate(var(--img-r,0deg));transition:transform .05s linear}
-    /* Respect reduced motion */
-    @media (prefers-reduced-motion: reduce){
-      *{animation:none!important;transition:none!important}
-      .parallax{transform:none!important}
-    }
-  </style>
 </head>
 <body>
   <div class="whyconsulta">

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>Why Consulta</title>
+  <link rel="stylesheet" href="style.css">
+  <link rel="stylesheet" href="components/animations.css">
 </head>
 <body>
   <div class="whyconsulta">

script.js ADDED Viewed

	@@ -0,0 +1,54 @@

+```javascript
+// Initialize particles
+function initParticles() {
+  const particleHost = document.getElementById('particles');
+  const VW = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
+  const VH = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
+  const BASE = 12;
+  const density = Math.round((VW * VH) / (900 * 900));
+  const PARTICLE_COUNT = Math.max(8, Math.min(22, BASE + density * 4));
+  const make = (t, c) => {
+    const e = document.createElement(t);
+    if (c) e.className = c;
+    return e;
+  };
+  const rand = (a, b) => Math.random() * (b - a) + a;
+  for (let i = 0; i < PARTICLE_COUNT; i++) {
+    const p = make('div', 'particle');
+    const size = rand(2, 6);
+    p.style.width = p.style.height = size + 'px';
+    p.style.left = rand(0, 100) + '%';
+    p.style.top = rand(0, 100) + '%';
+    p.style.animationDelay = rand(0, 5) + 's';
+    const dur = (4 + Math.random() * 3).toFixed(2) + 's';
+    p.style.animationDuration = dur;
+    particleHost.appendChild(p);
+  }
+}
+// Initialize intersection observer for reveals
+function initReveals() {
+  const io = new IntersectionObserver((entries) => {
+    entries.forEach(e => {
+      if (e.isIntersecting) {
+        e.target.classList.add('in-view');
+        io.unobserve(e.target);
+      }
+    });
+  }, { root: null, rootMargin: '-100px', threshold: 0 });
+  document.querySelectorAll('.reveal-up, .reveal-left, .reveal-scale, .feature').forEach(el => io.observe(el));
+  document.querySelectorAll('.feature').forEach((el, i) => {
+    el.style.transitionDelay = (0.6 + i * 0.1) + 's';
+  });
+  document.querySelectorAll('.reveal-up').forEach((el, i) => {
+    if (!el.style.transitionDelay) {
+      el.style.transitionDelay = (0.2 + i * 0.2) + 's';
+  });
+}
+// Initialize parallax effect
+function init

style.css CHANGED Viewed

@@ -1,28 +1,199 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
 h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+:root {
+  --bg: #06294a;
+  --accent: #008bca;
+  --text-1: rgba(255, 255, 255, 0.92);
+  --text-2: rgba(255, 255, 255, 0.78);
+  --accent-20: rgba(0, 139, 202, 0.2);
+  --accent-30: rgba(0, 139, 202, 0.3);
+  --accent-40: rgba(0, 139, 202, 0.4);
+  --shadow-strong: 0 10px 30px rgba(0, 0, 0, 0.5);
+  --pad-x: clamp(1rem, 5vw, 10vw);
+  --pad-y: clamp(2rem, 6vw, 4rem);
+  --h1: clamp(1.5rem, 3vw + 1rem, 2.5rem);
+  --lead: clamp(1rem, 0.7vw + 0.9rem, 1.1rem);
+  --feature: clamp(1rem, 0.6vw + 0.9rem, 1.05rem);
+}
+* {
+  box-sizing: border-box;
+}
+html, body {
+  margin: 0;
+  padding: 0;
+  background: var(--bg);
+  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
+}
+img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+.whyconsulta {
+  position: relative;
+  overflow: hidden;
+  min-height: 100vh;
+  background: var(--bg);
 }
+/* Layout */
+.section {
+  position: relative;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: clamp(1rem, 3vw, 2rem);
+  padding: var(--pad-y) var(--pad-x);
+  align-items: center;
+}
+@media (max-width: 880px) {
+  .section {
+    grid-template-columns: 1fr;
+  }
+}
+.content {
+  max-width: 60ch;
+}
+.visual {
+  text-align: center;
+}
+/* Typography */
 h1 {
+  margin: 0 0 1rem 0;
+  color: var(--text-1);
+  font-weight: 800;
+  letter-spacing: 0.2px;
+  font-size: var(--h1);
+  line-height: 1.15;
 }
+.title-accent {
+  color: var(--accent);
+  position: relative;
+  display: inline-block;
 }
+.lead {
+  color: var(--text-2);
+  font-size: var(--lead);
+  line-height: 1.65;
+  margin: 0 0 1rem 0;
 }
+/* Features */
+.features {
+  list-style: none;
+  padding: 0;
+  margin: 1.25rem 0 0 0;
+  display: flex;
+  flex-direction: column;
+  gap: clamp(0.75rem, 1.6vw, 1rem);
 }
+.feature {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  position: relative;
+  transform: translateX(-20px);
+  opacity: 0;
+  transition: 0.5s ease;
+}
+.feature.in-view {
+  transform: translateX(0);
+  opacity: 1;
+}
+.feature .icon-wrap {
+  position: relative;
+  display: inline-flex;
+}
+.feature .icon-glow {
+  position: absolute;
+  inset: 0;
+  border-radius: 999px;
+  filter: blur(6px);
+  opacity: 0.6;
+  background: var(--accent-40);
+}
+.feature .text {
+  color: var(--text-2);
+  font-size: var(--feature);
+}
+.feature:hover {
+  transform: translateX(10px);
+}
+/* Visual card */
+.frame {
+  position: relative;
+  display: inline-block;
+  will-change: transform;
+}
+.glow-border {
+  position: absolute;
+  inset: -6px;
+  border-radius: 1rem;
+  filter: blur(8px);
+  opacity: 0.4;
+  background: linear-gradient(45deg, var(--accent), var(--accent));
+  background-size: 300% 300%;
+  z-index: 0;
+}
+.image-card {
+  position: relative;
+  border-radius: 1rem;
+  overflow: hidden;
+  box-shadow: var(--shadow-strong);
+  z-index: 1;
+  max-width: min(560px, 100%);
+  margin-inline: auto;
+  transform: translateZ(0);
+}
+.image-shimmer {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
+  background-size: 200% 100%;
+  transform: translateZ(0);
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+.frame:hover .image-shimmer {
+  opacity: 1;
+}
+.parallax {
+  transform: translateY(var(--img-ty, 0px)) rotate(var(--img-r, 0deg));
+  transition: transform 0.05s linear;
+}
+/* Respect reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation: none !important;
+    transition: none !important;
+  }
+  .parallax {
+    transform: none !important;
+  }
+}