GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Destination Screen Mock</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: Roboto, Arial, Helvetica, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #ffffff;20  }21 22  /* Top green area (status + app bar) */23  .topbar {24    background: #A9E63B;25    color: #2d2d2d;26    width: 100%;27  }28  .statusbar {29    height: 90px;30    display: flex;31    align-items: center;32    padding: 0 28px;33    font-size: 36px;34    font-weight: 500;35    letter-spacing: 0.5px;36  }37  .statusbar .left {38    flex: 1;39    opacity: 0.95;40  }41  .statusbar .right {42    display: flex;43    align-items: center;44    gap: 24px;45  }46  .icon {47    width: 40px;48    height: 40px;49  }50  .appbar {51    height: 130px;52    display: flex;53    align-items: center;54    padding: 0 28px;55    gap: 20px;56  }57  .back-btn {58    width: 56px;59    height: 56px;60    display: inline-flex;61    align-items: center;62    justify-content: center;63  }64  .title {65    font-size: 54px;66    font-weight: 500;67    color: #2b2b2b;68  }69 70  /* Content area */71  .content {72    height: 1210px; /* 2400 - (90 + 130 + 970) */73    background: #ffffff;74  }75 76  /* Keyboard */77  .keyboard {78    position: absolute;79    left: 0;80    bottom: 0;81    width: 1080px;82    height: 970px;83    background: #1f1815;84    color: #e9d7c7;85    box-shadow: 0 -6px 18px rgba(0,0,0,0.35);86  }87  .kbd-inner {88    padding: 18px 24px 26px;89    height: 100%;90    box-sizing: border-box;91    display: flex;92    flex-direction: column;93    justify-content: flex-start;94  }95  .toolrow {96    display: flex;97    justify-content: space-between;98    align-items: center;99    padding: 6px 6px 14px;100  }101  .toolrow .tool {102    width: 72px;103    height: 56px;104    display: flex;105    align-items: center;106    justify-content: center;107    opacity: 0.95;108  }109  .letters {110    display: grid;111    grid-auto-rows: min-content;112    row-gap: 18px;113  }114  .row {115    display: flex;116    gap: 12px;117    justify-content: center;118  }119  .key {120    width: 92px;121    height: 115px;122    background: #2b2421;123    color: #e9d7c7;124    border-radius: 22px;125    display: flex;126    align-items: center;127    justify-content: center;128    font-size: 46px;129    font-weight: 500;130    box-shadow: inset 0 -2px 0 rgba(255,255,255,0.05);131  }132  .key.wide {133    width: 130px;134  }135  .key.space {136    width: 360px;137  }138  .key.smalltext {139    font-size: 34px;140    font-weight: 600;141  }142  .bottom-bar {143    margin-top: 16px;144  }145 146  /* Gesture pill */147  .gesture-pill {148    position: absolute;149    bottom: 14px;150    left: 50%;151    transform: translateX(-50%);152    width: 240px;153    height: 12px;154    background: #e7e7e7;155    border-radius: 8px;156    opacity: 0.95;157  }158</style>159</head>160<body>161<div id="render-target">162 163  <!-- Top green status + app bar -->164  <div class="topbar">165    <div class="statusbar">166      <div class="left">3:54</div>167      <div class="right">168        <!-- simple download icon -->169        <svg class="icon" viewBox="0 0 24 24" fill="#2d2d2d">170          <path d="M5 20h14v2H5zM12 2v12l4-4 1.4 1.4L12 18l-5.4-5.4L8 10l4 4V2z"/>171        </svg>172        <!-- simple cast/monitor icon -->173        <svg class="icon" viewBox="0 0 24 24" fill="#2d2d2d">174          <path d="M3 5h18v12H3z" opacity="0.25"/>175          <path d="M3 17a5 5 0 015 5H6a3 3 0 00-3-3v-2zM3 13a9 9 0 019 9h-2a7 7 0 00-7-7v-2z" fill="#2d2d2d"/>176        </svg>177        <!-- wifi icon -->178        <svg class="icon" viewBox="0 0 24 24" fill="#2d2d2d">179          <path d="M12 20a2 2 0 110-4 2 2 0 010 4zm-6.5-6a10.5 10.5 0 0113 0l-1.4 1.4a8.5 8.5 0 00-10.2 0L5.5 14zm-3.5-4a15 15 0 0120 0l-1.5 1.5a13 13 0 00-17 0L2 10z"/>180        </svg>181        <!-- battery icon -->182        <svg class="icon" viewBox="0 0 24 24" fill="#2d2d2d">183          <rect x="2" y="7" width="18" height="10" rx="2" ry="2"></rect>184          <rect x="20" y="10" width="2" height="4"></rect>185          <rect x="4" y="9" width="10" height="6" fill="#A9E63B"></rect>186        </svg>187      </div>188    </div>189    <div class="appbar">190      <div class="back-btn">191        <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#2d2d2d" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">192          <path d="M15 18l-6-6 6-6"></path>193        </svg>194      </div>195      <div class="title">Destination</div>196    </div>197  </div>198 199  <!-- White content area -->200  <div class="content"></div>201 202  <!-- Keyboard -->203  <div class="keyboard">204    <div class="kbd-inner">205      <!-- tools row -->206      <div class="toolrow">207        <div class="tool">208          <svg width="34" height="34" viewBox="0 0 24 24" fill="#ffffff" opacity="0.9">209            <path d="M3 3h8v8H3zM13 3h8v8h-8zM3 13h8v8H3zM13 13h8v8h-8z"/>210          </svg>211        </div>212        <div class="tool">213          <svg width="34" height="34" viewBox="0 0 24 24" fill="#ffffff" opacity="0.9">214            <circle cx="12" cy="8" r="4"></circle>215            <path d="M4 20c1.5-4 14.5-4 16 0" fill="none" stroke="#ffffff" stroke-width="2"/>216          </svg>217        </div>218        <div class="tool" style="font-weight:700; font-size:30px;">GIF</div>219        <div class="tool">220          <svg width="34" height="34" viewBox="0 0 24 24" fill="#ffffff" opacity="0.9">221            <path d="M12 8V4M8 12H4M12 20v-4M20 12h-4" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>222            <circle cx="12" cy="12" r="3" fill="#ffffff"/>223          </svg>224        </div>225        <div class="tool">226          <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">227            <rect x="3" y="5" width="9" height="14" rx="2"/>228            <path d="M12 9h3l3 3v7H12z" fill="#ffffff" opacity="0.4"/>229          </svg>230        </div>231        <div class="tool">232          <svg width="34" height="34" viewBox="0 0 24 24" fill="#ffffff" opacity="0.9">233            <circle cx="12" cy="12" r="9" opacity="0.25"></circle>234            <path d="M12 3v9l7-7" fill="#ffffff"/>235          </svg>236        </div>237        <div class="tool">238          <svg width="34" height="34" viewBox="0 0 24 24" fill="#ffffff" opacity="0.9">239            <path d="M12 3a4 4 0 014 4v3a4 4 0 01-8 0V7a4 4 0 014-4z"/>240            <rect x="10" y="17" width="4" height="4" rx="1"/>241          </svg>242        </div>243      </div>244 245      <!-- letters rows -->246      <div class="letters">247        <div class="row">248          <div class="key">q</div>249          <div class="key">w</div>250          <div class="key">e</div>251          <div class="key">r</di