GD-ML/AndroidCode
13.4k
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>Mobile UI Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target{10 width:1080px; height:2400px; position:relative; overflow:hidden;11 background:#0f1113; color:#e9e9e9; font-family: Arial, Helvetica, sans-serif;12 }13 14 /* Status bar */15 .status-bar{16 position:absolute; top:0; left:0; right:0; height:110px;17 background:#0b0b0b; color:#fff; display:flex; align-items:center; justify-content:space-between;18 padding:0 32px; font-size:42px; letter-spacing:0.5px;19 }20 .status-icons{ display:flex; align-items:center; gap:22px; }21 .icon-small{ width:34px; height:34px; display:inline-block; }22 .icon-battery{ width:44px; height:24px; border:2px solid #fff; border-radius:4px; position:relative; }23 .icon-battery::after{ content:""; position:absolute; right:-6px; top:6px; width:4px; height:12px; background:#fff; border-radius:1px; }24 .icon-dot{ width:10px; height:10px; background:#fff; border-radius:50%; display:inline-block; opacity:0.9; }25 26 /* App bar */27 .app-bar{28 position:absolute; top:110px; left:0; right:0; height:120px;29 background:#121212; display:flex; align-items:center; justify-content:space-between;30 padding:0 28px;31 }32 .app-title{ font-size:46px; font-weight:600; color:#dcdcdc; }33 .actions{ display:flex; align-items:center; gap:36px; }34 .tool-icon{ width:56px; height:56px; fill:#cfcfcf; opacity:0.9; }35 36 /* File list */37 .file-row{38 position:absolute; top:230px; left:0; right:0; height:170px;39 background:#2b4d78; display:flex; align-items:center; padding:0 24px; gap:24px;40 }41 .file-avatar{42 width:88px; height:88px; background:#1b1f25; border-radius:10px; border:1px solid #2c2c2c;43 display:flex; align-items:center; justify-content:center; color:#9aa3ad; font-size:42px;44 }45 .file-info{ display:flex; flex-direction:column; justify-content:center; }46 .file-name{ font-size:46px; font-weight:600; color:#e7efff; }47 .file-meta{ font-size:34px; color:#c9d9ff; opacity:0.85; margin-top:6px; letter-spacing:0.2px; }48 .checkbox{49 margin-left:auto; width:52px; height:52px; border-radius:6px; border:2px solid #e7efff; display:flex; align-items:center; justify-content:center;50 background:#0f1a2a;51 }52 .checkbox svg{ width:36px; height:36px; fill:#e7efff; }53 54 /* Dim overlay */55 .dim{56 position:absolute; inset:0; background:rgba(0,0,0,0.6);57 top:0;58 }59 60 /* Share sheet bottom sheet */61 .sheet{62 position:absolute; left:0; right:0; bottom:0; height:980px;63 background:#1b1c20; border-top-left-radius:44px; border-top-right-radius:44px;64 box-shadow:0 -8px 30px rgba(0,0,0,0.5);65 padding:28px 36px 24px;66 }67 .grabber{68 width:120px; height:12px; background:#3b3c42; border-radius:6px; margin:8px auto 28px;69 }70 .sheet-header{ display:flex; align-items:center; gap:24px; }71 .sheet-file-icon{72 width:90px; height:90px; border-radius:12px; background:#2c2e33; border:1px solid #3a3c42;73 display:flex; align-items:center; justify-content:center; color:#b3b7bf; font-size:40px;74 }75 .sheet-title{ font-size:44px; color:#c9ccd3; }76 .nearby{77 margin:48px auto 28px; width:260px; height:90px; border:2px solid #5763ff; border-radius:20px;78 display:flex; align-items:center; justify-content:center; gap:16px; color:#dfe3ff; font-size:42px;79 background:#21232a;80 }81 .nearby svg{ width:44px; height:44px; fill:#dfe3ff; }82 .no-reco{ text-align:center; color:#9aa0a6; font-size:36px; margin:28px 0 36px; }83 84 .apps{ display:flex; justify-content:space-between; padding:0 36px; margin-top:18px; }85 .app{86 width:160px; display:flex; flex-direction:column; align-items:center; gap:16px;87 }88 .app .logo{89 width:120px; height:120px; border-radius:60px; background:#2a2d33; border:1px solid #3a3d44;90 display:flex; align-items:center; justify-content:center; color:#e5e5e5; font-weight:bold; font-size:38px;91 }92 .app .label{ color:#d2d2d2; font-size:30px; text-align:center; line-height:1.2; }93 94 /* Bottom gesture pill */95 .gesture{96 position:absolute; bottom:22px; left:50%; transform:translateX(-50%);97 width:320px; height:12px; background:#b6bac1; border-radius:8px; opacity:0.6;98 }99</style>100</head>101<body>102<div id="render-target">103 104 <!-- Status bar -->105 <div class="status-bar">106 <div class="time">9:18</div>107 <div class="status-icons">108 <span class="icon-dot"></span>109 <span class="icon-dot" style="opacity:0.6;"></span>110 <div class="icon-small" title="signal">111 <svg viewBox="0 0 24 24">112 <rect x="2" y="14" width="4" height="8" fill="#fff"></rect>113 <rect x="9" y="10" width="4" height="12" fill="#fff" opacity="0.8"></rect>114 <rect x="16" y="6" width="4" height="16" fill="#fff" opacity="0.6"></rect>115 </svg>116 </div>117 <div class="icon-battery"></div>118 </div>119 </div>120 121 <!-- App bar -->122 <div class="app-bar">123 <div class="app-title">(1)</div>124 <div class="actions">125 <!-- Search -->126 <svg class="tool-icon" viewBox="0 0 24 24">127 <circle cx="10" cy="10" r="7" fill="none" stroke="currentColor" stroke-width="2"></circle>128 <line x1="15" y1="15" x2="22" y2="22" stroke="currentColor" stroke-width="2"></line>129 </svg>130 <!-- Scissors -->131 <svg class="tool-icon" viewBox="0 0 24 24">132 <circle cx="6" cy="6" r="3" fill="currentColor"></circle>133 <circle cx="6" cy="18" r="3" fill="currentColor"></circle>134 <line x1="9" y1="9" x2="22" y2="4" stroke="currentColor" stroke-width="2"></line>135 <line x1="9" y1="15" x2="22" y2="20" stroke="currentColor" stroke-width="2"></line>136 </svg>137 <!-- Edit pencil -->138 <svg class="tool-icon" viewBox="0 0 24 24">139 <path d="M3 17l4 4 14-14-4-4L3 17z" fill="currentColor"></path>140 </svg>141 <!-- Menu -->142 <svg class="tool-icon" viewBox="0 0 24 24">143 <rect x="3" y="5" width="18" height="2" fill="currentColor"></rect>144 <rect x="3" y="11" width="18" height="2" fill="currentColor"></rect>145 <rect x="3" y="17" width="18" height="2" fill="currentColor"></rect>146 </svg>147 </div>148 </div>149 150 <!-- File row -->151 <div class="file-row">152 <div class="file-avatar">♪</div>153 <div class="file-info">154 <div class="file-name">audio file.mp3</div>155 <div class="file-meta">2023-12-07 08:15, 194.3 KB 00:12s</div>156 </div>157 <div class="checkbox" aria-label="checked">158 <svg viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5" /></svg>159 </div>160 </div>161 162 <!-- Dim overlay -->163 <div class="dim"></div>164 165 <!-- Share sheet -->166 <div class="sheet">167 <div class="grabber"></div>168 169 <div class="sheet-header">170 <div class="sheet-file-icon">🗎</div>171 <div class="sheet-title">audio file.mp3</div>172 </div>173 174 <div class="nearby">175 <svg viewBox="0 0 24 24"><path d="M4 12c3-6 13-6 16 0M6 12c2-4 10-4 12 0" stroke="currentColor" stroke-width="2" fill="none"/></svg>176 <span>Nearby</span>177 </div>178 179 <div class="no-reco">No recommended people to share with</div>180 181 <div class="apps">182 <div class="app">183 <div class="logo" style="background:#2b2d33;">M</div>184 <div class="label">Gmail</div>185 </div>186 <div class="app">187 <div class="logo" style="background:#2b2d33;">D</div>188 <div class="label">Drive</div>189 </div>190 <div class="app">191 <div class="logo" style="background:#2b2d33;">DB</div>192 <div class="label">Dropbox<br> Add to Drop...</div>193 </div>194 <div class="app">195 <div class="logo" style="background:#2b2d33;">1D</div>196 <div class="label">OneDrive</div>197 </div>198 </div>199 </div>200 201 <!-- Bottom gesture bar -->202 <div class="gesture"></div>203</div>204</body>205</html>