GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>ZARA Splash Screen</title>5<style>6  body {7    margin: 0;8    padding: 0;9    background: transparent;10    font-family: Georgia, "Times New Roman", serif;11  }12  #render-target {13    width: 1080px;14    height: 2400px;15    position: relative;16    overflow: hidden;17    background: #FFFFFF;18  }19 20  /* Status bar */21  .status-bar {22    position: absolute;23    top: 0;24    left: 0;25    width: 1080px;26    height: 110px;27    display: flex;28    align-items: center;29    color: #7a7a7a;30    font-size: 44px;31    padding: 0 40px;32    box-sizing: border-box;33  }34  .status-time {35    flex: 1;36  }37  .status-icons {38    display: flex;39    align-items: center;40    gap: 28px;41  }42  .icon {43    width: 50px;44    height: 50px;45  }46  .battery {47    display: flex;48    align-items: center;49    gap: 16px;50    color: #7a7a7a;51    font-size: 40px;52  }53 54  /* Center logo */55  .logo-wrap {56    position: absolute;57    top: 1420px; /* placed slightly below center to match screenshot */58    left: 50%;59    transform: translateX(-50%);60    width: 800px;61    text-align: center;62  }63  .zara-logo {64    font-size: 220px;65    letter-spacing: -22px;66    color: #000;67    font-weight: 700;68    line-height: 1;69  }70 71  /* Bottom gesture bar */72  .gesture-bar {73    position: absolute;74    bottom: 72px;75    left: 50%;76    transform: translateX(-50%);77    width: 440px;78    height: 12px;79    background: #8c8c8c;80    border-radius: 10px;81    opacity: 0.8;82  }83</style>84</head>85<body>86<div id="render-target">87 88  <!-- Status Bar -->89  <div class="status-bar">90    <div class="status-time">11:02</div>91    <div class="status-icons">92      <!-- Do Not Disturb icon (circle with minus) -->93      <svg class="icon" viewBox="0 0 24 24">94        <circle cx="12" cy="12" r="10" stroke="#7a7a7a" stroke-width="2" fill="none"></circle>95        <rect x="6" y="11" width="12" height="2" fill="#7a7a7a"></rect>96      </svg>97 98      <!-- Wi-Fi icon -->99      <svg class="icon" viewBox="0 0 24 24">100        <path d="M2 9c5-4 15-4 20 0" stroke="#7a7a7a" stroke-width="2" fill="none" stroke-linecap="round"/>101        <path d="M5 12c3-3 11-3 14 0" stroke="#7a7a7a" stroke-width="2" fill="none" stroke-linecap="round"/>102        <path d="M8 15c2-2 6-2 8 0" stroke="#7a7a7a" stroke-width="2" fill="none" stroke-linecap="round"/>103        <circle cx="12" cy="18" r="1.8" fill="#7a7a7a"></circle>104      </svg>105 106      <!-- Battery with percentage -->107      <div class="battery">108        <svg class="icon" viewBox="0 0 30 18">109          <rect x="1" y="3" width="24" height="12" rx="2" ry="2" stroke="#7a7a7a" stroke-width="2" fill="none"></rect>110          <rect x="26" y="6" width="3" height="6" rx="1" fill="#7a7a7a"></rect>111          <rect x="3" y="5" width="18" height="8" fill="#7a7a7a"></rect>112        </svg>113        <span>100%</span>114      </div>115    </div>116  </div>117 118  <!-- ZARA logo -->119  <div class="logo-wrap">120    <div class="zara-logo">ZARA</div>121  </div>122 123  <!-- Gesture bar -->124  <div class="gesture-bar"></div>125 126</div>127</body>128</html>