GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Print Preview Mock</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #1e1a18; /* dark brown/black backdrop */20    color: #eee;21  }22 23  /* Status bar */24  .status-bar {25    position: absolute;26    top: 0;27    left: 0;28    right: 0;29    height: 110px;30    padding: 0 36px;31    display: flex;32    align-items: center;33    justify-content: space-between;34    color: #f3f3f3;35    font-size: 38px;36    letter-spacing: 0.5px;37    box-sizing: border-box;38  }39  .status-icons {40    display: flex;41    align-items: center;42    gap: 22px;43  }44  .status-icons svg {45    width: 42px;46    height: 42px;47    fill: #f3f3f3;48  }49 50  /* Header content */51  .header {52    position: absolute;53    top: 130px;54    left: 64px;55    right: 64px;56    color: #ece7e3;57  }58  .title-row {59    display: flex;60    align-items: center;61    gap: 14px;62  }63  .title-row .title {64    font-size: 74px;65    font-weight: 700;66  }67  .title-row .caret {68    width: 34px;69    height: 34px;70    fill: #d9d2cd;71    margin-top: 10px;72  }73  .meta {74    margin-top: 22px;75    display: flex;76    align-items: center;77    gap: 46px;78    color: #b8b1ac;79    font-size: 36px;80  }81  .meta .value-strong {82    color: #ffffff;83  }84  .meta .value-soft {85    color: #cfc9c4;86    font-weight: 600;87  }88  .down-divider {89    margin-top: 18px;90    width: 40px;91    height: 40px;92    fill: #cfc9c4;93  }94 95  /* Preview area */96  .preview-wrap {97    position: absolute;98    left: 64px;99    right: 64px;100    top: 560px;101    bottom: 270px;102    display: flex;103    justify-content: center;104    align-items: flex-start;105  }106  .page {107    width: 952px;108    height: 1260px;109    background: #ffffff;110    border-radius: 2px;111    box-shadow: 0 24px 50px rgba(0,0,0,0.6);112    position: relative;113  }114  .page .page-text {115    position: absolute;116    top: 36%;117    left: 50%;118    transform: translate(-50%, -50%);119    color: #222;120    font-size: 72px;121  }122  .page-footer {123    position: absolute;124    left: 0;125    right: 0;126    bottom: 0;127    height: 120px;128    background: #bdbdbd;129    display: flex;130    align-items: center;131    justify-content: center;132    color: #ffffff;133    font-size: 44px;134    letter-spacing: 2px;135  }136  .page-footer .confirm {137    position: absolute;138    right: 26px;139    bottom: 26px;140    width: 88px;141    height: 88px;142    border-radius: 50%;143    background: #e9c6ab;144    display: flex;145    align-items: center;146    justify-content: center;147  }148  .page-footer .confirm svg {149    width: 44px;150    height: 44px;151    stroke: #6a6a6a;152    stroke-width: 6;153    fill: none;154    stroke-linecap: round;155    stroke-linejoin: round;156  }157 158  /* Gesture pill */159  .gesture-pill {160    position: absolute;161    bottom: 34px;162    left: 50%;163    transform: translateX(-50%);164    width: 220px;165    height: 14px;166    background: #ffffff;167    border-radius: 10px;168    opacity: 0.9;169  }170</style>171</head>172<body>173<div id="render-target">174  <!-- Status bar -->175  <div class="status-bar">176    <div class="time">10:50</div>177    <div class="status-icons">178      <!-- Wi-Fi icon -->179      <svg viewBox="0 0 24 24" aria-hidden="true">180        <path d="M12 18.5l2.2 2.2c-.6.6-1.8.6-2.4 0L12 18.5zm8-8.1c-4.9-4.9-13.1-4.9-18 0l1.7 1.7c4-4 10.6-4 14.6 0L20 10.4zm-3.6 3.6c-3-3-7.8-3-10.8 0l1.7 1.7c2-2 5.4-2 7.5 0l1.6-1.7zm-3.6 3.7c-1.1-1.1-3-1.1-4.1 0l2 2 2.1-2z"/>181      </svg>182      <!-- Battery icon -->183      <svg viewBox="0 0 26 24" aria-hidden="true">184        <rect x="1" y="6" width="20" height="12" rx="2" ry="2" fill="none" stroke="#f3f3f3" stroke-width="2"/>185        <rect x="3" y="8" width="16" height="8" fill="#f3f3f3"/>186        <rect x="22" y="9" width="3" height="6" fill="#f3f3f3"/>187      </svg>188    </div>189  </div>190 191  <!-- Header area -->192  <div class="header">193    <div class="title-row">194      <div class="title">Select a printer</div>195      <svg class="caret" viewBox="0 0 24 24">196        <path d="M6 9l6 6 6-6" fill="none" stroke="#d9d2cd" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>197      </svg>198    </div>199    <div class="meta">200      <div>Copies: <span class="value-strong">1</span></div>201      <div>Paper size: <span class="value-soft">Letter</span></div>202    </div>203    <svg class="down-divider" viewBox="0 0 24 24" aria-hidden="true">204      <path d="M6 9l6 6 6-6" fill="none" stroke="#cfc9c4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>205    </svg>206  </div>207 208  <!-- Preview area -->209  <div class="preview-wrap">210    <div class="page">211      <div class="page-text">How to read MRZ?</div>212      <div class="page-footer">213        1/1214        <div class="confirm" title="Confirm">215          <svg viewBox="0 0 24 24">216            <path d="M5 13l4 4 10-10"/>217          </svg>218        </div>219      </div>220    </div>221  </div>222 223  <!-- Gesture bar -->224  <div class="gesture-pill"></div>225</div>226</body>227</html>