GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Breathe Screen</title>5<style>6  body{7    margin:0;8    padding:0;9    background:transparent;10    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;11  }12  #render-target{13    width:1080px;14    height:2400px;15    position:relative;16    overflow:hidden;17    background: linear-gradient(#F3AA7D 0 50%, #E79C64 50% 100%);18  }19 20  /* Status bar */21  .status{22    position:absolute;23    top:24px;24    left:32px;25    right:32px;26    height:60px;27    color:#3a2a1b;28    font-size:38px;29    display:flex;30    align-items:center;31    justify-content:space-between;32    opacity:0.85;33  }34  .status .left{35    display:flex;36    gap:30px;37    align-items:center;38  }39  .dot{40    width:22px;41    height:22px;42    background:#5b3a23;43    border-radius:50%;44    display:inline-block;45  }46  .icon-row{47    display:flex;48    gap:26px;49    align-items:center;50  }51  /* Simple wifi */52  .wifi{53    width:40px; height:30px; position:relative;54  }55  .wifi:before, .wifi:after{56    content:"";57    position:absolute;58    border:3px solid #5b3a23;59    border-top:none;60    border-left-color:transparent;61    border-right-color:transparent;62    border-bottom-left-radius:40px;63    border-bottom-right-radius:40px;64    left:0; right:0;65  }66  .wifi:before{ top:0; height:14px;}67  .wifi:after{ top:10px; height:18px;}68  /* Battery */69  .battery{70    width:52px; height:28px; border:3px solid #5b3a23; border-radius:6px; position:relative;71  }72  .battery:after{73    content:"";74    position:absolute;75    right:-10px; top:8px; width:8px; height:12px; background:#5b3a23; border-radius:2px;76  }77  .battery .level{78    position:absolute; left:4px; top:4px; height:18px; width:34px; background:#5b3a23; border-radius:3px;79  }80 81  /* Close button */82  .close-btn{83    position:absolute;84    top:120px; right:50px;85    width:120px; height:120px;86    background:#CF8B60;87    border-radius:50%;88    box-shadow:0 0 0 6px rgba(0,0,0,0.05) inset;89  }90  .close-btn:before, .close-btn:after{91    content:"";92    position:absolute;93    left:50%; top:50%;94    width:80px; height:10px;95    background:#fff;96    transform-origin:center;97    border-radius:5px;98  }99  .close-btn:before{ transform:translate(-50%,-50%) rotate(45deg); }100  .close-btn:after{ transform:translate(-50%,-50%) rotate(-45deg); }101 102  /* Cloud */103  .cloud{104    position:absolute;105    top:220px; left:60px;106    width:420px; height:220px;107    background:#F5C9A3;108    border-radius:160px;109  }110  .cloud:before, .cloud:after{111    content:"";112    position:absolute;113    background:#F5C9A3;114    border-radius:50%;115  }116  .cloud:before{ width:260px; height:190px; left:-40px; top:40px; }117  .cloud:after{ width:200px; height:170px; right:-40px; top:70px; }118  .cloud .bump{119    position:absolute; width:170px; height:140px; background:#F5C9A3; border-radius:50%; right:80px; top:120px;120  }121 122  /* Title */123  .title{124    position:absolute;125    top:980px;126    width:100%;127    text-align:center;128    color:#fff;129    font-size:72px;130    font-weight:600;131    letter-spacing:2px;132  }133 134  /* Butterflies */135  .butterfly{136    position:absolute;137    width:120px; height:90px;138  }139  .butterfly:before, .butterfly:after{140    content:"";141    position:absolute;142    width:62px; height:52px;143    background:#5a3a22;144    border-radius:60% 50% 50% 60%;145    top:20px;146  }147  .butterfly:before{ left:0; transform:rotate(-20deg); }148  .butterfly:after{ right:0; transform:rotate(20deg); }149  .butterfly .body{150    position:absolute; left:56px; top:40px; width:10px; height:30px; background:#5a3a22; border-radius:6px;151  }152  .butterfly .body:before, .butterfly .body:after{153    content:""; position:absolute; width:20px; height:2px; background:#5a3a22; top:-6px;154  }155  .butterfly .body:before{ left:-18px; transform:rotate(-25deg); }156  .butterfly .body:after{ right:-18px; transform:rotate(25deg); }157 158  .b1{ left:200px; top:880px; }159  .b2{ right:130px; top:1620px; }160 161  /* Rings around flower */162  .ring{163    position:absolute;164    border:8px dashed #6c4a31;165    border-radius:50%;166    opacity:0.7;167  }168  .ring.r1{ width:850px; height:850px; left:115px; top:1380px; }169  .ring.r2{ width:600px; height:600px; left:240px; top:1530px; }170  .ring.r3{ width:420px; height:420px; left:330px; top:1670px; }171 172  /* Lotus flower */173  .flower{174    position:absolute;175    left:240px; top:1540px;176    width:600px; height:520px;177  }178  .stem{179    position:absolute;180    left:50%;181    transform:translateX(-50%);182    top:240px;183    width:26px; height:940px;184    background:#C8763E;185    border-radius:18px;186  }187 188  .petal{189    position:absolute;190    width:240px; height:180px;191    background:#C76A34;192    border-radius:60% 60% 60% 60%;193    box-shadow:inset 0 -20px 0 rgba(0,0,0,0.15);194  }195  .petal.center{196    left:180px; top:180px; background:#D07437;197    transform:rotate(0deg);198  }199  .petal.top{200    left:250px; top:90px; width:200px; height:160px; background:#D07437; transform:rotate(0deg);201  }202  .petal.left{203    left:80px; top:250px; transform:rotate(-20deg);204  }205  .petal.right{206    right:80px; top:250px; transform:rotate(20deg);207  }208  .petal.bottom-left{209    left:160px; top:340px; width:260px; height:180px; background:#D07437; transform:rotate(-12deg);210  }211  .petal.bottom-right{212    right:160px; top:340px; width:260px; height:180px; background:#D07437; transform:rotate(12deg);213  }214 215  /* Ground separation line mimic */216  .ground-line{217    position:absolute;218    top:1200px; left:0; width:100%; height:8px; background:rgba(0,0,0,0.05);219  }220 221  /* Home indicator */222  .home-indicator{223    position:absolute;224    bottom:34px;225    left:50%;226    transform:translateX(-50%);227    width:520px; height:16px;228    background:#000;229    border-radius:12px;230    opacity:0.8;231  }232</style>233</head>234<body>235<div id="render-target">236 237  <div class="status">238    <div class="left">239      <div>9:40</div>240      <span class="dot"></span>241      <span class="dot"></span>242      <span class="dot"></span>243    </div>244    <div class="icon-row">245      <div class="wifi"></div>246      <div class="battery"><div class="level"></div></div>247    </div>248  </div>249 250  <div class="close-btn"></div>251 252  <div class="cloud"><div class="bump"></div></div>253 254  <div class="title">take a deep breath</div>255 256  <div class="butterfly b1"><span class="body"></span></div>257  <div class="butterfly b2"><span class="body"></span></div>258 259  <div class="ring r1"></div>260  <div class="ring r2"></div>261  <div class="ring r3"></div>262 263  <div class="flower">264    <div class="petal top"></div>265    <div class="petal center"></div>266    <div class="petal left"></div>267    <div class="petal right"></div>268    <div class="petal bottom-left"></div>269    <div class="petal bottom-right"></div>270    <div class="stem"></div>271  </div>272 273  <div class="home-indicator"></div>274</div>275</body>276</html>