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>Mobile UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", "Segoe UI", Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #202124; /* dark gray */15    color: #E8EAED;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    right: 0;24    height: 100px;25    padding: 0 36px;26    display: flex;27    align-items: center;28    justify-content: space-between;29    color: #E8EAED;30    font-size: 36px;31    letter-spacing: 1px;32  }33  .status-icons {34    display: flex;35    gap: 28px;36    align-items: center;37  }38  .status-icons .icon {39    width: 38px;40    height: 38px;41    opacity: 0.9;42  }43 44  /* Top app controls */45  .top-bar {46    position: absolute;47    top: 110px;48    left: 0;49    right: 0;50    height: 100px;51    display: flex;52    align-items: center;53    padding: 0 24px 0 24px;54  }55  .back-btn {56    width: 80px;57    height: 80px;58    display: flex;59    align-items: center;60    justify-content: center;61  }62  .actions {63    margin-left: auto;64    display: flex;65    gap: 36px;66    align-items: center;67  }68  .action-icon {69    width: 64px;70    height: 64px;71    stroke: #9AA0A6;72    fill: none;73  }74 75  /* Content */76  .content {77    position: absolute;78    top: 260px;79    left: 60px;80    right: 60px;81  }82  .title {83    font-size: 96px;84    font-weight: 500;85    color: #E8EAED;86    line-height: 1.1;87    margin: 0 0 24px 0;88  }89  .subtitle {90    font-size: 46px;91    color: #B8BCC2;92    margin: 0;93  }94 95  /* Bottom bar */96  .bottom-bar {97    position: absolute;98    left: 0;99    right: 0;100    bottom: 120px;101    height: 120px;102    display: flex;103    align-items: center;104    padding: 0 36px;105    color: #B8BCC2;106    font-size: 40px;107  }108  .bottom-left {109    display: flex;110    gap: 32px;111    align-items: center;112  }113  .bottom-center {114    position: absolute;115    left: 0;116    right: 0;117    text-align: center;118    pointer-events: none;119  }120  .bottom-right {121    margin-left: auto;122    display: flex;123    align-items: center;124  }125  .bottom-icon {126    width: 72px;127    height: 72px;128    stroke: #9AA0A6;129    fill: none;130  }131 132  /* Gesture handle */133  .gesture {134    position: absolute;135    bottom: 48px;136    left: 50%;137    transform: translateX(-50%);138    width: 220px;139    height: 10px;140    background: #E8EAED;141    border-radius: 8px;142    opacity: 0.85;143  }144</style>145</head>146<body>147<div id="render-target">148  <!-- Status Bar -->149  <div class="status-bar">150    <div class="time">8:46</div>151    <div class="status-icons">152      <!-- Simple warning triangle -->153      <svg class="icon" viewBox="0 0 24 24">154        <path d="M12 3 L2 21 H22 Z" fill="none" stroke="#E8EAED" stroke-width="2"/>155        <path d="M12 9 V14" stroke="#E8EAED" stroke-width="2"/>156        <circle cx="12" cy="17" r="1.5" fill="#E8EAED"/>157      </svg>158      <!-- Pencil (edit) icon -->159      <svg class="icon" viewBox="0 0 24 24">160        <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25z" fill="none" stroke="#E8EAED" stroke-width="2"/>161        <path d="M14.06 4.94l3.75 3.75" stroke="#E8EAED" stroke-width="2"/>162      </svg>163      <!-- Cloud icon -->164      <svg class="icon" viewBox="0 0 24 24">165        <path d="M6 18h11a4 4 0 0 0 0-8 6 6 0 0 0-11.5 2A3.5 3.5 0 0 0 6 18z" fill="none" stroke="#E8EAED" stroke-width="2"/>166      </svg>167      <!-- WiFi icon -->168      <svg class="icon" viewBox="0 0 24 24">169        <path d="M2 8c5-4 15-4 20 0" stroke="#E8EAED" stroke-width="2" fill="none"/>170        <path d="M5 12c3-3 11-3 14 0" stroke="#E8EAED" stroke-width="2" fill="none"/>171        <path d="M8 16c2-2 6-2 8 0" stroke="#E8EAED" stroke-width="2" fill="none"/>172        <circle cx="12" cy="19" r="1.5" fill="#E8EAED"/>173      </svg>174      <!-- Battery -->175      <svg class="icon" viewBox="0 0 24 24">176        <rect x="3" y="7" width="16" height="10" rx="2" ry="2" fill="none" stroke="#E8EAED" stroke-width="2"/>177        <rect x="19" y="10" width="2" height="4" fill="#E8EAED"/>178        <rect x="5" y="9" width="10" height="6" fill="#E8EAED"/>179      </svg>180    </div>181  </div>182 183  <!-- Top bar with back and actions -->184  <div class="top-bar">185    <div class="back-btn">186      <svg class="action-icon" viewBox="0 0 24 24">187        <path d="M15 18l-6-6 6-6" stroke-width="2"/>188      </svg>189    </div>190    <div class="actions">191      <!-- Pin -->192      <svg class="action-icon" viewBox="0 0 24 24">193        <path d="M12 3l4 4-2 2 3 6-2 2-6-3-2 2-4-4 2-2 6 3 2-2-3-6z" stroke-width="1.6"/>194      </svg>195      <!-- Bell -->196      <svg class="action-icon" viewBox="0 0 24 24">197        <path d="M12 3a5 5 0 0 0-5 5v3c0 1-1 2-2 3h14c-1-1-2-2-2-3V8a5 5 0 0 0-5-5z" stroke-width="1.6"/>198        <path d="M10 19a2 2 0 0 0 4 0" stroke-width="1.6"/>199      </svg>200      <!-- Archive box -->201      <svg class="action-icon" viewBox="0 0 24 24">202        <rect x="3" y="7" width="18" height="12" rx="2" ry="2" stroke-width="1.6"/>203        <rect x="3" y="3" width="18" height="4" rx="1" ry="1" stroke-width="1.6"/>204        <path d="M9 12h6" stroke-width="1.6"/>205      </svg>206    </div>207  </div>208 209  <!-- Content -->210  <div class="content">211    <h1 class="title">Testing</h1>212    <p class="subtitle">Testing</p>213  </div>214 215  <!-- Bottom bar -->216  <div class="bottom-bar">217    <div class="bottom-left">218      <!-- Add (square with plus) -->219      <svg class="bottom-icon" viewBox="0 0 24 24">220        <rect x="3" y="3" width="18" height="18" rx="3" ry="3" stroke-width="2"/>221        <path d="M12 7v10M7 12h10" stroke-width="2"/>222      </svg>223      <!-- Palette -->224      <svg class="bottom-icon" viewBox="0 0 24 24">225        <path d="M12 3a9 9 0 0 0 0 18h2a2 2 0 0 0 0-4h-1a3 3 0 0 1-3-3" stroke-width="2"/>226        <circle cx="7.5" cy="10" r="1.5" fill="#9AA0A6"/>227        <circle cx="12" cy="7.5" r="1.5" fill="#9AA0A6"/>228        <circle cx="16.5" cy="10" r="1.5" fill="#9AA0A6"/>229      </svg>230    </div>231 232    <div class="bottom-center">Edited Yesterday, 10:34 AM</div>233 234    <div class="bottom-right">235      <!-- More vertical dots -->236      <svg class="bottom-icon" viewBox="0 0 24 24">237        <circle cx="12" cy="5" r="2" fill="#9AA0A6"/>238        <circle cx="12" cy="12" r="2" fill="#9AA0A6"/>239        <circle cx="12" cy="19" r="2" fill="#9AA0A6"/>240      </svg>241    </div>242  </div>243 244  <!-- Gesture handle -->245  <div class="gesture"></div>246</div>247</body>248</html>