GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Mobile UI Mock</title>6<meta name="viewport" content="width=device-width, initial-scale=1.0">7<style>8  body{margin:0;padding:0;background:transparent;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#fff;}9  #render-target{10    width:1080px;height:2400px;11    position:relative;overflow:hidden;12    background:#6e6928; /* olive background */13  }14  /* Status bar */15  .status-bar{16    position:absolute;top:0;left:0;right:0;height:110px;17    padding:22px 34px 0 34px;18    color:#fff;opacity:.95;font-weight:600;font-size:44px;19    display:flex;align-items:center;justify-content:space-between;20  }21  .status-icons{display:flex;gap:26px;align-items:center;}22  .icon{display:inline-flex;align-items:center;justify-content:center;}23  .icon svg{width:44px;height:44px;fill:none;stroke:#fff;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}24  /* Top controls */25  .top-controls{26    position:absolute;left:0;right:0;top:120px;27    padding:18px 36px;display:flex;justify-content:space-between;align-items:center;28  }29  .control-group{display:flex;gap:26px;align-items:center;}30  .pill{31    width:150px;height:120px;border-radius:28px;background:#88845d;32    display:flex;align-items:center;justify-content:center;33    box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);34  }35  .pill.text{width:210px;padding:0 34px;font-weight:700;font-size:44px;color:#fff}36  .pill svg{width:56px;height:56px;stroke:#fff;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}37  /* Ad banner */38  .ad-banner{39    position:absolute;left:0;right:0;top:300px;height:120px;40    background:rgba(206,200,140,0.25);41    display:flex;align-items:center;justify-content:center;42    color:rgba(255,255,255,.8);font-size:40px;43  }44  /* Content */45  .content{46    position:absolute;top:470px;left:56px;right:56px;color:#fff;47  }48  .title{font-size:96px;font-weight:800;margin:30px 0 20px 0;}49  .placeholder{font-size:54px;color:rgba(255,255,255,.8);margin:16px 0 46px 0;}50  .add-row{display:flex;align-items:center;gap:28px;color:rgba(255,255,255,.6);font-size:46px;}51  .checkbox{52    width:70px;height:70px;border-radius:10px;border:4px solid rgba(255,255,255,.5);53  }54  .grid-icon svg{width:56px;height:56px;stroke:rgba(255,255,255,.5);stroke-width:5}55  /* Bottom action bar */56  .bottom-bar{57    position:absolute;left:0;right:0;bottom:120px;height:150px;58    background:#7f7b56;display:flex;align-items:center;justify-content:space-around;59    padding:0 26px;60    box-shadow:inset 0 1px 0 rgba(255,255,255,.08);61  }62  .bottom-bar .icon svg{width:72px;height:72px;stroke:#eae7d2;stroke-width:6}63  /* Gesture pill */64  .gesture{65    position:absolute;left:50%;transform:translateX(-50%);66    bottom:38px;width:300px;height:14px;border-radius:10px;background:#f0f0f0;opacity:.95;67  }68</style>69</head>70<body>71<div id="render-target">72  <!-- Status bar -->73  <div class="status-bar">74    <div class="time">8:49</div>75    <div class="status-icons">76      <!-- simple pen/edit indicator -->77      <div class="icon">78        <svg viewBox="0 0 24 24">79          <path d="M3 21l3-1 12-12-2-2L4 18l-1 3z"></path>80        </svg>81      </div>82      <!-- warning triangle -->83      <div class="icon">84        <svg viewBox="0 0 24 24">85          <path d="M12 3l9 16H3l9-16z"></path>86          <path d="M12 10v4"></path>87          <circle cx="12" cy="18" r="1.2" stroke="none" fill="#fff"></circle>88        </svg>89      </div>90      <!-- cloud -->91      <div class="icon">92        <svg viewBox="0 0 24 24">93          <path d="M6 18h10a4 4 0 0 0 0-8 6 6 0 0 0-11-1 4 4 0 0 0 1 9z"></path>94        </svg>95      </div>96      <!-- wifi -->97      <div class="icon">98        <svg viewBox="0 0 24 24">99          <path d="M2 8c5-4 15-4 20 0"></path>100          <path d="M5 12c4-3 10-3 14 0"></path>101          <path d="M8 16c3-2 5-2 8 0"></path>102          <circle cx="12" cy="19.5" r="1.2" stroke="none" fill="#fff"></circle>103        </svg>104      </div>105      <!-- battery -->106      <div class="icon">107        <svg viewBox="0 0 24 24">108          <rect x="3" y="7" width="16" height="10" rx="2"></rect>109          <rect x="20" y="10" width="2" height="4" rx="1" stroke="#fff"></rect>110          <rect x="5" y="9" width="10" height="6" stroke="none" fill="#fff"></rect>111        </svg>112      </div>113    </div>114  </div>115 116  <!-- Top controls -->117  <div class="top-controls">118    <div class="control-group">119      <div class="pill">120        <svg viewBox="0 0 24 24">121          <path d="M15 4l-8 8 8 8"></path>122        </svg>123      </div>124    </div>125    <div class="control-group">126      <div class="pill">127        <!-- Share icon -->128        <svg viewBox="0 0 24 24">129          <circle cx="18" cy="5" r="2"></circle>130          <circle cx="6" cy="12" r="2"></circle>131          <circle cx="18" cy="19" r="2"></circle>132          <path d="M8 12l8-6"></path>133          <path d="M8 12l8 6"></path>134        </svg>135      </div>136      <div class="pill">137        <!-- more icon -->138        <svg viewBox="0 0 24 24">139          <circle cx="6" cy="12" r="2"></circle>140          <circle cx="12" cy="12" r="2"></circle>141          <circle cx="18" cy="12" r="2"></circle>142        </svg>143      </div>144      <div class="pill text">Done</div>145    </div>146  </div>147 148  <!-- Ad banner -->149  <div class="ad-banner">Ad Loading...</div>150 151  <!-- Content -->152  <div class="content">153    <div class="title">xyz</div>154    <div class="placeholder">Type something...</div>155    <div class="add-row">156      <div class="grid-icon icon">157        <!-- 3x3 grid -->158        <svg viewBox="0 0 24 24">159          <rect x="3" y="3" width="3" height="3" fill="none"></rect>160          <rect x="10.5" y="3" width="3" height="3" fill="none"></rect>161          <rect x="18" y="3" width="3" height="3" fill="none"></rect>162          <rect x="3" y="10.5" width="3" height="3" fill="none"></rect>163          <rect x="10.5" y="10.5" width="3" height="3" fill="none"></rect>164          <rect x="18" y="10.5" width="3" height="3" fill="none"></rect>165          <rect x="3" y="18" width="3" height="3" fill="none"></rect>166          <rect x="10.5" y="18" width="3" height="3" fill="none"></rect>167          <rect x="18" y="18" width="3" height="3" fill="none"></rect>168        </svg>169      </div>170      <div class="checkbox"></div>171      <div>Add item</div>172    </div>173  </div>174 175  <!-- Bottom bar -->176  <div class="bottom-bar">177    <!-- checklist -->178    <div class="icon">179      <svg viewBox="0 0 24 24">180        <path d="M4 6l2 2 3-3"></path>181        <path d="M12 7h8"></path>182        <path d="M4 14l2 2 3-3"></path>183        <path d="M12 15h8"></path>184      </svg>185    </div>186    <!-- camera -->187    <div class="icon">188      <svg viewBox="0 0 24 24">189        <rect x="3" y="6" width="18" height="12" rx="2"></rect>190        <path d="M9 6l2-2h2l2 2"></path>191        <circle cx="12" cy="12" r="3.5"></circle>192      </svg>193    </div>194    <!-- image -->195    <div class="icon">196      <svg viewBox="0 0 24 24">197        <rect x="3" y="5" width="18" height="14" rx="2"></rect>198        <circle cx="8.5" cy="10" r="1.7"></circle>199        <path d="M4 17l6-5 4 3 6-5v7H4z"></path>200      </svg>201    </div>202    <!-- palette -->203    <div class="icon">204      <svg viewBox="0 0 24 24">205        <path d="M12 3a9 9 0 1 0 0 18 3 3 0 0 0 3-3c0-1.7-1.3-3-3-3H9"></path>206        <circle cx="8" cy="9" r="1.3"></circle>207        <circle cx="12" cy="7.5" r="1.3"></circle>208        <circle cx="16" cy="9" r="1.3"></circle>209      </svg>210    </div>211    <!-- bell with slash -->212    <div class="icon">213      <svg viewBox="0 0 24 24">214        <path d="M6 9a6 6 0 0 1 12 0v5l2 2H4l2-2V9"></path>215        <path d="M10 19a2 2 0 0 0 4 0"></path>216        <path d="M4 4l16 16"></path>217      </svg>218    </div>219    <!-- X close -->220    <div class="icon">221      <svg viewBox="0 0 24 24">222        <path d="M5 5l14 14"></path>223        <path d="M19 5l-14 14"></path>224      </svg>225    </div>226  </div>227 228  <!-- Gesture navigation pill -->229  <div class="gesture"></div>230</div>231</body>232</html>