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>Docs Dark UI</title>7<style>8 body { margin:0; padding:0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width:1080px; height:2400px; position:relative; overflow:hidden;11 background:#1b171f; color:#e9e6ef;12 }13 14 /* Status bar */15 .status-bar {16 height:110px; padding:0 36px; display:flex; align-items:center; justify-content:space-between;17 color:#e9e6ef; font-weight:600; font-size:40px;18 }19 .sb-left, .sb-right { display:flex; align-items:center; gap:24px; }20 .sb-dot { width:16px; height:16px; background:#bcb8c8; border-radius:50%; opacity:0.8; }21 .icon-wifi, .icon-battery { width:44px; height:44px; fill:#e9e6ef; opacity:0.9; }22 23 /* Search bar */24 .search-wrap { padding:18px 36px 0 36px; }25 .search-bar {26 height:112px; background:#322b37; border-radius:56px;27 display:flex; align-items:center; padding:0 28px; gap:28px;28 }29 .icon-btn { width:56px; height:56px; display:flex; align-items:center; justify-content:center; border-radius:28px; }30 .icon { width:44px; height:44px; fill:#cfc9da; }31 .search-text { flex:1; color:#cfc9da; font-size:42px; letter-spacing:0.1px; }32 .avatar {33 width:76px; height:76px; border-radius:50%; background:#6a4f3c; color:#fff;34 display:flex; align-items:center; justify-content:center; font-size:42px; font-weight:700;35 box-shadow:0 6px 10px rgba(0,0,0,0.35);36 }37 38 /* Section header */39 .section {40 padding:42px 36px 12px 36px; display:flex; align-items:center; justify-content:space-between;41 }42 .section-left { display:flex; align-items:center; gap:18px; }43 .section-title { font-size:40px; color:#cfc9da; }44 .chev { width:38px; height:38px; fill:#cfc9da; opacity:0.9; }45 .view-icon { width:52px; height:52px; fill:#cfc9da; opacity:0.9; }46 47 /* Grid of docs */48 .grid { padding:10px 36px 0 36px; display:flex; flex-wrap:wrap; gap:46px 40px; }49 .card {50 width:456px; border-radius:34px; background:#26222c; padding:28px; box-sizing:border-box;51 box-shadow:0 10px 18px rgba(0,0,0,0.35);52 }53 .thumb {54 width:100%; height:248px; border-radius:24px; background:#E0E0E0; border:1px solid #BDBDBD;55 display:flex; align-items:center; justify-content:center; color:#757575; font-size:34px;56 position:relative;57 }58 .badge {59 position:absolute; right:14px; bottom:14px; display:flex; gap:14px;60 }61 .badge .chip {62 width:56px; height:56px; border-radius:28px; background:#4c4756; color:#e9e6ef;63 display:flex; align-items:center; justify-content:center; font-size:30px;64 border:1px solid rgba(255,255,255,0.2);65 }66 .card-row {67 margin-top:26px; display:flex; align-items:center; justify-content:space-between;68 }69 .card-left { display:flex; align-items:center; gap:18px; }70 .doc-icon {71 width:58px; height:58px; border-radius:14px; background:#5b83ff; display:flex; align-items:center; justify-content:center;72 }73 .doc-icon svg { width:40px; height:40px; fill:#ffffff; opacity:0.9; }74 .title { font-size:38px; color:#e9e6ef; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:300px; }75 .dots { width:40px; height:40px; fill:#cfc9da; opacity:0.9; }76 77 /* FAB */78 .fab {79 position:absolute; right:46px; bottom:134px; width:140px; height:140px; background:#5a5166;80 border-radius:36px; box-shadow:0 18px 26px rgba(0,0,0,0.55); display:flex; align-items:center; justify-content:center;81 }82 .fab-plus { width:64px; height:64px; stroke:#efe6ff; stroke-width:10; }83 /* Gesture bar */84 .gesture {85 position:absolute; left:50%; transform:translateX(-50%); bottom:60px; width:540px; height:14px;86 background:#e6e0ef; border-radius:8px; opacity:0.85;87 }88</style>89</head>90<body>91<div id="render-target">92 93 <!-- Status bar -->94 <div class="status-bar">95 <div class="sb-left">96 <div style="min-width:120px;">3:06</div>97 <div class="sb-dot"></div>98 <div class="sb-dot"></div>99 <div class="sb-dot"></div>100 <div class="sb-dot"></div>101 <div class="sb-dot"></div>102 </div>103 <div class="sb-right">104 <svg class="icon-wifi" viewBox="0 0 24 24"><path d="M12 18.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zm-8.9-8.2 1.4 1.4C7.1 9 9.9 8.8 12 8.8s4.9.2 7.4 2l1.4-1.4C17.9 6.7 15 6 12 6s-5.9.7-8.9 4.3zm3.6 3.6 1.4 1.4c2-1.4 4.1-1.6 5.9-1.6s3.9.2 5.9 1.6l1.4-1.4c-2.4-1.8-5-2.2-7.3-2.2s-4.9.4-7.3 2.2z"/></svg>105 <svg class="icon-battery" viewBox="0 0 24 24"><path d="M16 7h2v10h-2V7zm-12 1c0-.6.4-1 1-1h10c.6 0 1 .4 1 1v8c0 .6-.4 1-1 1H5c-.6 0-1-.4-1-1V8z"/></svg>106 </div>107 </div>108 109 <!-- Search bar -->110 <div class="search-wrap">111 <div class="search-bar">112 <div class="icon-btn">113 <svg class="icon" viewBox="0 0 24 24"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg>114 </div>115 <div class="search-text">Search Docs</div>116 <div class="icon-btn">117 <svg class="icon" viewBox="0 0 24 24"><path d="M10 4h7l2 2v12c0 .6-.4 1-1 1H6c-.6 0-1-.4-1-1V5c0-.6.4-1 1-1h4zm0 2H6v12h12V7h-8z"/></svg>118 </div>119 <div class="avatar">F</div>120 </div>121 </div>122 123 <!-- Section header -->124 <div class="section">125 <div class="section-left">126 <div class="section-title">Last opened by me</div>127 <svg class="chev" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/></svg>128 </div>129 <svg class="view-icon" viewBox="0 0 24 24"><path d="M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z"/></svg>130 </div>131 132 <!-- Grid of document cards -->133 <div class="grid">134 <!-- Card 1 -->135 <div class="card">136 <div class="thumb">[IMG: Document Thumbnail]137 <div class="badge">138 <div class="chip">👥</div>139 <div class="chip">✓</div>140 </div>141 </div>142 <div class="card-row">143 <div class="card-left">144 <div class="doc-icon">145 <svg viewBox="0 0 24 24"><path d="M7 4h7l4 4v12H7zM9 9h6v2H9zm0 4h6v2H9z"/></svg>146 </div>147 <div class="title">Result Declared o...</div>148 </div>149 <svg class="dots" viewBox="0 0 24 24"><path d="M12 6a2 2 0 110-4 2 2 0 010 4zm0 8a2 2 0 110-4 2 2 0 010 4zm0 8a2 2 0 110-4 2 2 0 010 4z"/></svg>150 </div>151 </div>152 153 <!-- Card 2 -->154 <div class="card">155 <div class="thumb" style="background:#d1cdd8; color:#6b6674;">[IMG: Doc Thumbnail]156 <div class="badge">157 <div class="chip">👥</div>158 <div class="chip">✓</div>159 </div>160 </div>161 <div class="card-row">162 <div class="card-left">163 <div class="doc-icon">164 <svg viewBox="0 0 24 24"><path d="M7 4h7l4 4v12H7zM9 9h6v2H9zm0 4h6v2H9z"/></svg>165 </div>166 <div class="title">PVD</div>167 </div>168 <svg class="dots" viewBox="0 0 24 24"><path d="M12 6a2 2 0 110-4 2 2 0 010 4zm0 8a2 2 0 110-4 2 2 0 010 4zm0 8a2 2 0 110-4 2 2 0 010 4z"/></svg>169 </div>170 </div>171 172 <!-- Card 3 -->173 <div class="card">174 <div class="thumb">[IMG: Document Thumbnail]175 <div class="badge">176 <div class="chip">✓</div>177 </div>178 </div>179 <div class="card-row">180 <div class="card-left">181 <div class="doc-icon">182 <svg viewBox="0 0 24 24"><path d="M7 4h7l4 4v12H7zM9 9h6v2H9zm0 4h6v2H9z"/></svg>183 </div>184 <div class="title">Ops</div>185 </div>186 <svg class="dots" viewBox="0 0 24 24"><path d="M12 6a2 2 0 110-4 2 2 0 010 4zm0 8a2 2 0 110-4 2 2 0 010 4zm0 8a2 2 0 110-4 2 2 0 010 4z"/></svg>187 </div>188 </div>189 </div>190 191 <!-- Floating action button -->192 <div class="fab">193 <svg class="fab-plus" viewBox="0 0 24 24">194 <path d="M12 5v14M5 12h14" stroke-linecap="round"/>195 </svg>196 </div>197 198 <!-- Gesture bar -->199 <div class="gesture"></div>200</div>201</body>202</html>