GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Send a copy modal - Mock</title>6<style>7  body { margin:0; padding:0; background: transparent; font-family: "Segoe UI", Roboto, Arial, sans-serif; }8  #render-target {9    width:1080px; height:2400px; position:relative; overflow:hidden;10    background:#0f0f11; color:#e9e9ea;11  }12 13  /* Status bar */14  .status-bar {15    position:absolute; top:0; left:0; width:100%; height:120px; color:#fff;16    display:flex; align-items:center; justify-content:space-between;17    padding:0 36px; box-sizing:border-box;18  }19  .status-left { display:flex; align-items:center; gap:24px; font-weight:600; font-size:44px; }20  .status-right { display:flex; align-items:center; gap:22px; }21  .status-icon { width:34px; height:34px; border-radius:50%; background:#d9d9da1a; border:2px solid #cfcfd2; }22  .wifi-icon, .battery-icon {23    width:44px; height:44px;24  }25  .wifi-icon svg, .battery-icon svg { width:100%; height:100%; fill:#ffffff; }26 27  /* App bar */28  .app-bar {29    position:absolute; top:120px; left:0; right:0; height:170px; display:flex; align-items:center;30    padding:0 30px; box-sizing:border-box;31  }32  .app-left { display:flex; align-items:center; gap:26px; }33  .app-title { font-size:66px; font-weight:600; color:#f3f3f4; letter-spacing:0.2px; }34  .subtitle { font-size:32px; color:#a9a9ad; margin-top:6px; }35  .app-right { margin-left:auto; display:flex; align-items:center; gap:34px; }36  .icon-btn { width:92px; height:92px; border-radius:46px; background:#1b1b1f; display:flex; align-items:center; justify-content:center; }37  .icon-btn svg { fill:#e7e7e8; width:52px; height:52px; }38 39  /* Document area placeholder */40  .doc-area {41    position:absolute; top:300px; left:0; right:0; bottom:0; padding:60px 70px;42    box-sizing:border-box; color:#d6d6d8;43  }44  .doc-page {45    width:100%; height:100%; border-radius:0px; background:#0f0f11;46  }47  .doc-text { max-width:700px; font-size:38px; line-height:58px; color:#cfcfd3; }48  .doc-text .title { font-size:40px; color:#e9e9ea; margin-bottom:26px; text-decoration:underline; }49 50  /* Floating action button */51  .fab {52    position:absolute; right:44px; bottom:140px; width:132px; height:132px; border-radius:66px;53    background:#102a3c; box-shadow:0 8px 24px rgba(0,0,0,0.55);54    display:flex; align-items:center; justify-content:center;55  }56  .fab svg { width:58px; height:58px; stroke:#b9d6ff; stroke-width:10; fill:none; }57 58  /* Overlay and modal sheet */59  .overlay {60    position:absolute; inset:0; background:rgba(0,0,0,0.45);61  }62  .sheet {63    position:absolute; left:90px; top:640px; width:900px;64    background:#26262b; border-radius:60px; box-shadow:0 40px 80px rgba(0,0,0,0.7);65    padding:68px 64px; box-sizing:border-box;66  }67  .sheet h2 {68    margin:0 0 24px 0; font-size:64px; color:#f5f5f6; font-weight:700;69  }70  .choose-label { font-size:34px; color:#c2c2c6; margin-bottom:36px; }71  .option {72    display:flex; align-items:center; gap:28px; padding:26px 12px; border-radius:16px; color:#e9e9ea;73    font-size:44px;74  }75  .radio {76    width:48px; height:48px; border-radius:50%; border:6px solid #b4b4b8; position:relative;77    box-sizing:border-box;78  }79  .option.selected .radio { border-color:#8ab4f8; }80  .option.selected .radio::after {81    content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);82    width:22px; height:22px; border-radius:50%; background:#8ab4f8;83  }84  .divider { height:2px; background:#3a3a40; margin:22px 0; }85  .sheet .actions {86    margin-top:42px; display:flex; justify-content:flex-end; gap:46px;87  }88  .btn-link {89    font-size:44px; color:#8ab4f8; padding:16px 8px; cursor:pointer;90  }91 92  /* Three-dots menu simple dots visualization */93  .dots { display:flex; gap:8px; }94  .dot { width:12px; height:12px; background:#e7e7e8; border-radius:50%; }95</style>96</head>97<body>98<div id="render-target">99  <!-- Status bar -->100  <div class="status-bar">101    <div class="status-left">102      <div>10:15</div>103      <div class="status-icon"></div>104      <div class="status-icon"></div>105      <div class="status-icon"></div>106      <div class="status-icon"></div>107    </div>108    <div class="status-right">109      <div class="wifi-icon">110        <svg viewBox="0 0 24 24">111          <path d="M12 20c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm-5.5-5.5 1.4 1.4A6 6 0 0 1 12 14c1.7 0 3.3.7 4.5 1.9l1.4-1.4A8.9 8.9 0 0 0 12 12c-2.5 0-4.8 1-6.5 2.5zm-3.2-3.2 1.4 1.4C7.3 10.7 9.6 9.8 12 9.8s4.7.9 6.3 2.5l1.4-1.4A12 12 0 0 0 12 8c-3.4 0-6.5 1.3-8.7 3.3z"/>112        </svg>113      </div>114      <div class="battery-icon">115        <svg viewBox="0 0 24 24">116          <path d="M22 10h-1V8a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-2h1v-4zm-3 6H5V8h14v8z"/>117        </svg>118      </div>119    </div>120  </div>121 122  <!-- App bar -->123  <div class="app-bar">124    <div class="app-left">125      <div class="icon-btn">126        <svg viewBox="0 0 24 24">127          <path d="M15.5 19 8 11.5 15.5 4l1.4 1.4-6.1 6.1 6.1 6.1z"/>128        </svg>129      </div>130      <div>131        <div class="app-title">Upcoming Even...</div>132        <div class="subtitle">All changes saved</div>133      </div>134    </div>135    <div class="app-right">136      <div class="icon-btn">137        <svg viewBox="0 0 24 24">138          <path d="M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm6 7v-1a5 5 0 0 0-5-5H9a5 5 0 0 0-5 5v1h14zm1-8V8h-2V6h-2v2h-2v2h2v2h2v-2z"/>139        </svg>140      </div>141      <div class="icon-btn">142        <svg viewBox="0 0 24 24">143          <path d="M21 6H3v12l6-3h12z"/>144        </svg>145      </div>146      <div class="icon-btn">147        <div class="dots">148          <span class="dot"></span><span class="dot"></span><span class="dot"></span>149        </div>150      </div>151    </div>152  </div>153 154  <!-- Document area -->155  <div class="doc-area">156    <div class="doc-page">157      <div class="doc-text">158        <div class="title">Upcoming events</div>159        <div>Flower Show<br/>Gardening club meeting</div>160      </div>161    </div>162  </div>163 164  <!-- Overlay + modal sheet -->165  <div class="overlay"></div>166  <div class="sheet">167    <h2>Send a copy</h2>168    <div class="choose-label">Choose format</div>169 170    <div class="option selected">171      <div class="radio"></div>172      <div>Word (.docx)</div>173    </div>174    <div class="option">175      <div class="radio"></div>176      <div>PDF Document (.pdf)</div>177    </div>178    <div class="option">179      <div class="radio"></div>180      <div>OpenDocument Format (.odt)</div>181    </div>182    <div class="option">183      <div class="radio"></div>184      <div>Plain Text (.txt)</div>185    </div>186    <div class="option">187      <div class="radio"></div>188      <div>Rich Text Format (.rtf)</div>189    </div>190    <div class="option">191      <div class="radio"></div>192      <div>Web Page (.html, zipped)</div>193    </div>194    <div class="option">195      <div class="radio"></div>196      <div>EPUB Publication (.epub)</div>197    </div>198 199    <div class="actions">200      <div class="btn-link">Cancel</div>201      <div class="btn-link">OK</div>202    </div>203  </div>204 205  <!-- Floating edit button -->206  <div class="fab">207    <svg viewBox="0 0 24 24">208      <path d="M3 17.25V21h3.75l11-11-3.75-3.75-11 11zM20.7 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>209    </svg>210  </div>211</div>212</body>213</html>