GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>ClockBuddy Mock</title>5<style>6  body {7    margin: 0;8    padding: 0;9    background: transparent;10    font-family: Arial, Helvetica, sans-serif;11  }12  #render-target {13    width: 1080px;14    height: 2400px;15    position: relative;16    overflow: hidden;17    color: #FFFFFF;18    background:19      linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.00) 40%),20      repeating-linear-gradient(135deg, #141414 0px, #141414 24px, #0e0e0e 24px, #0e0e0e 48px);21  }22 23  /* Status bar */24  .status-bar {25    position: absolute;26    top: 18px;27    left: 24px;28    right: 24px;29    height: 70px;30    display: flex;31    align-items: center;32    justify-content: space-between;33    opacity: 0.95;34    font-weight: 600;35  }36  .status-left {37    display: flex;38    align-items: center;39    gap: 20px;40    font-size: 40px;41    letter-spacing: 1px;42  }43  .status-right {44    display: flex;45    align-items: center;46    gap: 26px;47  }48  .icon {49    width: 40px;50    height: 40px;51  }52 53  /* Header */54  .header {55    position: absolute;56    top: 110px;57    left: 24px;58    right: 24px;59    height: 120px;60    display: flex;61    align-items: center;62    justify-content: space-between;63  }64  .header-left {65    display: flex;66    align-items: center;67    gap: 28px;68  }69  .hamburger {70    width: 70px;71    height: 70px;72    border-radius: 10px;73    display: flex;74    align-items: center;75    justify-content: center;76  }77  .app-title {78    font-size: 72px;79    font-weight: 700;80    letter-spacing: 1px;81  }82  .header-right {83    display: flex;84    align-items: center;85    gap: 30px;86  }87 88  /* Tabs */89  .tabs {90    position: absolute;91    top: 260px;92    left: 24px;93    right: 24px;94    height: 220px;95    display: flex;96    justify-content: space-between;97    padding: 0 12px;98  }99  .tab {100    width: 23%;101    display: flex;102    flex-direction: column;103    align-items: center;104    color: #d9d9d9;105  }106  .tab .tab-icon {107    width: 80px;108    height: 80px;109    margin-bottom: 18px;110    opacity: 0.85;111  }112  .tab span {113    font-size: 44px;114    font-weight: 600;115  }116  .tab.active span {117    color: #ffffff;118  }119  .tab-indicator {120    position: absolute;121    bottom: 0;122    left: 270px; /* under "Timer" */123    width: 240px;124    height: 8px;125    background: #c54654;126    border-radius: 4px;127  }128 129  /* Timer card */130  .timer-card {131    position: absolute;132    top: 480px;133    left: 24px;134    right: 24px;135    bottom: 520px;136    border-radius: 18px;137    background: rgba(0,0,0,0.5);138    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);139  }140  .card-header {141    display: flex;142    align-items: center;143    gap: 18px;144    padding: 24px 24px 10px 24px;145    font-size: 48px;146    font-weight: 700;147    color: #d36a73;148  }149  .progress-track {150    height: 10px;151    background: #eaeaea;152    margin: 10px 24px 0 24px;153    border-radius: 6px;154    position: relative;155  }156  .progress-bar {157    position: absolute;158    left: 0;159    top: 0;160    height: 10px;161    width: 110px; /* ~a little progress */162    background: #c54654;163    border-radius: 6px;164  }165 166  .time-row {167    display: flex;168    align-items: center;169    justify-content: space-between;170    padding: 36px 24px;171  }172  .trash {173    width: 60px;174    height: 60px;175    opacity: 0.8;176  }177  .time-display {178    font-size: 160px;179    font-weight: 700;180    letter-spacing: 6px;181  }182  .pause-btn {183    width: 140px;184    height: 140px;185    background: #ffffff;186    color: #121212;187    border-radius: 28px;188    display: flex;189    align-items: center;190    justify-content: center;191    box-shadow: 0 8px 20px rgba(0,0,0,0.35);192  }193  .pause-icon {194    width: 64px;195    height: 64px;196  }197 198  /* Floating add button */199  .fab {200    position: absolute;201    bottom: 300px;202    left: 50%;203    transform: translateX(-50%);204    width: 160px;205    height: 160px;206    border-radius: 80px;207    background: #d44b54;208    box-shadow: 0 16px 26px rgba(0,0,0,0.45);209    display: flex;210    align-items: center;211    justify-content: center;212  }213  .fab svg {214    width: 90px;215    height: 90px;216    fill: none;217    stroke: #ffffff;218    stroke-width: 16;219    stroke-linecap: round;220  }221 222  /* Ad banner placeholder */223  .ad-banner {224    position: absolute;225    bottom: 70px;226    left: 80px;227    width: 920px;228    height: 210px;229    background: #E0E0E0;230    border: 1px solid #BDBDBD;231    color: #757575;232    display: flex;233    align-items: center;234    justify-content: center;235    font-size: 46px;236    border-radius: 8px;237  }238</style>239</head>240<body>241<div id="render-target">242 243  <!-- Status Bar -->244  <div class="status-bar">245    <div class="status-left">246      <div>10:28</div>247      <!-- small status icons -->248      <svg class="icon" viewBox="0 0 24 24">249        <circle cx="12" cy="12" r="10" fill="none" stroke="#ccc" stroke-width="2"/>250        <path d="M12 6v6l4 3" stroke="#ccc" stroke-width="2" fill="none" stroke-linecap="round"/>251      </svg>252      <svg class="icon" viewBox="0 0 24 24">253        <path d="M3 9l9-6 9 6-9 6-9-6z" fill="none" stroke="#ccc" stroke-width="2"/>254        <path d="M12 15v6" stroke="#ccc" stroke-width="2" stroke-linecap="round"/>255      </svg>256      <svg class="icon" viewBox="0 0 24 24">257        <circle cx="12" cy="12" r="10" fill="none" stroke="#ccc" stroke-width="2"/>258        <circle cx="12" cy="12" r="3" fill="#ccc"/>259      </svg>260    </div>261    <div class="status-right">262      <svg class="icon" viewBox="0 0 24 24">263        <path d="M3 11h18" stroke="#ccc" stroke-width="2"/>264        <rect x="6" y="6" width="12" height="12" rx="3" fill="none" stroke="#ccc" stroke-width="2"/>265      </svg>266      <svg class="icon" viewBox="0 0 24 24">267        <path d="M4 10a8 8 0 1 0 12 6 6 6 0 1 1-12-6z" fill="none" stroke="#ccc" stroke-width="2"/>268      </svg>269      <svg class="icon" viewBox="0 0 24 24">270        <rect x="17" y="5" width="5" height="14" rx="1" fill="#ccc"/>271        <rect x="4" y="8" width="10" height="8" rx="1" fill="none" stroke="#ccc" stroke-width="2"/>272      </svg>273    </div>274  </div>275 276  <!-- Header -->277  <div class="header">278    <div class="header-left">279      <div class="hamburger">280        <svg viewBox="0 0 24 24" width="64" height="64">281          <path d="M3 6h18M3 12h18M3 18h18" stroke="#fff" stroke-width="2" stroke-linecap="round"/>282        </svg>283      </div>284      <div class="app-title">ClockBuddy</div>285    </div>286    <div class="header-right">287      <svg class="icon" viewBox="0 0 24 24">288        <path d="M16 4a7 7 0 1 0 0 16c-3 0-6-3-6-8 0-5 3-8 6-8z" fill="none" stroke="#fff" stroke-width="2"/>289      </svg>290      <svg class="icon" viewBox="0 0 24 24">291        <circle cx="12" cy="12" r="8" fill="none" stroke="#fff" stroke-width="2"/>292        <path d="M12 4v4M12 16v4M4 12h4M16 12h4M6 6l2 2M16 16l2 2M16 6l2-2M6 16l-2 2" stroke="#fff" stroke-width="2" stroke-linecap="round"/>293      </svg>294    </div>295  </div>296 297  <!-- Tabs -->298  <div class="tabs">299    <div class="tab">300      <svg class="tab-icon" viewBox="0 0 24 24">301        <path d="M6 20v-9l6-6 6 6v9H6z" fill="none" stroke="#d9d9d9" stroke-width="2"/>302        <path d="M10 14h4" stroke="#d9d9d9" stroke-width="2" stroke-linecap="round"/>303      </svg>304      <span>Alarms</span>305    </div>306    <div class="tab">307      <svg class="tab-icon" viewBox="0 0 24 24">308        <circle cx="12" cy="12" r="8" fill="none" stroke="#d9d9d9" stroke-width="2"/>309        <path d="M12 7v6l4 2" stroke="#d9d9d9" stroke-width="2" stroke-linecap="round"/>310      </svg>311      <span>Clock</span>312    </div>313    <div class="tab active">314      <svg class="tab-icon" viewBox="0 0 24 24">315        <circle cx="12" cy="12" r="8" fill="none" stroke="#fff" stroke-width="2"/>316        <path d="M8 12h8" stroke="#fff" stroke-width="2" stroke-linecap="round"/>317      </svg>318      <span>Timer</span>319    </div>320    <div class="tab">321      <svg class="tab-icon" viewBox="0 0 24 24">322        <circle cx="12" cy="12" r="8" fill="none" stroke="#d9d9d9" stroke-width="2"/>323        <path d="M7 12h10M10 8h4M9 16h6" stroke="#d9d9d9" stroke-width="2" stroke-linecap="round"/>324      </svg>325      <span>Stopwatch</span>326    </div>327    <div class="tab-indicator"></div>328  </div>329 330  <!-- Timer Card -->331  <div class="timer-card">332    <div class="card-header">333      <svg class="icon" viewBox="0 0 24 24" style="width:50px;height:50px;">334        <path d="M4 20l6-2 8-8-4-4-8 8-2 6z" fill="none" stroke="#d36a73" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>335      </svg>336      <div>Timer 1</div>337    </div>338    <div class="progress-track">339      <div class="progress-bar"></div>340    </div>341 342    <div class="time-row">343      <svg class="trash" viewBox="0 0 24 24">344        <path d="M5 7h14M9 7v12M15 7v12M7 7l1-2h8l1 2" fill="none" stroke="#ddd" stroke-width="2" stroke-linecap="round"/>345        <rect x="6" y="9" width="12" height="10" rx="2" fill="none" stroke="#ddd" stroke-width="2"/>346      </svg>347      <div class="time-display">00:10:39</div>348      <div class="pause-btn">349        <svg class="pause-icon" viewBox="0 0 24 24">350          <rect x="6" y="4" width="4" height="16" rx="2" fill="#111"/>351          <rect x="14" y="4" width="4" height="16" rx="2" fill="#111"/>352        </svg>353      </div>354    </div>355  </div>356 357  <!-- Floating Add Button -->358  <div class="fab">359    <svg viewBox="0 0 24 24">360      <path d="M12 5v14M5 12h14"/>361    </svg>362  </div>363 364  <!-- Ad Banner -->365  <div class="ad-banner">[IMG: inDrive Ad – "Your ride, Your price"]</div>366 367</div>368</body>369</html>