GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI - Share Sheet</title>5<style>6  body { margin:0; padding:0; background: transparent; font-family: 'Roboto', Arial, sans-serif; }7  #render-target {8    width:1080px; height:2400px;9    position:relative; overflow:hidden;10    background:#111214; color:#EDEDED;11  }12 13  /* Status bar */14  .status-bar {15    position:absolute; top:0; left:0; right:0;16    height:120px; padding:0 28px;17    display:flex; align-items:center; justify-content:space-between;18    color:#eaeaea; font-weight:500;19  }20  .status-left, .status-right { display:flex; align-items:center; gap:22px; }21  .status-time { font-size:40px; letter-spacing:0.5px; }22 23  /* Header / toolbar */24  .toolbar {25    position:absolute; top:120px; left:0; right:0;26    height:150px;27    display:flex; align-items:center;28    padding:0 28px;29    color:#d8d8d8;30  }31  .back-btn {32    width:84px; height:84px; display:flex; align-items:center; justify-content:center;33    border-radius:42px;34  }35  .title-group { margin-left:8px; }36  .doc-title {37    font-size:64px; font-weight:600; color:#dcdcdc;38  }39  .subtitle {40    font-size:34px; color:#9aa0a6; margin-top:6px;41  }42  .toolbar-actions { margin-left:auto; display:flex; align-items:center; gap:36px; }43  .action-icon {44    width:96px; height:96px; border-radius:48px;45    background:#1f2024; display:flex; align-items:center; justify-content:center;46    border:1px solid #2c2d31;47  }48  .kebab { width:22px; height:22px; border-radius:50%; box-shadow:0 0 0 4px #2c2d31 inset; }49 50  /* Document area */51  .doc-area {52    position:absolute; top:270px; left:0; right:0; bottom:0;53    background:#000;54  }55  .doc-content {56    position:absolute; top:140px; left:90px;57    color:#cfcfcf; font-size:38px; line-height:1.65;58  }59  .doc-content .heading { font-size:42px; color:#b4b4b4; margin-bottom:24px; text-decoration:underline; }60 61  /* Share sheet */62  .sheet {63    position:absolute; left:0; right:0; bottom:130px;64    height:950px; background:#1c1d20;65    border-top-left-radius:36px; border-top-right-radius:36px;66    box-shadow:0 -8px 20px rgba(0,0,0,0.6);67    border-top:1px solid #2a2b30;68  }69  .sheet-header {70    padding:36px 40px 8px; font-size:46px; color:#e9e9e9;71  }72  .sheet-list { padding:20px 0; }73  .item {74    display:flex; align-items:center;75    padding:26px 40px; gap:28px; color:#f0f0f0;76  }77  .item-icon {78    width:96px; height:96px; border-radius:48px;79    background:#0f1114; border:1px solid #2a2b30;80    display:flex; align-items:center; justify-content:center;81    color:#aab2bd; font-size:30px;82  }83  .item-label { font-size:46px; }84  .item-sub { font-size:34px; color:#9aa0a6; margin-top:6px; }85  .item.highlight { background:#3f4247; }86 87  /* bottom decision bar */88  .choice-bar {89    position:absolute; left:0; right:0; bottom:0;90    height:130px; background:#121317; border-top:1px solid #2a2b30;91    display:flex; align-items:center; justify-content:flex-end;92    gap:80px; padding-right:70px;93    font-size:44px; color:#cfe3ff;94  }95 96  /* simple icons */97  svg { fill:#cfcfcf; }98  .icon-small { width:44px; height:44px; }99</style>100</head>101<body>102<div id="render-target">103 104  <!-- Status bar -->105  <div class="status-bar">106    <div class="status-left">107      <div class="status-time">10:17</div>108      <div>◐</div>109      <div>○</div>110      <div>▸</div>111      <div>●</div>112      <div>•</div>113    </div>114    <div class="status-right">115      <div>◈</div>116      <div>🔋</div>117    </div>118  </div>119 120  <!-- Toolbar -->121  <div class="toolbar">122    <div class="back-btn">123      <svg class="icon-small" viewBox="0 0 24 24">124        <path d="M15.5 19l-7-7 7-7v14z"></path>125      </svg>126    </div>127    <div class="title-group">128      <div class="doc-title">Upcoming Even...</div>129      <div class="subtitle">All changes saved</div>130    </div>131    <div class="toolbar-actions">132      <div class="action-icon">133        <!-- group add -->134        <svg viewBox="0 0 24 24" width="44" height="44">135          <circle cx="9" cy="9" r="4"></circle>136          <path d="M18 8v3h3v2h-3v3h-2v-3h-3v-2h3V8h2zM4 19c0-3 3-5 7-5 1 0 2 .1 3 .3-.9.5-1.7 1.2-2.3 2.2C10.4 16.2 8.8 16 7 16c-2.5 0-3 1.6-3 3z"></path>137        </svg>138      </div>139      <div class="action-icon">140        <!-- comment bubble -->141        <svg viewBox="0 0 24 24" width="44" height="44">142          <path d="M4 4h16v12H7l-3 3V4z"></path>143        </svg>144      </div>145      <div class="action-icon">146        <!-- kebab -->147        <svg viewBox="0 0 24 24" width="6" height="44">148          <circle cx="12" cy="5" r="2"></circle>149          <circle cx="12" cy="12" r="2"></circle>150          <circle cx="12" cy="19" r="2"></circle>151        </svg>152      </div>153    </div>154  </div>155 156  <!-- Document area -->157  <div class="doc-area">158    <div class="doc-content">159      <div class="heading">Upcoming events</div>160      <div>Flower Show</div>161      <div>Gardening club meeting</div>162    </div>163  </div>164 165  <!-- Share sheet -->166  <div class="sheet">167    <div class="sheet-header">Share</div>168    <div class="sheet-list">169      <div class="item">170        <div class="item-icon">K</div>171        <div class="item-label">Kindle</div>172      </div>173      <div class="item highlight">174        <div class="item-icon">M</div>175        <div class="item-label">Gmail</div>176      </div>177      <div class="item">178        <div class="item-icon">MD</div>179        <div>180          <div class="item-label">MobiDrive</div>181          <div class="item-sub">Save to MobiDrive</div>182        </div>183      </div>184      <div class="item">185        <div class="item-icon">⋯</div>186        <div class="item-label">More apps</div>187      </div>188    </div>189  </div>190 191  <!-- Bottom decision bar -->192  <div class="choice-bar">193    <div>Just once</div>194    <div>Always</div>195  </div>196 197</div>198</body>199</html>