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>Current Conditions</title>7<style>8  body { margin:0; padding:0; background: transparent; }9  #render-target {10    width:1080px; height:2400px;11    position:relative; overflow:hidden;12    background:#4f78c9; color:#ffffff;13    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;14  }15  .status-bar {16    height:90px; padding:0 36px; box-sizing:border-box;17    display:flex; align-items:center; justify-content:space-between;18    color:#e8f0ff; font-size:34px; opacity:0.95;19  }20  .status-icons { display:flex; gap:28px; align-items:center; }21  .icon-dot { width:10px; height:10px; background:#e8f0ff; border-radius:50%; opacity:0.9; }22  .top-appbar {23    height:120px; display:flex; align-items:center; position:relative;24    border-top:1px solid rgba(255,255,255,0.2);25    border-bottom:1px solid rgba(255,255,255,0.25);26  }27  .back-btn {28    width:120px; height:100%; display:flex; align-items:center; justify-content:center;29    cursor:default;30  }31  .title {32    position:absolute; left:0; right:0; text-align:center;33    font-weight:600; font-size:46px; letter-spacing:0.5px;34  }35  .hero {36    padding:70px 80px 30px; text-align:center;37  }38  .temp-row {39    display:flex; align-items:center; justify-content:center; gap:36px;40  }41  .temp {42    font-size:180px; font-weight:700; line-height:1;43    letter-spacing:2px;44  }45  .temp sup {46    font-size:64px; top:-1.2em; position:relative; font-weight:600;47  }48  .temp .unit {49    font-size:84px; font-weight:600; margin-left:8px;50  }51  .hero .subtitle {52    margin-top:36px; font-size:48px; color:#e9f1ff;53  }54  .list {55    margin-top:36px;56  }57  .row {58    display:flex; align-items:center; justify-content:space-between;59    padding:34px 36px; height:120px; box-sizing:border-box;60    border-top:1px solid rgba(255,255,255,0.35);61  }62  .row:last-child { border-bottom:1px solid rgba(255,255,255,0.35); }63  .label {64    font-size:44px; color:#e5edff;65  }66  .value {67    font-size:48px; font-weight:700; color:#ffffff;68  }69  .value.emph { color:#ffffff; font-weight:800; }70  .history-bar {71    position:absolute; left:0; right:0; bottom:140px;72    height:160px; display:flex; align-items:center; justify-content:center;73    border-top:1px solid rgba(255,255,255,0.35);74    color:#ffffff; font-size:64px; font-weight:700;75  }76  .gesture-area {77    position:absolute; left:0; right:0; bottom:0;78    height:140px; background:#000000;79  }80  .gesture-handle {81    position:absolute; left:50%; transform:translateX(-50%);82    bottom:44px; width:260px; height:14px; background:#d9d9d9; border-radius:10px;83    opacity:0.9;84  }85  /* simple icon colors */86  svg { fill:none; stroke:#ffffff; }87</style>88</head>89<body>90<div id="render-target">91  <!-- Status bar -->92  <div class="status-bar">93    <div>10:43</div>94    <div class="status-icons">95      <div class="icon-dot"></div>96      <div class="icon-dot"></div>97      <div class="icon-dot"></div>98      <div class="icon-dot"></div>99    </div>100  </div>101 102  <!-- App bar -->103  <div class="top-appbar">104    <div class="back-btn">105      <svg width="44" height="44" viewBox="0 0 24 24" stroke-width="2.4">106        <path d="M15 6l-6 6 6 6"/>107      </svg>108    </div>109    <div class="title">Current Conditions</div>110  </div>111 112  <!-- Hero -->113  <div class="hero">114    <div class="temp-row">115      <!-- Partly cloudy icon -->116      <svg width="150" height="110" viewBox="0 0 64 48" stroke-width="3">117        <path d="M22 30c-5 0-9-4-9-9s4-9 9-9c3 0 6 2 7 4 1-1 3-2 5-2 5 0 9 4 9 9s-4 9-9 9H22z"/>118        <path d="M8 16l4-2M9 8l3 3M17 6v4"/>119      </svg>120      <div class="temp">60<sup>°</sup><span class="unit">F</span></div>121    </div>122    <div class="subtitle">Mostly cloudy</div>123  </div>124 125  <!-- List of details -->126  <div class="list">127    <div class="row">128      <div class="label">RealFeel®</div>129      <div class="value">54°</div>130    </div>131    <div class="row">132      <div class="label">RealFeel® Shade</div>133      <div class="value">54°</div>134    </div>135    <div class="row">136      <div class="label">Wind</div>137      <div class="value">WSW 19 mph</div>138    </div>139    <div class="row">140      <div class="label">Max Wind Gusts</div>141      <div class="value">32 mph</div>142    </div>143    <div class="row">144      <div class="label">Humidity</div>145      <div class="value">79%</div>146    </div>147    <div class="row">148      <div class="label">Indoor Humidity</div>149      <div class="value emph">60% (Ideal Humidity)</div>150    </div>151    <div class="row">152      <div class="label">Dew Point</div>153      <div class="value">54°</div>154    </div>155    <div class="row">156      <div class="label">Pressure</div>157      <div class="value">29.97"</div>158    </div>159    <div class="row">160      <div class="label">Cloud Cover</div>161      <div class="value">76%</div>162    </div>163    <div class="row">164      <div class="label">Visibility</div>165      <div class="value">15 mi</div>166    </div>167    <div class="row">168      <div class="label">Cloud Ceiling</div>169      <div class="value">20,000 ft</div>170    </div>171  </div>172 173  <!-- Bottom History -->174  <div class="history-bar">History</div>175 176  <!-- Gesture area -->177  <div class="gesture-area">178    <div class="gesture-handle"></div>179  </div>180</div>181</body>182</html>