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>iPhone 14 Pro Max - Mock</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "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: #000000;20    color: #EAEAEA;21  }22 23  /* Minimal status bar */24  .status-bar {25    position: absolute;26    top: 0;27    left: 0;28    right: 0;29    height: 80px;30    padding: 0 36px;31    display: flex;32    align-items: center;33    justify-content: space-between;34    color: #FFFFFF;35    opacity: 0.9;36    font-weight: 600;37    font-size: 32px;38    letter-spacing: 0.5px;39  }40  .status-right {41    display: flex;42    align-items: center;43    gap: 24px;44  }45  .wifi, .battery {46    display: inline-flex;47    align-items: center;48    justify-content: center;49  }50  .wifi svg, .battery svg {51    width: 44px;52    height: 44px;53  }54 55  /* Header */56  .app-header {57    position: absolute;58    top: 80px; /* below status bar */59    left: 0;60    right: 0;61    height: 160px;62    display: flex;63    align-items: center;64    justify-content: space-between;65    padding: 0 40px;66  }67  .left-group {68    display: flex;69    align-items: center;70    gap: 28px;71  }72  .title {73    font-size: 64px;74    font-weight: 700;75    color: #E5E5E5;76    letter-spacing: -0.5px;77  }78  .icon-circle {79    width: 96px;80    height: 96px;81    border-radius: 50%;82    background: #1E1E1E;83    display: flex;84    align-items: center;85    justify-content: center;86  }87  .icon-circle svg {88    width: 52px;89    height: 52px;90    stroke: #FFFFFF;91    fill: none;92    stroke-width: 6;93    stroke-linecap: round;94    stroke-linejoin: round;95    opacity: 0.95;96  }97  .right-group {98    display: flex;99    align-items: center;100    gap: 28px;101  }102 103  /* Loader */104  .loader {105    position: absolute;106    left: 50%;107    top: 54%;108    transform: translate(-50%, -50%);109    width: 180px;110    height: 180px;111    border-radius: 50%;112    border: 18px solid rgba(103, 151, 255, 0.18);113    border-top-color: #6FA0FF;114    animation: spin 1.1s linear infinite;115    box-sizing: border-box;116  }117  @keyframes spin {118    to { transform: translate(-50%, -50%) rotate(360deg); }119  }120 121  /* Home indicator */122  .home-indicator {123    position: absolute;124    bottom: 46px;125    left: 50%;126    transform: translateX(-50%);127    width: 360px;128    height: 14px;129    background: rgba(255,255,255,0.85);130    border-radius: 9px;131  }132</style>133</head>134<body>135  <div id="render-target">136    <!-- Status bar -->137    <div class="status-bar">138      <div class="status-left">8:23</div>139      <div class="status-right">140        <!-- simple placeholders for icons -->141        <div class="wifi" aria-hidden="true">142          <svg viewBox="0 0 24 24">143            <path d="M2 9c5.5-4.7 14.5-4.7 20 0" stroke="#fff" stroke-width="2" fill="none"/>144            <path d="M5 12c3.8-3.2 10.2-3.2 14 0" stroke="#fff" stroke-width="2" fill="none"/>145            <path d="M8 15c2.1-1.8 5.9-1.8 8 0" stroke="#fff" stroke-width="2" fill="none"/>146            <circle cx="12" cy="18" r="1.5" fill="#fff" stroke="none"/>147          </svg>148        </div>149        <div class="battery" aria-hidden="true">150          <svg viewBox="0 0 28 16">151            <rect x="1" y="3" width="22" height="10" rx="2" ry="2" stroke="#fff" fill="none" stroke-width="2"/>152            <rect x="24" y="6" width="3" height="4" rx="1" fill="#fff"/>153            <rect x="3.5" y="5.5" width="17.5" height="7" rx="1.5" fill="#fff" opacity="0.95"/>154          </svg>155        </div>156      </div>157    </div>158 159    <!-- App header -->160    <div class="app-header">161      <div class="left-group">162        <div class="icon-circle" role="button" aria-label="Menu">163          <!-- hamburger -->164          <svg viewBox="0 0 24 24">165            <path d="M4 6h16M4 12h16M4 18h16"></path>166          </svg>167        </div>168        <div class="title">iPhone 14 Pro Max</div>169      </div>170      <div class="right-group">171        <div class="icon-circle" role="button" aria-label="Search">172          <!-- search -->173          <svg viewBox="0 0 24 24">174            <circle cx="11" cy="11" r="6.5"></circle>175            <path d="M16 16l5 5"></path>176          </svg>177        </div>178        <div class="icon-circle" role="button" aria-label="Camera">179          <!-- camera -->180          <svg viewBox="0 0 24 24">181            <path d="M4 7h5l1.5-2h3L15 7h5v12H4z"></path>182            <circle cx="12" cy="13" r="3.5"></circle>183          </svg>184        </div>185        <div class="icon-circle" role="button" aria-label="Cart">186          <!-- cart -->187          <svg viewBox="0 0 24 24">188            <path d="M3 5h2l2.5 10h10l2-7H7"></path>189            <circle cx="10" cy="19" r="1.6" fill="#fff" stroke="none"></circle>190            <circle cx="17" cy="19" r="1.6" fill="#fff" stroke="none"></circle>191          </svg>192        </div>193      </div>194    </div>195 196    <!-- Loader -->197    <div class="loader" aria-label="Loading"></div>198 199    <!-- Home indicator -->200    <div class="home-indicator"></div>201  </div>202</body>203</html>