GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>Share Sheet UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2160px;11 position: relative;12 overflow: hidden;13 background: #0f0f0f;14 color: #ffffff;15 }16 .top-photo {17 position: absolute;18 left: 0; top: 0;19 width: 1080px; height: 780px;20 background: #E0E0E0;21 border-bottom: 1px solid #BDBDBD;22 display: flex; align-items: center; justify-content: center;23 color: #757575; font-size: 34px; letter-spacing: 0.2px;24 }25 .photo-dark {26 position: absolute; left: 0; top: 0;27 width: 1080px; height: 780px;28 background: linear-gradient(to bottom, rgba(0,0,0,0.55) 0, rgba(0,0,0,0.40) 180px, rgba(0,0,0,0.35) 400px, rgba(0,0,0,0.0) 780px);29 pointer-events: none;30 }31 .status-bar {32 position: absolute; top: 22px; left: 24px; right: 24px; height: 60px;33 display: flex; align-items: center; justify-content: space-between;34 color: #ffffff; opacity: 0.92; font-size: 38px; letter-spacing: 0.2px;35 }36 .status-right { display: flex; gap: 22px; align-items: center; }37 .status-icon svg { width: 38px; height: 38px; fill: none; stroke: #fff; stroke-width: 2.5; }38 .round-action {39 position: absolute; top: 180px; left: 36px;40 width: 100px; height: 100px; border-radius: 50%;41 background: rgba(255,255,255,0.08);42 display: flex; align-items: center; justify-content: center;43 }44 .round-action svg { width: 48px; height: 48px; stroke: #d4d4d4; stroke-width: 4; }45 .round-actions-right { position: absolute; top: 180px; right: 36px; display: flex; gap: 26px; }46 .round-small {47 width: 100px; height: 100px; border-radius: 50%;48 background: rgba(255,255,255,0.08);49 display: flex; align-items: center; justify-content: center;50 }51 .round-small svg { width: 44px; height: 44px; stroke: #d4d4d4; stroke-width: 3.5; }52 .faded-title {53 position: absolute; top: 420px; left: 56px; right: 56px;54 color: rgba(255,255,255,0.25);55 font-size: 86px; font-weight: 700;56 line-height: 1.1;57 }58 .faded-sub {59 margin-top: 22px; font-size: 44px; font-weight: 500;60 }61 62 /* Share sheet */63 .sheet {64 position: absolute; left: 0; right: 0; bottom: 0;65 height: 1250px;66 background: #1b1a17;67 border-top-left-radius: 42px; border-top-right-radius: 42px;68 box-shadow: 0 -20px 40px rgba(0,0,0,0.5);69 }70 .sheet-handle {71 position: absolute; top: 22px; left: 50%; transform: translateX(-50%);72 width: 140px; height: 16px; border-radius: 8px; background: #e2e2e2;73 opacity: 0.85;74 }75 .sheet-content { padding: 84px 56px 40px; }76 .event-title { font-size: 48px; font-weight: 600; margin-bottom: 10px; }77 .event-sub { font-size: 36px; color: #d6d6d6; letter-spacing: 0.2px; }78 .action-row { display: flex; gap: 40px; margin-top: 60px; }79 .action-btn {80 display: flex; align-items: center; gap: 22px;81 padding: 28px 40px;82 border: 3px solid #f0a73c;83 border-radius: 18px;84 color: #f0a73c;85 font-size: 40px; font-weight: 600;86 }87 .action-btn svg { width: 44px; height: 44px; stroke: #f0a73c; fill: none; stroke-width: 3.5; }88 89 .account-row { display: flex; align-items: center; gap: 28px; margin-top: 70px; }90 .avatar {91 position: relative;92 width: 130px; height: 130px; border-radius: 50%;93 background: #1aa66b; display: flex; align-items: center; justify-content: center;94 font-size: 64px; font-weight: 700;95 }96 .badge {97 position: absolute; right: -6px; bottom: -6px;98 width: 48px; height: 48px; border-radius: 50%;99 background: #ffffff; color: #333; font-size: 26px; display: flex; align-items: center; justify-content: center;100 border: 2px solid #ddd;101 }102 .acct-text { font-size: 36px; color: #eaeaea; line-height: 1.3; }103 104 .apps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 80px; }105 .app { display: flex; flex-direction: column; align-items: center; }106 .app-icon {107 width: 160px; height: 160px; border-radius: 50%;108 background: #ffffff; display: flex; align-items: center; justify-content: center;109 }110 .app-icon svg { width: 88px; height: 88px; stroke: #333; stroke-width: 3.5; fill: none; }111 .app-label { margin-top: 22px; font-size: 34px; color: #dfdfdf; }112 113 /* Bottom navigation gesture area */114 .nav-area { position: absolute; bottom: 40px; left: 0; right: 0; display: flex; align-items: center; justify-content: center; }115 .gesture-pill { width: 300px; height: 22px; border-radius: 11px; background: #bcbcbc; opacity: 0.7; }116 .back-arrow {117 position: absolute; left: 26px; bottom: 24px; opacity: 0.7;118 }119 .back-arrow svg { width: 48px; height: 48px; stroke: #ffffff; stroke-width: 3.5; fill: none; }120</style>121</head>122<body>123<div id="render-target">124 125 <div class="top-photo">[IMG: City street with office building]</div>126 <div class="photo-dark"></div>127 128 <div class="status-bar">129 <div>12:52</div>130 <div class="status-right">131 <div class="status-icon">132 <svg viewBox="0 0 24 24"><path d="M12 2v2M12 20v2M2 12h2M20 12h2M5 5l1.5 1.5M17.5 17.5L19 19M5 19l1.5-1.5M17.5 6.5L19 5"/></svg>133 </div>134 <div class="status-icon">135 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M7 7l10 10" /></svg>136 </div>137 <div class="status-icon">138 <svg viewBox="0 0 24 24"><path d="M3 7h18v10H3z"/><path d="M15 7v-2h-6v2"/></svg>139 </div>140 <div style="font-size:32px;">100%</div>141 </div>142 </div>143 144 <div class="round-action">145 <svg viewBox="0 0 24 24"><path d="M4 4l16 16M20 4L4 20"/></svg>146 </div>147 <div class="round-actions-right">148 <div class="round-small">149 <svg viewBox="0 0 24 24"><path d="M5 19l4-4M9 15l10-10M15 5h4v4"/></svg>150 </div>151 <div class="round-small">152 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="5" r="1.8"/><circle cx="12" cy="12" r="1.8"/><circle cx="12" cy="19" r="1.8"/></svg>153 </div>154 </div>155 156 <div class="faded-title">birthday party157 <div class="faded-sub">Monday, Jun 19 • 1:00 – 2:00 PM</div>158 </div>159 160 <div class="sheet">161 <div class="sheet-handle"></div>162 <div class="sheet-content">163 <div class="event-title">birthday party</div>164 <div class="event-sub">Monday, Jun 19 • 1:00 – 2:00 PM...</div>165 166 <div class="action-row">167 <div class="action-btn">168 <svg viewBox="0 0 24 24"><rect x="6" y="6" width="12" height="14" rx="2"/><path d="M8 6V4h8v2"/></svg>169 <span>Copy</span>170 </div>171 <div class="action-btn">172 <svg viewBox="0 0 24 24"><path d="M4 12c2-3 6-3 8 0s6 3 8 0"/><path d="M12 12v6"/></svg>173 <span>Nearby</span>174 </div>175 </div>176 177 <div class="account-row">178 <div class="avatar">c179 <div class="badge">G</div>180 </div>181 <div class="acct-text">dbwscratch<br>test.id10@...</div>182 </div>183 184 <div class="apps">185 <div class="app">186 <div class="app-icon">187 <svg viewBox="0 0 24 24">188 <path d="M7 4l10 8-10 8V4z"/>189 <path d="M12 4v16"/>190 </svg>191 </div>192 <div class="app-label">Bluetooth</div>193 </div>194 <div class="app">195 <div class="app-icon">196 <svg viewBox="0 0 24 24">197 <path d="M3 6h18v10H7l-4 4V6z"/>198 </svg>199 </div>200 <div class="app-label">Messages</div>201 </div>202 <div class="app">203 <div class="app-icon">204 <svg viewBox="0 0 24 24">205 <rect x="3" y="6" width="18" height="12" rx="2"/>206 <path d="M3 8l9 6 9-6"/>207 </svg>208 </div>209 <div class="app-label">Gmail</div>210 </div>211 <div class="app">212 <div class="app-icon">213 <svg viewBox="0 0 24 24">214 <path d="M6 18h12L15 6H9L6 18z"/>215 <path d="M9 6l6 12"/>216 </svg>217 </div>218 <div class="app-label">Drive</div>219 </div>220 </div>221 </div>222 </div>223 224 <div class="nav-area">225 <div class="gesture-pill"></div>226 </div>227 <div class="back-arrow">228 <svg viewBox="0 0 24 24"><path d="M15 5l-7 7 7 7"/></svg>229 </div>230 231</div>232</body>233</html>