GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8" />5<meta name="viewport" content="width=1080, initial-scale=1.0" />6<title>UI Render</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #FFFFFF;13    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;14  }15 16  /* Top status bar */17  .statusbar {18    position: absolute; top: 0; left: 0; width: 100%; height: 120px;19    background: #000; color: #fff;20    display: flex; align-items: center; justify-content: space-between;21    padding: 0 36px; box-sizing: border-box;22  }23  .status-left { font-size: 42px; font-weight: 500; letter-spacing: 0.5px; }24  .status-right { display: flex; align-items: center; gap: 26px; }25  .status-icon { width: 40px; height: 40px; }26 27  /* Bottom gesture/navigation bar */28  .nav-bar {29    position: absolute; bottom: 0; left: 0; width: 100%; height: 120px;30    background: #000;31    display: flex; align-items: center; justify-content: center;32  }33  .gesture-handle {34    width: 320px; height: 14px; border-radius: 7px; background: #BDBDBD;35    opacity: 0.9;36  }37 38  /* Right vertical range selector */39  .range-column {40    position: absolute; right: 84px; top: 220px; bottom: 220px;41    display: flex; flex-direction: column; justify-content: space-between; align-items: center;42  }43  .range-pill {44    width: 120px; height: 380px; background: #0B44B5; border-radius: 60px;45    display: flex; align-items: center; justify-content: center;46    color: #fff; font-size: 42px; font-weight: 700;47    transform: rotate(90deg);48  }49  .range-item {50    color: #8A8A8A; font-size: 42px; font-weight: 600; letter-spacing: 1px;51    transform: rotate(90deg);52  }53 54  /* Center content */55  .center-area {56    position: absolute; left: 0; right: 0; top: 0; bottom: 0;57    display: flex; align-items: center; justify-content: center;58    pointer-events: none;59  }60  .logo-wrap {61    position: absolute; left: 360px; top: 1100px;62    width: 360px; height: 360px;63    background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;64    display: flex; align-items: center; justify-content: center;65    font-size: 44px; font-weight: 700; border-radius: 180px;66  }67  .spinner {68    position: absolute; left: 760px; top: 1180px; width: 140px; height: 140px;69  }70</style>71</head>72<body>73<div id="render-target">74 75  <!-- Status Bar -->76  <div class="statusbar">77    <div class="status-left">11:19</div>78    <div class="status-right">79      <!-- Simple status icons -->80      <svg class="status-icon" viewBox="0 0 24 24" fill="none">81        <!-- Cellular bars -->82        <rect x="2" y="12" width="3" height="8" fill="#fff" opacity="0.7"/>83        <rect x="7" y="9" width="3" height="11" fill="#fff" opacity="0.8"/>84        <rect x="12" y="6" width="3" height="14" fill="#fff" opacity="0.9"/>85        <rect x="17" y="3" width="3" height="17" fill="#fff"/>86      </svg>87      <svg class="status-icon" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">88        <!-- Lock icon -->89        <circle cx="12" cy="14" r="6" fill="none"/>90        <path d="M8 10v-2a4 4 0 0 1 8 0v2" />91      </svg>92      <svg class="status-icon" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">93        <!-- Bell icon -->94        <path d="M12 3a5 5 0 0 0-5 5v3c0 1-1 2-2 3h14c-1-1-2-2-2-3V8a5 5 0 0 0-5-5z"/>95        <path d="M10 19a2 2 0 0 0 4 0"/>96      </svg>97      <svg class="status-icon" viewBox="0 0 24 24" fill="#fff">98        <!-- XE small mark placeholder -->99        <text x="4" y="17" font-size="12" font-weight="700" fill="#fff">xe</text>100      </svg>101      <svg class="status-icon" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">102        <!-- N glyph -->103        <path d="M5 19V5l14 14V5" />104      </svg>105      <svg class="status-icon" viewBox="0 0 24 24" fill="#fff">106        <!-- Dot -->107        <circle cx="12" cy="12" r="3" fill="#fff" />108      </svg>109      <svg class="status-icon" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">110        <!-- WiFi icon -->111        <path d="M2 9c5-5 15-5 20 0" />112        <path d="M5 12c3-3 11-3 14 0" />113        <path d="M8 15c2-2 6-2 8 0" />114        <circle cx="12" cy="18" r="1.5" fill="#fff"/>115      </svg>116      <svg class="status-icon" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">117        <!-- Battery -->118        <rect x="3" y="7" width="17" height="10" rx="2" />119        <rect x="21" y="10" width="1.5" height="4" />120        <rect x="5" y="9" width="11" height="6" fill="#fff"/>121        <path d="M10 9l-2 4h3l-2 4" stroke="#000" opacity="0.15"/>122      </svg>123    </div>124  </div>125 126  <!-- Right vertical range selector -->127  <div class="range-column">128    <div class="range-pill">1D</div>129    <div class="range-item">1W</div>130    <div class="range-item">1M</div>131    <div class="range-item">3M</div>132    <div class="range-item">1Y</div>133    <div class="range-item">5Y</div>134    <div class="range-item">10Y</div>135  </div>136 137  <!-- Center logo and spinner -->138  <div class="logo-wrap">[IMG: XE Logo]</div>139  <div class="spinner">140    <svg viewBox="0 0 120 120">141      <!-- light arc -->142      <path d="M60 15 A45 45 0 0 1 95 50" fill="none" stroke="#BBD0EA" stroke-width="8" stroke-linecap="round"/>143      <!-- dark arc -->144      <path d="M95 50 A45 45 0 0 1 85 80" fill="none" stroke="#0B44B5" stroke-width="8" stroke-linecap="round"/>145    </svg>146  </div>147 148  <!-- Bottom navigation bar -->149  <div class="nav-bar">150    <div class="gesture-handle"></div>151  </div>152 153</div>154</body>155</html>