GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Timer UI</title>5<style>6  body {7    margin: 0;8    padding: 0;9    background: transparent;10    font-family: Arial, Helvetica, sans-serif;11    color: #EADFCC;12  }13  #render-target {14    width: 1080px;15    height: 2400px;16    position: relative;17    overflow: hidden;18    background: #120E0B;19  }20 21  /* Status bar */22  .statusbar {23    position: absolute;24    top: 0;25    left: 0;26    width: 1080px;27    height: 110px;28    color: #EFE6D6;29    display: flex;30    align-items: center;31    justify-content: space-between;32    padding: 0 34px;33    font-weight: 600;34    letter-spacing: 1px;35  }36  .status-left {37    display: flex;38    align-items: center;39    gap: 18px;40    font-size: 36px;41  }42  .status-right {43    display: flex;44    align-items: center;45    gap: 22px;46  }47  .icon-wifi, .icon-battery {48    width: 44px;49    height: 44px;50  }51  .icon-dots {52    width: 40px;53    height: 80px;54    display: flex;55    flex-direction: column;56    align-items: center;57    justify-content: space-around;58    position: absolute;59    top: 150px;60    right: 36px;61  }62  .icon-dots span {63    width: 10px;64    height: 10px;65    background: #C8B79F;66    border-radius: 50%;67    display: block;68    opacity: 0.9;69  }70 71  /* Page title */72  .title {73    position: absolute;74    top: 140px;75    left: 44px;76    font-size: 76px;77    font-weight: 700;78    color: #EADFCC;79  }80 81  /* Main card */82  .panel {83    position: absolute;84    left: 30px;85    top: 230px;86    width: 1020px;87    height: 1600px;88    background: #1A150F;89    border-radius: 64px;90    box-shadow: 0 12px 40px rgba(0,0,0,0.35) inset;91  }92  .panel-header {93    display: flex;94    align-items: center;95    justify-content: space-between;96    padding: 46px 46px 0 46px;97  }98  .panel-title {99    font-size: 68px;100    color: #E9DFCE;101    opacity: 0.95;102  }103  .close-pill {104    width: 80px;105    height: 80px;106    background: #5A472F;107    border-radius: 50%;108    position: relative;109  }110  .close-pill:before, .close-pill:after {111    content: '';112    position: absolute;113    left: 50%;114    top: 50%;115    width: 34px;116    height: 4px;117    background: #D8B072;118    transform-origin: center;119  }120  .close-pill:before { transform: translate(-50%,-50%) rotate(45deg); }121  .close-pill:after  { transform: translate(-50%,-50%) rotate(-45deg); }122 123  /* Ring / timer */124  .ring-wrap {125    position: absolute;126    left: 50%;127    transform: translateX(-50%);128    top: 220px;129    width: 900px;130    height: 900px;131  }132  .ring {133    width: 900px;134    height: 900px;135    border-radius: 50%;136    background: conic-gradient(#C5934C 0deg, #C5934C 310deg, #3C342C 310deg 360deg);137    position: relative;138  }139  .ring::after {140    content: '';141    position: absolute;142    left: 50%;143    top: 50%;144    width: 760px;145    height: 760px;146    transform: translate(-50%, -50%);147    border-radius: 50%;148    background: #1A150F;149    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.02);150  }151  .time-display {152    position: absolute;153    left: 50%;154    top: 50%;155    transform: translate(-50%, -58%);156    font-size: 220px;157    font-weight: 700;158    color: #F4EBDD;159    letter-spacing: 6px;160  }161 162  /* small refresh circle */163  .refresh {164    position: absolute;165    left: 50%;166    top: 72%;167    transform: translate(-50%, -50%);168    width: 110px;169    height: 110px;170    border-radius: 50%;171    border: 8px solid #B68644;172    display: flex;173    align-items: center;174    justify-content: center;175    background: transparent;176  }177  .refresh svg {178    width: 60px;179    height: 60px;180    stroke: #B68644;181    fill: none;182    stroke-width: 10;183    stroke-linecap: round;184    stroke-linejoin: round;185  }186 187  /* controls */188  .controls {189    position: absolute;190    left: 90px;191    right: 90px;192    top: 1220px;193    display: flex;194    align-items: center;195    justify-content: space-between;196  }197  .btn {198    border: none;199    border-radius: 140px;200    height: 200px;201    padding: 0 80px;202    font-size: 70px;203    font-weight: 700;204    color: #F1DAB7;205    letter-spacing: 2px;206  }207  .btn.plusmin {208    background: #4A3927;209  }210  .btn.pause {211    background: #CFE2B3;212    color: #1E2618;213    width: 440px;214    display: flex;215    align-items: center;216    justify-content: center;217    gap: 26px;218  }219  .pause-bars {220    width: 36px;221    height: 80px;222    display: inline-flex;223    gap: 16px;224  }225  .pause-bars span {226    width: 16px;227    height: 80px;228    background: #21301E;229    display: block;230    border-radius: 4px;231  }232 233  /* Floating big plus */234  .fab {235    position: absolute;236    bottom: 360px;237    left: 50%;238    transform: translateX(-50%);239    width: 260px;240    height: 260px;241    border-radius: 50%;242    background: #F6C370;243    display: flex;244    align-items: center;245    justify-content: center;246    box-shadow: 0 12px 30px rgba(0,0,0,0.35);247  }248  .fab:before, .fab:after {249    content: '';250    position: absolute;251    background: #3B260E;252    border-radius: 6px;253  }254  .fab:before {255    width: 18px; height: 120px;256  }257  .fab:after {258    width: 120px; height: 18px;259  }260 261  /* Bottom nav */262  .bottom-nav {263    position: absolute;264    bottom: 0;265    left: 0;266    width: 1080px;267    height: 250px;268    background: #1A150F;269    display: flex;270    align-items: center;271    justify-content: space-around;272    color: #D9CCB9;273  }274  .nav-item {275    display: flex;276    flex-direction: column;277    align-items: center;278    gap: 18px;279    font-size: 44px;280  }281  .nav-icon {282    width: 78px;283    height: 78px;284    border-radius: 22px;285    background: #2B231B;286    display: flex;287    align-items: center;288    justify-content: center;289  }290  .nav-item.active .nav-icon {291    background: #4A3927;292  }293  .nav-item.active {294    color: #F1E5D5;295    font-weight: 700;296  }297 298  /* simple glyphs */299  .glyph {300    width: 46px;301    height: 46px;302  }303</style>304</head>305<body>306<div id="render-target">307 308  <!-- Status Bar -->309  <div class="statusbar">310    <div class="status-left">311      <div>12:24</div>312      <svg class="glyph" viewBox="0 0 24 24">313        <circle cx="6" cy="12" r="3" fill="#C9BEA8"></circle>314        <circle cx="18" cy="12" r="3" fill="#C9BEA8"></circle>315      </svg>316      <svg class="glyph" viewBox="0 0 24 24">317        <path d="M2 12h20" stroke="#C9BEA8" stroke-width="2" />318        <path d="M12 2v20" stroke="#C9BEA8" stroke-width="2" />319      </svg>320    </div>321    <div class="status-right">322      <svg class="icon-wifi" viewBox="0 0 24 24">323        <path d="M2 9c5-5 15-5 20 0" stroke="#E7DBC8" stroke-width="2" fill="none"/>324        <path d="M6 13c3-3 9-3 12 0" stroke="#E7DBC8" stroke-width="2" fill="none"/>325        <circle cx="12" cy="18" r="2" fill="#E7DBC8"/>326      </svg>327      <svg class="icon-battery" viewBox="0 0 28 18">328        <rect x="2" y="3" width="22" height="12" rx="2" ry="2" stroke="#E7DBC8" fill="none" stroke-width="2"></rect>329        <rect x="4" y="5" width="14" height="8" fill="#E7DBC8"></rect>330        <rect x="24" y="7" width="3" height="4" fill="#E7DBC8"></rect>331      </svg>332    </div>333  </div>334 335  <div class="icon-dots">336    <span></span><span></span><span></span>337  </div>338 339  <!-- Title -->340  <div class="title">Timer</div>341 342  <!-- Main Panel -->343  <div class="panel">344    <div class="panel-header">345      <div class="panel-title">10m 10s Timer</div>346      <div class="close-pill"></div>347    </div>348 349    <div class="ring-wrap">350      <div class="ring"></div>351      <div class="time-display">9:32</div>352      <div class="refresh">353        <svg viewBox="0 0 24 24">354          <path d="M20 12a8 8 0 1 1-2-5" />355          <polyline points="20 4 20 10 14 10" />356        </svg>357      </div>358    </div>359 360    <div class="controls">361      <button class="btn plusmin">+1:00</button>362      <button class="btn pause">363        <div class="pause-bars"><span></span><span></span></div>364      </button>365    </div>366  </div>367 368  <!-- Floating Action Button -->369  <div class="fab"></div>370 371  <!-- Bottom Navigation -->372  <div class="bottom-nav">373    <div class="nav-item">374      <div class="nav-icon">375        <svg class="glyph" viewBox="0 0 24 24">376          <path d="M6 9h12" stroke="#D9CCB9" stroke-width="2"/>377          <path d="M7 12h10" stroke="#D9CCB9" stroke-width="2"/>378          <rect x="4" y="4" width="16" height="16" rx="3" ry="3" stroke="#D9CCB9" fill="none" stroke-width="2"/>379        </svg>380      </div>381      <div>Alarm</div>382    </div>383    <div class="nav-item">384      <div class="nav-icon">385        <svg class="glyph" viewBox="0 0 24 24">386          <circle cx="12" cy="12" r="8" stroke="#D9CCB9" fill="none" stroke-width="2"/>387          <path d="M12 6v7l4 2" stroke="#D9CCB9" stroke-width="2"/>388        </svg>389      </div>390      <div>Clock</div>391    </div>392    <div class="nav-item active">393      <div class="nav-icon">394        <svg class="glyph" viewBox="0 0 24 24">395          <path d="M7 4h10v6H7z" stroke="#F1E5D5" stroke-width="2" fill="none"/>396          <path d="M7 14h10v6H7z" stroke="#F1E5D5" stroke-width="2" fill="none"/>397        </svg>398      </div>399      <div>Timer</div>400    </div>401    <div class="nav-item">402      <div class="nav-icon">403        <svg class="glyph" viewBox="0 0 24 24">404          <circle cx="12" cy="12" r="9" stroke="#D9CCB9" fill="none" stroke-width="2"/>405          <rect x="8" y="7" width="3" height="10" fill="#D9CCB9"/>406          <rect x="13" y="7" width="3" height="10" fill="#D9CCB9"/>407        </svg>408      </div>409      <div>Stopwatch</div>410    </div>411    <div class="nav-item">412      <div class="nav-icon">413        <svg class="glyph" viewBox="0 0 24 24">414          <rect x="3" y="10" width="18" height="9" rx="2" ry="2" stroke="#D9CCB9" fill="none" stroke-width="2"/>415          <rect x="4" y="7" width="7" height="3" fill="#D9CCB9"/>416        </svg>417      </div>418      <div>Bedtime</div>419    </div>420  </div>421 422</div>423</body>424</html>