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">6<title>Mock UI - MANGO Splash</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: #FFFFFF;20  }21 22  /* Status bar */23  .status-bar {24    position: absolute;25    top: 24px;26    left: 24px;27    right: 24px;28    height: 48px;29    display: flex;30    align-items: center;31    justify-content: space-between;32    color: #666666;33    font-size: 36px;34    line-height: 1;35  }36  .status-left,37  .status-right {38    display: flex;39    align-items: center;40    gap: 18px;41  }42  .notif-pill {43    width: 44px;44    height: 36px;45    border-radius: 8px;46    background: #BDBDBD;47    color: #FFFFFF;48    font-weight: 600;49    font-size: 24px;50    display: flex;51    align-items: center;52    justify-content: center;53  }54  .dot {55    width: 12px;56    height: 12px;57    background: #666666;58    border-radius: 50%;59  }60 61  /* Center brand text */62  .brand {63    position: absolute;64    top: 1460px;65    left: 50%;66    transform: translateX(-50%);67    font-size: 220px;68    letter-spacing: 16px;69    font-weight: 700;70    color: #E3E3E3;71    text-transform: uppercase;72  }73 74  /* Home pill */75  .home-pill {76    position: absolute;77    bottom: 72px;78    left: 50%;79    transform: translateX(-50%);80    width: 360px;81    height: 12px;82    border-radius: 12px;83    background: #757575;84    opacity: 0.9;85  }86 87  /* Simple icon helpers */88  .icon {89    display: inline-flex;90    align-items: center;91    justify-content: center;92  }93  .icon svg {94    display: block;95  }96</style>97</head>98<body>99<div id="render-target">100  <!-- Status Bar -->101  <div class="status-bar">102    <div class="status-left">103      <div>8:15</div>104      <div class="notif-pill">B</div>105      <div class="icon">106        <!-- Simple slanted lines icon -->107        <svg width="36" height="24" viewBox="0 0 36 24">108          <path d="M6 20 L14 4 M22 20 L30 4" stroke="#666666" stroke-width="4" stroke-linecap="round"/>109        </svg>110      </div>111      <div class="icon">112        <!-- M-shaped icon -->113        <svg width="36" height="24" viewBox="0 0 36 24">114          <path d="M4 20 L4 4 L12 14 L20 4 L20 20 M28 20 L28 4" stroke="#666666" stroke-width="4" stroke-linecap="round" fill="none"/>115        </svg>116      </div>117      <div class="icon">118        <!-- Envelope-like icon -->119        <svg width="36" height="24" viewBox="0 0 36 24">120          <rect x="3" y="4" width="30" height="16" rx="3" ry="3" fill="none" stroke="#666666" stroke-width="3"/>121          <path d="M3 6 L18 14 L33 6" stroke="#666666" stroke-width="3" fill="none" stroke-linecap="round"/>122        </svg>123      </div>124      <div class="dot"></div>125    </div>126    <div class="status-right">127      <div class="icon">128        <!-- Wi-Fi icon -->129        <svg width="40" height="28" viewBox="0 0 40 28">130          <path d="M4 10 C14 2,26 2,36 10" stroke="#666666" stroke-width="3" fill="none" stroke-linecap="round"/>131          <path d="M9 15 C16 9,24 9,31 15" stroke="#666666" stroke-width="3" fill="none" stroke-linecap="round"/>132          <path d="M15 20 C18 17,22 17,25 20" stroke="#666666" stroke-width="3" fill="none" stroke-linecap="round"/>133          <circle cx="20" cy="23" r="2.5" fill="#666666"/>134        </svg>135      </div>136      <div class="icon">137        <!-- Battery with bolt -->138        <svg width="42" height="24" viewBox="0 0 42 24">139          <rect x="2" y="4" width="34" height="16" rx="3" ry="3" fill="none" stroke="#666666" stroke-width="3"/>140          <rect x="38" y="9" width="4" height="6" rx="1" fill="#666666"/>141          <path d="M18 6 L12 13 L18 13 L14 18 L22 10 L16 10 Z" fill="#666666"/>142        </svg>143      </div>144    </div>145  </div>146 147  <!-- Brand text -->148  <div class="brand">MANGO</div>149 150  <!-- Bottom home pill -->151  <div class="home-pill"></div>152</div>153</body>154</html>