GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Blue Globe UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: radial-gradient(ellipse at 50% 55%, #4aa4e9 0%, #3a86d4 35%, #2e63c0 60%, #233d9a 80%, #1a2476 100%);14  }15 16  /* soft angular overlay to mimic geometric backdrop */17  .poly {18    position: absolute;19    width: 1400px;20    height: 1400px;21    background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.0));22    transform: rotate(25deg);23    top: -200px; left: -300px;24    filter: blur(2px);25  }26  .poly.p2 { top: 1100px; left: 600px; transform: rotate(-20deg); }27  .poly.p3 { top: 1500px; left: -200px; transform: rotate(10deg); }28 29  /* status bar */30  .status-bar {31    position: absolute;32    top: 20px; left: 24px; right: 24px;33    height: 80px;34    color: #fff;35    display: flex;36    align-items: center;37    justify-content: space-between;38    opacity: 0.95;39    font-size: 36px;40    letter-spacing: 1px;41  }42  .left-icons, .right-icons { display: flex; align-items: center; gap: 26px; }43  .time { font-weight: 600; margin-right: 18px; }44 45  .mini-icon {46    width: 44px; height: 44px;47    border-radius: 10px;48    border: 1px solid rgba(255,255,255,0.25);49    color: #fff;50    display: flex; align-items: center; justify-content: center;51    font-size: 26px;52    background: rgba(255,255,255,0.06);53  }54 55  /* simple svg icons */56  .wifi svg, .battery svg { display: block; }57  .wifi svg { width: 52px; height: 52px; }58  .battery svg { width: 60px; height: 60px; }59 60  /* close (X) button */61  .close {62    position: absolute;63    top: 130px; left: 40px;64    width: 70px; height: 70px;65  }66  .close:before, .close:after {67    content: '';68    position: absolute;69    top: 34px; left: 10px;70    width: 50px; height: 4px; background: #fff; border-radius: 2px;71  }72  .close:before { transform: rotate(45deg); }73  .close:after { transform: rotate(-45deg); }74 75  /* right toolbar icons */76  .side-tools {77    position: absolute;78    top: 180px; right: 50px;79    display: flex; flex-direction: column; gap: 24px; align-items: flex-end;80  }81  .tool {82    width: 86px; height: 86px; border-radius: 16px;83    background: rgba(255,255,255,0.12);84    border: 1px solid rgba(255,255,255,0.25);85    color: #fff; display: flex; align-items: center; justify-content: center;86    font-weight: 700; font-size: 36px;87  }88 89  /* flag placeholder */90  .flag {91    position: absolute;92    top: 300px; right: 48px;93    width: 120px; height: 120px; border-radius: 50%;94    background: #E0E0E0;95    border: 1px solid #BDBDBD;96    display: flex; align-items: center; justify-content: center;97    color: #757575;98    font-size: 26px; text-align: center; padding: 8px;99  }100 101  /* glowing globe */102  .globe-wrap {103    position: absolute;104    left: 90px; right: 90px;105    top: 760px;106    height: 980px;107    display: flex; align-items: center; justify-content: center;108  }109  .globe {110    width: 860px; height: 860px; border-radius: 50%;111    position: relative;112    box-shadow: 0 0 80px 30px rgba(114,202,255,0.25) inset, 0 0 120px 20px rgba(114,202,255,0.25);113    background:114      radial-gradient(circle at 50% 50%, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.06) 35%, rgba(0,0,0,0) 70%),115      radial-gradient(circle at 50% 65%, rgba(95,212,255,0.35) 0%, rgba(95,212,255,0.15) 35%, rgba(95,212,255,0.0) 70%);116    border: 1px solid rgba(255,255,255,0.18);117  }118  /* dotted network effect */119  .globe:before {120    content: '';121    position: absolute; inset: 0;122    border-radius: 50%;123    background-image:124      radial-gradient(rgba(255,255,255,0.35) 1px, rgba(255,255,255,0) 1px);125    background-size: 28px 28px;126    opacity: 0.28;127    mask-image: radial-gradient(circle at 50% 50%, #000 75%, transparent 100%);128  }129  .globe:after {130    content: '';131    position: absolute; inset: 18%;132    border-radius: 50%;133    border: 1px dashed rgba(255,255,255,0.25);134    opacity: 0.4;135  }136 137  /* labels */138  .label {139    position: absolute;140    color: #fff;141    text-shadow: 0 0 10px rgba(255,255,255,0.22);142  }143  .label.small { font-size: 32px; opacity: 0.85; }144  .label.big { font-size: 56px; font-weight: 700; }145 146  /* glow points */147  .glow {148    position: absolute; width: 60px; height: 60px; border-radius: 50%;149    background: radial-gradient(circle, rgba(143,216,255,0.9) 0%, rgba(143,216,255,0.35) 35%, rgba(143,216,255,0.0) 70%);150    filter: blur(1px);151  }152 153  /* bottom home indicator */154  .home-indicator {155    position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%);156    width: 360px; height: 12px; border-radius: 12px;157    background: rgba(255,255,255,0.7);158  }159</style>160</head>161<body>162<div id="render-target">163 164  <div class="poly"></div>165  <div class="poly p2"></div>166  <div class="poly p3"></div>167 168  <!-- Status Bar -->169  <div class="status-bar">170    <div class="left-icons">171      <span class="time">1:40</span>172      <div class="mini-icon">M</div>173      <div class="mini-icon">▶</div>174      <div class="mini-icon">☁</div>175    </div>176    <div class="right-icons">177      <div class="wifi">178        <svg viewBox="0 0 24 24">179          <path d="M12 18.5c.9 0 1.7.8 1.7 1.7S12.9 22 12 22s-1.7-.8-1.7-1.7.8-1.8 1.7-1.8z" fill="#ffffff"/>180          <path d="M2.5 9.5c5.3-4.5 13.7-4.5 19 0" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round" opacity="0.6"/>181          <path d="M5.8 12.2c3.8-3.3 8.6-3.3 12.4 0" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round" opacity="0.7"/>182          <path d="M9.5 15c2-1.7 4.9-1.7 6.9 0" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round" opacity="0.9"/>183        </svg>184      </div>185      <div class="battery">186        <svg viewBox="0 0 28 18">187          <rect x="2" y="3" width="22" height="12" rx="2" ry="2" fill="none" stroke="#ffffff" stroke-width="2"/>188          <rect x="5" y="6" width="16" height="6" fill="#ffffff"/>189          <rect x="24" y="7" width="3" height="4" fill="#ffffff"/>190        </svg>191      </div>192    </div>193  </div>194 195  <!-- Close button -->196  <div class="close"></div>197 198  <!-- Right side tools -->199  <div class="side-tools">200    <div class="tool">JL</div>201    <div class="tool">A</div>202  </div>203 204  <!-- Flag -->205  <div class="flag">[IMG: UK/RU Flag]</div>206 207  <!-- Central Globe -->208  <div class="globe-wrap">209    <div class="globe"></div>210  </div>211 212  <!-- Floating labels -->213  <div class="label small" style="left: 110px; top: 1120px;">juice</div>214  <div class="label small" style="left: 808px; top: 930px; opacity: 0.7;">coffee</div>215  <div class="label small" style="left: 620px; top: 1450px; opacity: 0.75;">tea</div>216  <div class="label big" style="left: 560px; top: 1750px;">wine</div>217 218  <!-- glowing points around -->219  <div class="glow" style="left: 70px; top: 820px;"></div>220  <div class="glow" style="right: 70px; top: 920px;"></div>221  <div class="glow" style="left: 190px; bottom: 620px;"></div>222  <div class="glow" style="right: 240px; bottom: 680px;"></div>223  <div class="glow" style="right: 120px; bottom: 180px;"></div>224  <div class="glow" style="left: 120px; bottom: 260px;"></div>225  <div class="glow" style="left: 420px; bottom: 520px;"></div>226  <div class="glow" style="right: 420px; bottom: 520px;"></div>227 228  <!-- Home indicator -->229  <div class="home-indicator"></div>230</div>231</body>232</html>