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>Sharing Options Dialog</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #111111;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 120px;24    background: #000000;25    color: #ffffff;26    display: flex;27    align-items: center;28    justify-content: space-between;29    padding: 0 36px;30    box-sizing: border-box;31    letter-spacing: 0.5px;32  }33  .status-left {34    display: flex;35    align-items: center;36    gap: 24px;37    font-size: 42px;38    font-weight: 500;39  }40  .status-right {41    display: flex;42    align-items: center;43    gap: 28px;44  }45  .icon {46    display: inline-flex;47    align-items: center;48    justify-content: center;49  }50 51  /* Center dialog */52  .dialog {53    position: absolute;54    left: 100px;55    top: 980px;56    width: 880px;57    background: #212121;58    border-radius: 4px;59    box-shadow: 0 18px 48px rgba(0,0,0,0.6);60    color: #EDEDED;61    overflow: hidden;62  }63  .dialog-header {64    background: #00BCD4;65    color: #ffffff;66    height: 120px;67    display: flex;68    align-items: center;69    padding: 0 36px;70    box-sizing: border-box;71    gap: 24px;72  }73  .dialog-header .title {74    font-size: 46px;75    font-weight: 500;76    text-transform: lowercase;77  }78  .list-row {79    padding: 36px;80    box-sizing: border-box;81    font-size: 38px;82    color: #FFFFFF;83    border-bottom: 1px solid #4A4A4A;84  }85  .list-row.muted {86    color: #D6D6D6;87    font-weight: 500;88  }89  .cancel-row {90    padding: 34px 36px 40px;91    text-align: right;92    color: #00BCD4;93    font-size: 42px;94    font-weight: 700;95    letter-spacing: 1px;96  }97 98  /* Home indicator */99  .home-indicator {100    position: absolute;101    bottom: 36px;102    left: 50%;103    transform: translateX(-50%);104    width: 360px;105    height: 12px;106    background: #E6E6E6;107    border-radius: 8px;108    opacity: 0.9;109  }110</style>111</head>112<body>113<div id="render-target">114  <!-- Status Bar -->115  <div class="status-bar">116    <div class="status-left">117      <span>2:16</span>118      <span class="icon">119        <!-- Simple notification glyph -->120        <svg width="40" height="40" viewBox="0 0 24 24" fill="none">121          <circle cx="12" cy="12" r="10" stroke="#fff" stroke-width="2"></circle>122          <path d="M12 6v6l4 2" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>123        </svg>124      </span>125      <span class="icon">126        <!-- App square icon -->127        <svg width="40" height="40" viewBox="0 0 24 24">128          <rect x="5" y="5" width="14" height="14" rx="3" fill="#ffffff"></rect>129        </svg>130      </span>131      <span class="icon">132        <!-- M-shaped mail glyph -->133        <svg width="40" height="40" viewBox="0 0 24 24" fill="none">134          <path d="M3 6h18v12H3z" stroke="#fff" stroke-width="2"></path>135          <path d="M3 6l9 6 9-6" stroke="#fff" stroke-width="2"></path>136        </svg>137      </span>138      <span style="font-size: 34px;">•</span>139    </div>140    <div class="status-right">141      <span class="icon">142        <!-- Do not disturb -->143        <svg width="40" height="40" viewBox="0 0 24 24" fill="none">144          <circle cx="12" cy="12" r="9" stroke="#fff" stroke-width="2"></circle>145          <path d="M7 12h10" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>146        </svg>147      </span>148      <span class="icon">149        <!-- Wi-Fi -->150        <svg width="42" height="42" viewBox="0 0 24 24" fill="none">151          <path d="M2 9c5-5 15-5 20 0" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>152          <path d="M5 12c3-3 11-3 14 0" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>153          <path d="M8 15c2-2 6-2 8 0" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>154          <circle cx="12" cy="18" r="1.6" fill="#fff"></circle>155        </svg>156      </span>157      <span class="icon">158        <!-- Battery -->159        <svg width="52" height="40" viewBox="0 0 28 16" fill="none">160          <rect x="1" y="2" width="22" height="12" rx="2" stroke="#fff" stroke-width="2"></rect>161          <rect x="3" y="4" width="16" height="8" fill="#fff"></rect>162          <rect x="23" y="6" width="3" height="4" rx="1" fill="#fff"></rect>163        </svg>164      </span>165    </div>166  </div>167 168  <!-- Dialog -->169  <div class="dialog">170    <div class="dialog-header">171      <svg width="56" height="56" viewBox="0 0 48 48" fill="none">172        <circle cx="12" cy="24" r="4" fill="#ffffff"></circle>173        <circle cx="36" cy="12" r="4" fill="#ffffff"></circle>174        <circle cx="36" cy="36" r="4" fill="#ffffff"></circle>175        <path d="M16 24L32 14M16 24L32 34" stroke="#ffffff" stroke-width="4" stroke-linecap="round"></path>176      </svg>177      <div class="title">sharing options</div>178    </div>179 180    <div class="list-row muted">1 file selected.</div>181    <div class="list-row">Send Original file (22.04 KB)</div>182    <div class="list-row">Send Shareable Link</div>183    <div class="cancel-row">CANCEL</div>184  </div>185 186  <div class="home-indicator"></div>187</div>188</body>189</html>