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>Settings Screen Mockup</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px; height: 2400px; position: relative; overflow: hidden;10    background: #0e0e0f; color: #fff;11  }12 13  /* Status bar */14  .status-bar {15    position: absolute; top: 0; left: 0; right: 0; height: 120px;16    background: #111214; display: flex; align-items: center; justify-content: space-between;17    padding: 0 40px; font-size: 40px;18  }19  .status-left { display: flex; align-items: center; gap: 28px; }20  .dot { width: 16px; height: 16px; background: #d9d9d9; border-radius: 50%; display: inline-block; opacity: 0.8; }21  .status-right { display: flex; align-items: center; gap: 28px; }22  .icon { width: 48px; height: 48px; }23 24  /* App bar */25  .appbar {26    position: absolute; top: 120px; left: 0; right: 0; height: 140px;27    background: #151516; display: flex; align-items: center; gap: 20px; padding: 0 36px;28    box-shadow: 0 2px 0 rgba(255,255,255,0.06);29  }30  .back-btn {31    width: 72px; height: 72px; border-radius: 36px; background: transparent; border: none; position: relative; cursor: default;32  }33  .back-btn:before, .back-btn:after {34    content: ""; position: absolute; left: 18px; right: 18px; top: 34px; height: 4px; background: #fff;35  }36  .back-btn:before { transform: rotate(45deg); }37  .back-btn:after { transform: rotate(-45deg); }38  .title { font-size: 72px; font-weight: 700; letter-spacing: 0.5px; }39 40  /* Content wrapper */41  .content {42    position: absolute; top: 260px; left: 0; right: 0; bottom: 0;43    padding: 0 40px 40px 40px;44    overflow-y: auto;45  }46 47  /* Profile row */48  .profile {49    display: flex; align-items: center; gap: 36px; padding: 36px 0 48px 0; border-bottom: 1px solid rgba(255,255,255,0.06);50    background: #121214;51  }52  .avatar {53    width: 180px; height: 180px; border-radius: 18px; background: #f3cf4a; display: flex; align-items: center; justify-content: center;54    color: #000; font-size: 100px; font-weight: 800;55  }56  .profile-info .name { font-size: 56px; font-weight: 700; margin-bottom: 14px; }57  .profile-info .edit { font-size: 36px; color: #b9b9b9; }58 59  /* Promo card */60  .promo {61    margin-top: 56px; border-radius: 28px;62    background: linear-gradient(90deg, #f1d47b, #f2c19f);63    padding: 60px 48px;64    color: #1b1b1b;65  }66  .promo h2 { margin: 0 0 22px 0; font-size: 64px; color: #1b1b1b; }67  .promo p { margin: 16px 0; font-size: 40px; line-height: 1.36; color: #2d2d2d; }68  .green-btn {69    margin-top: 44px;70    background: #4b8f74; color: #fff; border: none; font-size: 44px; font-weight: 700;71    padding: 28px 46px; border-radius: 48px; width: 620px; text-align: center;72    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.2);73  }74 75  /* Section headers */76  .section-title {77    margin-top: 64px; margin-bottom: 20px; color: #b9b9b9; letter-spacing: 2px; font-size: 34px; font-weight: 700;78  }79 80  /* Account rows */81  .row {82    display: flex; align-items: center; justify-content: space-between;83    padding: 34px 8px; font-size: 44px; border-bottom: 1px solid rgba(255,255,255,0.06);84  }85  .row .hint { color: #b9b9b9; font-size: 38px; }86  .pill-yellow {87    display: inline-block; margin-top: 24px; background: #f3cf4a; color: #0f0f0f; font-weight: 800;88    padding: 22px 42px; border-radius: 40px; font-size: 40px;89  }90 91  /* System list */92  .list-item {93    display: flex; align-items: center; gap: 28px; padding: 34px 8px;94    border-bottom: 1px solid rgba(255,255,255,0.06);95  }96  .list-item svg { width: 72px; height: 72px; }97  .item-label { font-size: 48px; }98 99  /* Simple icon styles */100  .icon-stroke { stroke: #fff; fill: none; stroke-width: 6; }101  .icon-fill { fill: #fff; }102</style>103</head>104<body>105<div id="render-target">106 107  <!-- Status Bar -->108  <div class="status-bar">109    <div class="status-left">110      <div>7:41</div>111      <span class="dot"></span>112      <span class="dot"></span>113      <span class="dot"></span>114      <span class="dot"></span>115    </div>116    <div class="status-right">117      <!-- WiFi icon -->118      <svg class="icon" viewBox="0 0 24 24">119        <path class="icon-stroke" d="M2 9c5-4 15-4 20 0"></path>120        <path class="icon-stroke" d="M5 12c4-3 10-3 14 0"></path>121        <path class="icon-stroke" d="M8 15c2-2 6-2 8 0"></path>122        <circle class="icon-fill" cx="12" cy="18" r="2"></circle>123      </svg>124      <!-- Battery icon -->125      <svg class="icon" viewBox="0 0 24 24">126        <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"></rect>127        <rect x="20" y="9" width="2" height="6" fill="#fff"></rect>128        <rect x="4" y="8" width="12" height="8" fill="#fff" opacity="0.9"></rect>129      </svg>130    </div>131  </div>132 133  <!-- App Bar -->134  <div class="appbar">135    <button class="back-btn" aria-label="Close"></button>136    <div class="title">Settings</div>137  </div>138 139  <!-- Content -->140  <div class="content">141 142    <!-- Profile -->143    <div class="profile">144      <div class="avatar">J</div>145      <div class="profile-info">146        <div class="name">Jane</div>147        <div class="edit">Edit profile</div>148      </div>149    </div>150 151    <!-- Promo Card -->152    <div class="promo">153      <h2>Upgrade to cookbook+</h2>154      <p>Search, collect, and save unlimited recipes from all around the web to your Kitchen Stories cookbooks.</p>155      <div class="green-btn">Unlock cookbook+</div>156    </div>157 158    <!-- Account Section -->159    <div class="section-title">ACCOUNT</div>160    <div class="row">161      <div>Current Plan</div>162      <div class="hint">Free</div>163    </div>164    <span class="pill-yellow">TRY COOKBOOK+</span>165 166    <!-- System Section -->167    <div class="section-title">SYSTEM</div>168 169    <div class="list-item">170      <!-- Globe icon -->171      <svg viewBox="0 0 24 24">172        <circle cx="12" cy="12" r="9" class="icon-stroke"></circle>173        <path d="M3 12h18" class="icon-stroke"></path>174        <path d="M12 3c3 3 3 15 0 18M12 3c-3 3-3 15 0 18" class="icon-stroke"></path>175      </svg>176      <div class="item-label">Languages</div>177    </div>178 179    <div class="list-item">180      <!-- Beaker icon -->181      <svg viewBox="0 0 24 24">182        <path class="icon-stroke" d="M7 3h10M9 3v6l-4 8c-1 2 1 4 3 4h8c2 0 4-2 3-4l-4-8V3"></path>183        <path class="icon-stroke" d="M9 11h6"></path>184      </svg>185      <div class="item-label">Measurement System</div>186    </div>187 188    <div class="list-item">189      <!-- Autoplay circular arrow icon -->190      <svg viewBox="0 0 24 24">191        <path class="icon-stroke" d="M12 4a8 8 0 1 1-7 5" stroke-linecap="round"></path>192        <polygon points="5,8 9,10 5,12" fill="#fff"></polygon>193      </svg>194      <div class="item-label">Video autoplay</div>195    </div>196 197  </div>198 199</div>200</body>201</html>