GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>UI Rendering - Health Checkup Repetition Sheet</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px; height: 2400px;10    position: relative; overflow: hidden;11    background: #1e2a3a; /* dark app background */12    border-radius: 24px; /* outer styling applied to render-target */13    box-shadow: 0 20px 60px rgba(0,0,0,0.35);14    color: #fff;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute; top: 16px; left: 0; right: 0;20    height: 72px; padding: 0 32px;21    display: flex; align-items: center; justify-content: space-between;22    color: #ffffff;23    font-size: 40px; font-weight: 600;24  }25  .status-icons { display: flex; gap: 24px; align-items: center; }26 27  /* Header/back and form content underneath */28  .back-arrow {29    position: absolute; top: 160px; left: 40px;30    width: 48px; height: 48px;31  }32  .section {33    position: absolute; left: 40px; right: 40px;34    color: rgba(255,255,255,0.85);35  }36  .title-label { top: 220px; font-size: 34px; opacity: 0.85; }37  .title-value {38    top: 280px; font-size: 66px; font-weight: 700; letter-spacing: 0.5px;39  }40  .underline {41    position: absolute; left: 40px; right: 120px; height: 2px; background: rgba(255,255,255,0.22);42  }43  .mic {44    position: absolute; right: 40px; width: 44px; height: 44px; opacity: 0.8;45  }46 47  .desc-label { top: 400px; font-size: 34px; opacity: 0.85; }48  .desc-value { top: 460px; font-size: 42px; font-weight: 600; color: rgba(255,255,255,0.95); }49  .underline.desc { top: 520px; }50 51  /* Underlying form rows (dimmed by overlay later) */52  .form-list { position: absolute; top: 600px; left: 40px; right: 40px; }53  .form-row {54    height: 120px; display: flex; align-items: center; gap: 28px;55    color: rgba(255,255,255,0.9);56  }57  .form-row + .form-row { border-top: 1px solid rgba(255,255,255,0.08); }58  .icon-box {59    width: 64px; height: 64px; border-radius: 14px; background: rgba(255,255,255,0.08);60    display: flex; align-items: center; justify-content: center;61  }62  .row-title { font-size: 40px; width: 240px; }63  .row-value { font-size: 40px; font-weight: 700; color: rgba(255,255,255,0.95); }64 65  /* Dim overlay */66  .overlay {67    position: absolute; inset: 0;68    background: rgba(30,30,30,0.62);69    z-index: 10;70  }71 72  /* Bottom sheet */73  .sheet {74    position: absolute; left: 120px; top: 540px;75    width: 840px; border-radius: 36px;76    background: #e8edf7; color: #1c2430;77    box-shadow: 0 40px 80px rgba(0,0,0,0.35);78    z-index: 11;79  }80  .sheet-item {81    height: 120px; display: flex; align-items: center; justify-content: space-between;82    padding: 0 36px; font-size: 44px; color: #1f2a38;83    border-bottom: 1px solid rgba(0,0,0,0.08);84  }85  .sheet-item:last-child { border-bottom: none; border-radius: 0 0 36px 36px; }86  .sheet-item:first-child { border-radius: 36px 36px 0 0; }87  .chevron {88    width: 28px; height: 28px; margin-left: 12px;89  }90  .checkmark {91    width: 44px; height: 44px;92  }93 94  /* Floating action button */95  .fab {96    position: absolute; right: 60px; bottom: 220px;97    width: 140px; height: 140px; border-radius: 70px;98    background: #0d2134; z-index: 12;99    display: flex; align-items: center; justify-content: center;100    box-shadow: 0 16px 36px rgba(0,0,0,0.55);101  }102 103  /* Home indicator */104  .home-indicator {105    position: absolute; bottom: 56px; left: 50%; transform: translateX(-50%);106    width: 360px; height: 10px; border-radius: 8px; background: rgba(255,255,255,0.85);107  }108</style>109</head>110<body>111<div id="render-target">112 113  <!-- Status bar -->114  <div class="status-bar">115    <div>3:28</div>116    <div class="status-icons">117      <!-- Wi-Fi icon -->118      <svg width="40" height="26" viewBox="0 0 40 26" xmlns="http://www.w3.org/2000/svg">119        <path d="M2 8c8-6 28-6 36 0" stroke="#fff" stroke-width="3" fill="none" opacity="0.8"/>120        <path d="M6 13c6-4 22-4 28 0" stroke="#fff" stroke-width="3" fill="none" opacity="0.9"/>121        <path d="M12 18c4-3 12-3 16 0" stroke="#fff" stroke-width="3" fill="none"/>122        <circle cx="20" cy="22" r="2.5" fill="#fff"/>123      </svg>124      <!-- Battery icon -->125      <svg width="46" height="24" viewBox="0 0 46 24" xmlns="http://www.w3.org/2000/svg">126        <rect x="1" y="3" width="38" height="18" rx="3" ry="3" stroke="#fff" stroke-width="2" fill="none"/>127        <rect x="4" y="6" width="24" height="12" rx="2" ry="2" fill="#fff"/>128        <rect x="41" y="8" width="4" height="8" rx="1" fill="#fff"/>129      </svg>130    </div>131  </div>132 133  <!-- Back arrow -->134  <svg class="back-arrow" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">135    <path d="M15 4L7 12l8 8" stroke="#ffffff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round" opacity="0.9"/>136  </svg>137 138  <!-- Title -->139  <div class="section title-label">Title</div>140  <div class="section title-value">Health checkup</div>141  <svg class="mic" style="top: 288px;" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">142    <rect x="8" y="4" width="8" height="12" rx="4" fill="#b7c2d3"/>143    <path d="M6 12c0 4 3 6 6 6s6-2 6-6" stroke="#b7c2d3" stroke-width="2" fill="none"/>144    <path d="M12 18v4" stroke="#b7c2d3" stroke-width="2"/>145  </svg>146  <div class="underline" style="top: 360px;"></div>147 148  <!-- Description -->149  <div class="section desc-label">Description</div>150  <div class="section desc-value">Full body health checkup in SRS hospital</div>151  <svg class="mic" style="top: 468px;" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">152    <rect x="8" y="4" width="8" height="12" rx="4" fill="#b7c2d3"/>153    <path d="M6 12c0 4 3 6 6 6s6-2 6-6" stroke="#b7c2d3" stroke-width="2" fill="none"/>154    <path d="M12 18v4" stroke="#b7c2d3" stroke-width="2"/>155  </svg>156  <div class="underline desc"></div>157 158  <!-- Underlying form rows -->159  <div class="form-list">160    <div class="form-row">161      <div class="icon-box">162        <!-- Calendar icon -->163        <svg width="34" height="34" viewBox="0 0 24 24">164          <rect x="3" y="5" width="18" height="16" rx="2" ry="2" stroke="#fff" stroke-width="2" fill="none"/>165          <path d="M3 9h18" stroke="#fff" stroke-width="2"/>166          <path d="M7 3v4M17 3v4" stroke="#fff" stroke-width="2"/>167        </svg>168      </div>169      <div class="row-title">Date</div>170      <div class="row-value">10/05/2023</div>171    </div>172    <div class="form-row">173      <div class="icon-box">174        <!-- Time icon -->175        <svg width="34" height="34" viewBox="0 0 24 24">176          <circle cx="12" cy="12" r="8" stroke="#fff" stroke-width="2" fill="none"/>177          <path d="M12 7v5l4 2" stroke="#fff" stroke-width="2" stroke-linecap="round"/>178        </svg>179      </div>180      <div class="row-title">Time</div>181      <div class="row-value">09:45 AM</div>182    </div>183    <div class="form-row">184      <div class="icon-box">185        <!-- Repeat icon -->186        <svg width="34" height="34" viewBox="0 0 24 24">187          <path d="M7 7h9l-2-2M17 17H8l2 2" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>188          <path d="M5 12a7 7 0 0112-5M19 12a7 7 0 01-12 5" stroke="#fff" stroke-width="2" fill="none" opacity="0.8"/>189        </svg>190      </div>191      <div class="row-title">Repetition</div>192      <div class="row-value">None</div>193    </div>194  </div>195 196  <!-- Dim overlay -->197  <div class="overlay"></div>198 199  <!-- Bottom sheet with repetition options -->200  <div class="sheet">201    <div class="sheet-item">202      <span>No Repetition</span>203      <svg class="checkmark" viewBox="0 0 24 24">204        <path d="M5 12l4 4 10-10" stroke="#2b4a6b" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>205      </svg>206    </div>207    <div class="sheet-item">208      <span>Every Hour</span>209      <svg class="chevron" viewBox="0 0 24 24">210        <path d="M9 6l6 6-6 6" stroke="#2b3a4c" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>211      </svg>212    </div>213    <div class="sheet-item"><span>Every Day</span></div>214    <div class="sheet-item"><span>Every Week</span></div>215    <div class="sheet-item"><span>Every Month</span></div>216    <div class="sheet-item"><span>Every Year</span></div>217    <div class="sheet-item">218      <span>Selected Weekdays</span>219      <svg class="chevron" viewBox="0 0 24 24">220        <path d="M9 6l6 6-6 6" stroke="#2b3a4c" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>221      </svg>222    </div>223    <div class="sheet-item">224      <span>Monthly on the ..</span>225      <svg class="chevron" viewBox="0 0 24 24">226        <path d="M9 6l6 6-6 6" stroke="#2b3a4c" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>227      </svg>228    </div>229    <div class="sheet-item">230      <span>Custom</span>231      <svg class="chevron" viewBox="0 0 24 24">232        <path d="M9 6l6 6-6 6" stroke="#2b3a4c" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>233      </svg>234    </div>235  </div>236 237  <!-- Floating action button -->238  <div class="fab">239    <svg width="46" height="46" viewBox="0 0 24 24">240      <path d="M5 13l4 4 10-10" stroke="#b9c6d5" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>241    </svg>242  </div>243 244  <!-- Home indicator -->245  <div class="home-indicator"></div>246 247</div>248</body>249</html>