GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #e6edf5;14    box-sizing: border-box;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16    color: #0c0f12;17  }18 19  .status-bar {20    position: absolute;21    top: 24px;22    left: 36px;23    right: 36px;24    height: 40px;25    display: flex;26    align-items: center;27    justify-content: space-between;28    color: #ffffff;29    font-size: 36px;30    opacity: 0.85;31  }32  .battery {33    display: flex;34    align-items: center;35    gap: 16px;36  }37  .battery svg { width: 44px; height: 28px; }38 39  .header {40    position: relative;41    margin-top: 96px;42    padding: 40px 48px;43    display: flex;44    align-items: center;45    justify-content: space-between;46  }47  .header-left svg { width: 72px; height: 72px; stroke-width: 12; }48  .header-right {49    display: flex;50    align-items: center;51    gap: 48px;52  }53  .header-right .radio { width: 88px; height: 88px; }54  .header-right .check { width: 64px; height: 64px; }55  .header-right .dots { width: 20px; height: 64px; }56 57  .content {58    padding: 0 48px;59  }60 61  .title {62    margin-top: 20px;63    font-size: 64px;64    font-weight: 700;65    letter-spacing: 0.2px;66  }67  .underline {68    border-bottom: 4px solid #4f7bd6;69    margin-top: 16px;70  }71 72  .field {73    margin-top: 40px;74    display: flex;75    align-items: center;76    justify-content: space-between;77    font-size: 40px;78    color: #222;79    padding-bottom: 20px;80    border-bottom: 4px solid #4f7bd6;81  }82  .field.placeholder {83    color: #9aa3ad;84  }85  .field svg { width: 40px; height: 40px; }86 87  .section {88    margin-top: 72px;89  }90  .row {91    display: flex;92    align-items: center;93    justify-content: space-between;94  }95  .row .left {96    display: flex;97    align-items: center;98    gap: 28px;99  }100  .row .left svg { width: 52px; height: 52px; }101  .row .label {102    font-size: 44px;103    font-weight: 700;104  }105 106  .toggle {107    width: 140px;108    height: 64px;109    background: #e9a3a3;110    border-radius: 32px;111    position: relative;112    box-shadow: 0 4px 8px rgba(0,0,0,0.06);113  }114  .toggle .knob {115    width: 64px;116    height: 64px;117    background: #c43a34;118    border-radius: 50%;119    position: absolute;120    right: 0;121    top: 0;122    box-shadow: 0 6px 10px rgba(0,0,0,0.15);123  }124 125  .date-line {126    margin-top: 34px;127    font-size: 40px;128    color: #222;129  }130 131  .repeat-row { margin-top: 80px; }132  .notify-row { margin-top: 80px; }133 134  .remove-icon svg { width: 60px; height: 60px; }135 136  .add-note {137    margin-top: 36px;138    font-size: 40px;139    color: #9aa3ad;140    letter-spacing: 1px;141  }142 143  .nav-bar {144    position: absolute;145    bottom: 0;146    left: 0;147    width: 1080px;148    height: 140px;149    background: #000000;150  }151  .gesture {152    position: absolute;153    left: 50%;154    bottom: 26px;155    transform: translateX(-50%);156    width: 240px;157    height: 14px;158    background: #cfcfcf;159    border-radius: 7px;160  }161</style>162</head>163<body>164<div id="render-target">165 166  <div class="status-bar">167    <div class="time">8:36</div>168    <div class="battery">169      <svg viewBox="0 0 24 12">170        <rect x="1" y="1" width="19" height="10" rx="2" ry="2" fill="none" stroke="#ffffff" stroke-width="2"></rect>171        <rect x="3" y="3" width="15" height="6" fill="#ffffff"></rect>172        <rect x="20.5" y="4" width="2" height="4" fill="#ffffff"></rect>173      </svg>174      <div>100%</div>175    </div>176  </div>177 178  <div class="header">179    <div class="header-left">180      <svg viewBox="0 0 24 24" stroke="#0c0f12" fill="none">181        <path d="M5 5L19 19" stroke-linecap="round"></path>182        <path d="M19 5L5 19" stroke-linecap="round"></path>183      </svg>184    </div>185    <div class="header-right">186      <svg class="radio" viewBox="0 0 24 24">187        <circle cx="12" cy="12" r="9.5" fill="none" stroke="#4f7bd6" stroke-width="3"></circle>188        <circle cx="12" cy="12" r="4.5" fill="#4f7bd6"></circle>189      </svg>190      <svg class="check" viewBox="0 0 24 24">191        <path d="M4 12l5 5 11-11" fill="none" stroke="#0c0f12" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>192      </svg>193      <svg class="dots" viewBox="0 0 6 24">194        <circle cx="3" cy="4" r="2.2" fill="#0c0f12"></circle>195        <circle cx="3" cy="12" r="2.2" fill="#0c0f12"></circle>196        <circle cx="3" cy="20" r="2.2" fill="#0c0f12"></circle>197      </svg>198    </div>199  </div>200 201  <div class="content">202    <div class="title">Holi</div>203    <div class="underline"></div>204 205    <div class="field">206      <div>India</div>207      <svg viewBox="0 0 24 24" fill="none" stroke="#4f7bd6" stroke-width="2">208        <path d="M12 2C8 2 5 5.2 5 9c0 5.2 7 13 7 13s7-7.8 7-13c0-3.8-3-7-7-7z"></path>209        <circle cx="12" cy="9" r="3"></circle>210      </svg>211    </div>212 213    <div class="field placeholder">214      <div>Description</div>215    </div>216 217    <div class="section">218      <div class="row">219        <div class="left">220          <svg viewBox="0 0 24 24" fill="none" stroke="#0c0f12" stroke-width="2">221            <circle cx="12" cy="12" r="9"></circle>222            <path d="M12 7v6l4 2" stroke-linecap="round"></path>223          </svg>224          <div class="label">All–day</div>225        </div>226        <div class="toggle">227          <div class="knob"></div>228        </div>229      </div>230 231      <div class="date-line">Wed 23 Aug 2023</div>232      <div class="date-line">Wed 23 Aug 2023</div>233    </div>234 235    <div class="repeat-row row">236      <div class="left">237        <svg viewBox="0 0 24 24" fill="none" stroke="#0c0f12" stroke-width="2">238          <path d="M4 12a8 8 0 0 1 14.5-4M20 4v6h-6" stroke-linecap="round" stroke-linejoin="round"></path>239          <path d="M20 12a8 8 0 0 1-14.5 4M4 20v-6h6" stroke-linecap="round" stroke-linejoin="round"></path>240        </svg>241        <div class="label">Does not repeat</div>242      </div>243    </div>244 245    <div class="notify-row row">246      <div class="left">247        <svg viewBox="0 0 24 24" fill="none" stroke="#0c0f12" stroke-width="2">248          <path d="M12 22a2.5 2.5 0 0 0 2.5-2.5H9.5A2.5 2.5 0 0 0 12 22z"></path>249          <path d="M6 9a6 6 0 1 1 12 0v6l2 2H4l2-2V9z" stroke-linejoin="round"></path>250        </svg>251        <div style="font-size:40px;">5 minutes before</div>252      </div>253      <div class="remove-icon">254        <svg viewBox="0 0 24 24" stroke="#0c0f12" fill="none" stroke-width="2">255          <path d="M5 5L19 19" stroke-linecap="round"></path>256          <path d="M19 5L5 19" stroke-linecap="round"></path>257        </svg>258      </div>259    </div>260 261    <div class="add-note">Add notification</div>262  </div>263 264  <div class="nav-bar">265    <div class="gesture"></div>266  </div>267 268</div>269</body>270</html>