GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>Language Settings UI</title>6<style>7 body { margin:0; padding:0; background:transparent; }8 #render-target{9 width:1080px; height:2400px;10 position:relative; overflow:hidden;11 background:#ffffff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;12 color:#222;13 }14 15 /* Status bar */16 .status-bar{17 height:90px; padding:0 32px;18 display:flex; align-items:center; justify-content:space-between;19 color:#444; font-size:34px; letter-spacing:0.5px;20 }21 .status-icons{ display:flex; align-items:center; gap:24px; }22 .icon{ width:38px; height:38px; display:inline-block; }23 24 /* App bar */25 .app-bar{26 height:128px; display:flex; align-items:center;27 padding:0 24px 0 16px; border-bottom:1px solid #eee;28 }29 .app-bar .back{30 width:90px; height:128px; display:flex; align-items:center; justify-content:center;31 }32 .app-title{33 font-size:52px; font-weight:600; color:#222; margin-left:6px;34 }35 .ok-btn{36 margin-left:auto; font-size:40px; color:#777;37 }38 39 /* Sections */40 .section-label{41 background:#f3f3f3; color:#9a9a9a;42 font-size:34px; padding:28px 36px; border-top:1px solid #ececec; border-bottom:1px solid #ececec;43 }44 45 .list{46 background:#fff;47 }48 .item{49 height:132px; display:flex; align-items:center;50 padding:0 36px; border-bottom:1px solid #eee;51 position:relative;52 }53 .item .title{54 font-size:44px; color:#333;55 }56 .value{57 margin-left:auto; display:flex; align-items:center; gap:18px;58 color:#8a8a8a; font-size:40px;59 }60 .chev{61 width:26px; height:26px; opacity:0.45;62 }63 64 /* Language tags */65 .lang-tag{66 font-size:34px; font-weight:600; letter-spacing:1px;67 color:#00b2a6; position:relative; margin-left:26px;68 }69 .lang-tag::after{70 content:""; position:absolute; left:0; right:0; bottom:-8px; height:6px; border-radius:3px; background:#00b2a6;71 }72 .lang-tag.blue{ color:#3e6bff; }73 .lang-tag.blue::after{ background:#cfd6ff; height:10px; border-radius:5px; }74 75 /* Info area */76 .promo{77 background:#f6f6f6; margin-top:36px; padding:36px 40px 28px; border-top:1px solid #eee;78 }79 .promo .headline{80 color:#7f8cff; font-weight:700; text-align:center; font-size:42px; margin:10px 0 28px;81 }82 .promo p{83 margin:12px 0; color:#9b9b9b; font-size:38px; line-height:1.4;84 }85 86 /* Bottom gesture bar */87 .gesture{88 position:absolute; left:0; right:0; bottom:30px; height:24px; display:flex; justify-content:center; pointer-events:none;89 }90 .gesture .pill{91 width:300px; height:12px; background:#d6d6d6; border-radius:10px;92 }93</style>94</head>95<body>96<div id="render-target">97 98 <!-- Status bar -->99 <div class="status-bar">100 <div class="time">12:31</div>101 <div class="status-icons">102 <!-- simple icons -->103 <svg class="icon" viewBox="0 0 24 24">104 <path d="M12 3l9 9h-3l-6-6-6 6H3z" fill="#8a8a8a"/>105 </svg>106 <svg class="icon" viewBox="0 0 24 24">107 <circle cx="12" cy="12" r="10" fill="#bdbdbd"/>108 </svg>109 <svg class="icon" viewBox="0 0 24 24">110 <rect x="3" y="7" width="16" height="10" rx="2" ry="2" fill="none" stroke="#8a8a8a" stroke-width="2"/>111 <rect x="5" y="9" width="12" height="6" fill="#8a8a8a"/>112 <rect x="19.5" y="10" width="2.5" height="4" fill="#8a8a8a"/>113 </svg>114 </div>115 </div>116 117 <!-- App bar -->118 <div class="app-bar">119 <div class="back">120 <svg width="54" height="54" viewBox="0 0 24 24">121 <path d="M15 18l-6-6 6-6" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>122 </svg>123 </div>124 <div class="app-title">Language</div>125 <div class="ok-btn">OK</div>126 </div>127 128 <!-- Native/Teach -->129 <div class="section-label">Native/Teach</div>130 <div class="list">131 <div class="item">132 <div class="title">Native</div>133 <div class="lang-tag">EN</div>134 <div class="value">135 <span>English</span>136 <svg class="chev" viewBox="0 0 24 24">137 <path d="M8 5l8 7-8 7" fill="none" stroke="#888" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>138 </svg>139 </div>140 </div>141 142 <div class="item">143 <div class="title">Teach 1</div>144 <div class="value">145 <svg class="chev" viewBox="0 0 24 24">146 <path d="M8 5l8 7-8 7" fill="none" stroke="#888" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>147 </svg>148 </div>149 </div>150 151 <div class="item">152 <div class="title">Teach 2</div>153 <div class="value">154 <svg class="chev" viewBox="0 0 24 24">155 <path d="M8 5l8 7-8 7" fill="none" stroke="#888" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>156 </svg>157 </div>158 </div>159 </div>160 161 <!-- Learn -->162 <div class="section-label" style="margin-top:18px;">Learn</div>163 <div class="list">164 <div class="item">165 <div class="title">Learn 1</div>166 <div class="lang-tag blue">DE</div>167 <div class="value">168 <span>Deutsch</span>169 <svg class="chev" viewBox="0 0 24 24">170 <path d="M8 5l8 7-8 7" fill="none" stroke="#888" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>171 </svg>172 </div>173 </div>174 175 <div class="item">176 <div class="title">Learn 2</div>177 <div class="value">178 <svg class="chev" viewBox="0 0 24 24">179 <path d="M8 5l8 7-8 7" fill="none" stroke="#888" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>180 </svg>181 </div>182 </div>183 184 <div class="item">185 <div class="title">Learn 3</div>186 <div class="value">187 <svg class="chev" viewBox="0 0 24 24">188 <path d="M8 5l8 7-8 7" fill="none" stroke="#888" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>189 </svg>190 </div>191 </div>192 </div>193 194 <!-- Info / promo -->195 <div class="promo">196 <div class="headline">Enjoy the benefits of adding multiple languages</div>197 <p>You may change your learning language once every 2 days.</p>198 <p>Teach and learn multiple languages to boost the reach of your profile.</p>199 </div>200 201 <!-- Gesture bar -->202 <div class="gesture">203 <div class="pill"></div>204 </div>205 206</div>207</body>208</html>