GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Tasks - Add Reminder</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;10    position: relative; overflow: hidden;11    background: #1b1b1b;12    border-radius: 0;13  }14  /* Status bar */15  .status-bar {16    position: absolute; top: 0; left: 0; right: 0;17    height: 80px; background: #0e4f86; color: #e9f2fb;18    display: flex; align-items: center; padding: 0 32px; font-weight: 600; letter-spacing: 0.5px;19  }20  .status-left { flex: 1; font-size: 36px; }21  .status-right { display: flex; gap: 22px; align-items: center; }22  .sb-dot { width: 10px; height: 10px; background: #e9f2fb; border-radius: 50%; display: inline-block; }23  /* App bar */24  .app-bar {25    position: absolute; top: 80px; left: 0; right: 0;26    height: 140px; background: #0e4f86; color: #cde6ff;27    display: flex; align-items: center; padding: 0 36px;28    box-shadow: 0 2px 0 rgba(255,255,255,0.05) inset;29  }30  .app-title { font-size: 72px; font-weight: 700; margin-left: 24px; }31  .app-actions { margin-left: auto; display: flex; gap: 40px; align-items: center; }32  .icon { width: 56px; height: 56px; fill: none; stroke: #cde6ff; stroke-width: 6; }33  .icon-fill { fill: #cde6ff; stroke: none; }34  .hamburger { margin-right: 12px; }35  /* Warning banner */36  .warn {37    position: absolute; top: 220px; left: 0; right: 0;38    height: 96px; background: transparent; display: flex; align-items: center;39    padding: 0 36px; color: #d64e4e; font-size: 38px;40  }41  .warn .enable {42    margin-left: auto; background: #1f79c7; color: #e9f2fb; border-radius: 10px;43    padding: 14px 26px; font-weight: 700; box-shadow: 0 2px 0 rgba(0,0,0,0.2);44  }45  .content {46    position: absolute; top: 320px; left: 30px; right: 30px; bottom: 210px;47  }48  /* Reminder card */49  .card {50    width: 1020px; margin: 0 auto;51    background: #343434; border-radius: 12px;52    box-shadow: 0 24px 40px rgba(0,0,0,0.6);53    overflow: hidden;54  }55  .card-header {56    background: #2aa0ff; color: white; height: 120px;57    display: flex; align-items: center; padding: 0 28px;58  }59  .card-header .title { font-size: 50px; font-weight: 700; margin-left: 22px; }60  .save-btn {61    margin-left: auto; background: #ffffff; color: #2aa0ff; border-radius: 14px;62    padding: 16px 28px; font-weight: 800; font-size: 40px; box-shadow: 0 2px 0 rgba(0,0,0,0.2);63  }64  .row {65    height: 120px; display: flex; align-items: center;66    padding: 0 28px; color: #e6e6e6; font-size: 42px; border-top: 1px solid #3f3f3f;67  }68  .row:first-of-type { border-top: none; }69  .row .left-icon { width: 72px; display: flex; align-items: center; justify-content: center; margin-right: 26px; }70  .row .text { flex: 1; }71  .row .hint { color: #7eaee8; font-size: 36px; margin-right: 24px; }72  .row .trail { width: 60px; display: flex; align-items: center; justify-content: center; }73  /* Bottom ad placeholder */74  .ad-banner {75    position: absolute; left: 0; right: 0; bottom: 90px; height: 170px;76    background: #E0E0E0; border: 1px solid #BDBDBD;77    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 42px; font-weight: 700;78  }79  /* Home gesture pill */80  .home-pill {81    position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);82    width: 220px; height: 12px; background: #e6e6e6; border-radius: 8px; opacity: 0.8;83  }84</style>85</head>86<body>87<div id="render-target">88  <!-- Status bar -->89  <div class="status-bar">90    <div class="status-left">6:05</div>91    <div class="status-right">92      <span class="sb-dot"></span>93      <span class="sb-dot"></span>94      <span class="sb-dot"></span>95      <svg class="icon" viewBox="0 0 24 24"><path d="M3 18h18" stroke="#e9f2fb"/><path d="M20 6l-4 4" stroke="#e9f2fb"/></svg>96      <svg class="icon" viewBox="0 0 24 24"><rect x="6" y="4" width="12" height="16" rx="2" ry="2" stroke="#e9f2fb"/></svg>97    </div>98  </div>99 100  <!-- App bar -->101  <div class="app-bar">102    <div class="hamburger">103      <svg class="icon" viewBox="0 0 24 24"><path d="M3 6h18M3 12h18M3 18h18"/></svg>104    </div>105    <div class="app-title">Tasks</div>106    <div class="app-actions">107      <svg class="icon" viewBox="0 0 24 24">108        <circle cx="12" cy="12" r="9"></circle>109        <path d="M12 7v10M7 12h10"></path>110      </svg>111      <svg class="icon" viewBox="0 0 24 24">112        <circle cx="12" cy="12" r="9"></circle>113        <path d="M9 12l2 2 4-4" stroke-linecap="round" stroke-linejoin="round"></path>114      </svg>115      <svg class="icon" viewBox="0 0 24 24">116        <circle cx="11" cy="11" r="7"></circle>117        <path d="M20 20l-4-4"></path>118      </svg>119    </div>120  </div>121 122  <!-- Warning banner -->123  <div class="warn">124    <svg class="icon" viewBox="0 0 24 24">125      <circle cx="12" cy="12" r="10" stroke="#d64e4e"></circle>126      <path d="M12 7v6M12 17v0" stroke="#d64e4e" stroke-linecap="round"></path>127    </svg>128    <div style="margin-left: 16px;">Please allow app to send you notification</div>129    <div class="enable">Enable</div>130  </div>131 132  <!-- Content -->133  <div class="content">134    <div class="card">135      <div class="card-header">136        <svg class="icon" viewBox="0 0 24 24">137          <path d="M5 5l14 14M19 5L5 19" stroke="#ffffff"></path>138        </svg>139        <div class="title">Add Reminder</div>140        <div class="save-btn">SAVE</div>141      </div>142 143      <div class="row">144        <div class="left-icon">145          <svg class="icon" viewBox="0 0 24 24">146            <rect x="9" y="5" width="6" height="10" rx="3" stroke="#bdbdbd"></rect>147            <path d="M7 11v1a5 5 0 0010 0v-1M12 16v3" stroke="#bdbdbd"></path>148          </svg>149        </div>150        <div class="text">Remind me to..</div>151        <div class="trail">152          <svg class="icon" viewBox="0 0 24 24">153            <rect x="9" y="5" width="6" height="10" rx="3" stroke="#bdbdbd"></rect>154            <path d="M7 11v1a5 5 0 0010 0v-1M12 16v3" stroke="#bdbdbd"></path>155          </svg>156        </div>157      </div>158 159      <div class="row">160        <div class="left-icon">161          <svg class="icon" viewBox="0 0 24 24">162            <rect x="9" y="5" width="6" height="10" rx="3" stroke="#bdbdbd"></rect>163            <path d="M7 11v1a5 5 0 0010 0v-1M12 16v3" stroke="#bdbdbd"></path>164          </svg>165        </div>166        <div class="text">Write short note</div>167        <div class="trail">168          <svg class="icon" viewBox="0 0 24 24">169            <rect x="9" y="5" width="6" height="10" rx="3" stroke="#bdbdbd"></rect>170            <path d="M7 11v1a5 5 0 0010 0v-1M12 16v3" stroke="#bdbdbd"></path>171          </svg>172        </div>173      </div>174 175      <div class="row">176        <div class="left-icon">177          <svg class="icon" viewBox="0 0 24 24">178            <rect x="4" y="5" width="16" height="14" rx="2" stroke="#bdbdbd"></rect>179            <path d="M8 3v4M16 3v4M4 10h16" stroke="#bdbdbd"></path>180          </svg>181        </div>182        <div class="text">Wed, Oct 11, 2023</div>183        <div class="trail">184          <svg class="icon" viewBox="0 0 24 24">185            <path d="M5 5l14 14M19 5L5 19" stroke="#bdbdbd"></path>186          </svg>187        </div>188      </div>189 190      <div class="row">191        <div class="left-icon">192          <svg class="icon" viewBox="0 0 24 24">193            <circle cx="12" cy="8" r="3" stroke="#bdbdbd"></circle>194            <path d="M5 20a7 7 0 0114 0" stroke="#bdbdbd"></path>195          </svg>196        </div>197        <div class="text">06:15 PM</div>198        <div class="hint">+Add more time</div>199        <div class="trail">200          <svg class="icon" viewBox="0 0 24 24">201            <path d="M5 5l14 14M19 5L5 19" stroke="#bdbdbd"></path>202          </svg>203        </div>204      </div>205 206      <div class="row">207        <div class="left-icon">208          <svg class="icon" viewBox="0 0 24 24">209            <circle cx="12" cy="12" r="9" stroke="#bdbdbd"></circle>210            <path d="M12 7v6l4 2" stroke="#bdbdbd"></path>211          </svg>212        </div>213        <div class="text">Remind me before</div>214        <div class="trail">215          <svg class="icon" viewBox="0 0 24 24">216            <path d="M9 6l6 6-6 6" stroke="#bdbdbd" stroke-linecap="round" stroke-linejoin="round"></path>217          </svg>218        </div>219      </div>220 221      <div class="row">222        <div class="left-icon">223          <svg class="icon" viewBox="0 0 24 24">224            <path d="M4 12h12" stroke="#bdbdbd"></path>225            <path d="M16 10l4 2-4 2" stroke="#bdbdbd"></path>226          </svg>227        </div>228        <div class="text">Repeat: No repeat</div>229        <div class="trail">230          <svg class="icon" viewBox="0 0 24 24">231            <path d="M9 6l6 6-6 6" stroke="#bdbdbd" stroke-linecap="round" stroke-linejoin="round"></path>232          </svg>233        </div>234      </div>235    </div>236  </div>237 238  <!-- Bottom ad placeholder -->239  <div class="ad-banner">[IMG: Ad banner - Flash Deal]</div>240 241  <!-- Home gesture pill -->242  <div class="home-pill"></div>243</div>244</body>245</html>