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 {9    margin: 0;10    padding: 0;11    background: transparent;12  }13  #render-target {14    width: 1080px;15    height: 2400px;16    position: relative;17    overflow: hidden;18    background: #243E4A; /* deep slate blue/teal */19    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;20    color: #FFFFFF;21  }22  /* Status bar */23  .status-bar {24    position: absolute;25    top: 0;26    left: 0;27    width: 100%;28    height: 110px;29    display: flex;30    align-items: center;31    padding: 24px 40px 0 40px;32    box-sizing: border-box;33  }34  .sb-left, .sb-right {35    display: flex;36    align-items: center;37    gap: 24px;38  }39  .sb-left {40    flex: 1;41  }42  .time {43    font-size: 42px;44    font-weight: 600;45    letter-spacing: 0.5px;46  }47  .dot {48    width: 12px;49    height: 12px;50    background: #FFFFFF;51    border-radius: 50%;52    opacity: 0.95;53    margin-left: 6px;54    margin-right: 6px;55  }56  .icon {57    width: 34px;58    height: 34px;59    display: inline-block;60  }61  .icon svg {62    width: 100%;63    height: 100%;64  }65  /* Bottom navigation pill */66  .nav-pill {67    position: absolute;68    bottom: 72px;69    left: 50%;70    transform: translateX(-50%);71    width: 420px;72    height: 16px;73    background: #FFFFFF;74    border-radius: 16px;75    opacity: 0.95;76  }77</style>78</head>79<body>80<div id="render-target">81  <!-- Status Bar -->82  <div class="status-bar">83    <div class="sb-left">84      <div class="time">10:05</div>85      <!-- Small status icons near time -->86      <div class="icon">87        <!-- Zigzag/Activity -->88        <svg viewBox="0 0 24 24">89          <path d="M3 14 L9 6 L12 11 L16 8 L21 16" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>90        </svg>91      </div>92      <div class="icon">93        <!-- Dots grid -->94        <svg viewBox="0 0 24 24">95          <g fill="#FFFFFF">96            <circle cx="6" cy="6" r="2"/>97            <circle cx="12" cy="6" r="2"/>98            <circle cx="18" cy="6" r="2"/>99            <circle cx="6" cy="12" r="2"/>100            <circle cx="12" cy="12" r="2"/>101            <circle cx="18" cy="12" r="2"/>102            <circle cx="6" cy="18" r="2"/>103            <circle cx="12" cy="18" r="2"/>104            <circle cx="18" cy="18" r="2"/>105          </g>106        </svg>107      </div>108      <div class="icon">109        <!-- Upload arrow -->110        <svg viewBox="0 0 24 24">111          <path d="M12 17 V7" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>112          <path d="M7 11 L12 6 L17 11" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>113          <path d="M5 19 H19" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>114        </svg>115      </div>116      <div class="icon">117        <!-- Stylized A -->118        <svg viewBox="0 0 24 24">119          <path d="M4 19 L12 5 L20 19" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>120          <path d="M8 15 H16" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>121        </svg>122      </div>123      <div class="dot"></div>124    </div>125    <div class="sb-right">126      <div class="icon">127        <!-- Wi-Fi -->128        <svg viewBox="0 0 24 24">129          <path d="M3 8 Q12 2 21 8" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>130          <path d="M6 12 Q12 7 18 12" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>131          <path d="M9 16 Q12 14 15 16" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>132          <circle cx="12" cy="18.5" r="1.7" fill="#FFFFFF"/>133        </svg>134      </div>135      <div class="icon">136        <!-- Battery -->137        <svg viewBox="0 0 24 24">138          <rect x="3" y="6" width="16" height="12" rx="2" ry="2" fill="none" stroke="#FFFFFF" stroke-width="2"/>139          <rect x="5" y="8" width="12" height="8" fill="#FFFFFF"/>140          <rect x="19" y="9" width="2.5" height="6" rx="1" ry="1" fill="#FFFFFF"/>141        </svg>142      </div>143    </div>144  </div>145 146  <!-- Bottom Navigation Pill -->147  <div class="nav-pill"></div>148</div>149</body>150</html>