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>ClockBuddy Ad UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  * { box-sizing: border-box; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #0f1114;15    border-radius: 0;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 110px;25    color: #fff;26    display: flex;27    align-items: center;28    padding: 0 32px;29    font-weight: 600;30    font-size: 44px;31    letter-spacing: 1px;32  }33  .status-icons {34    margin-left: auto;35    display: flex;36    align-items: center;37    gap: 26px;38  }39  .icon {40    width: 42px;41    height: 42px;42    display: inline-block;43  }44 45  /* App header area */46  .header {47    position: absolute;48    top: 110px;49    left: 0;50    width: 1080px;51    height: 430px;52    background: linear-gradient(135deg, #1a1f26 0%, #1c222b 50%, #161b21 100%);53    color: #e7eaf0;54    padding: 36px 36px 0 36px;55  }56  .header-top {57    display: flex;58    align-items: center;59    gap: 22px;60  }61  .hamburger {62    width: 64px;63    height: 48px;64  }65  .title {66    font-size: 72px;67    font-weight: 700;68  }69  .header-actions {70    margin-left: auto;71    display: flex;72    gap: 28px;73  }74  .mode-icon {75    width: 58px;76    height: 58px;77    opacity: 0.8;78  }79  .tabs {80    margin-top: 46px;81    display: flex;82    gap: 80px;83    color: #bfc6d3;84    align-items: center;85  }86  .tab {87    display: flex;88    align-items: center;89    gap: 16px;90    font-size: 44px;91  }92  .tab.active {93    color: #ffffff;94    border-bottom: 4px solid #bf6f7c;95    padding-bottom: 14px;96  }97 98  /* Floating promo card */99  .promo-card {100    position: absolute;101    top: 246px;102    left: 60px;103    width: 960px;104    height: 160px;105    background: #ffffff;106    color: #222;107    border-radius: 26px;108    box-shadow: 0 10px 30px rgba(0,0,0,0.35);109    display: flex;110    align-items: center;111    padding: 22px 24px;112    gap: 28px;113  }114  .promo-icon {115    width: 92px;116    height: 92px;117    border-radius: 50%;118    background: #f2f7ff;119    display: flex;120    align-items: center;121    justify-content: center;122    border: 2px solid #d8e6ff;123  }124  .promo-text {125    display: flex;126    flex-direction: column;127    line-height: 1.2;128  }129  .promo-title {130    font-size: 44px;131    color: #5b5b5b;132  }133  .promo-app {134    font-size: 50px;135    font-weight: 700;136    color: #000;137    margin-top: 6px;138  }139  .promo-arrow {140    margin-left: auto;141    width: 56px;142    height: 56px;143  }144 145  /* Advertisement card */146  .ad-card {147    position: absolute;148    top: 570px;149    left: 20px;150    width: 1040px;151    background: #ffffff;152    border-radius: 26px;153    box-shadow: 0 12px 40px rgba(0,0,0,0.35);154    overflow: hidden;155  }156  .ad-header {157    width: 100%;158    text-align: center;159    font-size: 44px;160    color: #6b6b6b;161    padding: 24px 0 10px 0;162    border-bottom: 1px solid #e6e6e6;163  }164  .ad-image {165    position: relative;166    margin: 0 16px;167    margin-top: 16px;168    height: 560px;169    background: #E0E0E0;170    border: 1px solid #BDBDBD;171    border-radius: 8px;172    display: flex;173    align-items: center;174    justify-content: center;175    color: #757575;176    font-size: 44px;177    letter-spacing: 0.5px;178  }179  .info-dot {180    position: absolute;181    top: 18px;182    right: 18px;183    width: 44px;184    height: 44px;185    border-radius: 50%;186    background: #ffffff;187    border: 1px solid #bfc6d3;188    display: flex;189    align-items: center;190    justify-content: center;191    color: #5a6aa1;192    font-weight: 700;193    font-size: 30px;194  }195  .ad-content {196    padding: 40px 46px 0 46px;197  }198  .hotel-title {199    font-size: 92px;200    font-weight: 700;201    color: #222;202    margin-bottom: 36px;203  }204  .hotel-sub {205    font-size: 56px;206    color: #9a9a9a;207    margin-bottom: 120px;208  }209  .hotel-name {210    font-size: 56px;211    color: #222;212    margin-bottom: 220px;213  }214  .ad-footer {215    width: 100%;216    background: #e3edff;217    border-top: 1px solid #d0defe;218    padding: 34px 46px;219    display: flex;220    align-items: center;221  }222  .ad-footer .open {223    font-size: 56px;224    color: #3f69ff;225    font-weight: 700;226  }227  .ad-footer .arrow-right {228    margin-left: auto;229    width: 56px;230    height: 56px;231  }232</style>233</head>234<body>235<div id="render-target">236 237  <!-- Status bar -->238  <div class="status-bar">239    <div>10:27</div>240    <div class="status-icons">241      <!-- Location/geo icon -->242      <svg class="icon" viewBox="0 0 24 24">243        <path d="M12 2c4.4 0 8 3.6 8 8 0 6.4-7.2 11.2-7.5 11.4-.3.2-.7.2-1 0C9.2 21.2 2 16.4 2 10c0-4.4 3.6-8 8-8zm0 5.5a2.5 2.5 0 100 5 2.5 2.5 0 000-5z" fill="#fff"/>244      </svg>245      <!-- Wifi -->246      <svg class="icon" viewBox="0 0 24 24">247        <path d="M2 9c5.5-5.5 14.5-5.5 20 0l-2.2 2.2c-4.3-4.3-11.3-4.3-15.6 0L2 9zM6.5 13.5c3.6-3.6 9.4-3.6 13 0L17.3 15c-2.6-2.6-6.9-2.6-9.5 0L6.5 13.5zM10.8 18.3c1.7-1.7 4.6-1.7 6.3 0l-3.1 3.1-3.2-3.1z" fill="#fff"/>248      </svg>249      <!-- Battery -->250      <svg class="icon" viewBox="0 0 28 24">251        <rect x="2" y="6" width="20" height="12" rx="2" fill="#fff"/>252        <rect x="4" y="8" width="14" height="8" fill="#0f1114"/>253        <rect x="22" y="9" width="4" height="6" rx="1" fill="#fff"/>254      </svg>255    </div>256  </div>257 258  <!-- Header -->259  <div class="header">260    <div class="header-top">261      <svg class="hamburger" viewBox="0 0 24 24">262        <rect x="2" y="4" width="20" height="3" fill="#e7eaf0"/>263        <rect x="2" y="10.5" width="20" height="3" fill="#e7eaf0"/>264        <rect x="2" y="17" width="20" height="3" fill="#e7eaf0"/>265      </svg>266      <div class="title">ClockBuddy</div>267      <div class="header-actions">268        <svg class="mode-icon" viewBox="0 0 24 24">269          <path d="M12 2a9.9 9.9 0 100 20 10 10 0 010-20zm0 3a7 7 0 110 14 7 7 0 010-14z" fill="#c8ccd6"/>270        </svg>271        <svg class="mode-icon" viewBox="0 0 24 24">272          <path d="M12 2c3.9 0 7 3.1 7 7 0 3.9-3.1 7-7 7S5 12.9 5 9c0-3.9 3.1-7 7-7zm0 3a4 4 0 100 8 4 4 0 000-8z" fill="#c8ccd6"/>273        </svg>274        <svg class="mode-icon" viewBox="0 0 24 24">275          <path d="M12 8a4 4 0 110 8 4 4 0 010-8zm9 4l-2.1.7a7.5 7.5 0 00-1.3 3.1l1.4 1.7-2.8 2.8-1.7-1.4a7.5 7.5 0 00-3.1 1.3L12 21l-1-.3a7.5 7.5 0 00-3.1-1.3l-1.7 1.4-2.8-2.8 1.4-1.7a7.5 7.5 0 00-1.3-3.1L3 12l.3-1a7.5 7.5 0 001.3-3.1L3.2 6.2 6 3.4l1.7 1.4A7.5 7.5 0 0010.8 3L12 3l1 .3a7.5 7.5 0 003.1 1.3L17.8 3.2 20.6 6l-1.4 1.7c.6 1 .9 2 .8 3.3z" fill="#c8ccd6"/>276        </svg>277      </div>278    </div>279 280    <div class="tabs">281      <div class="tab"><svg class="icon" viewBox="0 0 24 24"><path d="M12 2l6 6v12H6V8l6-6zm0 3.5L8 8h8l-4-2.5z" fill="#bfc6d3"/></svg>Alarms</div>282      <div class="tab active"><svg class="icon" viewBox="0 0 24 24"><path d="M12 4a8 8 0 110 16 8 8 0 010-16zm0 1.8v6.5l4.8 2.7-1 1.7-6-3.4V5.8h2.2z" fill="#fff"/></svg>Clock</div>283      <div class="tab"><svg class="icon" viewBox="0 0 24 24"><path d="M6 4h12v3H6V4zm0 6h12v3H6v-3zm0 6h12v3H6v-3z" fill="#bfc6d3"/></svg>Timer</div>284      <div class="tab"><svg class="icon" viewBox="0 0 24 24"><path d="M12 3l3 3H9l3-3zm-7 6h14v12H5V9z" fill="#bfc6d3"/></svg>Stopwatch</div>285    </div>286  </div>287 288  <!-- Floating promo card -->289  <div class="promo-card">290    <div class="promo-icon">291      <svg viewBox="0 0 24 24" width="68" height="68">292        <circle cx="12" cy="12" r="9" fill="#cfe0ff"/>293        <path d="M12 6v6l4 2" stroke="#4a74ff" stroke-width="2" fill="none" stroke-linecap="round"/>294      </svg>295    </div>296    <div class="promo-text">297      <div class="promo-title">Continue to app</div>298      <div class="promo-app">ClockBuddy</div>299    </div>300    <svg class="promo-arrow" viewBox="0 0 24 24">301      <path d="M8 4l8 8-8 8" stroke="#7a8cff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>302    </svg>303  </div>304 305  <!-- Advertisement card -->306  <div class="ad-card">307    <div class="ad-header">Advertisement</div>308 309    <div class="ad-image">310      [IMG: Hotel room bed]311      <div class="info-dot">i</div>312    </div>313 314    <div class="ad-content">315      <div class="hotel-title">Sole Hotel</div>316      <div class="hotel-sub">Hotel au centre ville</div>317      <div class="hotel-name">Sole Hotel</div>318    </div>319 320    <div class="ad-footer">321      <div class="open">Ouvrir</div>322      <svg class="arrow-right" viewBox="0 0 24 24">323        <path d="M8 4l8 8-8 8" stroke="#5c7cff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>324      </svg>325    </div>326  </div>327 328</div>329</body>330</html>