GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Share Screen UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #ffffff;14 box-sizing: border-box;15 }16 17 /* Status bar */18 .status-bar {19 height: 110px;20 padding: 0 36px;21 display: flex;22 align-items: center;23 justify-content: space-between;24 color: #2e2e2e;25 font-size: 34px;26 background: #ffffff;27 }28 .status-icons {29 display: flex;30 align-items: center;31 gap: 22px;32 }33 .cloud-icon, .wifi-icon, .battery-icon {34 width: 40px; height: 40px;35 border-radius: 8px;36 background: #cfcfcf;37 }38 39 /* App bar */40 .app-bar {41 height: 150px;42 border-bottom: 1px solid #e6e6e6;43 display: flex;44 align-items: center;45 padding: 0 24px 0 8px;46 background: #ffffff;47 }48 .back-btn {49 width: 120px;50 height: 120px;51 display: flex;52 align-items: center;53 justify-content: center;54 margin-left: 8px;55 }56 .app-title {57 font-size: 56px;58 font-weight: 600;59 color: #222;60 margin-left: 8px;61 }62 63 /* Content */64 .content {65 padding: 36px 48px;66 }67 .subtitle {68 font-size: 32px;69 color: #666;70 margin-top: 8px;71 margin-bottom: 28px;72 }73 74 .list {75 margin-top: 12px;76 border-top: 1px solid #e7edf3;77 }78 .list-item {79 display: flex;80 align-items: center;81 padding: 34px 0;82 }83 .list-item .icon-wrap {84 width: 88px;85 height: 88px;86 display: flex;87 align-items: center;88 justify-content: center;89 margin-right: 28px;90 }91 .list-item .label {92 font-size: 42px;93 color: #222;94 }95 .list-item.disabled .label {96 color: #b7b7b7;97 }98 .divider {99 height: 1px;100 background: #e7edf3;101 }102 103 /* Tips pill */104 .tips-pill {105 position: absolute;106 right: 36px;107 top: 1050px;108 padding: 18px 28px;109 border: 2px solid #cbd7ee;110 color: #3b4e7a;111 font-size: 32px;112 border-radius: 40px;113 display: inline-flex;114 align-items: center;115 gap: 14px;116 background: #ffffff;117 }118 .info-dot {119 width: 34px; height: 34px;120 border-radius: 50%;121 border: 2px solid #5b86e5;122 color: #5b86e5;123 font-size: 22px;124 display: flex; align-items: center; justify-content: center;125 line-height: 1;126 }127 128 /* Bottom info strip */129 .bottom-info {130 position: absolute;131 left: 0; right: 0;132 bottom: 120px;133 height: 160px;134 border-top: 1px solid #e6e6e6;135 display: flex;136 align-items: center;137 justify-content: center;138 color: #666;139 font-size: 32px;140 background: #ffffff;141 }142 143 /* Gesture bar */144 .gesture-area {145 position: absolute;146 left: 0; right: 0; bottom: 0;147 height: 120px;148 background: #000;149 }150 .gesture-pill {151 position: absolute;152 left: 50%; transform: translateX(-50%);153 bottom: 34px;154 width: 280px; height: 12px;155 background: #f0f0f0;156 border-radius: 12px;157 }158 159 /* SVG color helpers */160 .icon-gray svg { stroke: #b7b7b7; fill: none; }161 .icon-dark svg { stroke: #222; fill: none; }162</style>163</head>164<body>165<div id="render-target">166 167 <!-- Status bar -->168 <div class="status-bar">169 <div>9:17</div>170 <div class="status-icons">171 <div class="cloud-icon"></div>172 <div class="wifi-icon"></div>173 <div class="battery-icon"></div>174 </div>175 </div>176 177 <!-- App bar -->178 <div class="app-bar">179 <div class="back-btn">180 <svg width="60" height="60" viewBox="0 0 60 60">181 <path d="M36 12 L18 30 L36 48" stroke="#333" stroke-width="5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>182 </svg>183 </div>184 <div class="app-title">Share</div>185 </div>186 187 <!-- Content -->188 <div class="content">189 <div class="subtitle">Select the sharing option.</div>190 191 <div class="list">192 <!-- Share Link (disabled) -->193 <div class="list-item disabled">194 <div class="icon-wrap icon-gray">195 <svg width="64" height="64" viewBox="0 0 64 64">196 <path d="M24 24c6-6 16-6 22 0s6 16 0 22" stroke-width="4" stroke-linecap="round"/>197 <path d="M18 18c-6 6-6 16 0 22s16 6 22 0" stroke-width="4" stroke-linecap="round"/>198 </svg>199 </div>200 <div class="label">Share Link</div>201 </div>202 <div class="divider"></div>203 204 <!-- Send Document -->205 <div class="list-item">206 <div class="icon-wrap icon-dark">207 <svg width="64" height="64" viewBox="0 0 64 64">208 <path d="M18 10h20l8 8v36H18z" stroke-width="4" stroke-linejoin="round"/>209 <path d="M38 10v12h12" stroke-width="4" stroke-linecap="round"/>210 <path d="M24 34h16M24 44h16" stroke-width="4" stroke-linecap="round"/>211 </svg>212 </div>213 <div class="label">Send Document</div>214 </div>215 <div class="divider"></div>216 217 <!-- Invite People (disabled) -->218 <div class="list-item disabled">219 <div class="icon-wrap icon-gray">220 <svg width="64" height="64" viewBox="0 0 64 64">221 <circle cx="28" cy="24" r="10" stroke-width="4"/>222 <path d="M10 52c4-10 32-10 36 0" stroke-width="4" stroke-linecap="round"/>223 <path d="M48 20v10M53 25h-10" stroke-width="4" stroke-linecap="round"/>224 </svg>225 </div>226 <div class="label">Invite People</div>227 </div>228 </div>229 </div>230 231 <!-- Tips pill -->232 <div class="tips-pill">233 <span>Tips for Sharing</span>234 <span class="info-dot">i</span>235 </div>236 237 <!-- Bottom info strip -->238 <div class="bottom-info">Sync documents and share them.</div>239 240 <!-- Gesture navigation area -->241 <div class="gesture-area">242 <div class="gesture-pill"></div>243 </div>244 245</div>246</body>247</html>