GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Weather Choice Screen</title>5<style>6  body {7    margin: 0;8    padding: 0;9    background: transparent;10    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, "Helvetica Neue", Arial, sans-serif;11  }12  #render-target {13    width: 1080px;14    height: 2400px;15    position: relative;16    overflow: hidden;17    background: #000000;18    color: #FFFFFF;19  }20 21  /* Status bar */22  .status-bar {23    position: absolute;24    top: 24px;25    left: 24px;26    right: 24px;27    height: 96px;28    display: flex;29    align-items: center;30    justify-content: space-between;31    color: #fff;32    opacity: 0.95;33  }34  .sb-left {35    display: flex;36    align-items: center;37    gap: 24px;38    font-weight: 600;39    font-size: 48px;40  }41  .mini-icon {42    width: 32px;43    height: 32px;44    border-radius: 6px;45    background: rgba(255,255,255,0.2);46  }47  .sb-right {48    display: flex;49    align-items: center;50    gap: 28px;51  }52  .icon {53    width: 48px;54    height: 48px;55  }56  .wifi path, .battery rect, .battery path {57    fill: #fff;58  }59 60  /* Headline area */61  .content {62    position: absolute;63    left: 80px;64    top: 1480px;65    width: 920px;66  }67  .greeting {68    font-size: 120px;69    font-weight: 700;70    letter-spacing: 0.6px;71    margin-bottom: 40px;72  }73  .question {74    font-size: 68px;75    line-height: 1.25;76    font-weight: 600;77  }78 79  /* Cards */80  .card {81    position: absolute;82    left: 56px;83    width: 968px;84    background: #3A3A3A;85    border-radius: 64px;86    padding: 48px 48px 56px;87    box-sizing: border-box;88  }89  .card:nth-of-type(1) {90    top: 1840px;91  }92  .card:nth-of-type(2) {93    top: 2140px;94    background: #4A4A4A;95  }96  .card-title {97    font-size: 56px;98    font-weight: 800;99    letter-spacing: 2px;100    text-transform: uppercase;101    margin-bottom: 24px;102  }103  .card-sub {104    font-size: 44px;105    color: #EAEAEA;106    margin-bottom: 18px;107  }108  .card-note {109    font-size: 40px;110    color: #B0B0B0;111  }112 113  /* Bottom handle */114  .handle {115    position: absolute;116    bottom: 40px;117    left: 300px;118    width: 480px;119    height: 14px;120    border-radius: 10px;121    background: #9E9E9E;122    opacity: 0.7;123  }124</style>125</head>126<body>127<div id="render-target">128 129  <!-- Status Bar -->130  <div class="status-bar">131    <div class="sb-left">132      <div>2:19</div>133      <div class="mini-icon"></div>134      <div class="mini-icon"></div>135      <div class="mini-icon"></div>136      <div class="mini-icon"></div>137    </div>138    <div class="sb-right">139      <!-- WiFi Icon -->140      <svg class="icon wifi" viewBox="0 0 24 24">141        <path d="M12 18c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6.6-6.2c3.6-3.3 9.6-3.3 13.2 0l1.4-1.4C15.7 6.4 8.3 6.4 4.2 10.4l1.2 1.4zM2 9c5.5-5 14.5-5 20 0l-1.6 1.6C16.2 7 7.8 7 3.6 10.6L2 9z"/>142      </svg>143      <!-- Battery Icon -->144      <svg class="icon battery" viewBox="0 0 28 24">145        <rect x="2" y="6" width="20" height="12" rx="2"></rect>146        <path d="M24 9h2v6h-2z"></path>147      </svg>148    </div>149  </div>150 151  <!-- Main Content -->152  <div class="content">153    <div class="greeting">Hi.</div>154    <div class="question">How’d you like to check the weather?</div>155  </div>156 157  <!-- Cards -->158  <div class="card">159    <div class="card-title">CURRENT LOCATION</div>160    <div class="card-sub">More accurate, uses GPS</div>161    <div class="card-note">Requires permission</div>162  </div>163 164  <div class="card">165    <div class="card-title">SEARCH</div>166    <div class="card-sub">Faster, type in the location you’re after</div>167    <div class="card-note">No permissions required</div>168  </div>169 170  <!-- Bottom Handle -->171  <div class="handle"></div>172 173</div>174</body>175</html>