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>Health Checkup - UI</title>7<style>8  body { margin:0; padding:0; background:transparent; font-family: Roboto, Arial, sans-serif; }9  #render-target{10    width:1080px; height:2400px; position:relative; overflow:hidden;11    background:#354A63; /* dark blue background for header area */12    color:#FFFFFF;13  }14 15  /* Status bar */16  .statusbar{17    position:absolute; top:18px; left:30px; right:30px; height:64px;18    display:flex; align-items:center; justify-content:space-between;19    color:#ffffff; opacity:0.95; font-size:40px; letter-spacing:0.5px;20  }21  .right-icons{ display:flex; align-items:center; gap:24px; }22  .icon{ width:44px; height:44px; fill:#ffffff; opacity:0.9; }23 24  /* Back */25  .back{26    position:absolute; top:150px; left:28px; width:72px; height:72px;27  }28 29  /* Fields */30  .field{ position:absolute; width:100%; }31  .label{32    margin-left:40px; color:#C9D2DB; font-size:34px; font-weight:600;33    letter-spacing:0.2px;34  }35  .input{36    margin:12px 128px 8px 40px; padding-bottom:14px;37    border-bottom:2px solid rgba(255,255,255,0.35);38    color:#ffffff; font-weight:800; font-size:76px; line-height:1.15;39  }40  .desc{ font-size:46px; font-weight:700; }41  .mic{42    position:absolute; right:36px; bottom:18px; width:54px; height:54px; fill:#C9D2DB;43  }44 45  /* Bottom sheet */46  .sheet{47    position:absolute; left:0; right:0; top:820px; bottom:0;48    background:#D7DDE7; color:#2E3E4F;49    border-top-left-radius:8px; border-top-right-radius:8px;50    box-shadow: 0 -2px 0 rgba(0,0,0,0.12) inset;51  }52  .rows{ margin-top:32px; }53  .row{54    display:flex; align-items:center; justify-content:space-between;55    padding:42px 40px; border-top:1px solid rgba(0,0,0,0.06);56    border-bottom:1px solid rgba(0,0,0,0.06);57    font-size:48px;58    background:#D7DDE7;59  }60  .left{61    display:flex; align-items:center; gap:28px; color:#3A4A5A; font-weight:600;62  }63  .r-icon{ width:58px; height:58px; fill:#6F7F90; }64  .value{ color:#395372; font-weight:800; }65 66  /* Star and misc */67  .star{68    position:absolute; top:1380px; left:50%; transform:translateX(-50%);69    width:100px; height:100px; fill:none; stroke:#2E3E4F; stroke-width:10;70  }71 72  /* FAB */73  .fab{74    position:absolute; right:64px; bottom:220px;75    width:160px; height:160px; border-radius:50%;76    background:#2F4861; display:flex; align-items:center; justify-content:center;77    box-shadow:0 22px 28px rgba(0,0,0,0.25), 0 8px 10px rgba(0,0,0,0.18);78  }79  .fab svg{ width:84px; height:84px; stroke:#FFFFFF; stroke-width:18; fill:none; }80 81  /* Gesture bar */82  .gesture{83    position:absolute; left:50%; transform:translateX(-50%); bottom:58px;84    width:420px; height:12px; background:#61666C; border-radius:8px; opacity:0.9;85  }86</style>87</head>88<body>89<div id="render-target">90 91  <!-- Status bar -->92  <div class="statusbar">93    <div>3:28</div>94    <div class="right-icons">95      <!-- Wi‑Fi -->96      <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">97        <path d="M12 20.5c.9 0 1.5-.6 1.5-1.5S12.9 17.5 12 17.5 10.5 18.1 10.5 19 11.1 20.5 12 20.5zM3 9.5l1.4 1.4C6.8 8.6 9.3 7.5 12 7.5s5.2 1.1 7.6 3.4L21 9.5C18.2 7 15.2 5.8 12 5.8S5.8 7 3 9.5zm4 4l1.5 1.4c1.1-1 2.3-1.4 3.5-1.4s2.4.4 3.5 1.4L17 13.5c-1.4-1.3-3.2-2-5-2s-3.6.7-5 2z"/>98      </svg>99      <!-- Battery -->100      <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">101        <path d="M16 7h2c1.1 0 2 .9 2 2v6c0 1.1-.9 2-2 2h-2v1h-1V6h1v1z"/>102        <rect x="3" y="7" width="12" height="10" rx="2" ry="2" fill="#ffffff"/>103      </svg>104    </div>105  </div>106 107  <!-- Back arrow -->108  <svg class="back" viewBox="0 0 24 24" aria-hidden="true">109    <path fill="#C9D2DB" d="M14 6l-6 6 6 6 1.4-1.4L11.8 12l3.6-4.6z"/>110  </svg>111 112  <!-- Title field -->113  <div class="field" style="top:260px;">114    <div class="label">Title</div>115    <div class="input">Health checkup</div>116    <!-- Microphone -->117    <svg class="mic" viewBox="0 0 24 24" aria-hidden="true">118      <path d="M12 14c1.7 0 3-1.3 3-3V6c0-1.7-1.3-3-3-3S9 4.3 9 6v5c0 1.7 1.3 3 3 3zM7 11v1c0 2.8 2 5 5 5s5-2.2 5-5v-1h-2v1c0 1.7-1.3 3-3 3s-3-1.3-3-3v-1H7zM11 19v2h2v-2h-2z"/>119    </svg>120  </div>121 122  <!-- Description field -->123  <div class="field" style="top:460px;">124    <div class="label">Description</div>125    <div class="input desc">Full body health checkup in SRS hospital</div>126    <!-- Microphone -->127    <svg class="mic" viewBox="0 0 24 24" aria-hidden="true">128      <path d="M12 14c1.7 0 3-1.3 3-3V6c0-1.7-1.3-3-3-3S9 4.3 9 6v5c0 1.7 1.3 3 3 3zM7 11v1c0 2.8 2 5 5 5s5-2.2 5-5v-1h-2v1c0 1.7-1.3 3-3 3s-3-1.3-3-3v-1H7zM11 19v2h2v-2h-2z"/>129    </svg>130  </div>131 132  <!-- Bottom sheet with options -->133  <div class="sheet">134    <div class="rows">135      <!-- Date -->136      <div class="row">137        <div class="left">138          <svg class="r-icon" viewBox="0 0 24 24" aria-hidden="true">139            <path d="M7 3v2H5c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2h-2V3h-2v2H9V3H7zm12 16H5V10h14v9z"/>140          </svg>141          <span>Date</span>142        </div>143        <div class="value">06/28/2023</div>144      </div>145 146      <!-- Time -->147      <div class="row">148        <div class="left">149          <svg class="r-icon" viewBox="0 0 24 24" aria-hidden="true">150            <path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm1 11h5v-2h-4V6h-2v7z"/>151          </svg>152          <span>Time</span>153        </div>154        <div class="value">11:45 AM</div>155      </div>156 157      <!-- Repeat -->158      <div class="row">159        <div class="left">160          <svg class="r-icon" viewBox="0 0 24 24" aria-hidden="true">161            <path d="M7 7h9V4l4 4-4 4V9H7c-1.7 0-3 1.3-3 3s1.3 3 3 3h3v2H7c-2.8 0-5-2.2-5-5s2.2-5 5-5zm10 10H8v3l-4-4 4-4v3h9c1.7 0 3-1.3 3-3s-1.3-3-3-3h-3V7h3c2.8 0 5 2.2 5 5s-2.2 5-5 5z"/>162          </svg>163          <span>Repeat</span>164        </div>165        <div class="value">No Repetition</div>166      </div>167 168      <!-- Advanced reminder -->169      <div class="row">170        <div class="left">171          <!-- A+ as a simple badge -->172          <svg class="r-icon" viewBox="0 0 24 24" aria-hidden="true">173            <path d="M4 20h16v-2H4v2zM8.5 11l1-3h1.9l1 3h-2l-.3-1h-1.3l-.3 1h-2zm8.5-2V7h-1.5v2H13v1.5h2.5V13H17v-2.5H19V9.5h-2z"/>174          </svg>175          <span>Adv. reminder</span>176        </div>177        <div class="value">None</div>178      </div>179    </div>180  </div>181 182  <!-- Center star -->183  <svg class="star" viewBox="0 0 24 24" aria-hidden="true">184    <path d="M12 2l2.9 6.2 6.8.9-5 4.7 1.3 6.9L12 17.7 6 20.7l1.3-6.9-5-4.7 6.8-.9z"/>185  </svg>186 187  <!-- Floating action button -->188  <div class="fab" aria-hidden="true">189    <svg viewBox="0 0 48 48">190      <path d="M12 25l8 8 16-16" />191    </svg>192  </div>193 194  <!-- Gesture bar -->195  <div class="gesture"></div>196 197</div>198</body>199</html>