GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Calendar Settings - General</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 position: relative;9 width: 1080px;10 height: 2400px;11 overflow: hidden;12 background: #0f1111; /* app surface (dark) */13 color: #EDEDED;14 }15 16 /* Status bar */17 .status-bar {18 height: 90px;19 padding: 0 40px;20 display: flex;21 align-items: center;22 justify-content: space-between;23 color: #DADADA;24 font-size: 34px;25 letter-spacing: 0.5px;26 }27 .status-right {28 display: flex;29 gap: 30px;30 align-items: center;31 }32 .status-icon {33 width: 28px; height: 28px; border-radius: 50%;34 background: #CFCFCF;35 opacity: 0.8;36 }37 38 /* App bar */39 .app-bar {40 display: flex;41 align-items: center;42 padding: 10px 32px 20px 20px;43 height: 140px;44 }45 .app-title {46 font-size: 52px;47 font-weight: 600;48 margin-left: 18px;49 flex: 1;50 }51 .icon-btn {52 width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;53 border-radius: 36px;54 }55 .icon-svg { fill: #EDEDED; }56 57 /* Content list */58 .content {59 padding: 10px 40px 40px 40px;60 }61 .item {62 padding: 34px 8px 34px 8px;63 border-bottom: 1px solid #1a1a1a;64 display: flex;65 align-items: center;66 gap: 20px;67 }68 .item .left {69 flex: 1;70 }71 .label {72 font-size: 38px;73 line-height: 46px;74 font-weight: 600;75 }76 .sublabel {77 font-size: 28px;78 color: #9AA0A6;79 margin-top: 10px;80 }81 .value {82 font-size: 34px;83 color: #CFCFCF;84 }85 86 /* Switch */87 .switch {88 position: relative;89 width: 220px;90 height: 96px;91 border-radius: 48px;92 background: #3C3C3C;93 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);94 }95 .switch .knob {96 position: absolute;97 top: 8px;98 left: 8px;99 width: 80px;100 height: 80px;101 border-radius: 40px;102 background: #BEBEBE;103 box-shadow: 0 2px 6px rgba(0,0,0,0.4);104 }105 .switch.on { background: #63C178; }106 .switch.on .knob { left: 132px; background: #DDF3E1; }107 108 .section-title {109 font-size: 34px;110 color: #B8B8B8;111 padding: 36px 8px 18px 8px;112 }113</style>114</head>115<body>116<div id="render-target">117 118 <!-- Status bar -->119 <div class="status-bar">120 <div>9:54</div>121 <div class="status-right">122 <div class="status-icon"></div>123 <div class="status-icon"></div>124 <div class="status-icon"></div>125 <div class="status-icon"></div>126 </div>127 </div>128 129 <!-- App bar -->130 <div class="app-bar">131 <div class="icon-btn">132 <svg class="icon-svg" width="52" height="52" viewBox="0 0 24 24">133 <path d="M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>134 </svg>135 </div>136 <div class="app-title">General</div>137 <div class="icon-btn">138 <svg class="icon-svg" width="52" height="52" viewBox="0 0 24 24">139 <circle cx="12" cy="5" r="2.2"></circle>140 <circle cx="12" cy="12" r="2.2"></circle>141 <circle cx="12" cy="19" r="2.2"></circle>142 </svg>143 </div>144 </div>145 146 <!-- Content -->147 <div class="content">148 <!-- Start of week -->149 <div class="item">150 <div class="left">151 <div class="label">Start of the week</div>152 </div>153 <div class="value">Sunday</div>154 </div>155 156 <!-- Use device time zone -->157 <div class="item">158 <div class="left">159 <div class="label">Use device time zone</div>160 </div>161 <div class="switch on"><div class="knob"></div></div>162 </div>163 <div class="item" style="border-bottom:none; padding-top:14px; padding-bottom:28px;">164 <div class="left">165 <div class="sublabel">Time zone</div>166 </div>167 <div class="sublabel">India Standard Time GMT+5:30</div>168 </div>169 <div style="height:1px; background:#1a1a1a; margin:0 8px 0 8px;"></div>170 171 <!-- Alternate calendar -->172 <div class="item">173 <div class="left">174 <div class="label">Alternate calendar</div>175 </div>176 <div class="value">No alternate calendar</div>177 </div>178 179 <!-- Show week number -->180 <div class="item">181 <div class="left">182 <div class="label">Show week number</div>183 </div>184 <div class="switch"><div class="knob"></div></div>185 </div>186 187 <!-- Show declined events -->188 <div class="item">189 <div class="left">190 <div class="label">Show declined events</div>191 </div>192 <div class="switch on"><div class="knob"></div></div>193 </div>194 195 <!-- Display shorter entries the same size as 30-minute entries -->196 <div class="item">197 <div class="left">198 <div class="label">Display shorter entries the same size as 30-minute entries</div>199 </div>200 <div class="switch"><div class="knob"></div></div>201 </div>202 203 <!-- Default event duration -->204 <div class="item">205 <div class="left">206 <div class="label">Default event duration</div>207 </div>208 </div>209 210 <!-- Adding invitations -->211 <div class="item">212 <div class="left">213 <div class="label">Adding invitations</div>214 </div>215 </div>216 217 <!-- Add video conferencing -->218 <div class="item">219 <div class="left">220 <div class="label">Add video conferencing</div>221 </div>222 </div>223 224 <!-- Theme -->225 <div class="item">226 <div class="left">227 <div class="label">Theme</div>228 </div>229 <div class="value">Dark</div>230 </div>231 232 <!-- Notifications header -->233 <div class="section-title">Notifications</div>234 235 <!-- Notify on this device -->236 <div class="item">237 <div class="left">238 <div class="label">Notify on this device</div>239 </div>240 <div class="switch on"><div class="knob"></div></div>241 </div>242 243 </div>244</div>245</body>246</html>