GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>Modal Radio Dialog - Mobile UI</title>6<style>7  body { margin:0; padding:0; background:transparent; font-family: "Roboto", Arial, sans-serif; }8  #render-target {9    width:1080px; height:2400px; position:relative; overflow:hidden;10    background:#f3f3f3;11  }12 13  /* App bar and status bar */14  .app-bar {15    position:absolute; left:0; top:0; width:100%; height:210px;16    background:#0e3556; color:#fff;17  }18  .status {19    height:84px; display:flex; align-items:center; justify-content:space-between;20    padding:0 28px; font-weight:500; font-size:36px; color:#fff; opacity:0.95;21  }22  .status .right { display:flex; align-items:center; gap:24px; }23  .toolbar {24    height:126px; display:flex; align-items:center; padding:0 24px; gap:20px;25  }26  .toolbar .title { color:#fff; font-size:52px; font-weight:600; letter-spacing:0.2px; }27  .icon-btn {28    width:74px; height:74px; display:flex; align-items:center; justify-content:center;29  }30 31  /* Underlying content (settings list) */32  .content {33    position:absolute; top:210px; left:0; right:0; bottom:0; overflow:hidden;34    background:#ffffff;35  }36  .section-label {37    color:#2d7f8a; font-weight:700; font-size:40px; padding:36px 40px 12px;38  }39  .list {40    border-top:1px solid #e6e6e6;41  }42  .row {43    padding:28px 40px;44    border-bottom:1px solid #ececec;45  }46  .row .title { font-size:44px; color:#333; }47  .row .sub { font-size:34px; color:#777; margin-top:8px; }48 49  /* Dim overlay */50  .overlay {51    position:absolute; left:0; top:0; width:100%; height:100%;52    background:rgba(0,0,0,0.55);53    z-index:5;54  }55 56  /* Dialog */57  .dialog {58    position:absolute; left:60px; right:60px; top:640px;59    background:#fff; border-radius:12px;60    box-shadow:0 34px 72px rgba(0,0,0,0.45), 0 6px 12px rgba(0,0,0,0.2);61    z-index:10;62    padding:44px 40px 28px;63  }64  .dialog-title {65    font-size:56px; font-weight:700; color:#212121; margin-bottom:26px;66  }67  .radio-list { margin-top:10px; }68  .radio-row {69    display:flex; align-items:center; gap:28px;70    padding:22px 0;71  }72  .radio {73    width:48px; height:48px; border-radius:50%;74    border:4px solid #9e9e9e; box-sizing:border-box; position:relative;75  }76  .radio.selected { border-color:#2b7c85; }77  .radio.selected::after {78    content:""; position:absolute; left:50%; top:50%;79    width:18px; height:18px; background:#2b7c85; border-radius:50%;80    transform:translate(-50%,-50%);81  }82  .label { font-size:44px; color:#555; }83 84  .dialog-footer {85    display:flex; justify-content:flex-end; padding-top:10px;86    margin-top:10px;87  }88  .text-btn {89    font-size:40px; font-weight:700; color:#2b7c85; padding:24px 18px;90    text-transform:uppercase; letter-spacing:1px;91  }92 93  /* Bottom gesture nav bar */94  .nav-bar {95    position:absolute; left:0; bottom:0; width:100%; height:140px;96    background:#000; z-index:15;97    display:flex; align-items:center; justify-content:center;98  }99  .gesture-pill {100    width:240px; height:12px; background:#eaeaea; border-radius:12px;101    opacity:0.95;102  }103 104  /* Subtle elevated dialog edge */105  .dialog::after{106    content:""; position:absolute; left:0; right:0; bottom:-8px; height:8px; border-radius:0 0 12px 12px;107    background:transparent; box-shadow:0 16px 40px rgba(0,0,0,0.28);108    pointer-events:none;109  }110</style>111</head>112<body>113<div id="render-target">114 115  <!-- App bar with status -->116  <div class="app-bar">117    <div class="status">118      <div class="left">12:20</div>119      <div class="right">120        <!-- Simple inline icons -->121        <svg width="38" height="38" viewBox="0 0 24 24" fill="none">122          <path d="M3 18h18v2H3zM5 14h14v2H5zM7 10h10v2H7zM9 6h6v2H9z" fill="#ffffff" opacity="0.9"/>123        </svg>124        <svg width="38" height="38" viewBox="0 0 24 24" fill="none">125          <path d="M2 8l10-6 10 6v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8z" stroke="#fff" stroke-width="2"/>126          <path d="M12 12v6" stroke="#fff" stroke-width="2"/>127        </svg>128        <svg width="38" height="38" viewBox="0 0 24 24" fill="none">129          <path d="M2 10l6-4v12l-6-4V10zM10 6h12v12H10V6z" fill="#ffffff"/>130        </svg>131        <svg width="38" height="38" viewBox="0 0 24 24" fill="none">132          <path d="M6 18c3.5-4.7 8.5-4.7 12 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>133          <circle cx="18" cy="6" r="2" fill="#fff"/>134        </svg>135        <svg width="42" height="42" viewBox="0 0 24 24" fill="none">136          <path d="M7 7h10v10H7z" stroke="#fff" stroke-width="2"/>137          <path d="M17 7v-2h-3" stroke="#fff" stroke-width="2"/>138        </svg>139        <svg width="44" height="44" viewBox="0 0 24 24" fill="none">140          <path d="M3 10h18l-1 10H4L3 10z" stroke="#fff" stroke-width="2"/>141          <path d="M8 7a4 4 0 0 1 8 0v3H8V7z" stroke="#fff" stroke-width="2"/>142        </svg>143      </div>144    </div>145    <div class="toolbar">146      <div class="icon-btn">147        <svg width="40" height="40" viewBox="0 0 24 24">148          <path d="M15 18l-6-6 6-6" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>149        </svg>150      </div>151      <div class="title">General</div>152    </div>153  </div>154 155  <!-- Underlying screen content -->156  <div class="content">157    <div class="section-label">General</div>158    <div class="list">159      <div class="row">160        <div class="title">Language</div>161        <div class="sub">English (US)</div>162      </div>163      <div class="row">164        <div class="title">Default view</div>165        <div class="sub">Set your starting calendar view</div>166      </div>167      <div class="row">168        <div class="title">Alternate calendars</div>169        <div class="sub">None</div>170      </div>171      <div class="row">172        <div class="title">Theme</div>173        <div class="sub">System default</div>174      </div>175    </div>176  </div>177 178  <!-- Dim overlay -->179  <div class="overlay"></div>180 181  <!-- Dialog -->182  <div class="dialog">183    <div class="dialog-title">Default view</div>184    <div class="radio-list">185      <div class="radio-row">186        <div class="radio"></div>187        <div class="label">Day</div>188      </div>189      <div class="radio-row">190        <div class="radio"></div>191        <div class="label">Week</div>192      </div>193      <div class="radio-row">194        <div class="radio"></div>195        <div class="label">Week agenda</div>196      </div>197      <div class="radio-row">198        <div class="radio selected"></div>199        <div class="label">Month</div>200      </div>201      <div class="radio-row">202        <div class="radio"></div>203        <div class="label">Text month</div>204      </div>205      <div class="radio-row">206        <div class="radio"></div>207        <div class="label">Agenda</div>208      </div>209    </div>210 211    <div class="dialog-footer">212      <div class="text-btn">Cancel</div>213    </div>214  </div>215 216  <!-- Bottom gesture nav bar -->217  <div class="nav-bar">218    <div class="gesture-pill"></div>219  </div>220 221</div>222</body>223</html>