GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Calendar Settings UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #121212;14 color: #EDEDED;15 }16 17 /* Status bar */18 .status-bar {19 height: 90px;20 padding: 0 36px;21 display: flex;22 align-items: center;23 justify-content: space-between;24 color: #EDEDED;25 font-size: 36px;26 letter-spacing: 1px;27 }28 .status-icons {29 display: flex;30 align-items: center;31 gap: 20px;32 }33 .dot { width: 10px; height: 10px; background: #EDEDED; border-radius: 50%; opacity: 0.8; }34 .battery {35 width: 48px; height: 26px; border: 3px solid #EDEDED; border-radius: 6px; position: relative;36 }37 .battery::after { content: ""; position: absolute; right: -10px; top: 7px; width: 8px; height: 12px; background: #EDEDED; border-radius: 2px; }38 .battery .level { position: absolute; left: 3px; top: 3px; height: 18px; width: 26px; background: #EDEDED; }39 40 /* App bar */41 .app-bar {42 height: 120px;43 display: flex;44 align-items: center;45 padding: 0 28px;46 border-bottom: 1px solid #1f1f1f;47 }48 .title { font-size: 54px; font-weight: 600; margin-left: 18px; }49 .spacer { flex: 1; }50 .icon-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }51 52 /* List */53 .content { position: absolute; left: 0; right: 0; top: 210px; bottom: 0; overflow-y: auto; }54 .item {55 position: relative;56 padding: 34px 40px;57 border-bottom: 1px solid #1f1f1f;58 }59 .item .label { font-size: 44px; line-height: 1.2; }60 .item .sub {61 font-size: 34px;62 color: #9AA0A6;63 margin-top: 16px;64 }65 66 /* Toggle switch */67 .toggle {68 position: absolute;69 right: 40px;70 top: 40px;71 width: 170px;72 height: 86px;73 border-radius: 86px;74 background: #3a3a3a;75 }76 .toggle .knob {77 position: absolute;78 top: 8px;79 left: 10px;80 width: 70px;81 height: 70px;82 border-radius: 50%;83 background: #A7A7A7;84 box-shadow: 0 2px 6px rgba(0,0,0,0.6);85 }86 .toggle.on { background: #598EF7; }87 .toggle.on .knob { left: 90px; background: #FFFFFF; }88 89 /* Small helper styles */90 .emoji { font-size: 36px; margin-left: 12px; }91</style>92</head>93<body>94<div id="render-target">95 96 <!-- Status bar -->97 <div class="status-bar">98 <div>6:56</div>99 <div class="status-icons">100 <div class="dot"></div>101 <div class="dot"></div>102 <div class="dot"></div>103 <div class="battery"><div class="level"></div></div>104 </div>105 </div>106 107 <!-- App bar -->108 <div class="app-bar">109 <!-- Back arrow -->110 <div class="icon-btn">111 <svg width="48" height="48" viewBox="0 0 24 24" fill="#EDEDED">112 <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/>113 </svg>114 </div>115 <div class="title">General</div>116 <div class="spacer"></div>117 <!-- More (three dots) -->118 <div class="icon-btn">119 <svg width="48" height="48" viewBox="0 0 24 24" fill="#EDEDED">120 <circle cx="12" cy="5" r="2.2"></circle>121 <circle cx="12" cy="12" r="2.2"></circle>122 <circle cx="12" cy="19" r="2.2"></circle>123 </svg>124 </div>125 </div>126 127 <!-- Content list -->128 <div class="content">129 <div class="item">130 <div class="label">Start of the week</div>131 <div class="sub">Sunday</div>132 </div>133 134 <div class="item">135 <div class="label">Use device time zone</div>136 <div class="toggle off"><div class="knob"></div></div>137 </div>138 139 <div class="item">140 <div class="label">Time zone</div>141 <div class="sub">Eastern Daylight Time GMT-4 <span class="emoji">☀️</span></div>142 </div>143 144 <div class="item">145 <div class="label">Alternate calendar</div>146 <div class="sub">No alternate calendar</div>147 </div>148 149 <div class="item">150 <div class="label">Show week number</div>151 <div class="toggle off"><div class="knob"></div></div>152 </div>153 154 <div class="item">155 <div class="label">Show declined events</div>156 <div class="toggle on"><div class="knob"></div></div>157 </div>158 159 <div class="item">160 <div class="label">Display shorter entries the same size as 30-minute entries</div>161 <div class="toggle off"><div class="knob"></div></div>162 </div>163 164 <div class="item">165 <div class="label">Default event duration</div>166 </div>167 168 <div class="item">169 <div class="label">Adding invitations</div>170 </div>171 172 <div class="item">173 <div class="label">Add video conferencing</div>174 </div>175 176 <div class="item">177 <div class="label">Theme</div>178 <div class="sub">System default</div>179 </div>180 181 <div class="item">182 <div class="label">Notifications</div>183 </div>184 185 <div class="item">186 <div class="label">Notify on this device</div>187 <div class="toggle on"><div class="knob"></div></div>188 </div>189 </div>190 191</div>192</body>193</html>