GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Settings Screen Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }8  #render-target {9    width: 1080px; height: 2400px; position: relative; overflow: hidden;10    background: #E6E6E6;11  }12 13  /* Top app bar */14  .appbar {15    position: absolute; top: 0; left: 0; width: 100%; height: 220px;16    background: #03A9F4;17    box-shadow: 0 4px 6px rgba(0,0,0,0.2);18    color: #fff;19  }20  .appbar .back {21    position: absolute; left: 32px; top: 92px;22    width: 64px; height: 64px;23  }24  .appbar .title {25    position: absolute; left: 120px; top: 86px;26    font-size: 72px; font-weight: 700; letter-spacing: 0.5px;27  }28 29  /* Content area */30  .content {31    position: absolute; left: 0; top: 220px; right: 0; bottom: 140px;32    padding: 36px 0 0 0;33  }34  .list {35    width: 100%;36  }37  .item {38    display: flex; align-items: center;39    padding: 0 40px;40    height: 160px;41    color: #2E2E2E;42    font-size: 46px;43  }44  .icon-wrap {45    width: 120px; height: 120px; display: flex; align-items: center; justify-content: center;46    margin-right: 30px;47  }48  .icon { width: 88px; height: 88px; }49  .divider {50    height: 2px; background: #CFCFCF; margin: 20px 40px 30px;51  }52  .section-title {53    color: #9B9B9B; font-weight: 700; letter-spacing: 2px; font-size: 38px;54    margin: 20px 40px 10px;55  }56 57  /* Bottom logos row */58  .logos {59    margin: 50px 40px 0 40px;60    display: flex; gap: 40px; align-items: center;61  }62  .img-ph {63    width: 220px; height: 110px;64    background: #E0E0E0; border: 1px solid #BDBDBD;65    display: flex; align-items: center; justify-content: center;66    color: #757575; font-size: 34px; border-radius: 8px;67  }68 69  /* Bottom navigation bar */70  .nav-bar {71    position: absolute; bottom: 0; left: 0; width: 100%; height: 140px;72    background: #000;73  }74  .home-pill {75    position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);76    width: 260px; height: 16px; background: #CFCFCF; border-radius: 12px;77  }78</style>79</head>80<body>81<div id="render-target">82 83  <!-- Top app bar -->84  <div class="appbar">85    <svg class="back" viewBox="0 0 48 48">86      <path d="M30 10L16 24l14 14-6 0-18-18 18-18z" fill="#FFFFFF"/>87    </svg>88    <div class="title">Settings</div>89  </div>90 91  <!-- Content -->92  <div class="content">93    <div class="list">94 95      <div class="item">96        <div class="icon-wrap">97          <svg class="icon" viewBox="0 0 48 48">98            <path d="M6 10h36v22H18l-12 12V10z" fill="#9E9E9E"/>99          </svg>100        </div>101        <div class="text">Connect with Wunderground</div>102      </div>103 104      <div class="item">105        <div class="icon-wrap">106          <svg class="icon" viewBox="0 0 48 48">107            <rect x="6" y="12" width="36" height="24" rx="2" ry="2" fill="#9E9E9E"/>108            <path d="M6 14l18 12 18-12" stroke="#E6E6E6" stroke-width="3" fill="none"/>109          </svg>110        </div>111        <div class="text">Send us feedback</div>112      </div>113 114      <div class="divider"></div>115      <div class="section-title">ABOUT</div>116 117      <div class="item">118        <div class="icon-wrap">119          <svg class="icon" viewBox="0 0 48 48">120            <circle cx="24" cy="24" r="20" fill="#B0B0B0"/>121            <rect x="22" y="20" width="4" height="14" fill="#E6E6E6"/>122            <circle cx="24" cy="14" r="3" fill="#E6E6E6"/>123          </svg>124        </div>125        <div class="text">About this app</div>126      </div>127 128      <div class="item">129        <div class="icon-wrap">130          <svg class="icon" viewBox="0 0 48 48">131            <rect x="6" y="6" width="36" height="36" rx="6" fill="#9E9E9E"/>132            <text x="24" y="30" text-anchor="middle" font-size="20" fill="#E6E6E6" font-family="Arial" font-weight="700">wu</text>133          </svg>134        </div>135        <div class="text">Weather Underground</div>136      </div>137 138      <div class="item">139        <div class="icon-wrap">140          <svg class="icon" viewBox="0 0 48 48">141            <circle cx="24" cy="8" r="3" fill="#9E9E9E"/>142            <circle cx="36" cy="12" r="3" fill="#B3B3B3"/>143            <circle cx="40" cy="24" r="3" fill="#CCCCCC"/>144            <circle cx="36" cy="36" r="3" fill="#B3B3B3"/>145            <circle cx="24" cy="40" r="3" fill="#9E9E9E"/>146            <circle cx="12" cy="36" r="3" fill="#B3B3B3"/>147            <circle cx="8" cy="24" r="3" fill="#CCCCCC"/>148            <circle cx="12" cy="12" r="3" fill="#B3B3B3"/>149          </svg>150        </div>151        <div class="text">Our data</div>152      </div>153 154      <div class="item">155        <div class="icon-wrap">156          <svg class="icon" viewBox="0 0 48 48">157            <rect x="10" y="6" width="28" height="36" rx="4" fill="#9E9E9E"/>158            <rect x="16" y="16" width="16" height="3" fill="#E6E6E6"/>159            <rect x="16" y="22" width="16" height="3" fill="#E6E6E6"/>160            <rect x="16" y="28" width="16" height="3" fill="#E6E6E6"/>161          </svg>162        </div>163        <div class="text">Glossary</div>164      </div>165 166      <div class="divider"></div>167 168      <div class="logos">169        <div class="img-ph">[IMG: Weather Underground logo]</div>170        <div class="img-ph">[IMG: IBM logo]</div>171      </div>172 173    </div>174  </div>175 176  <!-- Bottom navigation bar -->177  <div class="nav-bar">178    <div class="home-pill"></div>179  </div>180</div>181</body>182</html>