GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>Recent Screen UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px;10 position: relative; overflow: hidden;11 background: #000000;12 }13 14 /* Top status bar */15 .status-bar {16 height: 110px;17 background: #262626;18 color: #FFFFFF;19 display: flex;20 align-items: center;21 padding: 0 32px;22 box-sizing: border-box;23 }24 .status-left { font-size: 34px; font-weight: 600; }25 .status-right { margin-left: auto; display: flex; align-items: center; gap: 26px; }26 .status-icon { width: 32px; height: 32px; opacity: 0.9; }27 28 /* Header */29 .header {30 height: 150px;31 background: #262626;32 display: flex;33 align-items: center;34 padding: 0 32px;35 box-sizing: border-box;36 border-bottom: 1px solid #1d1d1d;37 }38 .avatar {39 width: 72px; height: 72px; border-radius: 50%;40 background: #7E57C2; color: #fff; display: flex; align-items: center; justify-content: center;41 font-weight: 700; font-size: 36px;42 margin-right: 24px;43 }44 .header-title {45 font-size: 52px; color: #FFFFFF; font-weight: 600;46 }47 .header-actions { margin-left: auto; display: flex; align-items: center; gap: 36px; }48 .action-icon { width: 42px; height: 42px; fill: #E0E0E0; opacity: 0.95; }49 50 /* Content list */51 .content {52 position: absolute;53 left: 0; right: 0;54 top: 260px; /* status + header */55 bottom: 180px; /* leave space for bottom nav */56 overflow: hidden;57 padding: 24px 12px 0 12px;58 box-sizing: border-box;59 color: #fff;60 }61 .section-label {62 color: #BDBDBD; font-size: 32px; padding: 12px 24px; margin-bottom: 12px;63 }64 .item {65 display: flex; align-items: center;66 padding: 22px 24px;67 }68 .doc-icon {69 width: 88px; height: 88px; margin-right: 26px;70 }71 .item-text { flex: 1; }72 .item-title { font-size: 44px; color: #FFFFFF; margin-bottom: 8px; }73 .item-sub { font-size: 30px; color: #9E9E9E; }74 .ellipsis {75 width: 40px; height: 80px;76 display: flex; align-items: center; justify-content: center;77 }78 79 /* Bottom navigation */80 .bottom-nav {81 position: absolute; left: 0; right: 0; bottom: 0;82 height: 180px; background: #1F1F1F; border-top: 1px solid #202020;83 display: flex; align-items: center; justify-content: space-around;84 padding-bottom: 32px;85 box-sizing: border-box;86 }87 .nav-item {88 width: 30%; display: flex; align-items: center; flex-direction: column; gap: 12px;89 color: #BDBDBD; font-size: 28px;90 }91 .nav-item .nav-icon { width: 52px; height: 52px; fill: #BDBDBD; }92 .nav-item.active { color: #4C86F8; }93 .nav-item.active .nav-icon { fill: #4C86F8; }94 .gesture {95 position: absolute; left: 50%; transform: translateX(-50%);96 bottom: 16px; width: 380px; height: 10px; background: #FFFFFF; border-radius: 8px; opacity: 0.85;97 }98</style>99</head>100<body>101<div id="render-target">102 103 <!-- Status bar -->104 <div class="status-bar">105 <div class="status-left">4:46</div>106 <div class="status-right">107 <!-- simple tiny icons -->108 <svg class="status-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#CFCFCF"/></svg>109 <svg class="status-icon" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="16" rx="2" fill="#D5D5D5"/></svg>110 <svg class="status-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="#DADADA" stroke-width="2" fill="none"/><circle cx="12" cy="12" r="4" fill="#DADADA"/></svg>111 <svg class="status-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="2" fill="#DADADA"/><circle cx="20" cy="12" r="2" fill="#DADADA"/></svg>112 <svg class="status-icon" viewBox="0 0 24 24"><path d="M5 17h14a2 2 0 0 0 2-2V6" stroke="#FFFFFF" stroke-width="2" fill="none"/><path d="M5 17V7a2 2 0 0 1 2-2h10" stroke="#FFFFFF" stroke-width="2" fill="none"/></svg>113 <svg class="status-icon" viewBox="0 0 24 24"><path d="M6 18h12V6" stroke="#FFFFFF" stroke-width="2" fill="none"/><rect x="10" y="3" width="4" height="3" fill="#FFFFFF"/></svg>114 </div>115 </div>116 117 <!-- Header -->118 <div class="header">119 <div class="avatar">F</div>120 <div class="header-title">Recent</div>121 <div class="header-actions">122 <!-- diamond icon -->123 <svg class="action-icon" viewBox="0 0 24 24">124 <path d="M12 2 L21 9 L12 22 L3 9 Z" fill="#E0E0E0"/>125 </svg>126 <!-- search icon -->127 <svg class="action-icon" viewBox="0 0 24 24">128 <circle cx="11" cy="11" r="7" stroke="#E0E0E0" stroke-width="2" fill="none"/>129 <line x1="16.5" y1="16.5" x2="22" y2="22" stroke="#E0E0E0" stroke-width="2"/>130 </svg>131 <!-- plus icon -->132 <svg class="action-icon" viewBox="0 0 24 24">133 <path d="M11 4h2v16h-2zM4 11h16v2H4z" fill="#E0E0E0"/>134 </svg>135 </div>136 </div>137 138 <!-- Content -->139 <div class="content">140 <div class="section-label">Today</div>141 142 <!-- Item 1 -->143 <div class="item">144 <svg class="doc-icon" viewBox="0 0 64 64">145 <path d="M12 4h28l12 12v44H12z" fill="#F5F5F5" stroke="#D0D0D0"/>146 <path d="M40 4v12h12z" fill="#E8E8E8"/>147 <rect x="14" y="18" width="18" height="28" fill="#2E6DE6" rx="2"/>148 <text x="23" y="38" font-size="16" font-weight="700" fill="#FFFFFF" text-anchor="middle">W</text>149 <rect x="36" y="22" width="16" height="4" fill="#DADADA"/>150 <rect x="36" y="30" width="16" height="4" fill="#DADADA"/>151 <rect x="36" y="38" width="16" height="4" fill="#DADADA"/>152 </svg>153 <div class="item-text">154 <div class="item-title">Document</div>155 <div class="item-sub">OneDrive » Documents</div>156 </div>157 <div class="ellipsis">158 <svg width="28" height="64" viewBox="0 0 8 24">159 <circle cx="4" cy="4" r="2" fill="#BDBDBD"/>160 <circle cx="4" cy="12" r="2" fill="#BDBDBD"/>161 <circle cx="4" cy="20" r="2" fill="#BDBDBD"/>162 </svg>163 </div>164 </div>165 166 <!-- Item 2 -->167 <div class="item">168 <svg class="doc-icon" viewBox="0 0 64 64">169 <path d="M12 4h28l12 12v44H12z" fill="#F5F5F5" stroke="#D0D0D0"/>170 <path d="M40 4v12h12z" fill="#E8E8E8"/>171 <rect x="14" y="18" width="18" height="28" fill="#2E6DE6" rx="2"/>172 <text x="23" y="38" font-size="16" font-weight="700" fill="#FFFFFF" text-anchor="middle">W</text>173 <rect x="36" y="22" width="16" height="4" fill="#DADADA"/>174 <rect x="36" y="30" width="16" height="4" fill="#DADADA"/>175 <rect x="36" y="38" width="16" height="4" fill="#DADADA"/>176 </svg>177 <div class="item-text">178 <div class="item-title">fun time docs</div>179 <div class="item-sub">OneDrive » Documents</div>180 </div>181 <div class="ellipsis">182 <svg width="28" height="64" viewBox="0 0 8 24">183 <circle cx="4" cy="4" r="2" fill="#BDBDBD"/>184 <circle cx="4" cy="12" r="2" fill="#BDBDBD"/>185 <circle cx="4" cy="20" r="2" fill="#BDBDBD"/>186 </svg>187 </div>188 </div>189 </div>190 191 <!-- Bottom navigation -->192 <div class="bottom-nav">193 <div class="nav-item active">194 <svg class="nav-icon" viewBox="0 0 24 24">195 <circle cx="12" cy="12" r="10" stroke="#4C86F8" stroke-width="2" fill="none"/>196 <path d="M12 6v6l5 3" stroke="#4C86F8" stroke-width="2" fill="none" stroke-linecap="round"/>197 </svg>198 <div>Recent</div>199 </div>200 <div class="nav-item">201 <svg class="nav-icon" viewBox="0 0 24 24">202 <circle cx="7" cy="9" r="4" fill="#BDBDBD"/>203 <circle cx="17" cy="9" r="3" fill="#BDBDBD"/>204 <path d="M3 20c0-4 3-6 7-6s7 2 7 6" stroke="#BDBDBD" stroke-width="2" fill="none"/>205 </svg>206 <div>Shared</div>207 </div>208 <div class="nav-item">209 <svg class="nav-icon" viewBox="0 0 24 24">210 <path d="M4 7h16v12H4z" stroke="#BDBDBD" stroke-width="2" fill="none"/>211 <path d="M4 7l4-3h8l4 3" stroke="#BDBDBD" stroke-width="2" fill="none"/>212 </svg>213 <div>Open</div>214 </div>215 <div class="gesture"></div>216 </div>217 218</div>219</body>220</html>