GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Tasks - Add Reminder</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px; height: 2400px; position: relative; overflow: hidden;9 background: #121212; color: #fff;10 }11 12 /* Status bar */13 .status-bar {14 position: absolute; top: 0; left: 0; width: 1080px; height: 90px;15 background: #0e3a6b; color: #fff; font-weight: 600;16 display: flex; align-items: center; justify-content: space-between;17 padding: 0 24px; font-size: 34px;18 }19 .status-icons { display: flex; align-items: center; gap: 16px; }20 .dot { width: 12px; height: 12px; background: #ffffffaa; border-radius: 50%; }21 .pill {22 padding: 10px 22px; border-radius: 24px; background: #e9f1ff; color: #2b6df7; font-weight: 700;23 }24 25 /* App bar */26 .app-bar {27 position: absolute; top: 90px; left: 0; width: 1080px; height: 130px;28 background: #1c5aa4; display: flex; align-items: center; padding: 0 26px; box-sizing: border-box;29 }30 .app-title { font-size: 56px; font-weight: 700; margin-left: 22px; }31 .app-actions { margin-left: auto; display: flex; align-items: center; gap: 36px; }32 .icon-btn svg { width: 52px; height: 52px; fill: #fff; opacity: 0.95; }33 34 /* Overlay card (Add Reminder) */35 .sheet {36 position: absolute; left: 30px; right: 30px; top: 220px;37 background: #3a3a3a; border-radius: 14px; box-shadow: 0 20px 40px rgba(0,0,0,0.6);38 overflow: hidden;39 }40 .sheet-header {41 background: #4285f4; height: 110px; display: flex; align-items: center;42 padding: 0 24px; box-sizing: border-box;43 }44 .sheet-header .title { font-size: 46px; font-weight: 700; margin-left: 16px; }45 .sheet-header .close { width: 46px; height: 46px; }46 .sheet-header .save { margin-left: auto; background: #ffffff; color: #2b6df7; font-weight: 800; padding: 18px 28px; border-radius: 18px; font-size: 34px; }47 48 .row {49 height: 110px; border-bottom: 1px solid #555; display: flex; align-items: center;50 padding: 0 28px; box-sizing: border-box; font-size: 38px;51 }52 .row .label { margin-left: 18px; flex: 1; }53 .row .hint { color: #cfcfcf; }54 .row .right { display: flex; align-items: center; gap: 22px; }55 .row .link { color: #73a6ff; font-size: 34px; }56 .row .chevron svg { width: 40px; height: 40px; fill: #bbb; }57 .row .icon svg { width: 40px; height: 40px; fill: #ddd; }58 .xicon svg { width: 38px; height: 38px; fill: #aaa; }59 .note {60 color: #ff5b5b; font-size: 32px; padding: 24px 28px 20px; line-height: 1.4;61 }62 .gotit {63 position: absolute; right: 28px; bottom: 20px; background: #2b2b2b; color: #9ec1ff;64 border-radius: 24px; padding: 16px 24px; font-size: 34px; border: 1px solid #4b4b4b;65 }66 67 /* Keyboard */68 .keyboard {69 position: absolute; left: 0; bottom: 0; width: 1080px; height: 920px;70 background: #0f0f10; border-top: 1px solid #2a2a2a;71 }72 .kb-suggestions {73 height: 120px; display: flex; align-items: center; gap: 16px; padding: 0 24px;74 background: #182023; color: #e6e6e6; font-size: 42px; box-sizing: border-box;75 }76 .chip {77 display: inline-flex; align-items: center; padding: 14px 22px; background: #243037; border-radius: 22px; border: 1px solid #3d4a52;78 }79 80 .kb-row { display: flex; justify-content: space-between; padding: 0 24px; margin-top: 18px; }81 .key {82 width: 90px; height: 120px; background: #2b2b2c; border-radius: 22px; display: flex;83 align-items: center; justify-content: center; color: #fff; font-size: 46px; border: 1px solid #3a3a3a;84 }85 .key.wide { width: 130px; }86 .key.space { flex: 1; height: 120px; margin: 0 16px; background: #2b2b2c; border-radius: 28px; }87 .key.enter { background: #7ff1f1; color: #0d3b3b; font-weight: 800; }88 .key.dark { background: #1e1e1f; }89 .indent { padding-left: 40px; padding-right: 40px; }90 91 /* Under content text for realism */92 .under-text {93 position: absolute; left: 24px; top: 1510px; color: #a8e063; font-size: 54px; font-weight: 700;94 }95</style>96</head>97<body>98<div id="render-target">99 100 <div class="status-bar">101 <div style="display:flex; align-items:center; gap:18px;">102 <div>6:46</div>103 <div class="status-icons">104 <div class="dot"></div>105 <div class="dot"></div>106 <div class="dot"></div>107 <div class="dot"></div>108 <div class="dot"></div>109 </div>110 </div>111 <div class="status-icons">112 <div class="dot" style="width:18px;height:18px;"></div>113 <div class="dot" style="width:18px;height:18px;"></div>114 </div>115 </div>116 117 <div class="app-bar">118 <div class="icon-btn">119 <svg viewBox="0 0 24 24"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg>120 </div>121 <div class="app-title">Tasks</div>122 <div class="app-actions">123 <div class="icon-btn"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M11 6h2v12h-2zM6 11h12v2H6z" fill="#1c5aa4"/></svg></div>124 <div class="icon-btn"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="none" stroke="#fff" stroke-width="2"/><path d="M7 12l3 3 7-7" stroke="#fff" stroke-width="2" fill="none"/></svg></div>125 <div class="icon-btn"><svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8" fill="none" stroke="#fff" stroke-width="2"/><path d="M20 20l-4-4" stroke="#fff" stroke-width="2" fill="none"/></svg></div>126 </div>127 </div>128 129 <!-- Add Reminder Sheet -->130 <div class="sheet">131 <div class="sheet-header">132 <div class="close">133 <svg viewBox="0 0 24 24"><path fill="#fff" d="M18.3 5.7L12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3 10.6 10.6l6.3-6.3z"/></svg>134 </div>135 <div class="title">Add Reminder</div>136 <div class="save">SAVE</div>137 </div>138 139 <div class="row">140 <div class="label" style="font-weight:700;">Dance performance</div>141 <div class="right">142 <div class="icon">143 <svg viewBox="0 0 24 24"><path d="M12 2a3 3 0 013 3v6a3 3 0 11-6 0V5a3 3 0 013-3zm-5 18h10v2H7z"/></svg>144 </div>145 </div>146 </div>147 148 <div class="row">149 <div class="label hint">Write short note</div>150 <div class="right">151 <div class="icon">152 <svg viewBox="0 0 24 24"><path d="M12 2a3 3 0 013 3v6a3 3 0 11-6 0V5a3 3 0 013-3zm-5 18h10v2H7z"/></svg>153 </div>154 </div>155 </div>156 157 <div class="row">158 <div class="icon"><svg viewBox="0 0 24 24"><path d="M7 2h10v2H7z"/><path d="M5 6h14v14H5zM8 10h3v3H8zM13 10h3v3h-3zM8 14h3v3H8zM13 14h3v3h-3z"/></svg></div>159 <div class="label">Wed, Sep 27, 2023</div>160 <div class="right">161 <div class="xicon"><svg viewBox="0 0 24 24"><path d="M18.3 5.7L12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3 10.6 10.6l6.3-6.3z"/></svg></div>162 </div>163 </div>164 165 <div class="row">166 <div class="icon"><svg viewBox="0 0 24 24"><path d="M12 7a5 5 0 100 10 5 5 0 000-10zm1-5h-2v4h2z"/></svg></div>167 <div class="label">06:55 PM</div>168 <div class="right">169 <div class="link">+Add more time</div>170 <div class="xicon"><svg viewBox="0 0 24 24"><path d="M18.3 5.7L12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3 10.6 10.6l6.3-6.3z"/></svg></div>171 </div>172 </div>173 174 <div class="row">175 <div class="icon"><svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 100 20 10 10 0 000-20zm1 5h-2v6h6v-2h-4z"/></svg></div>176 <div class="label">Remind me before</div>177 <div class="right chevron"><svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" /></svg></div>178 </div>179 180 <div class="row">181 <div class="icon"><svg viewBox="0 0 24 24"><path d="M12 4l-1.4 1.4L14.2 9H8v2h6.2l-3.6 3.6L12 16l6-6z"/></svg></div>182 <div class="label">Repeat: No repeat</div>183 <div class="right chevron"><svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"/></svg></div>184 </div>185 186 <div class="note">NOTE: You can change a Date Time picker from app settings.</div>187 <div class="gotit">Got it</div>188 </div>189 190 <div class="under-text">Upcoming</div>191 192 <!-- Keyboard -->193 <div class="keyboard">194 <div class="kb-suggestions">195 <div style="width:60px;height:60px;border-radius:14px;background:#2b2b2c;display:flex;align-items:center;justify-content:center;border:1px solid #3a3a3a;">⌁</div>196 <div class="chip">performance</div>197 <div class="chip">performances</div>198 <div style="margin-left:auto; width:70px; height:70px; background:#243037; border-radius:18px; display:flex; align-items:center; justify-content:center;">🎤</div>199 </div>200 201 <div class="kb-row">202 <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div><div class="key">t</div>203 <div class="key">y</div><div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>204 </div>205 206 <div class="kb-row indent">207 <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div>208 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>209 </div>210 211 <div class="kb-row">212 <div class="key wide dark">⇧</div>213 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div>214 <div class="key">n</div><div class="key">m</div>215 <div class="key wide dark">⌫</div>216 </div>217 218 <div class="kb-row">219 <div class="key wide dark">?123</div>220 <div class="key wide dark">,</div>221 <div class="key wide dark">☺</div>222 <div class="key space"></div>223 <div class="key dark">.</div>224 <div class="key enter">↵</div>225 </div>226 </div>227 228</div>229</body>230</html>