Doormile/doormile-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

logistic uploaded for doormile

Browse Source
This commit is contained in:
Kishore Kumar C
2026-04-02 18:19:12 +05:30
parent 60a53e6614
commit 3b9d28fbae
278 changed files with 222034 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

969
connected-log.php Normal file
View File

@@ -0,0 +1,969 @@
<link href="https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600&family=Barlow+Condensed:wght@700;800;900&display=swap" rel="stylesheet">
<style>
/* ══════════════════════════════════════════════
ALL STYLES SCOPED TO .cs-section
══════════════════════════════════════════════ */
.cs-section *,
.cs-section *::before,
.cs-section *::after { box-sizing: border-box; }
.cs-section {
--cs-red: #c01227;
--cs-red-light: #fdf0f2;
--cs-red-mid: rgba(192,18,39,0.12);
--cs-green: #15a056;
--cs-blue: #1e6ef5;
--cs-dark: #111827;
--cs-mid: #374151;
--cs-muted: #9ca3af;
--cs-border: rgba(0,0,0,0.07);
--cs-white: #ffffff;
width: 100%;
max-width: 1440px;
margin: 0 auto;
padding: 96px 40px 108px;
position: relative;
font-family: 'Barlow', sans-serif;
color: var(--cs-dark);
}
/* subtle grid bg */
.cs-section::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(to right, rgba(0,0,0,0.03) 1px, transparent 1px),
linear-gradient(to bottom, rgba(0,0,0,0.03) 1px, transparent 1px);
background-size: 72px 72px;
pointer-events: none;
mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 30%, transparent 100%);
-webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 30%, transparent 100%);
z-index: 0;
}
/* ── HEADER ── */
.cs-header {
text-align: center;
margin-bottom: 64px;
position: relative;
z-index: 1;
}
.cs-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: 'Manrope', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 3.5px;
text-transform: uppercase;
color: var(--cs-red);
margin-bottom: 20px;
opacity: 0;
transform: translateY(16px);
transition: opacity .55s ease, transform .55s ease;
}
.cs-eyebrow::before, .cs-eyebrow::after {
content: '';
display: block;
width: 28px; height: 1px;
background: var(--cs-red);
}
.cs-title {
font-family: 'Manrope', sans-serif;
font-size: clamp(38px, 5.5vw, 68px);
font-weight: 900;
line-height: 1.02;
letter-spacing: -1.5px;
color: var(--cs-dark);
margin: 0 0 20px;
opacity: 0;
transform: translateY(28px);
transition: opacity .65s ease .12s, transform .65s ease .12s;
}
.cs-title em {
font-style: normal;
color: var(--cs-red);
position: relative;
}
.cs-title em::after {
content: '';
position: absolute;
bottom: 2px; left: 0; right: 0;
height: 3px;
background: var(--cs-red);
border-radius: 2px;
transform: scaleX(0);
transform-origin: left;
transition: transform .85s cubic-bezier(.16,1,.3,1) .9s;
}
.cs-subtitle {
font-size: 16px;
color: var(--cs-muted);
line-height: 1.75;
max-width: 520px;
margin: 0 auto;
opacity: 0;
transform: translateY(16px);
transition: opacity .65s ease .26s, transform .65s ease .26s;
}
/* ── IN-VIEW TRIGGERS ── */
.cs-section.cs-live .cs-eyebrow { opacity: 1; transform: translateY(0); }
.cs-section.cs-live .cs-title { opacity: 1; transform: translateY(0); }
.cs-section.cs-live .cs-title em::after { transform: scaleX(1); }
.cs-section.cs-live .cs-subtitle { opacity: 1; transform: translateY(0); }
/* ── MAIN CARD SHELL ── */
.cs-card-shell {
position: relative;
z-index: 1;
background: var(--cs-white);
border-radius: 28px;
overflow: hidden;
box-shadow: 0 8px 60px rgba(0,0,0,0.1);
opacity: 0;
transform: translateY(44px);
transition: opacity .8s cubic-bezier(.16,1,.3,1) .3s,
transform .8s cubic-bezier(.16,1,.3,1) .3s;
}
.cs-section.cs-live .cs-card-shell { opacity: 1; transform: translateY(0); }
/* ── MILESTONE CARDS ROW ── */
.cs-milestones {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.cs-mile {
position: relative;
overflow: hidden;
cursor: default;
opacity: 0;
transform: translateY(20px);
transition:
opacity .55s ease,
transform .55s cubic-bezier(.16,1,.3,1),
background .3s;
}
.cs-mile:not(:last-child) { border-right: 1px solid var(--cs-border); }
.cs-section.cs-live .cs-mile:nth-child(1) { opacity:1; transform:translateY(0); transition-delay:.5s; }
.cs-section.cs-live .cs-mile:nth-child(2) { opacity:1; transform:translateY(0); transition-delay:.64s; }
.cs-section.cs-live .cs-mile:nth-child(3) { opacity:1; transform:translateY(0); transition-delay:.78s; }
/* image layer (revealed on hover) */
.cs-mile-img {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
opacity: 0;
transform: scale(1.06);
transition: opacity .5s ease, transform .6s ease;
z-index: 0;
}
.cs-mile-img::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(160deg, rgba(253, 253, 253, 0.85) 0%, rgba(17,24,39,0.9) 100%);
}
.cs-mile:hover .cs-mile-img { opacity: 1; transform: scale(1); }
/* content */
.cs-mile-content {
position: relative;
z-index: 1;
padding: 36px 32px 34px;
}
/* icon */
.cs-mile-icon {
width: 56px; height: 56px;
border-radius: 16px;
display: flex; align-items: center; justify-content: center;
margin-bottom: 22px;
transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s;
}
.cs-mile:hover .cs-mile-icon {
transform: scale(1.1) rotate(-6deg);
box-shadow: 0 10px 30px rgba(0,0,0,0.28);
}
.cs-mile-icon svg {
width: 24px; height: 24px;
stroke: #fff; fill: none;
stroke-width: 1.9;
stroke-linecap: round; stroke-linejoin: round;
}
/* tag */
.cs-mile-tag {
font-family: 'Manrope', sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 6px;
transition: color .3s;
}
.cs-mile-tag::before {
content: '';
display: inline-block;
width: 20px; height: 1.5px;
border-radius: 2px;
background: currentColor;
transition: width .4s cubic-bezier(.16,1,.3,1);
}
.cs-mile:hover .cs-mile-tag::before { width: 34px; }
.cs-mile-name {
font-family: 'Manrope', sans-serif;
font-size: 24px;
font-weight: 800;
line-height: 1.15;
letter-spacing: -.4px;
margin: 0 0 10px;
transition: color .3s;
}
.cs-mile-desc {
font-size: 13.5px;
line-height: 1.65;
color: var(--cs-muted);
margin: 0;
transition: color .3s;
}
/* hover → text goes white */
.cs-mile:hover .cs-mile-tag,
.cs-mile:hover .cs-mile-name { color: rgba(255,255,255,.95); }
.cs-mile:hover .cs-mile-desc { color: rgba(255,255,255,.72); }
/* active (first) mile */
.cs-mile.cs-active { background: var(--cs-red-light); }
/* pulsing badge */
.cs-active-badge {
position: absolute;
top: 20px; right: 20px;
width: 28px; height: 28px;
border-radius: 50%;
background: var(--cs-red);
display: flex; align-items: center; justify-content: center;
animation: cs-ring 2.4s ease-out infinite;
z-index: 2;
}
.cs-active-badge svg {
width: 13px; height: 13px;
stroke: #fff; fill: none;
stroke-width: 2.5;
stroke-linecap: round; stroke-linejoin: round;
}
@keyframes cs-ring {
0% { box-shadow: 0 0 0 0 rgba(192,18,39,.45); }
65% { box-shadow: 0 0 0 11px rgba(192,18,39,.0); }
100% { box-shadow: 0 0 0 0 rgba(192,18,39,.0); }
}
/* arrow connector between cards */
.cs-arrow {
position: absolute;
top: 50%; right: 0px;
transform: translateY(-50%);
z-index: 10;
width: 26px; height: 26px;
background: var(--cs-white);
border-radius: 50%;
border: 1px solid var(--cs-border);
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
display: flex; align-items: center; justify-content: center;
}
.cs-arrow svg {
width: 10px; height: 10px;
stroke: var(--cs-red); fill: none;
stroke-width: 2.5;
stroke-linecap: round; stroke-linejoin: round;
}
/* ── TRACKER STRIP ── */
.cs-tracker {
border-top: 1px solid var(--cs-border);
padding: 26px 36px;
display: flex;
align-items: center;
gap: 28px;
background: #fafbfc;
opacity: 0;
transform: translateY(14px);
transition: opacity .6s ease 1s, transform .6s ease 1s;
}
.cs-section.cs-live .cs-tracker { opacity: 1; transform: translateY(0); }
.cs-track-icon {
width: 48px; height: 48px;
border-radius: 14px;
background: var(--cs-red-light);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.cs-track-icon svg {
width: 22px; height: 22px;
stroke: var(--cs-red); fill: none;
stroke-width: 1.8;
stroke-linecap: round; stroke-linejoin: round;
}
.cs-track-info { flex-shrink: 0; }
.cs-track-id {
font-size: 11px; color: var(--cs-muted);
letter-spacing: .4px; margin-bottom: 3px;
}
.cs-track-name {
font-family: 'Manrope', sans-serif;
font-size: 17px; font-weight: 700;
color: var(--cs-dark); letter-spacing: -.3px;
}
.cs-track-progress { flex: 1; min-width: 0; }
.cs-track-labels {
display: flex;
justify-content: space-between;
font-size: 10px;
font-family: 'Manrope', sans-serif;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--cs-muted);
margin-bottom: 8px;
}
.cs-bar-bg {
width: 100%; height: 6px;
background: #e9eaec;
border-radius: 6px;
overflow: visible;
position: relative;
}
.cs-bar-fill {
height: 100%;
border-radius: 6px;
background: linear-gradient(90deg, var(--cs-blue) 0%, var(--cs-red) 55%, var(--cs-green) 100%);
width: 0%;
transition: width 1.7s cubic-bezier(.16,1,.3,1) 1.15s;
position: relative;
overflow: visible;
}
.cs-section.cs-live .cs-bar-fill { width: 68%; }
.cs-bar-dot {
position: absolute;
top: 50%; right: -5px;
transform: translateY(-50%);
width: 10px; height: 10px;
border-radius: 50%;
background: var(--cs-red);
animation: cs-dotpulse 1.5s ease-in-out infinite;
}
@keyframes cs-dotpulse {
0%,100% { box-shadow: 0 0 0 3px rgba(192,18,39,.25); }
50% { box-shadow: 0 0 0 7px rgba(192,18,39,.0); }
}
.cs-track-status { flex-shrink: 0; text-align: right; }
.cs-status-label {
font-family: 'Manrope', sans-serif;
font-size: 22px; font-weight: 800;
color: var(--cs-green); display: block;
letter-spacing: -.3px;
}
.cs-status-eta { font-size: 12px; color: var(--cs-muted); margin-top: 2px; }
/* ─── LARGE DESKTOP (1440px+) ─── */
@media (min-width: 1440px) {
.cs-section {
max-width: 1560px;
padding: 108px 52px 120px;
}
.cs-section::before {
background-size: 82px 82px;
}
.cs-header {
margin-bottom: 72px;
}
.cs-eyebrow {
font-size: 12px;
letter-spacing: 3.8px;
gap: 12px;
margin-bottom: 22px;
}
.cs-eyebrow::before, .cs-eyebrow::after {
width: 32px;
}
.cs-title {
font-size: clamp(42px, 5.5vw, 74px);
letter-spacing: -1.6px;
margin: 0 0 22px;
}
.cs-subtitle {
font-size: 17px;
max-width: 560px;
line-height: 1.78;
}
.cs-card-shell {
border-radius: 30px;
}
.cs-mile-content {
padding: 40px 36px 38px;
}
.cs-mile-icon {
width: 60px;
height: 60px;
border-radius: 18px;
margin-bottom: 24px;
}
.cs-mile-icon svg {
width: 26px;
height: 26px;
}
.cs-mile-tag {
font-size: 10.5px;
letter-spacing: 3.2px;
margin-bottom: 11px;
}
.cs-mile-name {
font-size: 26px;
margin: 0 0 12px;
}
.cs-mile-desc {
font-size: 14px;
line-height: 1.68;
}
.cs-active-badge {
width: 30px;
height: 30px;
top: 22px;
right: 22px;
}
.cs-active-badge svg {
width: 14px;
height: 14px;
}
.cs-arrow {
width: 28px;
height: 28px;
}
.cs-arrow svg {
width: 11px;
height: 11px;
}
.cs-tracker {
padding: 28px 40px;
gap: 30px;
}
.cs-track-icon {
width: 52px;
height: 52px;
border-radius: 15px;
}
.cs-track-icon svg {
width: 24px;
height: 24px;
}
.cs-track-id {
font-size: 11.5px;
}
.cs-track-name {
font-size: 18px;
}
.cs-track-labels {
font-size: 10.5px;
letter-spacing: 1.6px;
}
.cs-bar-bg {
height: 7px;
border-radius: 7px;
}
.cs-bar-fill {
border-radius: 7px;
}
.cs-status-label {
font-size: 24px;
}
.cs-status-eta {
font-size: 12.5px;
}
}
/* ─── EXTRA-LARGE DESKTOP (1920px+) ─── */
@media (min-width: 1920px) {
.cs-section {
max-width: 1780px;
padding: 120px 64px 136px;
}
.cs-section::before {
background-size: 92px 92px;
}
.cs-header {
margin-bottom: 80px;
}
.cs-eyebrow {
font-size: 13px;
letter-spacing: 4px;
gap: 13px;
margin-bottom: 24px;
}
.cs-eyebrow::before, .cs-eyebrow::after {
width: 36px;
}
.cs-title {
font-size: clamp(48px, 5.2vw, 80px);
letter-spacing: -1.8px;
margin: 0 0 24px;
}
.cs-subtitle {
font-size: 18px;
max-width: 600px;
line-height: 1.8;
}
.cs-card-shell {
border-radius: 32px;
box-shadow: 0 10px 70px rgba(0,0,0,0.11);
}
.cs-mile-content {
padding: 44px 40px 42px;
}
.cs-mile-icon {
width: 64px;
height: 64px;
border-radius: 18px;
margin-bottom: 26px;
}
.cs-mile-icon svg {
width: 28px;
height: 28px;
}
.cs-mile-tag {
font-size: 11px;
letter-spacing: 3.5px;
margin-bottom: 12px;
}
.cs-mile-name {
font-size: 28px;
margin: 0 0 13px;
}
.cs-mile-desc {
font-size: 14.5px;
line-height: 1.7;
}
.cs-active-badge {
width: 32px;
height: 32px;
top: 24px;
right: 24px;
}
.cs-active-badge svg {
width: 15px;
height: 15px;
}
.cs-arrow {
width: 30px;
height: 30px;
}
.cs-arrow svg {
width: 12px;
height: 12px;
}
.cs-tracker {
padding: 32px 44px;
gap: 32px;
}
.cs-track-icon {
width: 56px;
height: 56px;
border-radius: 16px;
}
.cs-track-icon svg {
width: 25px;
height: 25px;
}
.cs-track-id {
font-size: 12px;
}
.cs-track-name {
font-size: 19px;
}
.cs-track-labels {
font-size: 11px;
letter-spacing: 1.8px;
margin-bottom: 9px;
}
.cs-bar-bg {
height: 7px;
border-radius: 7px;
}
.cs-status-label {
font-size: 26px;
}
.cs-status-eta {
font-size: 13px;
}
}
/* ─── ULTRA-WIDE (2560px+) ─── */
@media (min-width: 2560px) {
.cs-section {
max-width: 2060px;
padding: 136px 80px 156px;
}
.cs-section::before {
background-size: 104px 104px;
}
.cs-header {
margin-bottom: 92px;
}
.cs-eyebrow {
font-size: 14px;
letter-spacing: 4.5px;
gap: 14px;
margin-bottom: 28px;
}
.cs-eyebrow::before, .cs-eyebrow::after {
width: 42px;
}
.cs-title {
font-size: clamp(54px, 5vw, 88px);
letter-spacing: -2px;
margin: 0 0 28px;
}
.cs-subtitle {
font-size: 19.5px;
max-width: 660px;
line-height: 1.82;
}
.cs-card-shell {
border-radius: 36px;
box-shadow: 0 12px 80px rgba(0,0,0,0.11);
}
.cs-mile-content {
padding: 50px 46px 48px;
}
.cs-mile-icon {
width: 70px;
height: 70px;
border-radius: 20px;
margin-bottom: 28px;
}
.cs-mile-icon svg {
width: 30px;
height: 30px;
}
.cs-mile-tag {
font-size: 12px;
letter-spacing: 3.8px;
margin-bottom: 13px;
}
.cs-mile-name {
font-size: 32px;
letter-spacing: -.5px;
margin: 0 0 14px;
}
.cs-mile-desc {
font-size: 15.5px;
line-height: 1.72;
}
.cs-active-badge {
width: 34px;
height: 34px;
top: 26px;
right: 26px;
}
.cs-active-badge svg {
width: 16px;
height: 16px;
}
.cs-arrow {
width: 32px;
height: 32px;
}
.cs-arrow svg {
width: 13px;
height: 13px;
}
.cs-tracker {
padding: 36px 52px;
gap: 36px;
}
.cs-track-icon {
width: 60px;
height: 60px;
border-radius: 18px;
}
.cs-track-icon svg {
width: 28px;
height: 28px;
}
.cs-track-id {
font-size: 13px;
letter-spacing: .5px;
}
.cs-track-name {
font-size: 21px;
}
.cs-track-labels {
font-size: 11.5px;
letter-spacing: 2px;
margin-bottom: 10px;
}
.cs-bar-bg {
height: 8px;
border-radius: 8px;
}
.cs-bar-fill {
border-radius: 8px;
}
.cs-bar-dot {
width: 12px;
height: 12px;
right: -6px;
}
.cs-status-label {
font-size: 28px;
}
.cs-status-eta {
font-size: 14px;
}
}
/* ── RESPONSIVE (MOBILE) ── */
@media (max-width: 860px) {
.cs-section { padding: 60px 20px 70px; }
.cs-milestones { grid-template-columns: 1fr; }
.cs-mile:not(:last-child) { border-right: none; border-bottom: 1px solid var(--cs-border); }
.cs-arrow { display: none; }
.cs-tracker { flex-wrap: wrap; gap: 18px; }
.cs-track-progress { order: 3; width: 100%; flex: none; }
}
</style>
<!-- ══ HTML ══ -->
<section class="cs-section" id="cs-connected">
<header class="cs-header">
<div class="cs-eyebrow">Connected System</div>
<h2 class="cs-title">Every Mile <em>Protects</em> the Next</h2>
<p class="cs-subtitle">Doormile doesn't hand off — it connects. Decisions in the first mile protect the last mile SLA. One delivery timeline. One connected system.</p>
</header>
<div class="cs-card-shell">
<div class="cs-milestones">
<!-- FIRST MILE -->
<div class="cs-mile cs-active">
<div class="cs-mile-img" style="background-image:url('https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?w=900&q=85&fit=crop')"></div>
<div class="cs-active-badge">
<svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>
</div>
<div class="cs-arrow">
<svg viewBox="0 0 24 24"><polyline points="9 18 15 12 9 6"/></svg>
</div>
<div class="cs-mile-content">
<div class="cs-mile-icon" style="background:linear-gradient(135deg,#2563eb,#1d4ed8);">
<svg viewBox="0 0 24 24">
<rect x="2" y="7" width="20" height="14" rx="2"/>
<path d="M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2"/>
<line x1="12" y1="12" x2="12" y2="16"/>
<line x1="10" y1="14" x2="14" y2="14"/>
</svg>
</div>
<div class="cs-mile-tag" style="color:var(--cs-red)">First Mile</div>
<h3 class="cs-mile-name">Origin &amp; Pickup</h3>
<p class="cs-mile-desc">Intelligent pickup scheduling that anticipates downstream requirements and SLA windows.</p>
</div>
</div>
<!-- MID MILE -->
<div class="cs-mile">
<div class="cs-mile-img" style="background-image:url('https://images.unsplash.com/photo-1553413077-190dd305871c?w=900&q=85&fit=crop')"></div>
<div class="cs-arrow">
<svg viewBox="0 0 24 24"><polyline points="9 18 15 12 9 6"/></svg>
</div>
<div class="cs-mile-content">
<div class="cs-mile-icon" style="background:linear-gradient(135deg,#c01227,#8b0e1c);">
<svg viewBox="0 0 24 24">
<rect x="1" y="3" width="15" height="13" rx="2"/>
<path d="M16 8h4l3 5v3h-7V8z"/>
<circle cx="5.5" cy="18.5" r="2.5"/>
<circle cx="18.5" cy="18.5" r="2.5"/>
</svg>
</div>
<div class="cs-mile-tag" style="color:var(--cs-red)">Mid Mile</div>
<h3 class="cs-mile-name">Transit &amp; Hubs</h3>
<p class="cs-mile-desc">Dynamic routing through sortation centers with real-time optimization and rerouting.</p>
</div>
</div>
<!-- LAST MILE -->
<div class="cs-mile">
<div class="cs-mile-img" style="background-image:url('https://images.unsplash.com/photo-1615460549969-36fa19521a4f?w=900&q=85&fit=crop')"></div>
<div class="cs-mile-content">
<div class="cs-mile-icon" style="background:linear-gradient(135deg,#15a056,#0d7a3e);">
<svg viewBox="0 0 24 24">
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
<polyline points="9 22 9 12 15 12 15 22"/>
</svg>
</div>
<div class="cs-mile-tag" style="color:var(--cs-red)">Last Mile</div>
<h3 class="cs-mile-name">Final Delivery</h3>
<p class="cs-mile-desc">SLA-aware delivery windows protected by upstream intelligence and predictive ETA.</p>
</div>
</div>
</div><!-- /cs-milestones -->
<!-- Tracker Strip -->
<div class="cs-tracker">
<div class="cs-track-icon">
<svg viewBox="0 0 24 24">
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
<circle cx="12" cy="10" r="3"/>
</svg>
</div>
<div class="cs-track-info">
<div class="cs-track-id">Shipment #DME-2847</div>
<div class="cs-track-name">Mumbai → Delhi Express</div>
</div>
<div class="cs-track-progress">
<div class="cs-track-labels">
<span>First Mile</span>
<span>Mid Mile</span>
<span>Last Mile</span>
</div>
<div class="cs-bar-bg">
<div class="cs-bar-fill">
<span class="cs-bar-dot"></span>
</div>
</div>
</div>
<div class="cs-track-status">
<span class="cs-status-label">On Time</span>
<div class="cs-status-eta">ETA: 4:30 PM</div>
</div>
</div>
</div><!-- /cs-card-shell -->
</section>
<script>
(function () {
var el = document.getElementById('cs-connected');
if (!el) return;
function activate() { el.classList.add('cs-live'); }
if ('IntersectionObserver' in window) {
var io = new IntersectionObserver(function (entries) {
entries.forEach(function (e) { if (e.isIntersecting) { activate(); io.unobserve(e.target); } });
}, { threshold: 0.12 });
io.observe(el);
}
setTimeout(activate, 380);
})();
</script>