API tools faq
paste
Guest User

Untitled

a guest
May 19th, 2026
147
0
Never
4
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 55.31 KB | Source Code | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <title>AETHER | Atmospheric Dashboard</title>
  7.   <!-- Google Fonts: Outfit & Inter -->
  8.   <link rel="preconnect" href="https://fonts.googleapis.com">
  9.   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  10.   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Outfit:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
  11.  
  12.   <style>
  13.     /* -------------------------------------------------------------
  14.        1. DESIGN SYSTEM & CUSTOM PROPERTIES
  15.       ------------------------------------------------------------- */
  16.    :root {
  17.      /* Base Colors */
  18.      --bg-base: #070a13;
  19.       --bg-surface: rgba(17, 24, 43, 0.65);
  20.       --bg-surface-hover: rgba(26, 35, 62, 0.85);
  21.       --border-glow: rgba(255, 255, 255, 0.08);
  22.       --border-glow-highlight: rgba(255, 255, 255, 0.15);
  23.       --text-primary: #f8fafc;
  24.       --text-secondary: #94a3b8;
  25.       --text-muted: #64748b;
  26.      
  27.       /* Active Theme Accent Colors (Transitioned dynamically) */
  28.       --theme-color: var(--color-sun);
  29.       --theme-glow: var(--glow-sun);
  30.      
  31.       /* Weather Accents */
  32.       --color-sun: #eab308;
  33.       --color-sun-glow: rgba(234, 179, 8, 0.15);
  34.      
  35.       --color-wind: #2dd4bf;
  36.       --color-wind-glow: rgba(45, 212, 191, 0.12);
  37.      
  38.       --color-rain: #6366f1;
  39.       --color-rain-glow: rgba(99, 102, 241, 0.15);
  40.      
  41.       --color-snow: #38bdf8;
  42.       --color-snow-glow: rgba(56, 189, 248, 0.15);
  43.      
  44.       /* Typography */
  45.       --font-display: 'Outfit', sans-serif;
  46.       --font-body: 'Inter', sans-serif;
  47.      
  48.       /* Animation Timings */
  49.       --transition-slow: 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  50.       --transition-normal: 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  51.       --transition-fast: 0.15s cubic-bezier(0.25, 1, 0.5, 1);
  52.     }
  53.  
  54.     /* -------------------------------------------------------------
  55.        2. RESET & BASE STYLING
  56.       ------------------------------------------------------------- */
  57.    *, *::before, *::after {
  58.      box-sizing: border-box;
  59.       margin: 0;
  60.       padding: 0;
  61.     }
  62.  
  63.     body {
  64.       background-color: var(--bg-base);
  65.       color: var(--text-primary);
  66.       font-family: var(--font-body);
  67.       min-height: 100vh;
  68.       overflow-x: hidden;
  69.       display: flex;
  70.       flex-direction: column;
  71.       justify-content: center;
  72.       align-items: center;
  73.       position: relative;
  74.     }
  75.  
  76.     /* Ambient background gradient glow */
  77.     .bg-glow {
  78.       position: absolute;
  79.       top: 50%;
  80.       left: 50%;
  81.       transform: translate(-50%, -50%);
  82.       width: 80vw;
  83.       height: 80vh;
  84.       background: radial-gradient(circle, var(--theme-glow) 0%, transparent 70%);
  85.       filter: blur(140px);
  86.       z-index: 0;
  87.       pointer-events: none;
  88.       transition: background var(--transition-slow);
  89.       will-change: background;
  90.     }
  91.  
  92.     /* -------------------------------------------------------------
  93.        3. LAYOUT & CONTAINER
  94.       ------------------------------------------------------------- */
  95.    .dashboard-container {
  96.      width: 100%;
  97.       max-width: 1160px;
  98.       padding: 2.5rem 1.5rem;
  99.       z-index: 1;
  100.       display: flex;
  101.       flex-direction: column;
  102.       gap: 2rem;
  103.     }
  104.  
  105.     /* Header styling */
  106.     .dashboard-header {
  107.       display: flex;
  108.       justify-content: space-between;
  109.       align-items: center;
  110.       flex-wrap: wrap;
  111.       gap: 1.5rem;
  112.       border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  113.       padding-bottom: 1.5rem;
  114.     }
  115.  
  116.     .brand {
  117.       display: flex;
  118.       align-items: center;
  119.       gap: 0.75rem;
  120.     }
  121.  
  122.     .brand-logo {
  123.       width: 32px;
  124.       height: 32px;
  125.       position: relative;
  126.     }
  127.  
  128.     .brand-logo-ring {
  129.       position: absolute;
  130.       inset: 0;
  131.       border: 3px solid var(--theme-color);
  132.       border-radius: 50%;
  133.       box-shadow: 0 0 15px var(--theme-color);
  134.       transition: border-color var(--transition-slow), box-shadow var(--transition-slow);
  135.     }
  136.  
  137.     .brand-logo-dot {
  138.       position: absolute;
  139.       width: 8px;
  140.       height: 8px;
  141.       background-color: var(--text-primary);
  142.       border-radius: 50%;
  143.       top: 50%;
  144.       left: 50%;
  145.       transform: translate(-50%, -50%);
  146.       animation: pulse-dot 2s ease-in-out infinite alternate;
  147.     }
  148.  
  149.     @keyframes pulse-dot {
  150.       0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.5; }
  151.       100% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
  152.     }
  153.  
  154.     .brand h1 {
  155.       font-family: var(--font-display);
  156.       font-size: 1.6rem;
  157.       font-weight: 800;
  158.       letter-spacing: 0.15em;
  159.       text-transform: uppercase;
  160.       background: linear-gradient(135deg, var(--text-primary), var(--text-secondary));
  161.       -webkit-background-clip: text;
  162.       -webkit-text-fill-color: transparent;
  163.     }
  164.  
  165.     /* Segmented switch controller */
  166.     .switcher-control {
  167.       display: flex;
  168.       background: rgba(10, 15, 30, 0.8);
  169.       border: 1px solid rgba(255, 255, 255, 0.06);
  170.       border-radius: 99px;
  171.       padding: 4px;
  172.       position: relative;
  173.     }
  174.  
  175.     .switcher-btn {
  176.       background: none;
  177.       border: none;
  178.       color: var(--text-secondary);
  179.       font-family: var(--font-display);
  180.       font-size: 0.85rem;
  181.       font-weight: 600;
  182.       letter-spacing: 0.05em;
  183.       text-transform: uppercase;
  184.       padding: 0.6rem 1.4rem;
  185.       cursor: pointer;
  186.       border-radius: 99px;
  187.       z-index: 2;
  188.       transition: color var(--transition-normal);
  189.       display: flex;
  190.       align-items: center;
  191.       gap: 0.5rem;
  192.     }
  193.  
  194.     .switcher-btn:hover {
  195.       color: var(--text-primary);
  196.     }
  197.  
  198.     .switcher-btn.active {
  199.       color: var(--bg-base);
  200.     }
  201.  
  202.     /* Absolute sliding pill element */
  203.     .switcher-pill {
  204.       position: absolute;
  205.       top: 4px;
  206.       left: 4px;
  207.       height: calc(100% - 8px);
  208.       width: 90px; /* Set dynamically */
  209.       background: var(--theme-color);
  210.       box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  211.       border-radius: 99px;
  212.       z-index: 1;
  213.       transition: left var(--transition-normal), width var(--transition-normal), background var(--transition-slow);
  214.     }
  215.  
  216.     /* -------------------------------------------------------------
  217.        4. HERO DISPLAY SECTION (GRID LAYOUT)
  218.        ------------------------------------------------------------- */
  219.     .hero-section {
  220.       display: grid;
  221.       grid-template-columns: 1.4fr 1fr;
  222.       gap: 2rem;
  223.     }
  224.  
  225.     @media (max-width: 920px) {
  226.       .hero-section {
  227.         grid-template-columns: 1fr;
  228.       }
  229.     }
  230.  
  231.     /* Glassmorphic base card styling */
  232.     .glass-card {
  233.       background: var(--bg-surface);
  234.       backdrop-filter: blur(16px);
  235.       -webkit-backdrop-filter: blur(16px);
  236.       border: 1px solid var(--border-glow);
  237.       border-radius: 24px;
  238.       box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.35);
  239.       position: relative;
  240.       overflow: hidden;
  241.       transition: border var(--transition-slow), box-shadow var(--transition-slow);
  242.     }
  243.  
  244.     /* Hero main weather display card */
  245.     .hero-weather-card {
  246.       display: flex;
  247.       flex-direction: column;
  248.       min-height: 420px;
  249.     }
  250.  
  251.     /* Large dynamic animation screen at the top of Hero Card */
  252.     .weather-showcase {
  253.       height: 250px;
  254.       position: relative;
  255.       background: linear-gradient(180deg, rgba(10, 15, 30, 0.3) 0%, transparent 100%);
  256.       overflow: hidden;
  257.       border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  258.     }
  259.  
  260.     /* Interactive overlay layers for animations */
  261.     .animation-layer {
  262.       position: absolute;
  263.       inset: 0;
  264.       opacity: 0;
  265.       visibility: hidden;
  266.       pointer-events: none;
  267.       transition: opacity var(--transition-slow), visibility var(--transition-slow);
  268.     }
  269.  
  270.     .animation-layer.active {
  271.       opacity: 1;
  272.       visibility: visible;
  273.     }
  274.  
  275.     /* Weather details details area */
  276.     .weather-info-panel {
  277.       padding: 1.5rem 2rem;
  278.       display: flex;
  279.       justify-content: space-between;
  280.       align-items: flex-end;
  281.       flex-grow: 1;
  282.     }
  283.  
  284.     .weather-main-data {
  285.       display: flex;
  286.       flex-direction: column;
  287.       gap: 0.25rem;
  288.     }
  289.  
  290.     .location-details {
  291.       display: flex;
  292.       align-items: center;
  293.       gap: 0.5rem;
  294.       color: var(--text-secondary);
  295.       font-size: 0.9rem;
  296.       font-weight: 500;
  297.     }
  298.  
  299.     .location-details svg {
  300.       width: 14px;
  301.       height: 14px;
  302.       fill: currentColor;
  303.     }
  304.  
  305.     .temperature-wrapper {
  306.       display: flex;
  307.       align-items: flex-start;
  308.       margin: 0.25rem 0;
  309.     }
  310.  
  311.     .temperature-value {
  312.       font-family: var(--font-display);
  313.       font-size: 4.8rem;
  314.       font-weight: 700;
  315.       line-height: 0.95;
  316.       background: linear-gradient(180deg, var(--text-primary) 30%, var(--text-secondary) 100%);
  317.       -webkit-background-clip: text;
  318.       -webkit-text-fill-color: transparent;
  319.       letter-spacing: -0.02em;
  320.     }
  321.  
  322.     .temperature-unit {
  323.       font-family: var(--font-display);
  324.       font-size: 2.2rem;
  325.       font-weight: 400;
  326.       color: var(--text-secondary);
  327.       margin-top: 0.4rem;
  328.     }
  329.  
  330.     .weather-condition-text {
  331.       font-family: var(--font-display);
  332.       font-size: 1.3rem;
  333.       font-weight: 600;
  334.       letter-spacing: 0.02em;
  335.       color: var(--text-primary);
  336.       display: flex;
  337.       align-items: center;
  338.       gap: 0.6rem;
  339.     }
  340.  
  341.     .weather-condition-text::before {
  342.       content: '';
  343.       display: inline-block;
  344.       width: 8px;
  345.       height: 8px;
  346.       border-radius: 50%;
  347.       background-color: var(--theme-color);
  348.       box-shadow: 0 0 10px var(--theme-color);
  349.       transition: background-color var(--transition-slow), box-shadow var(--transition-slow);
  350.     }
  351.  
  352.     .weather-extreme-details {
  353.       display: flex;
  354.       flex-direction: column;
  355.       align-items: flex-end;
  356.       gap: 0.5rem;
  357.       text-align: right;
  358.     }
  359.  
  360.     .weather-extreme-highlow {
  361.       color: var(--text-secondary);
  362.       font-size: 0.9rem;
  363.       font-weight: 500;
  364.     }
  365.  
  366.     .weather-extreme-highlow span.high {
  367.       color: var(--text-primary);
  368.       font-weight: 600;
  369.     }
  370.  
  371.     .weather-extreme-label {
  372.       background: rgba(255, 255, 255, 0.05);
  373.       border: 1px solid rgba(255, 255, 255, 0.08);
  374.       padding: 0.35rem 0.75rem;
  375.       border-radius: 99px;
  376.       font-size: 0.75rem;
  377.       font-weight: 600;
  378.       letter-spacing: 0.05em;
  379.       text-transform: uppercase;
  380.       color: var(--text-secondary);
  381.     }
  382.  
  383.     /* -------------------------------------------------------------
  384.        5. METRICS SUB-GRID (HERO RIGHT PANEL)
  385.        ------------------------------------------------------------- */
  386.     .metrics-panel {
  387.       display: grid;
  388.       grid-template-columns: 1fr 1fr;
  389.       grid-template-rows: 1fr 1fr;
  390.       gap: 1.2rem;
  391.     }
  392.  
  393.     .metric-card {
  394.       padding: 1.5rem;
  395.       display: flex;
  396.       flex-direction: column;
  397.       justify-content: space-between;
  398.       min-height: 140px;
  399.     }
  400.  
  401.     .metric-header {
  402.       display: flex;
  403.       justify-content: space-between;
  404.       align-items: center;
  405.       color: var(--text-secondary);
  406.     }
  407.  
  408.     .metric-title {
  409.       font-size: 0.8rem;
  410.       font-weight: 600;
  411.       letter-spacing: 0.05em;
  412.       text-transform: uppercase;
  413.     }
  414.  
  415.     .metric-icon {
  416.       width: 22px;
  417.       height: 22px;
  418.       color: var(--text-secondary);
  419.       transition: color var(--transition-slow);
  420.     }
  421.  
  422.     .metric-card:hover .metric-icon {
  423.       color: var(--theme-color);
  424.     }
  425.  
  426.     .metric-value-container {
  427.       margin-top: 1rem;
  428.     }
  429.  
  430.     .metric-value {
  431.       font-family: var(--font-display);
  432.       font-size: 1.8rem;
  433.       font-weight: 700;
  434.       color: var(--text-primary);
  435.     }
  436.  
  437.     .metric-desc {
  438.       font-size: 0.75rem;
  439.       color: var(--text-muted);
  440.       margin-top: 0.25rem;
  441.       font-weight: 500;
  442.     }
  443.  
  444.     /* Graphic elements inside metrics for premium look */
  445.     .metric-bar-bg {
  446.       width: 100%;
  447.       height: 4px;
  448.       background: rgba(255, 255, 255, 0.05);
  449.       border-radius: 99px;
  450.       margin-top: 0.5rem;
  451.       overflow: hidden;
  452.     }
  453.  
  454.     .metric-bar-fill {
  455.       height: 100%;
  456.       background: var(--theme-color);
  457.       border-radius: 99px;
  458.       width: 50%;
  459.       transition: width var(--transition-slow), background var(--transition-slow);
  460.     }
  461.  
  462.     /* -------------------------------------------------------------
  463.        6. SIDE-BY-SIDE LIVE CARDS (4 COLUMNS GRID)
  464.        ------------------------------------------------------------- */
  465.     .side-by-side-section {
  466.       display: flex;
  467.       flex-direction: column;
  468.       gap: 1.2rem;
  469.     }
  470.  
  471.     .section-title {
  472.       font-family: var(--font-display);
  473.       font-size: 1.1rem;
  474.       font-weight: 700;
  475.       letter-spacing: 0.08em;
  476.       text-transform: uppercase;
  477.       color: var(--text-secondary);
  478.       display: flex;
  479.       align-items: center;
  480.       gap: 0.75rem;
  481.     }
  482.  
  483.     .section-title::after {
  484.       content: '';
  485.       flex-grow: 1;
  486.       height: 1px;
  487.       background: rgba(255, 255, 255, 0.06);
  488.     }
  489.  
  490.     .mini-cards-grid {
  491.       display: grid;
  492.       grid-template-columns: repeat(4, 1fr);
  493.       gap: 1.5rem;
  494.     }
  495.  
  496.     @media (max-width: 820px) {
  497.       .mini-cards-grid {
  498.         grid-template-columns: repeat(2, 1fr);
  499.       }
  500.     }
  501.  
  502.     @media (max-width: 480px) {
  503.       .mini-cards-grid {
  504.         grid-template-columns: 1fr;
  505.       }
  506.     }
  507.  
  508.     /* Small live animated card */
  509.     .mini-card {
  510.       cursor: pointer;
  511.       display: flex;
  512.       flex-direction: column;
  513.       min-height: 250px;
  514.       transition: transform var(--transition-normal), border var(--transition-slow), box-shadow var(--transition-slow);
  515.     }
  516.  
  517.     .mini-card:hover {
  518.       transform: translateY(-6px);
  519.       border-color: rgba(255, 255, 255, 0.15);
  520.       box-shadow: 0 15px 35px 0 rgba(0, 0, 0, 0.45);
  521.     }
  522.  
  523.     .mini-card.active {
  524.       border-color: var(--card-accent-color);
  525.       box-shadow: 0 8px 30px 0 var(--card-accent-glow);
  526.     }
  527.  
  528.     .mini-card.active::before {
  529.       content: '';
  530.       position: absolute;
  531.       top: 0;
  532.       left: 0;
  533.       width: 100%;
  534.       height: 4px;
  535.       background-color: var(--card-accent-color);
  536.     }
  537.  
  538.     /* Assign accent colors explicitly to mini-cards */
  539.     .mini-card.theme-sun {
  540.       --card-accent-color: var(--color-sun);
  541.       --card-accent-glow: var(--color-sun-glow);
  542.     }
  543.     .mini-card.theme-wind {
  544.       --card-accent-color: var(--color-wind);
  545.       --card-accent-glow: var(--color-wind-glow);
  546.     }
  547.     .mini-card.theme-rain {
  548.       --card-accent-color: var(--color-rain);
  549.       --card-accent-glow: var(--color-rain-glow);
  550.     }
  551.     .mini-card.theme-snow {
  552.       --card-accent-color: var(--color-snow);
  553.       --card-accent-glow: var(--color-snow-glow);
  554.     }
  555.  
  556.     /* Miniature animation showcase */
  557.     .mini-showcase {
  558.       height: 140px;
  559.       position: relative;
  560.       overflow: hidden;
  561.       background: linear-gradient(180deg, rgba(10, 15, 30, 0.2) 0%, transparent 100%);
  562.       border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  563.     }
  564.  
  565.     .mini-info {
  566.       padding: 1.2rem;
  567.       display: flex;
  568.       flex-direction: column;
  569.       gap: 0.2rem;
  570.       flex-grow: 1;
  571.       justify-content: flex-end;
  572.     }
  573.  
  574.     .mini-label {
  575.       font-family: var(--font-display);
  576.       font-size: 1.05rem;
  577.       font-weight: 700;
  578.       color: var(--text-primary);
  579.     }
  580.  
  581.     .mini-flex {
  582.       display: flex;
  583.       justify-content: space-between;
  584.       align-items: center;
  585.       margin-top: 0.2rem;
  586.     }
  587.  
  588.     .mini-desc {
  589.       font-size: 0.75rem;
  590.       color: var(--text-secondary);
  591.       font-weight: 500;
  592.     }
  593.  
  594.     .mini-temp {
  595.       font-family: var(--font-display);
  596.       font-size: 1.4rem;
  597.       font-weight: 700;
  598.       color: var(--text-primary);
  599.     }
  600.  
  601.  
  602.     /* -------------------------------------------------------------
  603.        7. ANIMATION SPECIFICS: ☀️ SUNNY STATE
  604.        ------------------------------------------------------------- */
  605.     .sunny-glow {
  606.       position: absolute;
  607.       top: -20px;
  608.       right: -20px;
  609.       width: 180px;
  610.       height: 180px;
  611.       background: radial-gradient(circle, rgba(234, 179, 8, 0.25) 0%, transparent 70%);
  612.       border-radius: 50%;
  613.     }
  614.  
  615.     .mini-showcase .sunny-glow {
  616.       width: 120px;
  617.       height: 120px;
  618.       top: -15px;
  619.       right: -15px;
  620.     }
  621.  
  622.     .sun-orb-container {
  623.       position: absolute;
  624.       top: 55px;
  625.       right: 70px;
  626.       width: 80px;
  627.       height: 80px;
  628.       display: flex;
  629.       justify-content: center;
  630.       align-items: center;
  631.     }
  632.  
  633.     .mini-showcase .sun-orb-container {
  634.       top: 30px;
  635.       right: 35px;
  636.       transform: scale(0.65);
  637.     }
  638.  
  639.     /* Golden center sphere */
  640.     .sun-core {
  641.       width: 50px;
  642.       height: 50px;
  643.       background: radial-gradient(circle, #fef08a 0%, #f97316 85%);
  644.       border-radius: 50%;
  645.       box-shadow: 0 0 25px #f97316, 0 0 50px rgba(234, 179, 8, 0.4);
  646.       animation: sun-pulse 4s ease-in-out infinite alternate;
  647.       z-index: 3;
  648.     }
  649.  
  650.     @keyframes sun-pulse {
  651.       0% { transform: scale(0.92); box-shadow: 0 0 20px #f97316, 0 0 40px rgba(234, 179, 8, 0.3); }
  652.       100% { transform: scale(1.08); box-shadow: 0 0 35px #f97316, 0 0 70px rgba(234, 179, 8, 0.6); }
  653.     }
  654.  
  655.     /* Spinning geometric halos */
  656.     .sun-rays-inner, .sun-rays-outer {
  657.       position: absolute;
  658.       top: 50%;
  659.       left: 50%;
  660.       transform-origin: center center;
  661.     }
  662.  
  663.     .sun-rays-inner {
  664.       width: 110px;
  665.       height: 110px;
  666.       margin-top: -55px;
  667.       margin-left: -55px;
  668.       animation: rotate-cw 24s linear infinite;
  669.       z-index: 2;
  670.     }
  671.  
  672.     .sun-rays-outer {
  673.       width: 140px;
  674.       height: 140px;
  675.       margin-top: -70px;
  676.       margin-left: -70px;
  677.       animation: rotate-ccw 36s linear infinite;
  678.       z-index: 1;
  679.     }
  680.  
  681.     @keyframes rotate-cw {
  682.       from { transform: rotate(0deg); }
  683.       to { transform: rotate(360deg); }
  684.     }
  685.  
  686.     @keyframes rotate-ccw {
  687.       from { transform: rotate(360deg); }
  688.       to { transform: rotate(0deg); }
  689.     }
  690.  
  691.     /* Floating hot particles */
  692.     .solar-flare {
  693.       position: absolute;
  694.       bottom: 0;
  695.       width: 4px;
  696.       height: 4px;
  697.       background: radial-gradient(circle, rgba(254, 240, 138, 0.8) 0%, rgba(249, 115, 22, 0) 100%);
  698.       border-radius: 50%;
  699.       pointer-events: none;
  700.       animation: rise-and-fade var(--speed) linear infinite;
  701.       animation-delay: var(--delay);
  702.       left: var(--left);
  703.       opacity: var(--opacity);
  704.     }
  705.  
  706.     @keyframes rise-and-fade {
  707.       0% {
  708.         transform: translateY(0) translateX(0) scale(0.5);
  709.         opacity: 0;
  710.       }
  711.       20% { opacity: var(--opacity); }
  712.       90% { opacity: 0.3; }
  713.       100% {
  714.         transform: translateY(-160px) translateX(var(--drift)) scale(var(--scale));
  715.         opacity: 0;
  716.       }
  717.     }
  718.  
  719.  
  720.     /* -------------------------------------------------------------
  721.        8. ANIMATION SPECIFICS: 🍃 WINDY STATE
  722.        ------------------------------------------------------------- */
  723.     .wind-glow {
  724.       position: absolute;
  725.       top: -30px;
  726.       left: -20px;
  727.       width: 220px;
  728.       height: 220px;
  729.       background: radial-gradient(circle, rgba(45, 212, 191, 0.15) 0%, transparent 70%);
  730.       border-radius: 50%;
  731.     }
  732.  
  733.     /* Curved wind vectors flowing across screen */
  734.     .wind-vector-svg {
  735.       position: absolute;
  736.       inset: 0;
  737.       width: 100%;
  738.       height: 100%;
  739.     }
  740.  
  741.     .wind-path {
  742.       fill: none;
  743.       stroke: rgba(255, 255, 255, 0.15);
  744.       stroke-linecap: round;
  745.       stroke-dasharray: 60 180;
  746.       animation: wind-dash var(--speed) linear infinite;
  747.       animation-delay: var(--delay);
  748.     }
  749.  
  750.     @keyframes wind-dash {
  751.       0% { stroke-dashoffset: 240; stroke: rgba(255, 255, 255, 0); }
  752.       10% { stroke: rgba(255, 255, 255, 0.18); }
  753.       80% { stroke: rgba(255, 255, 255, 0.18); }
  754.       100% { stroke-dashoffset: 0; stroke: rgba(255, 255, 255, 0); }
  755.     }
  756.  
  757.     /* Swaying Tree at the bottom right corner */
  758.     .tree-wrapper {
  759.       position: absolute;
  760.       bottom: -15px;
  761.       right: 25px;
  762.       width: 110px;
  763.       height: 150px;
  764.       z-index: 2;
  765.     }
  766.  
  767.     .mini-showcase .tree-wrapper {
  768.       width: 70px;
  769.       height: 95px;
  770.       right: 15px;
  771.       bottom: -10px;
  772.     }
  773.  
  774.     .swaying-tree-svg {
  775.       width: 100%;
  776.       height: 100%;
  777.       transform-origin: bottom center;
  778.       animation: tree-flex 5s ease-in-out infinite alternate;
  779.     }
  780.  
  781.     .tree-canopy-top {
  782.       transform-origin: 50px 30px;
  783.       animation: canopy-flex-3 3.5s ease-in-out infinite alternate;
  784.     }
  785.     .tree-canopy-mid {
  786.       transform-origin: 50px 52px;
  787.       animation: canopy-flex-2 4.2s ease-in-out infinite alternate;
  788.     }
  789.     .tree-canopy-bot {
  790.       transform-origin: 50px 75px;
  791.       animation: canopy-flex-1 5s ease-in-out infinite alternate;
  792.     }
  793.  
  794.     /* Tree sway keyframes */
  795.     @keyframes tree-flex {
  796.       0% { transform: rotate(-1.5deg); }
  797.       100% { transform: rotate(5.5deg) skewX(2deg); }
  798.     }
  799.  
  800.     @keyframes canopy-flex-1 {
  801.       0% { transform: rotate(-2deg); }
  802.       100% { transform: rotate(4.5deg) translateX(1px); }
  803.     }
  804.  
  805.     @keyframes canopy-flex-2 {
  806.       0% { transform: rotate(-3.5deg); }
  807.       100% { transform: rotate(7deg) translateX(2px); }
  808.     }
  809.  
  810.     @keyframes canopy-flex-3 {
  811.       0% { transform: rotate(-5deg); }
  812.       100% { transform: rotate(9deg) translateX(3px); }
  813.     }
  814.  
  815.     /* Floating flying leaves */
  816.     .drifting-leaf {
  817.       position: absolute;
  818.       width: 12px;
  819.       height: 12px;
  820.       fill: rgba(45, 212, 191, 0.4);
  821.       pointer-events: none;
  822.       animation: float-leaf var(--speed) linear infinite;
  823.       animation-delay: var(--delay);
  824.       left: var(--left);
  825.       top: -20px;
  826.     }
  827.  
  828.     .mini-showcase .drifting-leaf {
  829.       width: 8px;
  830.       height: 8px;
  831.     }
  832.  
  833.     @keyframes float-leaf {
  834.       0% {
  835.         transform: translate(-10%, 0) rotate(0deg) rotateY(0deg);
  836.         opacity: 0;
  837.       }
  838.       10% { opacity: 0.8; }
  839.       90% { opacity: 0.8; }
  840.       100% {
  841.         transform: translate(var(--drift-x), 260px) rotate(420deg) rotateY(1080deg);
  842.         opacity: 0;
  843.       }
  844.     }
  845.  
  846.  
  847.     /* -------------------------------------------------------------
  848.        9. ANIMATION SPECIFICS: 🌧️ RAINY STATE
  849.        ------------------------------------------------------------- */
  850.     .rainy-glow {
  851.       position: absolute;
  852.       top: -40px;
  853.       right: -20px;
  854.       width: 240px;
  855.       height: 240px;
  856.       background: radial-gradient(circle, rgba(99, 102, 241, 0.16) 0%, transparent 70%);
  857.       border-radius: 50%;
  858.     }
  859.  
  860.     /* Rapid rain streaks */
  861.     .rain-container {
  862.       position: absolute;
  863.       inset: 0;
  864.       width: 100%;
  865.       height: 100%;
  866.     }
  867.  
  868.     .raindrop {
  869.       position: absolute;
  870.       width: 1.2px;
  871.       background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(165, 180, 252, var(--opacity)) 100%);
  872.       pointer-events: none;
  873.       animation: raindrop-fall var(--speed) linear infinite;
  874.       animation-delay: var(--delay);
  875.       left: var(--left);
  876.       top: -40px;
  877.       height: var(--length);
  878.     }
  879.  
  880.     @keyframes raindrop-fall {
  881.       0% {
  882.         transform: translateY(0) skewX(-16deg);
  883.       }
  884.       100% {
  885.         transform: translateY(300px) skewX(-16deg);
  886.       }
  887.     }
  888.  
  889.     /* Puddle splash ripples at the bottom */
  890.     .splash-container {
  891.       position: absolute;
  892.       bottom: 0;
  893.       left: 0;
  894.       width: 100%;
  895.       height: 25px;
  896.       pointer-events: none;
  897.     }
  898.  
  899.     .splash-ripple {
  900.       position: absolute;
  901.       bottom: 6px;
  902.       width: 14px;
  903.       height: 4px;
  904.       border: 1px solid rgba(165, 180, 252, 0.4);
  905.       border-radius: 50%;
  906.       animation: ripple-expansion 1.2s ease-out infinite;
  907.       animation-delay: var(--delay);
  908.       left: var(--left);
  909.       transform-origin: center center;
  910.     }
  911.  
  912.     @keyframes ripple-expansion {
  913.       0% {
  914.         transform: scale(0.2);
  915.         opacity: 0;
  916.       }
  917.       10% {
  918.         opacity: 0.7;
  919.       }
  920.       80% {
  921.         opacity: 0.15;
  922.       }
  923.       100% {
  924.         transform: scale(1.6);
  925.         opacity: 0;
  926.       }
  927.     }
  928.  
  929.     /* Moody Storm Sheet Lightning Overlay */
  930.     .lightning-flash {
  931.       position: absolute;
  932.       inset: 0;
  933.       background-color: rgba(238, 242, 255, 0.95);
  934.       mix-blend-mode: overlay;
  935.       pointer-events: none;
  936.       opacity: 0;
  937.       z-index: 10;
  938.       animation: lightning-strike 10s ease-out infinite;
  939.     }
  940.  
  941.     @keyframes lightning-strike {
  942.       0%, 94%, 96%, 100% { opacity: 0; }
  943.       94.8% { opacity: 0.9; }
  944.       95.2% { opacity: 0.25; }
  945.       95.6% { opacity: 0.95; }
  946.     }
  947.  
  948.  
  949.     /* -------------------------------------------------------------
  950.        10. ANIMATION SPECIFICS: ❄️ SNOWY STATE
  951.        ------------------------------------------------------------- */
  952.     .snowy-glow {
  953.       position: absolute;
  954.       top: -30px;
  955.       left: -20px;
  956.       width: 220px;
  957.       height: 220px;
  958.       background: radial-gradient(circle, rgba(56, 189, 248, 0.15) 0%, transparent 70%);
  959.       border-radius: 50%;
  960.     }
  961.  
  962.     .snow-container {
  963.       position: absolute;
  964.       inset: 0;
  965.       width: 100%;
  966.       height: 100%;
  967.     }
  968.  
  969.     /* Falling snowflakes with horizontal sway */
  970.     .snowflake {
  971.       position: absolute;
  972.       background-color: rgba(255, 255, 255, 0.9);
  973.       border-radius: 50%;
  974.       pointer-events: none;
  975.       animation: snow-fall var(--speed) linear infinite;
  976.       animation-delay: var(--delay);
  977.       left: var(--left);
  978.       top: -15px;
  979.       width: var(--size);
  980.       height: var(--size);
  981.       opacity: var(--opacity);
  982.       filter: blur(0.4px);
  983.     }
  984.  
  985.     @keyframes snow-fall {
  986.       0% {
  987.         transform: translateY(0) translateX(0);
  988.       }
  989.       50% {
  990.         transform: translateY(140px) translateX(var(--sway));
  991.       }
  992.       100% {
  993.         transform: translateY(280px) translateX(0);
  994.       }
  995.     }
  996.  
  997.     /* Fluffy layered snow accumulating banks at the bottom */
  998.     .snow-drifts-svg {
  999.       position: absolute;
  1000.       bottom: -4px;
  1001.       left: -5%;
  1002.       width: 110%;
  1003.       height: 35px;
  1004.       z-index: 5;
  1005.       filter: drop-shadow(0 -4px 8px rgba(56, 189, 248, 0.12));
  1006.       transition: transform var(--transition-slow), opacity var(--transition-slow);
  1007.     }
  1008.  
  1009.     .snow-bank {
  1010.       fill: #ffffff;
  1011.       transition: fill var(--transition-slow);
  1012.     }
  1013.  
  1014.     .snow-bank-back {
  1015.       fill: #e0f2fe;
  1016.       opacity: 0.85;
  1017.     }
  1018.  
  1019.  
  1020.     /* -------------------------------------------------------------
  1021.        11. DYNAMIC CONTROLS & TRANSITIONS (STATE MANAGEMENT)
  1022.       ------------------------------------------------------------- */
  1023.    /* Dynamic active indicators on weather panel */
  1024.    .weather-extreme-label.glow-active {
  1025.      animation: state-glow 2s infinite alternate;
  1026.     }
  1027.  
  1028.     @keyframes state-glow {
  1029.       0% { box-shadow: 0 0 6px var(--theme-color); border-color: var(--theme-color); }
  1030.       100% { box-shadow: 0 0 16px var(--theme-color); border-color: var(--theme-color); }
  1031.     }
  1032.  
  1033.     /* Smooth text changes */
  1034.     .value-transition {
  1035.       animation: fade-in-value 0.35s cubic-bezier(0.25, 1, 0.5, 1);
  1036.     }
  1037.  
  1038.     @keyframes fade-in-value {
  1039.       from { opacity: 0; transform: translateY(4px); filter: blur(2px); }
  1040.       to { opacity: 1; transform: translateY(0); filter: blur(0); }
  1041.     }
  1042.  
  1043.   </style>
  1044. </head>
  1045. <body>
  1046.  
  1047.   <!-- Backdrop dynamic ambient light glowing behind the UI -->
  1048.   <div class="bg-glow" id="ambientGlow"></div>
  1049.  
  1050.   <div class="dashboard-container">
  1051.    
  1052.     <!-- HEADER -->
  1053.     <header class="dashboard-header">
  1054.       <div class="brand">
  1055.         <div class="brand-logo">
  1056.           <div class="brand-logo-ring"></div>
  1057.           <div class="brand-logo-dot"></div>
  1058.         </div>
  1059.         <h1>Aether</h1>
  1060.       </div>
  1061.  
  1062.       <!-- Segmented selection buttons -->
  1063.       <div class="switcher-control" id="switcherControl">
  1064.         <div class="switcher-pill" id="switcherPill"></div>
  1065.         <button class="switcher-btn active" data-weather="sun">Sunny</button>
  1066.         <button class="switcher-btn" data-weather="wind">Windy</button>
  1067.         <button class="switcher-btn" data-weather="rain">Rainy</button>
  1068.         <button class="switcher-btn" data-weather="snow">Snowy</button>
  1069.       </div>
  1070.     </header>
  1071.  
  1072.     <!-- HERO DISPLAY (MAIN CARD + SUB METRICS) -->
  1073.     <main class="hero-section">
  1074.      
  1075.       <!-- HERO WEATHER CARD -->
  1076.       <div class="glass-card hero-weather-card" id="heroCard">
  1077.        
  1078.         <!-- Interactive Showcase Canvas -->
  1079.         <div class="weather-showcase" id="heroShowcase">
  1080.          
  1081.           <!-- SUNNY STAGE LAYERS -->
  1082.           <div class="animation-layer active" data-weather="sun">
  1083.             <div class="sunny-glow"></div>
  1084.             <div class="sun-orb-container">
  1085.               <div class="sun-core"></div>
  1086.               <!-- Inner rays (spoke design) -->
  1087.               <svg class="sun-rays-inner" viewBox="0 0 160 160" xmlns="http://www.w3.org/2000/svg">
  1088.                 <g stroke="#fef08a" stroke-width="2.5" stroke-linecap="round">
  1089.                   <line x1="80" y1="15" x2="80" y2="28" />
  1090.                   <line x1="80" y1="132" x2="80" y2="145" />
  1091.                   <line x1="15" y1="80" x2="28" y2="80" />
  1092.                   <line x1="132" y1="80" x2="145" y2="80" />
  1093.                   <line x1="34" y1="34" x2="44" y2="44" />
  1094.                   <line x1="116" y1="116" x2="126" y2="122" />
  1095.                   <line x1="116" y1="34" x2="126" y2="44" />
  1096.                   <line x1="34" y1="116" x2="44" y2="122" />
  1097.                 </g>
  1098.               </svg>
  1099.               <!-- Outer rays (glow rings) -->
  1100.               <svg class="sun-rays-outer" viewBox="0 0 160 160" xmlns="http://www.w3.org/2000/svg">
  1101.                 <g stroke="#f97316" stroke-width="2" stroke-dasharray="3 5" fill="none" opacity="0.6">
  1102.                   <circle cx="80" cy="80" r="54" />
  1103.                   <circle cx="80" cy="80" r="66" />
  1104.                 </g>
  1105.               </svg>
  1106.             </div>
  1107.             <!-- Dynamic particle container (populated via JS) -->
  1108.             <div class="particle-container showcase-particles" data-type="sun"></div>
  1109.           </div>
  1110.  
  1111.           <!-- WINDY STAGE LAYERS -->
  1112.           <div class="animation-layer" data-weather="wind">
  1113.             <div class="wind-glow"></div>
  1114.            
  1115.             <!-- Spline wind currents -->
  1116.             <svg class="wind-vector-svg" viewBox="0 0 200 120" xmlns="http://www.w3.org/2000/svg">
  1117.               <path class="wind-path" d="M15 20 Q55 5 105 25 T195 20" stroke-width="1.8" var-speed="2s" style="--speed: 2.2s; --delay: 0s;" />
  1118.               <path class="wind-path" d="M25 55 Q75 75 125 50 T195 60" stroke-width="1.5" style="--speed: 2.8s; --delay: -0.6s;" />
  1119.               <path class="wind-path" d="M15 90 Q65 70 115 95 T185 85" stroke-width="2" style="--speed: 2.4s; --delay: -0.3s;" />
  1120.             </svg>
  1121.  
  1122.             <!-- Organic Pine tree silhouette -->
  1123.             <div class="tree-wrapper">
  1124.               <svg class="swaying-tree-svg" viewBox="0 0 100 130" xmlns="http://www.w3.org/2000/svg">
  1125.                 <!-- Trunk -->
  1126.                 <path d="M47 130 L48 95 Q48 90 52 85 L52 130 Z" fill="#2d3748" />
  1127.                 <!-- Layered Canopy -->
  1128.                 <g class="tree-canopy-bot">
  1129.                   <path d="M15 95 Q50 68 85 95 Q50 82 15 95 Z" fill="#0d9488" opacity="0.85" />
  1130.                 </g>
  1131.                 <g class="tree-canopy-mid">
  1132.                   <path d="M22 72 Q50 48 78 72 Q50 60 22 72 Z" fill="#14b8a6" opacity="0.9" />
  1133.                 </g>
  1134.                 <g class="tree-canopy-top">
  1135.                   <path d="M30 48 Q50 25 70 48 Q50 39 30 48 Z" fill="#2dd4bf" opacity="0.98" />
  1136.                 </g>
  1137.               </svg>
  1138.             </div>
  1139.             <!-- Dynamic particle container (populated via JS) -->
  1140.             <div class="particle-container showcase-particles" data-type="wind"></div>
  1141.           </div>
  1142.  
  1143.           <!-- RAINY STAGE LAYERS -->
  1144.           <div class="animation-layer" data-weather="rain">
  1145.             <div class="rainy-glow"></div>
  1146.             <!-- Lightning flashes overlay -->
  1147.             <div class="lightning-flash"></div>
  1148.             <!-- Core falling raindrop streaks -->
  1149.             <div class="rain-container showcase-particles" data-type="rain"></div>
  1150.             <!-- Floor splatters -->
  1151.             <div class="splash-container" id="heroSplashes"></div>
  1152.           </div>
  1153.  
  1154.           <!-- SNOWY STAGE LAYERS -->
  1155.           <div class="animation-layer" data-weather="snow">
  1156.             <div class="snowy-glow"></div>
  1157.             <!-- Core falling snowflake shapes -->
  1158.             <div class="snow-container showcase-particles" data-type="snow"></div>
  1159.             <!-- Frost accumulated banks -->
  1160.             <svg class="snow-drifts-svg" viewBox="0 0 200 40" xmlns="http://www.w3.org/2000/svg">
  1161.               <path class="snow-bank snow-bank-back" d="M-10 40 L-10 18 Q40 5 95 18 T210 15 L210 40 Z" />
  1162.               <path class="snow-bank" d="M-10 40 L-10 23 Q50 12 110 26 T210 20 L210 40 Z" />
  1163.             </svg>
  1164.           </div>
  1165.  
  1166.         </div>
  1167.  
  1168.         <!-- Meta readings panel -->
  1169.         <div class="weather-info-panel">
  1170.           <div class="weather-main-data">
  1171.             <div class="location-details">
  1172.               <!-- Inline Location Pin SVG -->
  1173.               <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  1174.                 <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
  1175.               </svg>
  1176.               <span id="locVal">St. Moritz, Switzerland</span>
  1177.             </div>
  1178.            
  1179.             <div class="temperature-wrapper">
  1180.               <span class="temperature-value" id="tempVal">24</span>
  1181.               <span class="temperature-unit">°C</span>
  1182.             </div>
  1183.            
  1184.             <div class="weather-condition-text" id="condVal">Clear & Sunny</div>
  1185.          </div>
  1186.  
  1187.          <div class="weather-extreme-details">
  1188.            <div class="weather-extreme-highlow" id="highlowVal">
  1189.              H: <span class="high">26°</span> &nbsp;L: 18°
  1190.             </div>
  1191.             <div class="weather-extreme-label glow-active" id="labelVal">Perfect</div>
  1192.           </div>
  1193.         </div>
  1194.  
  1195.       </div>
  1196.  
  1197.       <!-- METRICS SUB-GRID -->
  1198.       <div class="metrics-panel">
  1199.        
  1200.         <!-- Wind speed -->
  1201.         <div class="glass-card metric-card">
  1202.           <div class="metric-header">
  1203.             <span class="metric-title">Wind Speed</span>
  1204.             <!-- Wind icon -->
  1205.             <svg class="metric-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  1206.               <path d="M9.59 4.59A2 2 0 1 1 11 8H2m10.59 11.41A2 2 0 1 0 14 16H2m15.73-8.27A2.5 2.5 0 1 1 19.5 12H2"></path>
  1207.             </svg>
  1208.           </div>
  1209.           <div class="metric-value-container">
  1210.             <div class="metric-value" id="windMetric">6 km/h</div>
  1211.             <div class="metric-desc" id="windMetricDesc">Breeze • Calm gusting</div>
  1212.             <div class="metric-bar-bg"><div class="metric-bar-fill" id="windBar" style="width: 15%;"></div></div>
  1213.           </div>
  1214.         </div>
  1215.  
  1216.         <!-- Humidity -->
  1217.         <div class="glass-card metric-card">
  1218.           <div class="metric-header">
  1219.             <span class="metric-title">Humidity</span>
  1220.             <!-- Droplet icon -->
  1221.             <svg class="metric-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  1222.               <path d="M12 22a7 7 0 0 0 7-7c0-4.3-7-11-7-11S5 10.7 5 15a7 7 0 0 0 7 7z"></path>
  1223.             </svg>
  1224.           </div>
  1225.           <div class="metric-value-container">
  1226.             <div class="metric-value" id="humidMetric">45%</div>
  1227.             <div class="metric-desc" id="humidMetricDesc">Comfortable and dry</div>
  1228.             <div class="metric-bar-bg"><div class="metric-bar-fill" id="humidBar" style="width: 45%;"></div></div>
  1229.           </div>
  1230.         </div>
  1231.  
  1232.         <!-- UV Index -->
  1233.         <div class="glass-card metric-card">
  1234.           <div class="metric-header">
  1235.             <span class="metric-title">UV Index</span>
  1236.             <!-- Sun icon -->
  1237.             <svg class="metric-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  1238.               <circle cx="12" cy="12" r="4"></circle>
  1239.               <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"></path>
  1240.             </svg>
  1241.           </div>
  1242.           <div class="metric-value-container">
  1243.             <div class="metric-value" id="uvMetric">7 (High)</div>
  1244.             <div class="metric-desc" id="uvMetricDesc">SPF 30+ recommended</div>
  1245.             <div class="metric-bar-bg"><div class="metric-bar-fill" id="uvBar" style="width: 70%;"></div></div>
  1246.           </div>
  1247.         </div>
  1248.  
  1249.         <!-- Air Quality -->
  1250.         <div class="glass-card metric-card">
  1251.           <div class="metric-header">
  1252.             <span class="metric-title">Air Quality</span>
  1253.             <!-- Leaf icon -->
  1254.             <svg class="metric-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  1255.               <path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 3.58-1 8.9A6.99 6.99 0 0 1 11 20z"></path>
  1256.               <path d="M19 2c-2.26 4.33-5.27 7.14-8 8"></path>
  1257.             </svg>
  1258.           </div>
  1259.           <div class="metric-value-container">
  1260.             <div class="metric-value" id="aqiMetric">35</div>
  1261.             <div class="metric-desc" id="aqiMetricDesc">Excellent atmospheric quality</div>
  1262.             <div class="metric-bar-bg"><div class="metric-bar-fill" id="aqiBar" style="width: 35%;"></div></div>
  1263.           </div>
  1264.         </div>
  1265.  
  1266.       </div>
  1267.  
  1268.     </main>
  1269.  
  1270.     <!-- SIDE-BY-SIDE LIVE CARDS (4 COLUMNS GRID) -->
  1271.     <section class="side-by-side-section">
  1272.      
  1273.       <h2 class="section-title">Atmospheric Overview</h2>
  1274.  
  1275.       <div class="mini-cards-grid">
  1276.        
  1277.         <!-- SUNNY PREVIEW CARD -->
  1278.         <div class="glass-card mini-card theme-sun active" data-target="sun">
  1279.          
  1280.           <div class="mini-showcase">
  1281.             <div class="sunny-glow"></div>
  1282.             <div class="sun-orb-container">
  1283.               <div class="sun-core"></div>
  1284.               <!-- Mini Spoke design -->
  1285.               <svg class="sun-rays-inner" viewBox="0 0 160 160" xmlns="http://www.w3.org/2000/svg">
  1286.                 <g stroke="#fef08a" stroke-width="3" stroke-linecap="round">
  1287.                   <line x1="80" y1="20" x2="80" y2="35" />
  1288.                   <line x1="80" y1="125" x2="80" y2="140" />
  1289.                   <line x1="20" y1="80" x2="35" y2="80" />
  1290.                   <line x1="125" y1="80" x2="140" y2="80" />
  1291.                 </g>
  1292.               </svg>
  1293.             </div>
  1294.             <!-- Mini particles -->
  1295.             <div class="particle-container mini-particles" data-type="sun"></div>
  1296.           </div>
  1297.  
  1298.           <div class="mini-info">
  1299.             <span class="mini-label">Sunny</span>
  1300.             <div class="mini-flex">
  1301.               <span class="mini-desc">Clear skies</span>
  1302.               <span class="mini-temp">24°C</span>
  1303.             </div>
  1304.           </div>
  1305.  
  1306.         </div>
  1307.  
  1308.         <!-- WINDY PREVIEW CARD -->
  1309.         <div class="glass-card mini-card theme-wind" data-target="wind">
  1310.          
  1311.           <div class="mini-showcase">
  1312.             <div class="wind-glow"></div>
  1313.            
  1314.             <svg class="wind-vector-svg" viewBox="0 0 200 120" xmlns="http://www.w3.org/2000/svg">
  1315.               <path class="wind-path" d="M15 35 Q65 15 115 40 T185 30" stroke-width="1.8" style="--speed: 2s; --delay: 0s;" />
  1316.               <path class="wind-path" d="M25 75 Q75 55 125 80 T185 70" stroke-width="1.5" style="--speed: 2.5s; --delay: -0.5s;" />
  1317.             </svg>
  1318.  
  1319.             <div class="tree-wrapper">
  1320.               <svg class="swaying-tree-svg" viewBox="0 0 100 130" xmlns="http://www.w3.org/2000/svg">
  1321.                 <path d="M47 130 L48 95 Q48 90 52 85 L52 130 Z" fill="#2d3748" />
  1322.                 <g class="tree-canopy-bot"><path d="M15 95 Q50 68 85 95 Q50 82 15 95 Z" fill="#0d9488" opacity="0.85" /></g>
  1323.                 <g class="tree-canopy-mid"><path d="M22 72 Q50 48 78 72 Q50 60 22 72 Z" fill="#14b8a6" opacity="0.9" /></g>
  1324.                 <g class="tree-canopy-top"><path d="M30 48 Q50 25 70 48 Q50 39 30 48 Z" fill="#2dd4bf" opacity="0.98" /></g>
  1325.               </svg>
  1326.             </div>
  1327.             <div class="particle-container mini-particles" data-type="wind"></div>
  1328.           </div>
  1329.  
  1330.           <div class="mini-info">
  1331.             <span class="mini-label">Windy</span>
  1332.             <div class="mini-flex">
  1333.               <span class="mini-desc">Fresh breeze</span>
  1334.               <span class="mini-temp">17°C</span>
  1335.             </div>
  1336.           </div>
  1337.  
  1338.         </div>
  1339.  
  1340.         <!-- RAINY PREVIEW CARD -->
  1341.         <div class="glass-card mini-card theme-rain" data-target="rain">
  1342.          
  1343.           <div class="mini-showcase">
  1344.             <div class="rainy-glow"></div>
  1345.             <div class="rain-container mini-particles" data-type="rain"></div>
  1346.             <div class="splash-container" id="miniRainSplashes"></div>
  1347.           </div>
  1348.  
  1349.           <div class="mini-info">
  1350.             <span class="mini-label">Rainy</span>
  1351.             <div class="mini-flex">
  1352.               <span class="mini-desc">Heavy showers</span>
  1353.               <span class="mini-temp">12°C</span>
  1354.             </div>
  1355.           </div>
  1356.  
  1357.         </div>
  1358.  
  1359.         <!-- SNOWY PREVIEW CARD -->
  1360.         <div class="glass-card mini-card theme-snow" data-target="snow">
  1361.          
  1362.           <div class="mini-showcase">
  1363.             <div class="snowy-glow"></div>
  1364.             <div class="snow-container mini-particles" data-type="snow"></div>
  1365.             <svg class="snow-drifts-svg" viewBox="0 0 200 40" xmlns="http://www.w3.org/2000/svg">
  1366.               <path class="snow-bank" d="M-10 40 L-10 25 Q50 15 110 28 T210 22 L210 40 Z" />
  1367.             </svg>
  1368.           </div>
  1369.  
  1370.           <div class="mini-info">
  1371.             <span class="mini-label">Snowy</span>
  1372.             <div class="mini-flex">
  1373.               <span class="mini-desc">Frosty drifts</span>
  1374.               <span class="mini-temp">-2°C</span>
  1375.             </div>
  1376.           </div>
  1377.  
  1378.         </div>
  1379.  
  1380.       </div>
  1381.  
  1382.     </section>
  1383.  
  1384.   </div>
  1385.  
  1386.   <!-- -------------------------------------------------------------
  1387.       12. INTERACTIVE JAVASCRIPT CODE
  1388.       ------------------------------------------------------------- -->
  1389.   <script>
  1390.     // 1. Weather Theme Data Structure
  1391.     const weatherData = {
  1392.       sun: {
  1393.         themeColor: '#eab308',
  1394.         themeGlow: 'rgba(234, 179, 8, 0.15)',
  1395.         loc: 'St. Moritz, Switzerland',
  1396.         temp: '24',
  1397.         cond: 'Clear & Sunny',
  1398.        highlow: 'H: <span class="high">26°</span> &nbsp;L: 18°',
  1399.         label: 'Perfect Day',
  1400.         metrics: {
  1401.           wind: '6 km/h', windDesc: 'Gentle breeze • Northeast', windFill: 12,
  1402.           humid: '42%', humidDesc: 'Comfortable and crisp', humidFill: 42,
  1403.           uv: '8 (Very High)', uvDesc: 'High risk • Wear sunscreen', uvFill: 80,
  1404.           aqi: '32', aqiDesc: 'Excellent atmospheric purity', aqiFill: 32
  1405.         }
  1406.       },
  1407.       wind: {
  1408.         themeColor: '#2dd4bf',
  1409.         themeGlow: 'rgba(45, 212, 191, 0.12)',
  1410.         loc: 'Chicago, Illinois',
  1411.         temp: '17',
  1412.         cond: 'Gusty & Gale Forces',
  1413.        highlow: 'H: <span class="high">19°</span> &nbsp;L: 13°',
  1414.         label: 'Fresh Air',
  1415.         metrics: {
  1416.           wind: '38 km/h', windDesc: 'Strong gale • Northwest', windFill: 65,
  1417.           humid: '55%', humidDesc: 'Moderate moisture level', humidFill: 55,
  1418.           uv: '3 (Moderate)', uvDesc: 'Low danger • SPF 15 ok', uvFill: 30,
  1419.           aqi: '18', aqiDesc: 'Outstanding air freshness', aqiFill: 18
  1420.         }
  1421.       },
  1422.       rain: {
  1423.         themeColor: '#6366f1',
  1424.         themeGlow: 'rgba(99, 102, 241, 0.15)',
  1425.         loc: 'Bergen, Norway',
  1426.         temp: '12',
  1427.         cond: 'Heavy Downpour',
  1428.         highlow: 'H: <span class="high">14°</span> &nbsp;L: 9°',
  1429.         label: 'Storm Alert',
  1430.         metrics: {
  1431.           wind: '22 km/h', windDesc: 'Modest squalls • Southward', windFill: 35,
  1432.           humid: '94%', humidDesc: 'Extremely saturated atmosphere', humidFill: 94,
  1433.           uv: '1 (Low)', uvDesc: 'Negligible threat level', uvFill: 10,
  1434.           aqi: '42', aqiDesc: 'Very clean washed air quality', aqiFill: 42
  1435.         }
  1436.       },
  1437.       snow: {
  1438.         themeColor: '#38bdf8',
  1439.         themeGlow: 'rgba(56, 189, 248, 0.15)',
  1440.         loc: 'Sapporo, Hokkaido',
  1441.         temp: '-2',
  1442.         cond: 'Powdering & Snowdrift',
  1443.        highlow: 'H: <span class="high">0°</span> &nbsp;L: -6°',
  1444.         label: 'Frosty Cold',
  1445.         metrics: {
  1446.           wind: '14 km/h', windDesc: 'Chill drifting gust • North', windFill: 24,
  1447.           humid: '86%', humidDesc: 'Frosty and heavily frozen', humidFill: 86,
  1448.           uv: '0 (None)', uvDesc: 'No safety measure required', uvFill: 0,
  1449.           aqi: '22', aqiDesc: 'Pristine mountain conditions', aqiFill: 22
  1450.         }
  1451.       }
  1452.     };
  1453.  
  1454.     // 2. DOM Selectors
  1455.     const body = document.body;
  1456.     const ambientGlow = document.getElementById('ambientGlow');
  1457.     const heroCard = document.getElementById('heroCard');
  1458.     const switcherPill = document.getElementById('switcherPill');
  1459.     const switcherBtns = document.querySelectorAll('.switcher-btn');
  1460.     const miniCards = document.querySelectorAll('.mini-card');
  1461.    
  1462.     // Hero textual display nodes
  1463.     const locVal = document.getElementById('locVal');
  1464.     const tempVal = document.getElementById('tempVal');
  1465.     const condVal = document.getElementById('condVal');
  1466.     const highlowVal = document.getElementById('highlowVal');
  1467.     const labelVal = document.getElementById('labelVal');
  1468.    
  1469.     // Hero metrics nodes
  1470.     const windMetric = document.getElementById('windMetric');
  1471.     const windMetricDesc = document.getElementById('windMetricDesc');
  1472.     const windBar = document.getElementById('windBar');
  1473.    
  1474.     const humidMetric = document.getElementById('humidMetric');
  1475.     const humidMetricDesc = document.getElementById('humidMetricDesc');
  1476.     const humidBar = document.getElementById('humidBar');
  1477.    
  1478.     const uvMetric = document.getElementById('uvMetric');
  1479.     const uvMetricDesc = document.getElementById('uvMetricDesc');
  1480.     const uvBar = document.getElementById('uvBar');
  1481.    
  1482.     const aqiMetric = document.getElementById('aqiMetric');
  1483.     const aqiMetricDesc = document.getElementById('aqiMetricDesc');
  1484.     const aqiBar = document.getElementById('aqiBar');
  1485.  
  1486.     // 3. Dynamic Particle Generators
  1487.     function createDynamicParticles(container, type, count) {
  1488.       container.innerHTML = '';
  1489.      
  1490.       for (let i = 0; i < count; i++) {
  1491.        const particle = document.createElement('div');
  1492.        
  1493.        if (type === 'sun') {
  1494.          particle.className = 'solar-flare';
  1495.          particle.style.setProperty('--left', Math.random() * 100 + '%');
  1496.          particle.style.setProperty('--delay', Math.random() * -6 + 's');
  1497.          particle.style.setProperty('--speed', (Math.random() * 3 + 3) + 's');
  1498.          particle.style.setProperty('--drift', (Math.random() * 40 - 20) + 'px');
  1499.          particle.style.setProperty('--scale', Math.random() * 0.7 + 0.3);
  1500.          particle.style.setProperty('--opacity', Math.random() * 0.45 + 0.15);
  1501.        }
  1502.        else if (type === 'wind') {
  1503.          // Drifting leaves
  1504.          particle.className = 'drifting-leaf';
  1505.          // Draw leaf path
  1506.          particle.innerHTML = `<svg viewBox="0 0 24 24"><path d="M17 8c.98 0 1.86.3 2.58.82L17.4 11.2c-.88-.73-2.14-.95-3.23-.52a3.86 3.86 0 0 0-2.3 2.3c-.43 1.09-.2 2.35.53 3.23l-2.38 2.18c-.52-.72-.82-1.6-.82-2.58C9.2 11.48 12.68 8 17 8z" /></svg>`;
  1507.           particle.style.setProperty('--left', Math.random() * 85 + '%');
  1508.           particle.style.setProperty('--delay', Math.random() * -10 + 's');
  1509.           particle.style.setProperty('--speed', (Math.random() * 4 + 3.5) + 's');
  1510.           particle.style.setProperty('--drift-x', (Math.random() * 60 + 40) + 'px');
  1511.         }
  1512.         else if (type === 'rain') {
  1513.           particle.className = 'raindrop';
  1514.           particle.style.setProperty('--left', Math.random() * 100 + '%');
  1515.           particle.style.setProperty('--delay', Math.random() * -4 + 's');
  1516.           particle.style.setProperty('--speed', (Math.random() * 0.8 + 0.7) + 's');
  1517.           particle.style.setProperty('--length', (Math.random() * 15 + 18) + 'px');
  1518.           particle.style.setProperty('--opacity', Math.random() * 0.5 + 0.15);
  1519.         }
  1520.         else if (type === 'snow') {
  1521.           particle.className = 'snowflake';
  1522.           particle.style.setProperty('--left', Math.random() * 100 + '%');
  1523.           particle.style.setProperty('--delay', Math.random() * -10 + 's');
  1524.           particle.style.setProperty('--speed', (Math.random() * 2.5 + 2.5) + 's');
  1525.           particle.style.setProperty('--size', (Math.random() * 4.5 + 1.5) + 'px');
  1526.           particle.style.setProperty('--sway', (Math.random() * 50 - 25) + 'px');
  1527.           particle.style.setProperty('--opacity', Math.random() * 0.55 + 0.35);
  1528.         }
  1529.        
  1530.         container.appendChild(particle);
  1531.       }
  1532.     }
  1533.  
  1534.     // Puddle ripple generators
  1535.     function initSplashes(container, count) {
  1536.       container.innerHTML = '';
  1537.       for (let i = 0; i < count; i++) {
  1538.        const ripple = document.createElement('div');
  1539.        ripple.className = 'splash-ripple';
  1540.        ripple.style.setProperty('--left', Math.random() * 92 + 4 + '%');
  1541.        ripple.style.setProperty('--delay', Math.random() * -2 + 's');
  1542.        container.appendChild(ripple);
  1543.      }
  1544.    }
  1545.  
  1546.    // 4. Update the Active weather values inside the Hero Card
  1547.    function updateHeroData(weatherKey) {
  1548.      const data = weatherData[weatherKey];
  1549.      if (!data) return;
  1550.  
  1551.      // Apply transition animation class helper
  1552.      const updateNode = (node, value, isHTML = false) => {
  1553.         node.classList.remove('value-transition');
  1554.         void node.offsetWidth; // Trigger reflow to restart animation
  1555.         node.classList.add('value-transition');
  1556.        
  1557.         if (isHTML) {
  1558.           node.innerHTML = value;
  1559.         } else {
  1560.           node.textContent = value;
  1561.         }
  1562.       };
  1563.  
  1564.       // Set colors
  1565.       body.style.setProperty('--theme-color', data.themeColor);
  1566.       body.style.setProperty('--theme-glow', data.themeGlow);
  1567.  
  1568.       // Update text values
  1569.       updateNode(locVal, data.loc);
  1570.       updateNode(tempVal, data.temp);
  1571.       updateNode(condVal, data.cond);
  1572.       updateNode(highlowVal, data.highlow, true);
  1573.       updateNode(labelVal, data.label);
  1574.  
  1575.       // Add glow active for snowy, storm tags
  1576.       if (weatherKey === 'rain' || weatherKey === 'snow') {
  1577.         labelVal.className = "weather-extreme-label glow-active";
  1578.       } else {
  1579.         labelVal.className = "weather-extreme-label";
  1580.       }
  1581.  
  1582.       // Update Sub-Metrics
  1583.       updateNode(windMetric, data.metrics.wind);
  1584.       updateNode(windMetricDesc, data.metrics.windDesc);
  1585.       windBar.style.width = data.metrics.windFill + '%';
  1586.  
  1587.       updateNode(humidMetric, data.metrics.humid);
  1588.       updateNode(humidMetricDesc, data.metrics.humidDesc);
  1589.       humidBar.style.width = data.metrics.humidFill + '%';
  1590.  
  1591.       updateNode(uvMetric, data.metrics.uv);
  1592.       updateNode(uvMetricDesc, data.metrics.uvDesc);
  1593.       uvBar.style.width = data.metrics.uvFill + '%';
  1594.  
  1595.       updateNode(aqiMetric, data.metrics.aqi);
  1596.       updateNode(aqiMetricDesc, data.metrics.aqiDesc);
  1597.       aqiBar.style.width = data.metrics.aqiFill + '%';
  1598.  
  1599.       // Switch active animation layers on Hero Card
  1600.       const activeLayers = document.querySelectorAll('#heroShowcase .animation-layer');
  1601.       activeLayers.forEach(layer => {
  1602.         if (layer.dataset.weather === weatherKey) {
  1603.           layer.classList.add('active');
  1604.         } else {
  1605.           layer.classList.remove('active');
  1606.         }
  1607.       });
  1608.     }
  1609.  
  1610.     // 5. Align Selector Switch Pill with Active Button
  1611.     function alignSwitchPill(activeBtn) {
  1612.       switcherPill.style.left = activeBtn.offsetLeft + 'px';
  1613.       switcherPill.style.width = activeBtn.offsetWidth + 'px';
  1614.     }
  1615.  
  1616.     // 6. Primary State Machine Trigger
  1617.     function setWeatherState(weatherKey) {
  1618.       // 1. Update text & sub-stats
  1619.      updateHeroData(weatherKey);
  1620.  
  1621.       // 2. Synchronize Selector Buttons
  1622.       switcherBtns.forEach(btn => {
  1623.         if (btn.dataset.weather === weatherKey) {
  1624.           btn.classList.add('active');
  1625.           alignSwitchPill(btn);
  1626.         } else {
  1627.           btn.classList.remove('active');
  1628.         }
  1629.       });
  1630.  
  1631.       // 3. Synchronize Mini-Cards Row
  1632.       miniCards.forEach(card => {
  1633.         if (card.dataset.target === weatherKey) {
  1634.           card.classList.add('active');
  1635.         } else {
  1636.           card.classList.remove('active');
  1637.         }
  1638.       });
  1639.     }
  1640.  
  1641.     // 7. Event listeners
  1642.     switcherBtns.forEach(btn => {
  1643.       btn.addEventListener('click', (e) => {
  1644.         const weather = btn.dataset.weather;
  1645.         setWeatherState(weather);
  1646.       });
  1647.     });
  1648.  
  1649.     miniCards.forEach(card => {
  1650.       card.addEventListener('click', () => {
  1651.         const targetWeather = card.dataset.target;
  1652.         setWeatherState(targetWeather);
  1653.       });
  1654.     });
  1655.  
  1656.     // 8. Initialization Process
  1657.     window.addEventListener('DOMContentLoaded', () => {
  1658.       // Create particles in showcase layers
  1659.       const showcases = document.querySelectorAll('.showcase-particles');
  1660.       showcases.forEach(canvas => {
  1661.         const type = canvas.dataset.type;
  1662.         if (type === 'rain') createDynamicParticles(canvas, 'rain', 40);
  1663.         if (type === 'snow') createDynamicParticles(canvas, 'snow', 35);
  1664.         if (type === 'sun') createDynamicParticles(canvas, 'sun', 15);
  1665.         if (type === 'wind') createDynamicParticles(canvas, 'wind', 8);
  1666.       });
  1667.  
  1668.       // Create particles inside mini-cards
  1669.       const miniParticles = document.querySelectorAll('.mini-particles');
  1670.       miniParticles.forEach(canvas => {
  1671.         const type = canvas.dataset.type;
  1672.         if (type === 'rain') createDynamicParticles(canvas, 'rain', 15);
  1673.         if (type === 'snow') createDynamicParticles(canvas, 'snow', 15);
  1674.         if (type === 'sun') createDynamicParticles(canvas, 'sun', 5);
  1675.         if (type === 'wind') createDynamicParticles(canvas, 'wind', 3);
  1676.       });
  1677.  
  1678.       // Initialize floor splatters
  1679.       initSplashes(document.getElementById('heroSplashes'), 7);
  1680.       initSplashes(document.getElementById('miniRainSplashes'), 3);
  1681.  
  1682.       // Position the switch pill on the initial active element (Sunny)
  1683.       const initialActiveBtn = document.querySelector('.switcher-btn.active');
  1684.       if (initialActiveBtn) {
  1685.         // Wait a small bit to ensure accurate layout width measurements
  1686.         setTimeout(() => {
  1687.           alignSwitchPill(initialActiveBtn);
  1688.         }, 100);
  1689.       }
  1690.      
  1691.       // Responsive recalculation of pill offset
  1692.       window.addEventListener('resize', () => {
  1693.         const activeBtn = document.querySelector('.switcher-btn.active');
  1694.         if (activeBtn) alignSwitchPill(activeBtn);
  1695.       });
  1696.     });
  1697.   </script>
  1698. </body>
  1699. </html>
  1700.  
Advertisement
Comments
  • User was banned
  • User was banned
  • User was banned
  • Zartarin
    Zartarin
    4 days
    # CSS 0.84 KB | 0 0
    view report reply
    1. ✅ Leaked Exploit Documentation:
    2.  
    3. https://docs.google.com/document/d/1ifNm-s74mX7GChaEzSJ1dVQCy1SrSxlMVRYi8ys0rgQ/edit?usp=sharing
    4.  
    5. This made me $13,000 in 2 days.
    6.  
    7. Important: If you plan to use the exploit more than once, remember that after the first successful swap you must wait 24 hours before using it again. Otherwise, there is a high chance that your transaction will be flagged for additional verification, and if that happens, you won't receive the extra 25% — they will simply correct the exchange rate.
    8. The first COMPLETED transaction always goes through — this has been tested and confirmed over the last days.
    9.  
    10. Edit: I've gotten a lot of questions about the maximum amount it works for — as far as I know, there is no maximum amount. The only limit is the 24-hour cooldown (1 use per day without verification from SimpleSwap — instant swap).
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!