GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Timer UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #100E0B; /* deep dark */13    color: #EDE6DD;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 24px;20    left: 24px;21    right: 24px;22    height: 60px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    color: #EDE6DD;27    font-weight: 600;28    font-size: 34px;29  }30  .status-right {31    display: flex;32    align-items: center;33    gap: 22px;34  }35  .icon {36    width: 40px;37    height: 40px;38  }39 40  /* Page title */41  .page-title {42    position: absolute;43    top: 110px;44    left: 44px;45    font-size: 64px;46    font-weight: 700;47    letter-spacing: 0.5px;48  }49  .menu-dots {50    position: absolute;51    top: 110px;52    right: 36px;53    width: 44px;54    height: 44px;55  }56 57  /* Card */58  .card {59    position: absolute;60    left: 30px;61    top: 200px;62    width: 1020px;63    height: 1480px;64    background: #1C1814;65    border-radius: 56px;66    box-shadow: 0 8px 24px rgba(0,0,0,0.35) inset;67  }68  .card-header {69    position: absolute;70    top: 48px;71    left: 48px;72    font-size: 56px;73    color: #EDE6DD;74    opacity: 0.95;75  }76  .close-pill {77    position: absolute;78    top: 44px;79    right: 44px;80    width: 72px;81    height: 72px;82    border-radius: 50%;83    background: #6B4E2D;84    display: flex;85    align-items: center;86    justify-content: center;87    color: #EDE6DD;88    font-size: 42px;89    line-height: 1;90  }91 92  /* Timer circle layout */93  .dial-wrap {94    position: absolute;95    left: 50%;96    top: 220px;97    transform: translateX(-50%);98    width: 880px;99    height: 880px;100  }101  .dial-svg {102    width: 100%;103    height: 100%;104  }105  .dial-center {106    position: absolute;107    left: 0;108    top: 0;109    width: 880px;110    height: 880px;111    display: flex;112    align-items: center;113    justify-content: center;114    pointer-events: none;115    font-size: 200px;116    font-weight: 700;117    color: #F5EFE6;118  }119  .refresh-icon {120    position: absolute;121    left: 50%;122    bottom: 130px;123    transform: translateX(-50%);124    width: 70px;125    height: 70px;126  }127 128  /* Control buttons */129  .controls {130    position: absolute;131    bottom: 220px;132    left: 0;133    width: 100%;134    display: flex;135    justify-content: space-around;136    padding: 0 120px;137  }138  .pill {139    height: 180px;140    border-radius: 90px;141    display: flex;142    align-items: center;143    justify-content: center;144    padding: 0 80px;145    font-size: 64px;146    font-weight: 700;147    color: #F5E8D0;148  }149  .pill.add {150    background: #3A2D20;151  }152  .pill.pause {153    background: #CFE2BD;154    color: #173012;155    gap: 28px;156  }157  .pause-bars {158    width: 44px;159    height: 72px;160    display: inline-flex;161    gap: 10px;162  }163  .pause-bars span {164    width: 12px;165    height: 72px;166    background: #173012;167    border-radius: 4px;168    display: block;169  }170 171  /* Floating Action Button */172  .fab {173    position: absolute;174    left: 50%;175    top: 1760px;176    transform: translateX(-50%);177    width: 260px;178    height: 260px;179    border-radius: 50%;180    background: #F6C57E;181    display: flex;182    align-items: center;183    justify-content: center;184    color: #3A2D20;185    font-size: 120px;186    font-weight: 700;187    box-shadow: 0 8px 20px rgba(0,0,0,0.35);188  }189 190  /* Bottom navigation */191  .bottom-nav {192    position: absolute;193    left: 0;194    right: 0;195    bottom: 190px;196    height: 190px;197    background: #1C1814;198    display: flex;199    align-items: center;200    justify-content: space-evenly;201    color: #E8DECF;202    font-size: 40px;203  }204  .nav-item {205    display: flex;206    flex-direction: column;207    align-items: center;208    gap: 12px;209    opacity: 0.85;210  }211  .nav-item .ni {212    width: 66px; height: 66px;213  }214  .nav-item.active {215    color: #F0D7A3;216    font-weight: 700;217  }218  .timer-highlight {219    width: 140px;220    height: 80px;221    background: #3A2D20;222    border-radius: 40px;223    position: absolute;224    bottom: 108px;225    left: 50%;226    transform: translateX(-50%);227    opacity: 0.6;228  }229 230  /* Gesture bar */231  .gesture {232    position: absolute;233    bottom: 64px;234    left: 50%;235    transform: translateX(-50%);236    width: 500px;237    height: 14px;238    background: #EDE6DD;239    border-radius: 8px;240    opacity: 0.85;241  }242</style>243</head>244<body>245<div id="render-target">246 247  <!-- Status bar -->248  <div class="status-bar">249    <div>12:20</div>250    <div class="status-right">251      <!-- small play-store & cloud placeholders -->252      <svg class="icon" viewBox="0 0 24 24">253        <polygon points="3,4 20,12 3,20" fill="#EDE6DD"></polygon>254      </svg>255      <svg class="icon" viewBox="0 0 24 24">256        <path d="M5 16h10a4 4 0 0 0 0-8c-.6-2.3-2.5-4-5-4A6 6 0 0 0 4 10c-1.7.4-3 2-3 4a4 4 0 0 0 4 2z" fill="#EDE6DD"></path>257      </svg>258      <!-- WiFi -->259      <svg class="icon" viewBox="0 0 24 24">260        <path d="M2 9c5-4 15-4 20 0" stroke="#EDE6DD" stroke-width="2" fill="none" stroke-linecap="round"/>261        <path d="M5 12c3-3 11-3 14 0" stroke="#EDE6DD" stroke-width="2" fill="none" stroke-linecap="round"/>262        <path d="M8 15c2-2 6-2 8 0" stroke="#EDE6DD" stroke-width="2" fill="none" stroke-linecap="round"/>263        <circle cx="12" cy="18" r="1.8" fill="#EDE6DD"/>264      </svg>265      <!-- Battery -->266      <svg class="icon" viewBox="0 0 24 24">267        <rect x="2" y="6" width="18" height="12" rx="2" ry="2" stroke="#EDE6DD" fill="none" stroke-width="2"/>268        <rect x="4" y="8" width="12" height="8" fill="#EDE6DD"/>269        <rect x="20" y="10" width="2" height="8" rx="1" fill="#EDE6DD"/>270      </svg>271    </div>272  </div>273 274  <!-- Page title and menu -->275  <div class="page-title">Timer</div>276  <svg class="menu-dots" viewBox="0 0 24 24">277    <circle cx="12" cy="5" r="2.2" fill="#EDE6DD"/>278    <circle cx="12" cy="12" r="2.2" fill="#EDE6DD"/>279    <circle cx="12" cy="19" r="2.2" fill="#EDE6DD"/>280  </svg>281 282  <!-- Card -->283  <div class="card">284    <div class="card-header">10m 10s Timer</div>285    <div class="close-pill">×</div>286 287    <!-- Timer Dial -->288    <div class="dial-wrap">289      <!-- Track and progress using SVG -->290      <svg class="dial-svg" viewBox="0 0 500 500">291        <!-- track -->292        <circle cx="250" cy="250" r="215" stroke="#3F372F" stroke-width="30" fill="none" />293        <!-- progress -->294        <circle cx="250" cy="250" r="215" stroke="#C39249" stroke-width="30" fill="none"295                stroke-linecap="round"296                stroke-dasharray="1350"297                stroke-dashoffset="350"298                transform="rotate(-90 250 250)"/>299      </svg>300 301      <div class="dial-center">8:34</div>302 303      <!-- refresh icon -->304      <svg class="refresh-icon" viewBox="0 0 24 24">305        <circle cx="12" cy="12" r="9" stroke="#C39249" stroke-width="2" fill="none"/>306        <path d="M12 6v4l3-2" stroke="#C39249" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>307      </svg>308    </div>309 310    <!-- Controls -->311    <div class="controls">312      <div class="pill add">+1:00</div>313      <div class="pill pause">314        <div class="pause-bars"><span></span><span></span></div>315      </div>316    </div>317  </div>318 319  <!-- Floating Action Button -->320  <div class="fab">+</div>321 322  <!-- Bottom navigation highlight (behind timer icon) -->323  <div class="timer-highlight"></div>324 325  <!-- Bottom Navigation -->326  <div class="bottom-nav">327    <div class="nav-item">328      <svg class="ni" viewBox="0 0 24 24">329        <path d="M12 3l4 4v4a4 4 0 1 1-8 0V7l4-4z" fill="#E8DECF"/>330        <path d="M6 20h12" stroke="#E8DECF" stroke-width="2" stroke-linecap="round"/>331      </svg>332      <div>Alarm</div>333    </div>334    <div class="nav-item">335      <svg class="ni" viewBox="0 0 24 24">336        <circle cx="12" cy="12" r="9" stroke="#E8DECF" stroke-width="2" fill="none"/>337        <path d="M12 7v6l4 2" stroke="#E8DECF" stroke-width="2" fill="none" stroke-linecap="round"/>338      </svg>339      <div>Clock</div>340    </div>341    <div class="nav-item active">342      <svg class="ni" viewBox="0 0 24 24">343        <path d="M6 20h12a1 1 0 0 0 1-1v-3a6 6 0 0 0-6-6h-2a6 6 0 0 0-6 6v3a1 1 0 0 0 1 1z" fill="#F0D7A3"/>344        <rect x="10" y="8" width="4" height="3" fill="#3A2D20"/>345      </svg>346      <div>Timer</div>347    </div>348    <div class="nav-item">349      <svg class="ni" viewBox="0 0 24 24">350        <circle cx="12" cy="12" r="9" stroke="#E8DECF" stroke-width="2" fill="none"/>351        <path d="M8 16l4-8 4 8" stroke="#E8DECF" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>352      </svg>353      <div>Stopwatch</div>354    </div>355    <div class="nav-item">356      <svg class="ni" viewBox="0 0 24 24">357        <rect x="3" y="12" width="14" height="5" rx="2" fill="#E8DECF"/>358        <rect x="18" y="12" width="3" height="5" rx="1" fill="#E8DECF"/>359        <rect x="6" y="9" width="6" height="3" rx="1" fill="#E8DECF"/>360      </svg>361      <div>Bedtime</div>362    </div>363  </div>364 365  <!-- Gesture bar -->366  <div class="gesture"></div>367 368</div>369</body>370</html>