GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Voice Recorder 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: #141515;13 color: #fff;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 120px;23 padding: 0 40px;24 display: flex;25 align-items: center;26 justify-content: space-between;27 color: #f5f5f5;28 box-sizing: border-box;29 }30 .time {31 font-size: 48px;32 font-weight: 600;33 letter-spacing: 1px;34 }35 .status-icons {36 display: flex;37 align-items: center;38 gap: 24px;39 }40 .status-pill {41 font-size: 34px;42 background: #2a2a2a;43 padding: 6px 10px;44 border-radius: 8px;45 }46 .icon-cloud, .icon-download {47 width: 36px; height: 36px; display: inline-block; border-radius: 6px;48 background: #2a2a2a;49 position: relative;50 }51 .icon-cloud:before {52 content: ""; position: absolute; left: 6px; top: 12px; width: 24px; height: 14px;53 background: #e0e0e0; border-radius: 12px;54 }55 .icon-cloud:after {56 content: ""; position: absolute; left: 14px; top: 6px; width: 12px; height: 12px;57 background: #e0e0e0; border-radius: 50%;58 }59 .wifi-battery {60 display: flex; align-items: center; gap: 22px;61 }62 .wifi {63 width: 40px; height: 26px; position: relative;64 }65 .wifi:before, .wifi:after {66 content: ""; position: absolute; border: 3px solid #e0e0e0; border-top: none; border-radius: 16px;67 }68 .wifi:before { width: 38px; height: 22px; left: 1px; top: 0; }69 .wifi:after { width: 22px; height: 10px; left: 9px; top: 8px; }70 .battery {71 width: 44px; height: 22px; border: 3px solid #e0e0e0; border-radius: 4px; position: relative;72 }73 .battery:after {74 content: ""; position: absolute; right: -10px; top: 6px; width: 8px; height: 10px; background: #e0e0e0; border-radius: 2px;75 }76 77 /* Dotted waveform pattern */78 .dots {79 position: absolute;80 top: 420px;81 left: 180px;82 width: 720px;83 height: 380px;84 display: grid;85 grid-template-columns: repeat(12, 1fr);86 grid-template-rows: repeat(6, 1fr);87 gap: 34px 36px;88 opacity: 0.65;89 }90 .dot {91 width: 22px; height: 22px; background: #2e2e2f; border-radius: 50%;92 box-shadow: 0 0 0 1px #2e2e2f inset;93 }94 95 /* Overflow menu */96 .menu-card {97 position: absolute;98 top: 160px;99 right: 80px;100 width: 640px;101 background: #ffffff;102 color: #111;103 border-radius: 18px;104 box-shadow: 0 18px 48px rgba(0,0,0,0.35);105 overflow: hidden;106 }107 .menu-item {108 padding: 42px 40px;109 font-size: 46px;110 border-bottom: 1px solid #eee;111 }112 .menu-item:last-child { border-bottom: none; }113 114 /* Mic button */115 .mic-outer {116 position: absolute;117 top: 1320px;118 left: 50%;119 transform: translateX(-50%);120 width: 320px;121 height: 320px;122 border-radius: 50%;123 background: radial-gradient(closest-side, #242424 0%, #1d1d1d 65%, #1a1a1a 100%);124 box-shadow: 0 40px 80px rgba(0,0,0,0.6);125 display: flex;126 align-items: center;127 justify-content: center;128 }129 .mic-inner {130 width: 240px; height: 240px; border-radius: 50%;131 background: #e74c3c;132 box-shadow: 0 16px 30px rgba(231,76,60,0.5);133 display: flex; align-items: center; justify-content: center;134 }135 .mic-icon {136 width: 96px; height: 96px;137 }138 139 /* Recordings entry */140 .recordings {141 position: absolute;142 right: 60px;143 bottom: 370px;144 display: flex; align-items: center; gap: 20px;145 color: #eaeaea;146 font-size: 48px;147 letter-spacing: 1px;148 }149 .rec-icon {150 width: 64px; height: 64px; border-radius: 10px; background: #2b2b2b; display: flex; align-items: center; justify-content: center;151 box-shadow: 0 0 0 2px #2b2b2b inset;152 }153 154 /* Ad banner */155 .ad-banner {156 position: absolute;157 left: 0;158 right: 0;159 bottom: 160px;160 height: 240px;161 background: #ffffff;162 display: flex;163 align-items: center;164 padding: 24px 36px;165 box-sizing: border-box;166 gap: 28px;167 }168 .ad-open {169 background: #1fb76e;170 color: #ffffff;171 font-size: 44px;172 padding: 28px 46px;173 border-radius: 90px;174 box-shadow: 0 6px 12px rgba(31,183,110,0.35);175 }176 .ad-text {177 font-size: 48px;178 color: #222;179 font-weight: 600;180 flex: 1;181 }182 .ad-rating { font-size: 34px; color: #555; margin-top: 6px; }183 .ad-img {184 width: 380px; height: 180px; background: #E0E0E0; border: 1px solid #BDBDBD;185 display: flex; align-items: center; justify-content: center; color: #757575;186 font-size: 34px;187 }188 189 /* Bottom gesture bar */190 .home-bar {191 position: absolute;192 left: 50%;193 transform: translateX(-50%);194 bottom: 40px;195 width: 260px;196 height: 12px;197 background: #ffffff;198 border-radius: 8px;199 opacity: 0.95;200 }201</style>202</head>203<body>204<div id="render-target">205 206 <!-- Status bar -->207 <div class="status-bar">208 <div class="time">9:23</div>209 <div class="status-icons">210 <div class="status-pill">G</div>211 <div class="icon-download"></div>212 <div class="icon-cloud"></div>213 <div class="wifi-battery">214 <div class="wifi"></div>215 <div class="battery"></div>216 </div>217 </div>218 </div>219 220 <!-- Dotted waveform pattern -->221 <div class="dots">222 <!-- 12 x 6 dots -->223 <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>224 <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>225 <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>226 <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>227 <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>228 <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>229 </div>230 231 <!-- Overflow options menu -->232 <div class="menu-card">233 <div class="menu-item">About app</div>234 <div class="menu-item">Remove ads</div>235 <div class="menu-item">Settings</div>236 <div class="menu-item">Help and feedback</div>237 </div>238 239 <!-- Microphone button -->240 <div class="mic-outer">241 <div class="mic-inner">242 <svg class="mic-icon" viewBox="0 0 64 64">243 <path d="M32 6c-6 0-10 4-10 10v14c0 6 4 10 10 10s10-4 10-10V16c0-6-4-10-10-10z" fill="#fff"/>244 <path d="M18 30c0 9 7 16 14 16s14-7 14-16h-4c0 7-5 12-10 12s-10-5-10-12h-4z" fill="#fff"/>245 <rect x="30" y="46" width="4" height="12" fill="#fff"/>246 </svg>247 </div>248 </div>249 250 <!-- Recordings shortcut -->251 <div class="recordings">252 <div class="rec-icon">253 <svg width="40" height="40" viewBox="0 0 24 24">254 <rect x="4" y="4" width="16" height="16" rx="3" fill="#eee"/>255 <path d="M8 9h8v2H8zm0 4h6v2H8z" fill="#999"/>256 </svg>257 </div>258 <div>Recordings</div>259 </div>260 261 <!-- Ad banner -->262 <div class="ad-banner">263 <div class="ad-open">Open</div>264 <div style="display:flex; flex-direction:column;">265 <div class="ad-text">Booking.com</div>266 <div class="ad-rating">FREE ★ 4.7</div>267 </div>268 <div class="ad-img">[IMG: Booking.com Ad]</div>269 </div>270 271 <!-- Bottom gesture bar -->272 <div class="home-bar"></div>273</div>274</body>275</html>