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, Helvetica, sans-serif; }9  #render-target {10    width:1080px; height:2400px; position:relative; overflow:hidden;11    background:#d8dee9;12  }13 14  /* Top dark section */15  .top-area {16    position:absolute; left:0; top:0; width:1080px; height:930px;17    background:#324a62;18    color:#ffffff;19    box-shadow: 0 6px 12px rgba(0,0,0,0.25);20  }21  .status-bar {22    height:120px; line-height:120px; padding:0 40px; color:#e8f0f8; font-size:42px;23  }24  .status-icons { position:absolute; right:40px; top:30px; display:flex; gap:24px; align-items:center; }25  .status-icons svg { width:48px; height:48px; fill:#e8f0f8; opacity:0.9; }26 27  .back-row { position:absolute; top:160px; left:32px; display:flex; align-items:center; }28  .back-row svg { width:72px; height:72px; fill:#c7d3de; }29 30  .field { position:absolute; left:48px; right:48px; color:#c7d3de; }31  .field .label { font-size:36px; margin-bottom:18px; }32  .field .input-row {33    display:flex; align-items:center; gap:16px;34    padding-right:80px;35    border-bottom: 4px solid rgba(255,255,255,0.2);36  }37  .field .input-text { color:#ffffff; font-size:66px; font-weight:700; padding-bottom:16px; }38  .field .mic { margin-left:auto; width:56px; height:56px; fill:#9fb3c5; opacity:0.9; }39 40  .title-field { top:280px; }41  .desc-field { top:540px; }42  .desc-field .input-text {43    font-size:48px; font-weight:700;44    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;45  }46 47  /* Options list area */48  .options {49    position:absolute; left:0; right:0; top:930px; bottom:0; padding-top:12px;50  }51  .row {52    height:150px;53    display:flex; align-items:center;54    padding:0 48px;55    border-top:1px solid #c6ccd6;56  }57  .row:first-child { border-top: none; }58  .left { display:flex; align-items:center; gap:28px; }59  .icon {60    width:64px; height:64px; fill:#7b8696;61  }62  .label { font-size:44px; color:#3b4753; }63  .value { margin-left:auto; font-size:44px; color:#2e5a84; font-weight:600; }64 65  /* Center star */66  .center-star {67    position:absolute; top:1500px; left:50%; transform:translateX(-50%);68    width:80px; height:80px;69  }70  .center-star path { stroke:#40464f; stroke-width:8; fill:none; }71 72  /* FAB */73  .fab {74    position:absolute; right:80px; bottom:170px;75    width:170px; height:170px; background:#324a62; border-radius:50%;76    box-shadow: 0 12px 24px rgba(0,0,0,0.28), 0 6px 10px rgba(0,0,0,0.18);77    display:flex; justify-content:center; align-items:center;78  }79  .fab svg { width:84px; height:84px; stroke:#ffffff; stroke-width:12; fill:none; }80 81  /* Gesture bar */82  .gesture {83    position:absolute; bottom:40px; left:50%; transform:translateX(-50%);84    width:640px; height:18px; background:#6a6f77; border-radius:12px;85  }86</style>87</head>88<body>89<div id="render-target">90 91  <div class="top-area">92    <div class="status-bar">93      3:2994      <div class="status-icons">95        <!-- wifi -->96        <svg viewBox="0 0 24 24"><path d="M2 8c5-4 15-4 20 0l-2 2c-4-3-12-3-16 0L2 8zm4 4c3-2 9-2 12 0l-2 2c-2-1-6-1-8 0l-2-2zm4 4c2-1 4-1 6 0l-3 3-3-3z"/></svg>97        <!-- battery -->98        <svg viewBox="0 0 24 24"><path d="M2 8h16v8H2V8zm18 3h2v2h-2v-2z"/></svg>99      </div>100    </div>101 102    <div class="back-row">103      <svg viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6" stroke="#c7d3de" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>104    </div>105 106    <div class="field title-field">107      <div class="label">Title</div>108      <div class="input-row">109        <div class="input-text">Health checkup</div>110        <!-- mic icon -->111        <svg class="mic" viewBox="0 0 24 24"><path d="M12 3a3 3 0 0 1 3 3v6a3 3 0 0 1-6 0V6a3 3 0 0 1 3-3zm-5 9a5 5 0 0 0 10 0h2a7 7 0 0 1-6 6v3h-2v-3a7 7 0 0 1-6-6h2z"/></svg>112      </div>113    </div>114 115    <div class="field desc-field">116      <div class="label">Description</div>117      <div class="input-row">118        <div class="input-text">Full body health checkup in SRS hospital</div>119        <!-- mic icon -->120        <svg class="mic" viewBox="0 0 24 24"><path d="M12 3a3 3 0 0 1 3 3v6a3 3 0 0 1-6 0V6a3 3 0 0 1 3-3zm-5 9a5 5 0 0 0 10 0h2a7 7 0 0 1-6 6v3h-2v-3a7 7 0 0 1-6-6h2z"/></svg>121      </div>122    </div>123  </div>124 125  <div class="options">126    <div class="row">127      <div class="left">128        <!-- calendar icon -->129        <svg class="icon" viewBox="0 0 24 24"><path d="M7 2v3M17 2v3M3 7h18v14H3V7z" stroke="#7b8696" stroke-width="2" fill="none" stroke-linecap="round"/><path d="M7 11h4v4H7z" fill="#7b8696" opacity="0.25"/></svg>130        <div class="label">Date</div>131      </div>132      <div class="value">06/28/2023</div>133    </div>134 135    <div class="row">136      <div class="left">137        <!-- clock icon -->138        <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke="#7b8696" stroke-width="2" fill="none"/><path d="M12 6v7l5 2" stroke="#7b8696" stroke-width="2" fill="none" stroke-linecap="round"/></svg>139        <div class="label">Time</div>140      </div>141      <div class="value">11:45 AM</div>142    </div>143 144    <div class="row">145      <div class="left">146        <!-- repeat icon -->147        <svg class="icon" viewBox="0 0 24 24"><path d="M7 7h9l-2-2m2 2-2 2M17 17H8l2 2m-2-2 2-2" stroke="#7b8696" stroke-width="2" fill="none" stroke-linecap="round"/></svg>148        <div class="label">Repeat</div>149      </div>150      <div class="value">Every Month</div>151    </div>152 153    <div class="row">154      <div class="left">155        <!-- end date icon (calendar outline) -->156        <svg class="icon" viewBox="0 0 24 24"><path d="M7 2v3M17 2v3M3 7h18v14H3V7z" stroke="#7b8696" stroke-width="2" fill="none" stroke-linecap="round"/></svg>157        <div class="label">End Date</div>158      </div>159      <div class="value">Forever</div>160    </div>161 162    <div class="row">163      <div class="left">164        <!-- A+ icon -->165        <svg class="icon" viewBox="0 0 24 24"><path d="M6 18l3-12h2l3 12h-2l-.6-3H8.6L8 18H6zm3.3-5h2.4L10.5 8 9.3 13zM18 7v8m-3-4h6" stroke="#7b8696" stroke-width="2" fill="none" stroke-linecap="round"/></svg>166        <div class="label">Adv. reminder</div>167      </div>168      <div class="value">None</div>169    </div>170  </div>171 172  <!-- Center star -->173  <svg class="center-star" viewBox="0 0 24 24">174    <path d="M12 2l3 7 7 .6-5 4.3 1.6 7.1L12 17l-6.6 4 1.6-7.1-5-4.3 7-.6 3-7z"/>175  </svg>176 177  <!-- Floating action button -->178  <div class="fab">179    <svg viewBox="0 0 64 64"><path d="M14 34l10 10 26-26"/></svg>180  </div>181 182  <!-- Gesture bar -->183  <div class="gesture"></div>184 185</div>186</body>187</html>