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>Clock UI</title>7<style>8  :root{9    --bg:#1f1a1d;10    --text:#e8dcde;11    --muted:#cfc2c6;12    --accent:#f6a9c2;13    --pill:#4a3a41;14    --icon:#d9cdd0;15  }16  body{margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif;}17  #render-target{18    position:relative;19    width:1080px; height:2400px;20    overflow:hidden;21    background:var(--bg);22    color:var(--text);23  }24 25  /* Status bar */26  .status-bar{27    position:absolute; top:0; left:0; right:0;28    height:90px; padding:24px 30px 0 30px;29    display:flex; justify-content:space-between; align-items:flex-start;30    font-size:34px; color:#fff;31    letter-spacing:0.5px;32  }33  .status-right{display:flex; align-items:center; gap:26px;}34  .status-icon svg{width:40px; height:40px; fill:#fff;}35  .battery{display:flex; align-items:center;}36  .battery svg{width:52px; height:32px;}37 38  /* App bar title */39  .title{40    position:absolute; top:160px; left:72px;41    font-size:64px; font-weight:600; color:var(--text);42  }43 44  /* Menu dots */45  .menu-dots{46    position:absolute; top:170px; right:44px;47    display:flex; flex-direction:column; gap:14px;48  }49  .menu-dots span{50    width:10px; height:10px; border-radius:50%;51    background:var(--muted); display:block;52  }53 54  /* Time display */55  .time-wrap{56    position:absolute; top:360px; left:72px;57    display:flex; align-items:baseline; gap:20px;58  }59  .time-main{font-size:200px; line-height:1; font-weight:600; letter-spacing:4px; color:var(--text);}60  .time-ampm{font-size:72px; color:var(--muted); font-weight:600; letter-spacing:3px;}61 62  .date{63    position:absolute; top:650px; left:72px;64    font-size:60px; color:var(--muted);65  }66 67  /* Floating action button */68  .fab{69    position:absolute; left:50%; top:1660px;70    transform:translateX(-50%);71    width:260px; height:260px; border-radius:50%;72    background:var(--accent);73    box-shadow:0 8px 24px rgba(0,0,0,0.4);74    display:flex; align-items:center; justify-content:center;75  }76  .fab svg{width:96px; height:96px; fill:#2a1f24;}77 78  /* Bottom navigation */79  .bottom-bar{80    position:absolute; left:0; bottom:0;81    width:100%; height:320px;82    background:#2a2225;83    padding-top:42px;84    box-sizing:border-box;85  }86  .nav-items{87    display:flex; justify-content:space-around; align-items:flex-end;88    width:100%;89    padding:0 40px;90  }91  .nav-item{92    width:180px; text-align:center; color:var(--muted);93    position:relative;94  }95  .nav-item svg{width:72px; height:72px; fill:var(--icon);}96  .nav-label{margin-top:16px; font-size:40px;}97  .selected .pill{98    position:absolute; top:-16px; left:50%; transform:translateX(-50%);99    width:190px; height:110px; background:var(--pill); border-radius:56px; opacity:1;100    z-index:0;101  }102  .selected svg, .selected .nav-label{color:var(--text); fill:var(--text);}103  .selected .content{position:relative; z-index:1;}104 105  /* Gesture bar */106  .gesture{107    position:absolute; bottom:36px; left:50%; transform:translateX(-50%);108    width:520px; height:16px; border-radius:10px; background:#ececec;109    opacity:0.9;110  }111</style>112</head>113<body>114<div id="render-target">115  <!-- Status Bar -->116  <div class="status-bar">117    <div class="status-left">8:49</div>118    <div class="status-right">119      <div class="status-icon">120        <!-- WiFi -->121        <svg viewBox="0 0 24 24">122          <path d="M12 20c.7 0 1.3-.6 1.3-1.3S12.7 17.4 12 17.4s-1.3.6-1.3 1.3.6 1.3 1.3 1.3z"/>123          <path d="M4.9 12.7c2-1.6 4.6-2.5 7.1-2.5s5.1.9 7.1 2.5l1.6-1.9c-2.5-2-5.8-3.2-8.7-3.2s-6.2 1.2-8.7 3.2l1.6 1.9z"/>124          <path d="M7.7 15.3c1.3-1 3-1.6 4.7-1.6s3.4.6 4.7 1.6l1.5-1.7c-1.9-1.5-4.3-2.3-6.2-2.3s-4.3.8-6.2 2.3l1.5 1.7z"/>125        </svg>126      </div>127      <div class="battery status-icon">128        <!-- Battery -->129        <svg viewBox="0 0 28 16">130          <rect x="1" y="2" width="22" height="12" rx="2" ry="2" fill="#fff"></rect>131          <rect x="3" y="4" width="16" height="8" fill="#1f1a1d"></rect>132          <rect x="24" y="5" width="3" height="6" rx="1" fill="#fff"></rect>133        </svg>134      </div>135    </div>136  </div>137 138  <!-- App Title -->139  <div class="title">Clock</div>140 141  <!-- Menu dots -->142  <div class="menu-dots">143    <span></span><span></span><span></span>144  </div>145 146  <!-- Main Time -->147  <div class="time-wrap">148    <div class="time-main">8:49</div>149    <div class="time-ampm">PM</div>150  </div>151 152  <!-- Date -->153  <div class="date">Fri, Sep 29</div>154 155  <!-- Floating Action Button -->156  <div class="fab">157    <svg viewBox="0 0 24 24">158      <path d="M11 5h2v14h-2zM5 11h14v2H5z"/>159    </svg>160  </div>161 162  <!-- Bottom Navigation -->163  <div class="bottom-bar">164    <div class="nav-items">165      <div class="nav-item">166        <div class="content">167          <!-- Alarm icon -->168          <svg viewBox="0 0 24 24">169            <path d="M7 3L3.5 6l1.3 1.5L8.3 4.5 7 3zM17 3l-1.3 1.5 3.5 3 1.3-1.5L17 3z"/>170            <path d="M12 6a8 8 0 1 0 0 16 8 8 0 1 0 0-16zm0 3h1v6h-1l-3-2 0-1 3 2V9z"/>171          </svg>172          <div class="nav-label">Alarm</div>173        </div>174      </div>175 176      <div class="nav-item selected">177        <div class="pill"></div>178        <div class="content">179          <!-- Clock icon -->180          <svg viewBox="0 0 24 24">181            <path d="M12 3a9 9 0 1 0 0 18 9 9 0 1 0 0-18zm1 5h-2v6l4 2 .7-1.7-2.7-1.3V8z"/>182          </svg>183          <div class="nav-label">Clock</div>184        </div>185      </div>186 187      <div class="nav-item">188        <div class="content">189          <!-- Timer (hourglass) -->190          <svg viewBox="0 0 24 24">191            <path d="M6 3h12v3l-4 4 4 4v3H6v-3l4-4-4-4V3zm3 3h6l-3 3-3-3zm6 12H9l3-3 3 3z"/>192          </svg>193          <div class="nav-label">Timer</div>194        </div>195      </div>196 197      <div class="nav-item">198        <div class="content">199          <!-- Stopwatch -->200          <svg viewBox="0 0 24 24">201            <path d="M9 2h6v2H9zM12 5a8 8 0 1 0 .001 16.001A8 8 0 0 0 12 5zm1 4h-2v6l4 2 .7-1.7-2.7-1.3V9z"/>202          </svg>203          <div class="nav-label">Stopwatch</div>204        </div>205      </div>206 207      <div class="nav-item">208        <div class="content">209          <!-- Bedtime (bed) -->210          <svg viewBox="0 0 24 24">211            <path d="M3 7h8a4 4 0 0 1 4 4v1h6v7h-2v-2H5v2H3V7zm2 8h10v-4a2 2 0 0 0-2-2H5v6z"/>212          </svg>213          <div class="nav-label">Bedtime</div>214        </div>215      </div>216    </div>217 218    <!-- Gesture bar -->219    <div class="gesture"></div>220  </div>221</div>222</body>223</html>