GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Kids Loading Screen</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: "Helvetica Neue", Arial, sans-serif; }7  #render-target {8    width:1080px; height:2400px;9    position:relative; overflow:hidden;10    background:#FFFFFF;11  }12 13  /* Header */14  .topbar {15    position:absolute; left:0; top:0; width:100%;16    height:220px;17    padding:70px 40px 20px 40px; /* space for status bar feel */18    box-sizing:border-box;19    border-bottom:1px solid #f0f0f0;20  }21  .topbar-inner {22    display:flex; align-items:center; justify-content:space-between;23  }24  .left-group {25    display:flex; align-items:center;26    gap:28px;27  }28  .back-btn {29    width:56px; height:56px; display:flex; align-items:center; justify-content:center;30  }31  .title-block {32    display:flex; flex-direction:column;33  }34  .title {35    font-size:42px; color:#1c1c1c; font-weight:700; letter-spacing:0.5px;36  }37  .subtitle {38    margin-top:6px;39    font-size:28px; color:#7a7a7a; font-weight:500;40  }41  .right-icons {42    display:flex; align-items:center; gap:36px;43  }44  .icon-btn { width:56px; height:56px; display:flex; align-items:center; justify-content:center; }45  .icon { width:44px; height:44px; stroke:#2E2E3A; fill:none; stroke-width:2.5; }46 47  /* Center loader and quote */48  .center-wrap {49    position:absolute; left:0; right:0; top:820px;50    display:flex; flex-direction:column; align-items:center;51    color:#3a3a3a;52  }53  .loader {54    width:120px; height:120px; border-radius:60px;55    background:#FFFFFF;56    box-shadow:0 6px 16px rgba(0,0,0,0.12);57    position:relative;58    display:flex; align-items:center; justify-content:center;59  }60  .loader svg { width:84px; height:84px; }61  .wave {62    margin-top:22px;63    width:44px; height:12px;64  }65  .quote {66    width:860px;67    text-align:center;68    margin-top:26px;69    font-size:40px; color:#1f1f1f; font-weight:500;70  }71  .author {72    margin-top:18px; font-size:34px; color:#9b9b9b; font-weight:600;73  }74 75  /* Home indicator */76  .home-indicator {77    position:absolute; bottom:48px; left:50%;78    transform:translateX(-50%);79    width:500px; height:12px; background:#D1D1D1; border-radius:8px;80  }81</style>82</head>83<body>84<div id="render-target">85 86  <!-- Top Navigation -->87  <div class="topbar">88    <div class="topbar-inner">89      <div class="left-group">90        <div class="back-btn">91          <svg class="icon" viewBox="0 0 24 24">92            <path d="M14.5 5.5 L7 12 L14.5 18.5" stroke-linecap="round" stroke-linejoin="round"/>93          </svg>94        </div>95        <div class="title-block">96          <div class="title">KIDS</div>97          <div class="subtitle">166601 Items</div>98        </div>99      </div>100 101      <div class="right-icons">102        <div class="icon-btn">103          <svg class="icon" viewBox="0 0 24 24">104            <circle cx="10" cy="10" r="6"/>105            <path d="M15 15 L21 21" stroke-linecap="round"/>106          </svg>107        </div>108        <div class="icon-btn">109          <svg class="icon" viewBox="0 0 24 24">110            <path d="M12 20.5 C5 15 3 11 5.5 8.5 C7.5 6.5 10 7 12 9 C14 7 16.5 6.5 18.5 8.5 C21 11 19 15 12 20.5" stroke-linecap="round" stroke-linejoin="round"/>111          </svg>112        </div>113        <div class="icon-btn">114          <svg class="icon" viewBox="0 0 24 24">115            <path d="M6 8 H18 L17 21 H7 L6 8 Z" stroke-linejoin="round"/>116            <path d="M8 8 V6 C8 4.5 9.5 3.5 11 3.5 H13 C14.5 3.5 16 4.5 16 6 V8" />117          </svg>118        </div>119      </div>120    </div>121  </div>122 123  <!-- Center content -->124  <div class="center-wrap">125    <div class="loader">126      <!-- Magenta arc to mimic spinner -->127      <svg viewBox="0 0 36 36">128        <circle cx="18" cy="18" r="14" stroke="#ECECEC" stroke-width="4" fill="none"/>129        <path d="M18 4 A14 14 0 0 1 30 16" stroke="#D66AD3" stroke-width="4" fill="none" stroke-linecap="round"/>130      </svg>131    </div>132    <!-- Wavy divider -->133    <svg class="wave" viewBox="0 0 60 12">134      <path d="M0 6 Q10 0 20 6 T40 6 T60 6" stroke="#B7B7B7" stroke-width="2" fill="none" stroke-linecap="round"/>135    </svg>136    <div class="quote">“Elegance is the only beauty that never fades.”</div>137    <div class="author">Audrey Hepburn</div>138  </div>139 140  <!-- Bottom home indicator -->141  <div class="home-indicator"></div>142</div>143</body>144</html>