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>TeraBox Ad 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: #0b0b0b;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: 80px;24    background: #000;25    display: flex;26    align-items: center;27    padding: 0 24px;28    box-sizing: border-box;29    font-size: 30px;30    letter-spacing: 0.5px;31  }32  .status-left { display: flex; align-items: center; gap: 22px; }33  .status-right { margin-left: auto; display: flex; align-items: center; gap: 22px; }34 35  .icon {36    width: 34px;37    height: 34px;38    display: inline-flex;39    align-items: center;40    justify-content: center;41  }42  .icon svg { width: 100%; height: 100%; fill: #ffffff; }43 44  /* Header */45  .header {46    position: absolute;47    top: 80px;48    left: 0;49    width: 1080px;50    height: 110px;51    background: #0b0b0b;52    display: flex;53    align-items: center;54    padding: 0 24px;55    box-sizing: border-box;56  }57  .back-btn {58    width: 54px; height: 54px; display: inline-flex; align-items: center; justify-content: center;59    margin-right: 18px;60  }61  .title {62    font-size: 36px;63    color: #d9d9d9;64  }65 66  /* Loading card */67  .loading-card {68    position: absolute;69    top: 208px;70    left: 40px;71    width: 1000px;72    height: 140px;73    background: #ffffff;74    border-radius: 18px;75    box-shadow: 0 2px 8px rgba(0,0,0,0.35);76    display: flex;77    align-items: center;78    padding: 0 28px;79    box-sizing: border-box;80    color: #222;81  }82  .img-ph {83    width: 110px; height: 110px;84    background: #E0E0E0;85    border: 1px solid #BDBDBD;86    color: #757575;87    display: flex; align-items: center; justify-content: center;88    font-size: 22px; text-align: center;89    border-radius: 22px;90  }91  .loading-text {92    margin-left: 22px;93    display: flex;94    flex-direction: column;95    gap: 6px;96  }97  .loading-text .big { font-size: 36px; color: #333; }98  .loading-text .sub { font-size: 32px; color: #666; }99  .reload {100    margin-left: auto;101    width: 50px; height: 50px;102    display: inline-flex; align-items: center; justify-content: center;103  }104  .reload svg { fill: #5b6cff; }105 106  /* Advertisement label */107  .ad-label {108    position: absolute;109    top: 360px;110    left: 0;111    width: 1080px;112    text-align: center;113    color: #c9c9c9;114    font-size: 34px;115    letter-spacing: 0.3px;116  }117 118  /* Ad container card */119  .ad-card {120    position: absolute;121    top: 408px;122    left: 24px;123    width: 1032px;124    height: 1500px;125    background: #ffffff;126    border-radius: 22px;127    box-shadow: 0 4px 14px rgba(0,0,0,0.45);128    padding: 24px;129    box-sizing: border-box;130  }131  .video-area {132    position: relative;133    width: 984px;134    height: 1260px;135    background: #E0E0E0;136    border: 1px solid #BDBDBD;137    border-radius: 12px;138    display: flex;139    align-items: center;140    justify-content: center;141    color: #555;142    font-size: 32px;143    text-align: center;144  }145  .mute {146    position: absolute;147    top: 18px;148    left: 18px;149    width: 56px;150    height: 56px;151    background: rgba(0,0,0,0.55);152    border-radius: 50%;153    display: flex; align-items: center; justify-content: center;154  }155  .mute svg { width: 32px; height: 32px; fill: #fff; }156  .watermark {157    position: absolute;158    top: 20px;159    right: 20px;160    color: #1ea1ff;161    font-weight: 700;162    font-size: 34px;163    text-shadow: 0 1px 2px rgba(0,0,0,0.4);164  }165  .caption {166    position: absolute;167    bottom: 24px;168    width: 100%;169    text-align: center;170    font-size: 34px;171    color: #fff;172    text-shadow: 0 2px 4px rgba(0,0,0,0.8);173  }174 175  /* Install/Open bar */176  .install-bar {177    position: absolute;178    bottom: 24px;179    left: 24px;180    right: 24px;181    height: 170px;182    background: #ffffff;183    border-radius: 18px;184    box-shadow: 0 2px 10px rgba(0,0,0,0.25);185    display: flex;186    align-items: center;187    padding: 0 24px;188    box-sizing: border-box;189    color: #222;190  }191  .app-icon {192    width: 130px; height: 130px;193    background: #E0E0E0; border: 1px solid #BDBDBD;194    display: flex; align-items: center; justify-content: center;195    color: #757575; font-size: 24px; border-radius: 20px;196  }197  .app-info {198    margin-left: 22px;199    display: flex; flex-direction: column; gap: 10px;200  }201  .app-title { font-size: 36px; color: #222; }202  .installed { color: #1e8e3e; font-size: 30px; display: flex; align-items: center; gap: 10px; }203  .installed svg { width: 28px; height: 28px; fill: #1e8e3e; }204  .open-btn {205    margin-left: auto;206    background: #2ea24a;207    color: #fff;208    font-size: 40px;209    padding: 22px 46px;210    border-radius: 18px;211    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.2);212  }213 214  /* Home indicator */215  .home-indicator {216    position: absolute;217    bottom: 18px;218    left: 50%;219    transform: translateX(-50%);220    width: 340px;221    height: 10px;222    background: #6e6e6e;223    border-radius: 8px;224    opacity: 0.9;225  }226</style>227</head>228<body>229<div id="render-target">230 231  <!-- Status Bar -->232  <div class="status-bar">233    <div class="status-left">234      <div style="font-weight:600;">8:45</div>235      <div style="opacity:0.9;">ovo</div>236      <div class="icon" title="Notifications">237        <svg viewBox="0 0 24 24"><path d="M12 22a2 2 0 0 0 2-2h-4a2 2 0 0 0 2 2zm6-6V11a6 6 0 1 0-12 0v5l-2 2v1h16v-1l-2-2z"/></svg>238      </div>239      <div class="icon" title="Silent">240        <svg viewBox="0 0 24 24"><path d="M16.5 12a4.5 4.5 0 0 1-7.5 3.5l1.1-1.1A3 3 0 1 0 15 12h1.5zM12 3a9 9 0 0 1 9 9c0 2.3-.86 4.4-2.28 6.02l-1.42-1.42A7 7 0 1 0 5 12H3a9 9 0 0 1 9-9z"/></svg>241      </div>242    </div>243    <div class="status-right">244      <div class="icon" title="Wi-Fi">245        <svg viewBox="0 0 24 24"><path d="M12 18.5l3.5 3.5h-7L12 18.5zM2 8.82C6.42 5.52 17.58 5.52 22 8.82l-1.41 1.41C16.83 7.38 7.17 7.38 3.41 10.23L2 8.82zm4.59 4.59C9.54 11.5 14.46 11.5 17.41 13.41L16 14.82c-2.35-1.41-5.65-1.41-8 0l-1.41-1.41z"/></svg>246      </div>247      <div class="icon" title="Battery">248        <svg viewBox="0 0 24 24"><path d="M16 7h1a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-1v1h-2v-1H8a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h8z"/></svg>249      </div>250    </div>251  </div>252 253  <!-- Header -->254  <div class="header">255    <div class="back-btn">256      <svg viewBox="0 0 24 24" width="44" height="44" fill="#fff"><path d="M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>257    </div>258    <div class="title">PXL_202306...426104.jpg</div>259  </div>260 261  <!-- Loading Card -->262  <div class="loading-card">263    <div class="img-ph">[IMG: Cloud Icon]</div>264    <div class="loading-text">265      <div class="big">Loading...</div>266      <div class="sub">TeraBox</div>267    </div>268    <div class="reload">269      <svg viewBox="0 0 24 24"><path d="M12 6V3L8 7l4 4V8c2.76 0 5 2.24 5 5a5 5 0 1 1-5-5z"/></svg>270    </div>271  </div>272 273  <!-- Advertisement Label -->274  <div class="ad-label">Advertisement</div>275 276  <!-- Ad Card -->277  <div class="ad-card">278    <div class="video-area">279      <div class="mute" title="Muted">280        <svg viewBox="0 0 24 24"><path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v8.06A4.49 4.49 0 0 0 16.5 12zM5 9v6h4l5 5V4L9 9H5z"/></svg>281      </div>282      <div class="watermark">99acres.com</div>283      <div>[IMG: 99acres advertisement scene inside a room]</div>284      <div class="caption">Humne liye ₹ 90 lakh me,</div>285    </div>286 287    <!-- Install/Open bottom section inside ad card -->288    <div class="install-bar">289      <div class="app-icon">[IMG: 99acres App Icon]</div>290      <div class="app-info">291        <div class="app-title">99acres Buy/Rent/Sell Property</div>292        <div class="installed">293          <svg viewBox="0 0 24 24"><path d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>294          Installed295        </div>296      </div>297      <div class="open-btn">Open</div>298    </div>299  </div>300 301  <!-- Home Indicator -->302  <div class="home-indicator"></div>303</div>304</body>305</html>