GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Mount Rushmore Viewer</title>6<style>7  body {8    margin: 0;9    padding: 0;10    background: transparent;11    font-family: "Roboto", Arial, sans-serif;12  }13  #render-target {14    position: relative;15    overflow: hidden;16    width: 1080px;17    height: 2400px;18    background: #121212;19    color: #E0E0E0;20  }21 22  /* Status Bar */23  .status-bar {24    position: absolute;25    top: 0;26    left: 0;27    width: 1080px;28    height: 100px;29    padding: 0 36px;30    box-sizing: border-box;31    display: flex;32    align-items: center;33    justify-content: space-between;34    color: #E5E5E5;35  }36  .status-left {37    display: flex;38    align-items: center;39    gap: 16px;40    font-size: 40px;41    line-height: 1;42    letter-spacing: 0.5px;43  }44  .status-left .badge {45    font-size: 32px;46    color: #D0D0D0;47    border: 1px solid #2A2A2A;48    padding: 6px 10px;49    border-radius: 8px;50  }51  .status-right {52    display: flex;53    align-items: center;54    gap: 24px;55  }56  .status-icon svg {57    width: 48px;58    height: 48px;59    fill: none;60    stroke: #E5E5E5;61    stroke-width: 2.5;62  }63 64  /* App Bar */65  .app-bar {66    position: absolute;67    top: 100px;68    left: 0;69    width: 1080px;70    height: 160px;71    display: flex;72    align-items: center;73    box-sizing: border-box;74    padding: 0 24px 0 24px;75    background: #1A1A1A;76    border-bottom: 1px solid #232323;77  }78  .app-left {79    display: flex;80    align-items: center;81    gap: 24px;82    flex: 1;83  }84  .app-left .back-icon svg {85    width: 72px;86    height: 72px;87    fill: none;88    stroke: #E0E0E0;89    stroke-width: 3.5;90  }91  .app-title {92    font-size: 60px;93    color: #E0E0E0;94    font-weight: 500;95    letter-spacing: 0.2px;96  }97  .app-right {98    display: flex;99    align-items: center;100    gap: 28px;101    padding-right: 12px;102  }103  .app-right svg {104    width: 64px;105    height: 64px;106    fill: none;107    stroke: #E0E0E0;108    stroke-width: 3;109  }110 111  /* Content */112  .content {113    position: absolute;114    top: 260px;115    left: 0;116    width: 1080px;117    height: 1880px;118    background: #121212;119    box-sizing: border-box;120  }121 122  .photo-wrap {123    width: 980px;124    height: 880px;125    margin: 520px auto 0 auto; /* pushes image lower like screenshot */126    background: #E0E0E0;127    border: 1px solid #BDBDBD;128    display: flex;129    align-items: center;130    justify-content: center;131    color: #757575;132    font-size: 42px;133    letter-spacing: 0.5px;134  }135 136  /* Floating Action Button */137  .fab {138    position: absolute;139    right: 60px;140    bottom: 180px;141    width: 132px;142    height: 132px;143    background: #1E4D7D;144    border-radius: 36px;145    box-shadow: 0 12px 28px rgba(0,0,0,0.45);146    display: flex;147    align-items: center;148    justify-content: center;149  }150  .fab svg {151    width: 72px;152    height: 72px;153    stroke: #CFE3FF;154    stroke-width: 5;155    fill: none;156  }157 158  /* Gesture Pill */159  .gesture-pill {160    position: absolute;161    bottom: 44px;162    left: 50%;163    transform: translateX(-50%);164    width: 220px;165    height: 16px;166    background: #FFFFFF;167    opacity: 0.85;168    border-radius: 20px;169  }170</style>171</head>172<body>173<div id="render-target">174  <!-- Status Bar -->175  <div class="status-bar">176    <div class="status-left">177      <div>10:06</div>178      <div class="badge">M</div>179    </div>180    <div class="status-right">181      <div class="status-icon">182        <!-- Wi-Fi Icon -->183        <svg viewBox="0 0 24 24">184          <path d="M2 8c5-4 15-4 20 0"></path>185          <path d="M5 11c4-3 10-3 14 0"></path>186          <path d="M8 14c3-2 5-2 8 0"></path>187          <circle cx="12" cy="18" r="1.8" fill="#E5E5E5" stroke="none"></circle>188        </svg>189      </div>190      <div class="status-icon">191        <!-- Battery Icon -->192        <svg viewBox="0 0 24 24">193          <rect x="2" y="6" width="18" height="12" rx="2"></rect>194          <rect x="21" y="9" width="2" height="6" rx="1"></rect>195          <rect x="4" y="8" width="12" height="8" fill="#E5E5E5" stroke="none"></rect>196        </svg>197      </div>198    </div>199  </div>200 201  <!-- App Bar -->202  <div class="app-bar">203    <div class="app-left">204      <div class="back-icon">205        <!-- Back Arrow -->206        <svg viewBox="0 0 24 24">207          <path d="M15 5 L7 12 L15 19"></path>208        </svg>209      </div>210      <div class="app-title">Mount rushmore</div>211    </div>212    <div class="app-right">213      <!-- Comment/Message Icon -->214      <svg viewBox="0 0 24 24">215        <path d="M3 5h18v12H8l-5 4V5z"></path>216      </svg>217      <!-- Kebab Menu -->218      <svg viewBox="0 0 24 24">219        <circle cx="12" cy="5" r="2" fill="#E0E0E0" stroke="none"></circle>220        <circle cx="12" cy="12" r="2" fill="#E0E0E0" stroke="none"></circle>221        <circle cx="12" cy="19" r="2" fill="#E0E0E0" stroke="none"></circle>222      </svg>223    </div>224  </div>225 226  <!-- Content -->227  <div class="content">228    <div class="photo-wrap">[IMG: Mount Rushmore photo]</div>229  </div>230 231  <!-- Floating Action Button -->232  <div class="fab">233    <!-- Pencil Icon -->234    <svg viewBox="0 0 24 24">235      <path d="M4 20l4-1 9-9-3-3-9 9-1 4z"></path>236      <path d="M14 4l3 3"></path>237    </svg>238  </div>239 240  <!-- Gesture Pill -->241  <div class="gesture-pill"></div>242</div>243</body>244</html>