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 Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #151515;14    color: #EDEDED;15  }16 17  /* Status Bar */18  .status-bar {19    height: 94px;20    width: 100%;21    background: #0f0f0f;22    display: flex;23    align-items: center;24    padding: 0 28px;25    box-sizing: border-box;26  }27  .status-time { font-size: 34px; letter-spacing: 1px; color: #dcdcdc; }28  .status-icons { margin-left: auto; display: flex; align-items: center; gap: 22px; }29  .icon-dot { width: 14px; height: 14px; background: #dcdcdc; border-radius: 50%; opacity: .9; }30 31  /* Ad strip */32  .ad-strip {33    height: 158px;34    background: #FFFFFF;35    border-bottom: 1px solid #d0d0d0;36    display: flex;37    align-items: center;38    padding: 0 16px;39    box-sizing: border-box;40    gap: 16px;41  }42  .ad-img {43    width: 122px; height: 122px;44    background: #E0E0E0;45    border: 1px solid #BDBDBD;46    display: flex; align-items: center; justify-content: center;47    color: #5d5d5d; font-size: 24px; text-align: center; padding: 6px;48  }49  .ad-car { width: 166px; height: 122px; }50  .ad-close {51    position: absolute;52    left: 12px;53    top: 158px;54    transform: translateY(-50%);55    background: #FFFFFF;56    width: 52px; height: 52px; border-radius: 26px;57    display: flex; align-items: center; justify-content: center;58    border: 1px solid #d0d0d0;59    color: #888;60    font-weight: bold;61  }62 63  /* App bar */64  .app-bar {65    height: 118px;66    display: flex;67    align-items: center;68    padding: 0 28px;69    box-sizing: border-box;70    background: #1b1b1b;71    border-bottom: 1px solid #222;72    gap: 18px;73  }74  .icon-btn {75    width: 72px; height: 72px; display: inline-flex; align-items: center; justify-content: center;76  }77  .title {78    font-size: 46px; font-weight: 800; letter-spacing: .5px;79  }80  .title .accent { color: #ff7d63; font-weight: 900; }81  .app-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; }82 83  /* List */84  .list { }85  .item {86    display: flex;87    align-items: center;88    padding: 28px 28px;89    box-sizing: border-box;90    border-bottom: 1px solid #262626;91    min-height: 176px;92  }93  .play-circle {94    width: 102px; height: 102px; border-radius: 51px;95    background: #232323;96    border: 2px solid #2e2e2e;97    display: flex; align-items: center; justify-content: center;98    margin-right: 26px;99  }100  .play-triangle {101    width: 0; height: 0;102    border-left: 34px solid #f2876e;103    border-top: 22px solid transparent;104    border-bottom: 22px solid transparent;105    margin-left: 6px;106  }107  .item-text { display: flex; flex-direction: column; gap: 8px; }108  .item-title { font-size: 48px; font-weight: 700; color: #f1f1f1; }109  .item-sub { font-size: 34px; color: #9c9c9c; }110  .item-right {111    margin-left: auto;112    display: flex; align-items: center; gap: 18px;113  }114  .duration { font-size: 40px; color: #c2c2c2; min-width: 120px; text-align: right; }115  .kebab { width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; }116 117  /* Bottom record area */118  .bottom-area {119    position: absolute;120    left: 0;121    right: 0;122    bottom: 90px;123    height: 280px;124    display: flex;125    align-items: center;126    justify-content: center;127  }128  .record-wrap {129    width: 210px; height: 210px; border-radius: 50%;130    background: radial-gradient(circle at 50% 50%, #1e1e1e 0, #0f0f0f 70%);131    box-shadow: inset 0 0 0 2px #2b2b2b;132    position: relative;133    display: flex;134    align-items: center; justify-content: center;135  }136  .record-dot {137    width: 96px; height: 96px; border-radius: 50%;138    background: #f2876e;139    box-shadow: 0 2px 0 rgba(0,0,0,.4);140  }141  .gesture-pill {142    position: absolute;143    bottom: 24px;144    left: 50%;145    transform: translateX(-50%);146    width: 420px; height: 12px;147    background: #e8e8e8; border-radius: 6px; opacity: .9;148  }149 150  /* Utility: SVG styling */151  svg { display: block; }152</style>153</head>154<body>155<div id="render-target">156 157  <!-- Status bar -->158  <div class="status-bar">159    <div class="status-time">6:16</div>160    <div class="status-icons">161      <div class="icon-dot"></div>162      <div class="icon-dot"></div>163      <div class="icon-dot"></div>164      <div class="icon-dot"></div>165    </div>166  </div>167 168  <!-- Ad strip -->169  <div class="ad-strip">170    <div class="ad-img">[IMG: CARS24 Logo]</div>171    <div class="ad-img ad-car">[IMG: White Car]</div>172    <div class="ad-img ad-car">[IMG: Brown Car]</div>173    <div class="ad-img ad-car">[IMG: Red SUV]</div>174    <div class="ad-img ad-car">[IMG: Grey Car]</div>175    <div class="ad-img ad-car">[IMG: Blue Car]</div>176  </div>177  <div class="ad-close">×</div>178 179  <!-- App bar -->180  <div class="app-bar">181    <div class="icon-btn">182      <!-- Hamburger -->183      <svg width="44" height="44" viewBox="0 0 24 24" fill="#EDEDED">184        <rect x="3" y="5" width="18" height="2"></rect>185        <rect x="3" y="11" width="18" height="2"></rect>186        <rect x="3" y="17" width="18" height="2"></rect>187      </svg>188    </div>189    <div class="title">RECORDER <span class="accent">PLUS</span></div>190    <div class="app-actions">191      <!-- Search icon -->192      <div class="icon-btn">193        <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#EDEDED" stroke-width="2">194          <circle cx="10" cy="10" r="6"></circle>195          <line x1="15" y1="15" x2="21" y2="21"></line>196        </svg>197      </div>198      <!-- Kebab menu -->199      <div class="icon-btn">200        <svg width="44" height="44" viewBox="0 0 24 24" fill="#EDEDED">201          <circle cx="12" cy="5" r="2"></circle>202          <circle cx="12" cy="12" r="2"></circle>203          <circle cx="12" cy="19" r="2"></circle>204        </svg>205      </div>206    </div>207  </div>208 209  <!-- List of recordings -->210  <div class="list">211 212    <div class="item">213      <div class="play-circle">214        <div class="play-triangle"></div>215      </div>216      <div class="item-text">217        <div class="item-title">Pray recording</div>218        <div class="item-sub">Oct 03, 18:14</div>219      </div>220      <div class="item-right">221        <div class="duration">00:07</div>222        <div class="kebab">223          <svg width="28" height="28" viewBox="0 0 24 24" fill="#BEBEBE">224            <circle cx="12" cy="5" r="2"></circle>225            <circle cx="12" cy="12" r="2"></circle>226            <circle cx="12" cy="19" r="2"></circle>227          </svg>228        </div>229      </div>230    </div>231 232    <div class="item">233      <div class="play-circle">234        <div class="play-triangle"></div>235      </div>236      <div class="item-text">237        <div class="item-title">Recording 1</div>238        <div class="item-sub">Oct 03, 18:10</div>239      </div>240      <div class="item-right">241        <div class="duration">00:33</div>242        <div class="kebab">243          <svg width="28" height="28" viewBox="0 0 24 24" fill="#BEBEBE">244            <circle cx="12" cy="5" r="2"></circle>245            <circle cx="12" cy="12" r="2"></circle>246            <circle cx="12" cy="19" r="2"></circle>247          </svg>248        </div>249      </div>250    </div>251 252  </div>253 254  <!-- Bottom record control and gesture pill -->255  <div class="bottom-area">256    <div class="record-wrap">257      <div class="record-dot"></div>258    </div>259  </div>260  <div class="gesture-pill"></div>261 262</div>263</body>264</html>