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>Share Dialog - Dark UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #1f1a1c; /* dark backdrop */13    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;14    color: #e9e3e5;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute; top: 0; left: 0; right: 0;20    height: 80px;21    color: #cfc5ca;22    display: flex; align-items: center; justify-content: space-between;23    padding: 0 36px;24    font-size: 34px;25  }26  .status-icons { display: flex; align-items: center; gap: 16px; }27  .dot { width: 10px; height: 10px; background: #cfc5ca; border-radius: 50%; opacity: 0.8; }28  .battery {29    width: 38px; height: 22px; border: 2px solid #cfc5ca; border-radius: 6px; position: relative;30  }31  .battery::after {32    content: ""; position: absolute; right: -6px; top: 7px; width: 6px; height: 8px; background: #cfc5ca; border-radius: 2px;33  }34  .battery .level { position: absolute; left: 3px; top: 3px; right: 6px; bottom: 3px; background: #cfc5ca; border-radius: 4px; }35 36  /* App bar */37  .app-bar {38    position: absolute; top: 80px; left: 0; right: 0;39    height: 140px;40    display: flex; align-items: center;41    padding: 0 30px;42    border-bottom: 1px solid #3a2f33;43  }44  .app-title {45    font-size: 44px; font-weight: 600; color: #e7dde0;46    margin-left: 16px;47  }48  .app-actions {49    margin-left: auto; display: flex; align-items: center; gap: 36px;50  }51  .icon-btn { width: 48px; height: 48px; color: #e7dde0; opacity: 0.9; }52  .close-btn { width: 48px; height: 48px; color: #e7dde0; }53 54  .progress-track {55    position: absolute; left: 30px; right: 30px; top: 200px; height: 8px; background: #33282c; border-radius: 4px;56  }57  .progress {58    width: 360px; height: 8px; background: #c6879b; border-radius: 4px;59  }60 61  /* Content */62  .content {63    position: absolute; top: 220px; left: 0; right: 0;64    padding: 24px 36px;65    font-size: 36px;66  }67  .row {68    display: flex; align-items: center; gap: 24px;69    padding: 26px 0;70    border-bottom: 1px solid #33282c;71  }72  .row.no-border { border-bottom: none; }73  .label { color: #cfc5ca; opacity: 0.9; }74  .input-text {75    color: #d8a6b6; font-size: 38px;76    flex: 1;77  }78  .dropdown { margin-left: auto; color: #cfc5ca; display: flex; align-items: center; gap: 12px; }79  .checkbox-row {80    display: flex; align-items: center; gap: 20px; padding: 28px 0;81    border-bottom: 1px solid #33282c;82  }83  .checkbox {84    width: 42px; height: 42px; border-radius: 8px; background: #c6879b; display: flex; align-items: center; justify-content: center;85  }86  .checkbox svg { width: 28px; height: 28px; }87  .subtle {88    color: #b5a9af; margin-top: 24px; font-size: 34px;89  }90 91  /* Modal sheet */92  .sheet {93    position: absolute; left: 60px; right: 60px; bottom: 420px;94    background: #372c30;95    border-radius: 48px;96    padding: 60px 60px 40px;97    box-shadow: 0 24px 60px rgba(0,0,0,0.45);98  }99  .sheet-title {100    font-size: 58px; font-weight: 700; color: #efe7ea; margin-bottom: 26px;101  }102  .sheet-text {103    font-size: 36px; line-height: 1.5; color: #d9d0d4;104  }105  .sheet-actions {106    display: flex; justify-content: space-between; align-items: center;107    padding-top: 46px;108  }109  .text-btn {110    font-size: 42px; color: #e8a3b5; font-weight: 600; cursor: default;111  }112 113  /* Gesture bar */114  .gesture {115    position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);116    width: 340px; height: 12px; background: #ffffff; border-radius: 8px; opacity: 0.9;117  }118</style>119</head>120<body>121<div id="render-target">122 123  <!-- Status bar -->124  <div class="status-bar">125    <div>7:55</div>126    <div class="status-icons">127      <div class="dot"></div>128      <div class="dot"></div>129      <div class="dot"></div>130      <div class="battery"><div class="level"></div></div>131    </div>132  </div>133 134  <!-- App bar -->135  <div class="app-bar">136    <!-- Close/X icon -->137    <svg class="close-btn" viewBox="0 0 24 24">138      <path d="M5 5 L19 19 M19 5 L5 19" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" fill="none"/>139    </svg>140    <div class="app-title">Share</div>141    <div class="app-actions">142      <!-- Send (paper plane) -->143      <svg class="icon-btn" viewBox="0 0 24 24">144        <path d="M3 11 L20 4 L13 21 L11 13 Z" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linejoin="round"/>145      </svg>146      <!-- More (vertical dots) -->147      <svg class="icon-btn" viewBox="0 0 24 24">148        <circle cx="12" cy="5" r="2" fill="currentColor"/>149        <circle cx="12" cy="12" r="2" fill="currentColor"/>150        <circle cx="12" cy="19" r="2" fill="currentColor"/>151      </svg>152    </div>153  </div>154 155  <div class="progress-track">156    <div class="progress"></div>157  </div>158 159  <!-- Content -->160  <div class="content">161    <!-- Email row -->162    <div class="row">163      <!-- person + icon -->164      <svg width="48" height="48" viewBox="0 0 24 24" style="color:#e7dde0;">165        <circle cx="9" cy="8" r="3.5" fill="none" stroke="currentColor" stroke-width="1.8"/>166        <path d="M3.5 19c1.5-3.8 9-3.8 10.5 0" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>167        <path d="M18 7v4M16 9h4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>168      </svg>169      <div class="input-text">mike.waggoner@hotwater.com</div>170    </div>171 172    <!-- Editor dropdown -->173    <div class="row">174      <div class="label">Editor</div>175      <div class="dropdown">176        <span style="color:#bdaeb4;">options</span>177        <svg width="28" height="28" viewBox="0 0 24 24" style="color:#bdaeb4;">178          <path d="M6 9 L12 15 L18 9" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>179        </svg>180      </div>181    </div>182 183    <!-- Notify people checkbox -->184    <div class="checkbox-row">185      <div class="checkbox">186        <svg viewBox="0 0 24 24">187          <path d="M4 12 L9 17 L20 6" fill="none" stroke="#2b1e22" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round"/>188        </svg>189      </div>190      <div class="label">Notify people</div>191    </div>192 193    <div class="subtle">Add a message</div>194  </div>195 196  <!-- Bottom sheet -->197  <div class="sheet">198    <div class="sheet-title">Are you sure?</div>199    <div class="sheet-text">200      You are sending an invitation to mike.waggoner@hotwater.com. Anyone holding this invitation will have access.201    </div>202    <div class="sheet-actions">203      <div class="text-btn">Cancel</div>204      <div class="text-btn">Share</div>205    </div>206  </div>207 208  <!-- Gesture bar -->209  <div class="gesture"></div>210</div>211</body>212</html>