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>Save As - Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #000000; color: #EDEDED;13 font-family: Roboto, Arial, Helvetica, sans-serif;14 }15 16 /* Top bars */17 .status-bar {18 height: 96px;19 background: #1E1E1E;20 color: #EDEDED;21 position: relative;22 padding: 0 32px;23 }24 .time {25 position: absolute; left: 32px; top: 24px;26 font-size: 34px; letter-spacing: 1px;27 }28 .status-icons {29 position: absolute; right: 24px; top: 22px;30 display: flex; gap: 26px; align-items: center;31 }32 .status-icons svg { width: 42px; height: 42px; fill: #EDEDED; }33 34 .app-bar {35 height: 140px;36 background: #1E1E1E;37 display: flex; align-items: center;38 padding: 0 24px;39 border-bottom: 1px solid #2A2A2A;40 }41 .back {42 width: 84px; height: 84px; display: flex; align-items: center; justify-content: center;43 }44 .title {45 font-size: 48px; margin-left: 8px;46 }47 48 /* Content */49 .content {50 padding: 24px 40px 0 40px;51 }52 .section-label {53 color: #9E9E9E;54 font-size: 34px;55 margin: 16px 0 12px 16px;56 }57 .list { margin-top: 8px; }58 .item {59 display: flex; align-items: center;60 padding: 32px 8px;61 }62 .icon {63 width: 80px; height: 80px; margin-right: 28px;64 display: flex; align-items: center; justify-content: center;65 }66 .icon svg { width: 72px; height: 72px; fill: #BDBDBD; }67 .texts { display: flex; flex-direction: column; }68 .primary { font-size: 42px; color: #EDEDED; }69 .secondary { font-size: 32px; color: #9E9E9E; margin-top: 6px; }70 71 /* Bottom filename bar */72 .bottom-bar {73 position: absolute; left: 0; right: 0; bottom: 88px;74 height: 168px; background: #151515; border-top: 1px solid #2A2A2A;75 display: flex; align-items: center; padding: 0 28px;76 gap: 18px;77 }78 .filename {79 flex: 1; height: 110px; border: 3px solid #F57C00; border-radius: 12px;80 background: #0B0B0B;81 display: flex; align-items: center; padding: 0 24px; gap: 16px;82 font-size: 40px; color: #FFFFFF;83 }84 .filename .spacer { flex: 1; }85 .clear-btn {86 width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;87 }88 .ext {89 padding: 22px 22px; background: #333333; color: #CCCCCC;90 border-radius: 10px; font-size: 36px;91 }92 .save-btn {93 width: 180px; height: 110px; background: #474747; color: #A0A0A0;94 display: flex; align-items: center; justify-content: center;95 border-radius: 12px; font-size: 38px;96 }97 /* Gesture bar */98 .gesture {99 position: absolute; left: 50%; transform: translateX(-50%);100 bottom: 20px; width: 280px; height: 10px; background: #FFFFFF; border-radius: 8px; opacity: 0.9;101 }102</style>103</head>104<body>105<div id="render-target">106 107 <!-- Status bar -->108 <div class="status-bar">109 <div class="time">1:05</div>110 <div class="status-icons">111 <!-- simple dot (do not disturb) -->112 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"/></svg>113 <!-- wifi -->114 <svg viewBox="0 0 24 24">115 <path d="M2 8c5-4 15-4 20 0l-2 2c-4-3-12-3-16 0L2 8zm4 4c3-2 9-2 12 0l-2 2c-2-1-6-1-8 0l-2-2zm4 4c1-1 3-1 4 0l-2 2-2-2z"/>116 </svg>117 <!-- battery -->118 <svg viewBox="0 0 28 24">119 <rect x="1" y="6" width="22" height="12" rx="2" ry="2" fill="#EDEDED"/>120 <rect x="3" y="8" width="14" height="8" fill="#1E1E1E"/>121 <rect x="23" y="9" width="4" height="6" fill="#EDEDED"/>122 </svg>123 </div>124 </div>125 126 <!-- App bar -->127 <div class="app-bar">128 <div class="back">129 <svg viewBox="0 0 24 24" width="48" height="48" fill="#EDEDED">130 <path d="M15.5 5l-7 7 7 7 1.5-1.5L11 12l6-6z"/>131 </svg>132 </div>133 <div class="title">Save as</div>134 </div>135 136 <!-- Content list -->137 <div class="content">138 <div class="section-label">Places</div>139 140 <div class="list">141 142 <div class="item">143 <div class="icon">144 <!-- cloud -->145 <svg viewBox="0 0 24 24">146 <path d="M6 18h10a4 4 0 0 0 0-8 5 5 0 0 0-9.7-1.2A4 4 0 0 0 6 18z"/>147 </svg>148 </div>149 <div class="texts">150 <div class="primary">OneDrive - Personal</div>151 <div class="secondary">ffionh41@gmail.com</div>152 </div>153 </div>154 155 <div class="item">156 <div class="icon">157 <!-- phone -->158 <svg viewBox="0 0 24 24">159 <rect x="6" y="3" width="12" height="18" rx="2" ry="2"/>160 <rect x="10" y="16" width="4" height="2" fill="#000000"/>161 </svg>162 </div>163 <div class="texts">164 <div class="primary">This device</div>165 </div>166 </div>167 168 <div class="item">169 <div class="icon">170 <!-- cloud -->171 <svg viewBox="0 0 24 24">172 <path d="M6 18h10a4 4 0 0 0 0-8 5 5 0 0 0-9.7-1.2A4 4 0 0 0 6 18z"/>173 </svg>174 </div>175 <div class="texts">176 <div class="primary">Browse</div>177 <div class="secondary">Google Drive, SD card, and more…</div>178 </div>179 </div>180 181 <div class="item">182 <div class="icon">183 <!-- plus -->184 <svg viewBox="0 0 24 24">185 <path d="M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z"/>186 </svg>187 </div>188 <div class="texts">189 <div class="primary">Add a place</div>190 <div class="secondary">Connect to cloud storage</div>191 </div>192 </div>193 194 </div>195 </div>196 197 <!-- Bottom file name bar -->198 <div class="bottom-bar">199 <div class="filename">200 Importance of hiking201 <div class="spacer"></div>202 <div class="clear-btn">203 <svg viewBox="0 0 24 24" width="40" height="40" fill="#D0D0D0">204 <path d="M18 6L6 18M6 6l12 12" stroke="#D0D0D0" stroke-width="2" fill="none" stroke-linecap="round"/>205 </svg>206 </div>207 </div>208 <div class="ext">.pptx</div>209 <div class="save-btn">Save</div>210 </div>211 212 <div class="gesture"></div>213</div>214</body>215</html>