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>My Day UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #FFFFFF;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 28px;21    left: 40px;22    right: 40px;23    height: 60px;24    display: flex;25    align-items: center;26    justify-content: space-between;27    color: #666;28    font-size: 32px;29    letter-spacing: 0.5px;30  }31  .status-right {32    display: flex;33    align-items: center;34    gap: 18px;35    font-weight: 600;36  }37  .status-icon svg { width: 44px; height: 44px; }38 39  /* Header area */40  .header {41    position: absolute;42    top: 150px;43    left: 0;44    right: 0;45    text-align: center;46    font-weight: 800;47    font-size: 54px;48    letter-spacing: 1px;49    color: #111;50  }51  .checkbox {52    position: absolute;53    top: 160px;54    left: 52px;55    width: 60px;56    height: 60px;57    border: 3px solid #CFCFCF;58    border-radius: 12px;59    background: #fff;60  }61  .checkbox .dot {62    position: absolute;63    top: -6px;64    left: -6px;65    width: 24px;66    height: 24px;67    background: #FF6B6B;68    border-radius: 50%;69    box-shadow: 0 2px 0 rgba(0,0,0,0.08);70  }71  .menu {72    position: absolute;73    top: 150px;74    right: 52px;75    width: 74px;76    height: 74px;77    border-radius: 50%;78    border: 3px solid #CFCFCF;79    display: flex;80    align-items: center;81    justify-content: center;82  }83  .menu .dots {84    display: flex;85    gap: 10px;86  }87  .menu .dots span {88    width: 10px;89    height: 10px;90    background: #9E9E9E;91    border-radius: 50%;92    display: inline-block;93  }94 95  /* Greeting */96  .greeting {97    position: absolute;98    top: 700px;99    width: 100%;100    text-align: center;101    line-height: 1.25;102  }103  .greeting h1 {104    margin: 0;105    font-size: 72px;106    font-weight: 800;107    color: #111;108    display: inline-block;109  }110  .blue-dot {111    display: inline-block;112    width: 22px;113    height: 22px;114    background: #3A82F8;115    border-radius: 50%;116    margin-left: 16px;117    transform: translateY(-6px);118  }119  .greeting p {120    margin: 22px 0 0;121    font-size: 56px;122    font-weight: 800;123    color: #CFCFCF;124  }125 126  /* Big semicircle */127  .semi {128    position: absolute;129    left: 90px;130    right: 90px;131    bottom: 520px;132    height: 450px;133    border-top-left-radius: 450px;134    border-top-right-radius: 450px;135    background: linear-gradient(180deg, #3478F6 0%, #98BBFF 100%);136  }137 138  /* Bottom input */139  .quick-input {140    position: absolute;141    left: 100px;142    right: 100px;143    bottom: 280px;144    height: 124px;145    background: #fff;146    border-radius: 62px;147    box-shadow: 0 12px 40px rgba(0,0,0,0.12);148    display: flex;149    align-items: center;150    padding: 0 34px;151    gap: 26px;152  }153  .quick-input .pill-icon {154    width: 64px;155    height: 64px;156  }157  .quick-input .placeholder {158    flex: 1;159    font-size: 44px;160    color: #A4A4A4;161  }162  .quick-input .end-icon {163    width: 64px;164    height: 64px;165  }166 167  /* Small home icon near left bottom */168  .dock-home {169    position: absolute;170    left: 64px;171    bottom: 420px;172    width: 64px;173    height: 64px;174  }175 176  /* Home indicator bar */177  .home-indicator {178    position: absolute;179    left: 365px;180    bottom: 76px;181    width: 350px;182    height: 12px;183    background: #7E7E7E;184    border-radius: 8px;185  }186</style>187</head>188<body>189<div id="render-target">190 191  <!-- Status bar -->192  <div class="status-bar">193    <div class="status-left">8:49</div>194    <div class="status-right">195      <div class="status-icon" title="Wi-Fi">196        <svg viewBox="0 0 24 24">197          <path d="M2 8c5-4 15-4 20 0" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/>198          <path d="M5 11c3-3 11-3 14 0" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/>199          <path d="M9.5 14.5c2-2 3.9-2 5.9 0" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/>200          <circle cx="12" cy="18" r="1.6" fill="#777"/>201        </svg>202      </div>203      <div class="status-icon" title="Battery">204        <svg viewBox="0 0 28 24">205          <rect x="1" y="6" width="22" height="12" rx="2" ry="2" stroke="#777" stroke-width="2" fill="none"/>206          <rect x="3" y="8" width="16" height="8" fill="#777"/>207          <rect x="23" y="9" width="3" height="6" rx="1" fill="#777"/>208        </svg>209      </div>210      <div>100%</div>211    </div>212  </div>213 214  <!-- Header / Title -->215  <div class="header">MY DAY</div>216 217  <!-- Left checkbox with red dot -->218  <div class="checkbox"><div class="dot"></div></div>219 220  <!-- Right menu (ellipsis) -->221  <div class="menu">222    <div class="dots"><span></span><span></span><span></span></div>223  </div>224 225  <!-- Greeting text -->226  <div class="greeting">227    <h1>Good Morning, Cerebra</h1><span class="blue-dot"></span>228    <p>What will accomplish today?</p>229  </div>230 231  <!-- Big semicircle graphic -->232  <div class="semi"></div>233 234  <!-- Dock home icon left of input -->235  <div class="dock-home">236    <svg viewBox="0 0 24 24">237      <path d="M3 10l9-7 9 7" stroke="#3478F6" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>238      <path d="M5 11v9h14v-9" stroke="#3478F6" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>239      <rect x="10" y="14" width="4" height="6" fill="none" stroke="#3478F6" stroke-width="2"/>240    </svg>241  </div>242 243  <!-- Input pill -->244  <div class="quick-input">245    <div class="pill-icon">246      <svg viewBox="0 0 24 24">247        <path d="M3 10l9-7 9 7" stroke="#3478F6" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>248        <path d="M5 11v9h14v-9" stroke="#3478F6" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>249        <rect x="10" y="14" width="4" height="6" fill="none" stroke="#3478F6" stroke-width="2"/>250      </svg>251    </div>252    <div class="placeholder">I want to...</div>253    <div class="end-icon">254      <svg viewBox="0 0 24 24">255        <path d="M12 3a6 6 0 0 1 6 6c0 2.5-1.6 3.9-2.7 4.8-.7.6-1.3 1.3-1.3 2.2v1H10v-1c0-.9-.6-1.6-1.3-2.2C7.6 12.9 6 11.5 6 9a6 6 0 0 1 6-6z" stroke="#3478F6" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>256        <rect x="10" y="19" width="4" height="2" rx="1" fill="#3478F6"/>257      </svg>258    </div>259  </div>260 261  <!-- Home indicator -->262  <div class="home-indicator"></div>263 264</div>265</body>266</html>