GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Recorder Plus UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    position: relative;10    width: 1080px;11    height: 2400px;12    overflow: hidden;13    background: #111214;14    color: #fff;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 92px;24    display: flex;25    align-items: center;26    padding: 0 28px;27    box-sizing: border-box;28    color: #f5f5f5;29    font-weight: 600;30  }31  .status-time { font-size: 40px; letter-spacing: 1px; }32  .status-icons {33    margin-left: auto;34    display: flex;35    align-items: center;36    gap: 28px;37  }38  .icon {39    width: 42px; height: 42px;40    display: inline-flex;41    justify-content: center;42    align-items: center;43  }44  .icon svg { width: 100%; height: 100%; fill: #f5f5f5; }45 46  /* Banner ad placeholder */47  .banner-ad {48    position: absolute;49    top: 92px;50    left: 0;51    width: 1080px;52    height: 220px;53    background: #E0E0E0;54    border-bottom: 1px solid #BDBDBD;55    border-top: 1px solid #BDBDBD;56    display: flex;57    justify-content: center;58    align-items: center;59    color: #555;60    font-size: 40px;61  }62 63  /* App header */64  .app-bar {65    position: absolute;66    top: 312px;67    left: 0;68    width: 1080px;69    height: 120px;70    display: flex;71    align-items: center;72    padding: 0 30px;73    box-sizing: border-box;74  }75  .hamburger, .search-icon, .kebab {76    width: 64px; height: 64px;77    display: flex; justify-content: center; align-items: center;78  }79  .title {80    margin-left: 18px;81    font-size: 48px;82    font-weight: 700;83    letter-spacing: 1px;84  }85  .title .accent { color: #ff7f5f; margin-left: 12px; }86 87  .app-bar .right {88    margin-left: auto;89    display: flex;90    align-items: center;91    gap: 20px;92  }93 94  /* List section */95  .list {96    position: absolute;97    top: 432px;98    left: 0;99    width: 1080px;100    padding: 0 20px;101    box-sizing: border-box;102  }103  .item {104    height: 220px;105    border-top: 1px solid #1f1f1f;106    border-bottom: 1px solid #1f1f1f;107    display: flex;108    align-items: center;109    padding: 0 20px;110    box-sizing: border-box;111    background: #121212;112  }113  .play-btn {114    width: 92px; height: 92px; border-radius: 50%;115    background: #ff8f72;116    display: flex; justify-content: center; align-items: center;117    box-shadow: inset 0 0 0 6px rgba(0,0,0,0.35);118    margin-right: 26px;119  }120  .play-btn svg { width: 48px; height: 48px; fill: #222; }121 122  .item-content { flex: 1; }123  .record-title { font-size: 46px; margin-bottom: 16px; }124  .record-sub { font-size: 32px; color: #bdbdbd; }125 126  .item-right {127    width: 220px;128    display: flex;129    align-items: center;130    justify-content: flex-end;131    gap: 22px;132  }133  .duration { font-size: 36px; color: #cfcfcf; }134  .dots-vertical { width: 18px; height: 70px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; }135  .dots-vertical span { width: 12px; height: 12px; border-radius: 50%; background: #8d8d8d; display: block; }136 137  /* Bottom controls area */138  .bottom-area {139    position: absolute;140    bottom: 0;141    left: 0;142    width: 1080px;143    height: 360px;144    background: #0f0f10;145  }146  .record-container {147    position: absolute;148    left: 50%; top: 50%;149    transform: translate(-50%, -40%);150    width: 220px; height: 220px;151    border-radius: 50%;152    background: #1c1c1c;153    box-shadow: 0 0 0 8px #181818 inset;154    display: flex; justify-content: center; align-items: center;155  }156  .record-inner {157    width: 120px; height: 120px; border-radius: 50%;158    background: #f48f6b;159    box-shadow: 0 6px 14px rgba(0,0,0,0.5);160  }161 162  .gesture-bar {163    position: absolute;164    bottom: 22px;165    left: 50%;166    transform: translateX(-50%);167    width: 420px; height: 12px;168    background: #e6e6e6;169    border-radius: 10px;170    opacity: 0.9;171  }172</style>173</head>174<body>175<div id="render-target">176 177  <!-- Status Bar -->178  <div class="status-bar">179    <div class="status-time">6:20</div>180    <div class="status-icons">181      <div class="icon">182        <!-- Signal bars -->183        <svg viewBox="0 0 24 24">184          <rect x="2" y="14" width="3" height="8"></rect>185          <rect x="7" y="11" width="3" height="11"></rect>186          <rect x="12" y="8" width="3" height="14"></rect>187          <rect x="17" y="5" width="3" height="17"></rect>188        </svg>189      </div>190      <div class="icon">191        <!-- WiFi -->192        <svg viewBox="0 0 24 24">193          <path d="M12 18a2 2 0 1 0 0.001 0z"></path>194          <path d="M2 9c5-4 15-4 20 0" stroke="#f5f5f5" stroke-width="2" fill="none"></path>195          <path d="M5 12c4-3 10-3 14 0" stroke="#f5f5f5" stroke-width="2" fill="none"></path>196          <path d="M8 15c2-2 6-2 8 0" stroke="#f5f5f5" stroke-width="2" fill="none"></path>197        </svg>198      </div>199      <div class="icon">200        <!-- Battery -->201        <svg viewBox="0 0 28 24">202          <rect x="2" y="5" width="20" height="14" rx="2" ry="2"></rect>203          <rect x="4" y="7" width="14" height="10" fill="#7cf17c"></rect>204          <rect x="22" y="9" width="4" height="6" rx="1" ry="1"></rect>205        </svg>206      </div>207    </div>208  </div>209 210  <!-- Banner Ad Placeholder -->211  <div class="banner-ad">212    [IMG: Booking.com Banner Ad]213  </div>214 215  <!-- App Bar -->216  <div class="app-bar">217    <div class="hamburger">218      <svg viewBox="0 0 24 24">219        <rect x="2" y="5" width="20" height="3"></rect>220        <rect x="2" y="10.5" width="20" height="3"></rect>221        <rect x="2" y="16" width="20" height="3"></rect>222      </svg>223    </div>224    <div class="title">RECORDER <span class="accent">PLUS</span></div>225    <div class="right">226      <div class="search-icon">227        <svg viewBox="0 0 24 24">228          <circle cx="10" cy="10" r="7" stroke="#fff" stroke-width="2" fill="none"></circle>229          <line x1="16" y1="16" x2="22" y2="22" stroke="#fff" stroke-width="2"></line>230        </svg>231      </div>232      <div class="kebab">233        <svg viewBox="0 0 24 24">234          <circle cx="12" cy="5" r="2"></circle>235          <circle cx="12" cy="12" r="2"></circle>236          <circle cx="12" cy="19" r="2"></circle>237        </svg>238      </div>239    </div>240  </div>241 242  <!-- List -->243  <div class="list">244    <div class="item">245      <div class="play-btn">246        <svg viewBox="0 0 24 24">247          <polygon points="8,5 20,12 8,19"></polygon>248        </svg>249      </div>250      <div class="item-content">251        <div class="record-title">Recording 1</div>252        <div class="record-sub">Oct 03, 18:10</div>253      </div>254      <div class="item-right">255        <div class="dots-vertical">256          <span></span><span></span><span></span>257        </div>258        <div class="duration">00:33</div>259      </div>260    </div>261  </div>262 263  <!-- Bottom area with record button and gesture bar -->264  <div class="bottom-area">265    <div class="record-container">266      <div class="record-inner"></div>267    </div>268    <div class="gesture-bar"></div>269  </div>270 271</div>272</body>273</html>