GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Android Share Sheet UI</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;position:relative;overflow:hidden;9 background:#2d2d2d; color:#fff;10 }11 /* status bar */12 .status-bar{13 position:absolute;top:0;left:0;width:100%;height:110px;14 display:flex;align-items:center;justify-content:space-between;15 padding:0 40px;font-size:40px;opacity:0.9;16 }17 .status-right{display:flex;gap:28px;align-items:center;font-size:36px;opacity:0.9;}18 /* header */19 .header{20 position:absolute;top:110px;left:0;width:100%;height:120px;21 display:flex;align-items:center;gap:30px;padding:0 30px;22 }23 .icon-btn{width:90px;height:90px;border-radius:18px;display:flex;align-items:center;justify-content:center;opacity:0.95;}24 .icon-btn svg{width:50px;height:50px;fill:#fff;}25 .title{font-size:54px;font-weight:500;letter-spacing:0.5px;}26 .header-actions{margin-left:auto;display:flex;gap:10px;}27 .action{width:90px;height:90px;border-radius:16px;display:flex;align-items:center;justify-content:center;}28 .action svg{width:44px;height:44px;fill:#fff;}29 /* chips */30 .chips{position:absolute;top:250px;left:0;width:100%;display:flex;gap:26px;padding:0 30px;}31 .chip{32 padding:26px 32px;border-radius:24px;background:#404040;color:#d9d9d9;33 font-size:40px;border:1px solid #4b4b4b;34 }35 /* file item */36 .file-row{37 position:absolute;top:380px;left:30px;right:30px;height:140px;38 display:flex;align-items:center;gap:26px;color:#ddd;39 }40 .thumb{41 width:140px;height:100px;background:#E0E0E0;border:1px solid #BDBDBD;border-radius:10px;42 display:flex;align-items:center;justify-content:center;color:#757575;font-size:28px;43 }44 .file-info{flex:1;}45 .file-name{font-size:48px;color:#fff;}46 .file-meta{font-size:36px;color:#b0b0b0;margin-top:10px;}47 .kebab{width:24px;height:120px;display:flex;align-items:center;justify-content:center;margin-right:20px;}48 .kebab span{display:block;width:14px;height:14px;background:#cfcfcf;border-radius:50%;margin:8px 0;}49 /* bottom sheet */50 .sheet{51 position:absolute;bottom:0;left:0;width:100%;height:1120px;background:#f8f8f6;color:#222;52 border-top-left-radius:40px;border-top-right-radius:40px;53 box-shadow:0 -20px 40px rgba(0,0,0,0.35);54 }55 .handle{width:120px;height:12px;background:#e2e6df;border-radius:12px;margin:32px auto;}56 .sheet-file{57 display:flex;align-items:center;gap:24px;padding:22px 40px 10px 40px;58 }59 .doc-icon{60 width:90px;height:90px;border-radius:10px;background:#d9d9d9;display:flex;align-items:center;justify-content:center;61 }62 .doc-icon svg{width:56px;height:56px;fill:#757575;}63 .sheet-file .name{font-size:48px;color:#333;}64 .nearby{65 width:300px;height:100px;border-radius:22px;border:2px solid #4c7048;background:#ffffff;66 display:flex;align-items:center;justify-content:center;gap:18px;color:#274b2b;font-weight:600;margin:26px auto 10px;67 }68 .nearby svg{width:42px;height:42px;fill:#274b2b;}69 /* people row */70 .people{display:flex;align-items:flex-start;gap:36px;padding:30px 40px;}71 .person{display:flex;flex-direction:column;align-items:flex-start;}72 .avatar-wrap{position:relative;width:160px;height:160px;border-radius:80px;background:#e57373;display:flex;align-items:center;justify-content:center;color:#fff;font-size:84px;font-weight:700;}73 .badge{74 position:absolute;right:18px;bottom:20px;width:56px;height:56px;border-radius:30px;background:#4285f4;75 display:flex;align-items:center;justify-content:center;76 }77 .badge svg{width:36px;height:36px;fill:#fff;}78 .person .label{margin-top:16px;font-size:40px;color:#333;}79 /* share apps */80 .apps{display:flex;justify-content:space-between;padding:30px 60px;}81 .app{width:180px;display:flex;flex-direction:column;align-items:center;gap:22px;}82 .app-icon{width:160px;height:160px;border-radius:80px;background:#ffffff;border:1px solid #ddd;display:flex;align-items:center;justify-content:center;}83 .app .text{font-size:40px;color:#333;}84 /* simple app icons */85 .mail svg{width:90px;height:90px;}86 .msg svg{width:90px;height:90px;}87 .drive svg{width:100px;height:100px;}88 .print svg{width:90px;height:90px;}89 /* dimmed area above sheet content */90 .overlay-note{position:absolute;top:540px;left:0;width:100%;color:#9aa29c;text-align:center;font-size:34px;}91</style>92</head>93<body>94<div id="render-target">95 96 <!-- Status bar -->97 <div class="status-bar">98 <div>11:23</div>99 <div class="status-right">100 <span>ðŸ•</span>101 <span>📶</span>102 <span>🔋</span>103 </div>104 </div>105 106 <!-- Header -->107 <div class="header">108 <div class="icon-btn">109 <svg viewBox="0 0 24 24"><path d="M15.5 6l-7 6 7 6V6z"/></svg>110 </div>111 <div class="title">esic-covid-19</div>112 <div class="header-actions">113 <div class="action">114 <svg viewBox="0 0 24 24"><path d="M18.3 5.7L12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3 10.6 10.6 16.9 4.3l1.4 1.4z"/></svg>115 </div>116 <div class="action">117 <svg viewBox="0 0 24 24"><path d="M3 3h7v7H3V3zm11 0h7v7h-7V3zM3 14h7v7H3v-7zm11 0h7v7h-7v-7z"/></svg>118 </div>119 <div class="action">120 <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>121 </div>122 </div>123 </div>124 125 <!-- Category chips -->126 <div class="chips">127 <div class="chip">Audio</div>128 <div class="chip">Documents & other</div>129 <div class="chip">Images</div>130 </div>131 132 <!-- File row in list -->133 <div class="file-row">134 <div class="thumb">[IMG: COVID poster]</div>135 <div class="file-info">136 <div class="file-name">ESIC -COVID-19.pdf</div>137 <div class="file-meta">9.43 MB, Jul 18</div>138 </div>139 <div class="kebab">140 <span></span><span></span><span></span>141 </div>142 </div>143 144 <!-- Bottom sheet -->145 <div class="sheet">146 <div class="handle"></div>147 <div class="sheet-file">148 <div class="doc-icon">149 <svg viewBox="0 0 24 24"><path d="M6 2h8l4 4v16H6zM14 2v4h4"/></svg>150 </div>151 <div class="name">ESIC -COVID-19.pdf</div>152 </div>153 154 <div class="nearby">155 <svg viewBox="0 0 24 24"><path d="M4 12c2.5-3.3 6.5-3.3 9 0-2.5 3.3-6.5 3.3-9 0zm7-5c1.7-2.3 4.3-2.3 6 0-1.7 2.3-4.3 2.3-6 0z"/></svg>156 <span>Nearby</span>157 </div>158 159 <div class="people">160 <div class="person">161 <div class="avatar-wrap">A162 <div class="badge">163 <svg viewBox="0 0 24 24"><path d="M12 3C7.6 3 4 5.8 4 9c0 3.2 3.6 6 8 6s8-2.8 8-6c0-3.2-3.6-6-8-6zm-3 8h6v2H9v-2zm12 8c-2.8 2-6.6 3-9 3s-6.2-1-9-3c1.7-2.3 5.1-3.5 9-3s7.3 1.2 9 3z"/></svg>164 </div>165 </div>166 <div class="label">Anuj</div>167 </div>168 </div>169 170 <div class="apps">171 <div class="app">172 <div class="app-icon mail">173 <svg viewBox="0 0 24 24">174 <path fill="#ea4335" d="M3 5h18v14H3z"/>175 <path fill="#fff" d="M3 5l9 7 9-7v0H3z"/>176 </svg>177 </div>178 <div class="text">Gmail</div>179 </div>180 <div class="app">181 <div class="app-icon msg">182 <svg viewBox="0 0 24 24">183 <path fill="#4285f4" d="M4 4h16v12H13l-5 4v-4H4z"/>184 </svg>185 </div>186 <div class="text">Messages</div>187 </div>188 <div class="app">189 <div class="app-icon drive">190 <svg viewBox="0 0 24 24">191 <path fill="#0f9d58" d="M9 3l6 0 4 7-6 0z"/>192 <path fill="#4285f4" d="M5 17l4-7h6l-4 7z"/>193 <path fill="#f4b400" d="M19 17H9l-4 4h14z"/>194 </svg>195 </div>196 <div class="text">Drive</div>197 </div>198 <div class="app">199 <div class="app-icon print">200 <svg viewBox="0 0 24 24">201 <path fill="#1e88e5" d="M6 3h12v6H6z"/>202 <path fill="#666" d="M5 10h14v8H5z"/>203 <path fill="#fff" d="M7 14h10v4H7z"/>204 </svg>205 </div>206 <div class="text">Print</div>207 </div>208 </div>209 </div>210 211</div>212</body>213</html>