GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #121212;13 color: #EDEDED;14 }15 /* Status bar */16 .status-bar {17 position: absolute;18 top: 0;19 left: 0;20 width: 100%;21 height: 110px;22 padding: 24px 32px;23 box-sizing: border-box;24 display: flex;25 align-items: center;26 justify-content: space-between;27 color: #DADADA;28 font-size: 36px;29 letter-spacing: 0.5px;30 }31 .status-left, .status-right {32 display: flex;33 align-items: center;34 gap: 24px;35 }36 /* App bar and header */37 .back-btn {38 position: absolute;39 top: 140px;40 left: 32px;41 width: 64px;42 height: 64px;43 }44 .top-actions {45 position: absolute;46 top: 134px;47 right: 32px;48 display: flex;49 gap: 40px;50 }51 .top-actions svg { width: 66px; height: 66px; }52 .title {53 position: absolute;54 top: 220px;55 left: 48px;56 font-size: 72px;57 font-weight: 700;58 color: #BDBDBD;59 }60 .edited-line {61 position: absolute;62 top: 325px;63 left: 48px;64 font-size: 34px;65 color: #9E9E9E;66 }67 .calendar-icon {68 position: absolute;69 top: 330px;70 right: 48px;71 width: 56px;72 height: 56px;73 }74 .divider {75 position: absolute;76 top: 400px;77 left: 48px;78 width: 984px;79 height: 2px;80 background: #2A2A2A;81 }82 /* Note body text */83 .note-text {84 position: absolute;85 top: 460px;86 left: 48px;87 width: 984px;88 font-size: 56px;89 line-height: 1.35;90 color: #FFFFFF;91 }92 /* Saved pill */93 .saved-pill {94 position: absolute;95 bottom: 360px;96 left: 50%;97 transform: translateX(-50%);98 display: flex;99 align-items: center;100 gap: 22px;101 background: #232323;102 color: #E0E0E0;103 padding: 22px 34px;104 border-radius: 60px;105 box-shadow: 0 4px 12px rgba(0,0,0,0.4);106 font-size: 42px;107 }108 .saved-pill .icon {109 width: 58px;110 height: 58px;111 }112 /* Bottom bar */113 .bottom-bar {114 position: absolute;115 bottom: 0;116 left: 0;117 width: 1080px;118 height: 160px;119 background: #1A1A1A;120 border-top: 1px solid #2A2A2A;121 }122 .edit-btn {123 position: absolute;124 right: 36px;125 bottom: 40px;126 width: 88px;127 height: 88px;128 }129 .gesture {130 position: absolute;131 bottom: 24px;132 left: 50%;133 transform: translateX(-50%);134 width: 420px;135 height: 12px;136 background: #D0D0D0;137 border-radius: 6px;138 opacity: 0.75;139 }140 /* Shared icon color tweaks */141 .muted { color: #CFCFCF; }142 .accent { color: #FFC107; }143</style>144</head>145<body>146<div id="render-target">147 148 <!-- Status bar -->149 <div class="status-bar">150 <div class="status-left">151 <div>10:47</div>152 <!-- Mail icon -->153 <svg width="42" height="42" viewBox="0 0 24 24" fill="none">154 <rect x="2" y="5" width="20" height="14" rx="2" stroke="#DADADA" stroke-width="2"></rect>155 <path d="M4 7l8 6 8-6" stroke="#DADADA" stroke-width="2" fill="none"></path>156 </svg>157 </div>158 <div class="status-right">159 <!-- Wi-Fi -->160 <svg width="42" height="42" viewBox="0 0 24 24" fill="none">161 <path d="M2 8c10-8 20 0 20 0" stroke="#DADADA" stroke-width="2" stroke-linecap="round"></path>162 <path d="M5 11c7-6 14 0 14 0" stroke="#DADADA" stroke-width="2" stroke-linecap="round"></path>163 <path d="M8 14c4-4 8 0 8 0" stroke="#DADADA" stroke-width="2" stroke-linecap="round"></path>164 <circle cx="12" cy="18" r="2" fill="#DADADA"></circle>165 </svg>166 <!-- Battery -->167 <svg width="42" height="42" viewBox="0 0 24 24" fill="none">168 <rect x="2" y="6" width="18" height="12" rx="2" stroke="#DADADA" stroke-width="2"></rect>169 <rect x="20" y="10" width="2" height="4" fill="#DADADA"></rect>170 <rect x="4" y="8" width="14" height="8" fill="#DADADA"></rect>171 </svg>172 </div>173 </div>174 175 <!-- Back button -->176 <svg class="back-btn" viewBox="0 0 24 24">177 <path d="M15 5l-7 7 7 7" stroke="#EDEDED" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>178 </svg>179 180 <!-- Top action icons -->181 <div class="top-actions">182 <!-- Reminder ring -->183 <svg viewBox="0 0 24 24">184 <circle cx="12" cy="12" r="8.5" stroke="#FFC107" stroke-width="3" fill="none"></circle>185 <circle cx="12" cy="12" r="3" fill="#FFC107"></circle>186 </svg>187 <!-- Pin icon -->188 <svg viewBox="0 0 24 24">189 <path d="M12 2l4 6-2 1v6l-2 3-2-3V9l-2-1 4-6z" fill="#EDEDED"></path>190 </svg>191 <!-- Kebab menu -->192 <svg viewBox="0 0 24 24">193 <circle cx="12" cy="5" r="2.2" fill="#EDEDED"></circle>194 <circle cx="12" cy="12" r="2.2" fill="#EDEDED"></circle>195 <circle cx="12" cy="19" r="2.2" fill="#EDEDED"></circle>196 </svg>197 </div>198 199 <!-- Title and metadata -->200 <div class="title">Heading</div>201 <div class="edited-line">Edited: 09-26 22:42</div>202 203 <!-- Calendar icon -->204 <svg class="calendar-icon" viewBox="0 0 24 24" fill="none">205 <rect x="3" y="5" width="18" height="16" rx="2" stroke="#9E9E9E" stroke-width="2"></rect>206 <path d="M3 9h18" stroke="#9E9E9E" stroke-width="2"></path>207 <rect x="7" y="3" width="2.2" height="4" fill="#9E9E9E"></rect>208 <rect x="15" y="3" width="2.2" height="4" fill="#9E9E9E"></rect>209 </svg>210 211 <div class="divider"></div>212 213 <!-- Note body -->214 <div class="note-text">215 Buy useful things like leptop and<br>216 camera on saturday217 </div>218 219 <!-- Saved pill -->220 <div class="saved-pill">221 <svg class="icon" viewBox="0 0 24 24" fill="none">222 <rect x="4" y="4" width="16" height="16" rx="3" stroke="#E0E0E0" stroke-width="2"></rect>223 <path d="M7 8h10M7 12h10M7 16h6" stroke="#E0E0E0" stroke-width="2" stroke-linecap="round"></path>224 </svg>225 <div>Saved</div>226 </div>227 228 <!-- Bottom bar with edit icon -->229 <div class="bottom-bar"></div>230 <svg class="edit-btn" viewBox="0 0 24 24" fill="none">231 <path d="M3 17l1 4 4-1 11-11-4-4L3 17z" fill="#EDEDED"></path>232 <path d="M14 4l4 4" stroke="#121212" stroke-width="2"></path>233 </svg>234 235 <!-- Gesture bar -->236 <div class="gesture"></div>237 238</div>239</body>240</html>