GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>All lists - Empty</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7 body { margin:0; padding:0; background:transparent; font-family: "Roboto", "Segoe UI", Arial, sans-serif; }8 #render-target {9 width:1080px; height:2400px;10 position:relative; overflow:hidden;11 background:#0f1216; color:#e9edf3;12 }13 14 /* Status bar */15 .status-bar {16 height:90px; padding:0 32px;17 display:flex; align-items:center; justify-content:space-between;18 color:#d9dce2; font-weight:600; letter-spacing:0.5px;19 font-size:34px;20 }21 .status-icons { display:flex; gap:26px; align-items:center; }22 .status-icons svg { width:38px; height:38px; fill:#cfd3da; opacity:.9; }23 24 /* App bar */25 .app-bar {26 padding:8px 32px 24px 32px;27 border-bottom:1px solid rgba(255,255,255,0.04);28 }29 .app-top {30 display:flex; align-items:center; justify-content:space-between;31 height:92px;32 }33 .icon-btn { width:72px; height:72px; display:flex; align-items:center; justify-content:center; }34 .icon-btn svg { width:50px; height:50px; fill:#dfe4ea; }35 .title { font-size:56px; font-weight:800; margin:6px 0 6px 8px; }36 .subtitle {37 display:flex; align-items:center; gap:12px;38 color:#cbd3de; margin-left:8px; font-size:40px;39 }40 .subtitle .caret { width:22px; height:22px; border-left:10px solid transparent; border-right:10px solid transparent; border-top:12px solid #cbd3de; }41 42 /* Tip banner */43 .tip {44 margin:28px 32px 18px 32px; background:#a4b5d3; color:#0c1320;45 padding:28px 28px; border-radius:18px; display:flex; align-items:center; gap:24px;46 font-size:40px;47 }48 .tip .dismiss { margin-left:auto; width:54px; height:54px; display:flex; align-items:center; justify-content:center; }49 .tip .dismiss svg { width:40px; height:40px; fill:#122033; }50 51 /* Empty state */52 .empty-state {53 position:absolute; left:0; right:0; top:930px; text-align:center; padding:0 80px;54 }55 .clock-placeholder {56 width:300px; height:300px; margin:0 auto 28px auto;57 background:#E0E0E0; border:1px solid #BDBDBD; color:#525252;58 display:flex; align-items:center; justify-content:center; border-radius:18px;59 font-size:28px;60 }61 .empty-title { font-size:72px; font-weight:800; margin-top:10px; }62 .links { margin-top:18px; display:flex; flex-direction:column; gap:18px; align-items:center; }63 .links a { color:#b8c6e7; text-decoration:underline; font-size:46px; }64 .outline-btn {65 margin:48px auto 0 auto; width:360px; height:110px;66 border:2px solid #9fb4db; border-radius:18px; color:#cfe0ff;67 font-size:44px; background:transparent;68 }69 70 /* Bottom actions */71 .quick-task {72 position:absolute; left:24px; right:24px; bottom:92px;73 height:120px; background:#1a1f26; border-radius:64px; display:flex; align-items:center;74 padding:0 34px; color:#9aa6b6; font-size:42px; gap:22px; border:1px solid rgba(255,255,255,0.06);75 }76 .quick-task svg { width:52px; height:52px; fill:#9dc1ff; }77 .fab {78 position:absolute; right:48px; bottom:260px;79 width:180px; height:180px; background:#9fbce8; color:#0f1a2b;80 border-radius:36px; display:flex; align-items:center; justify-content:center;81 box-shadow:0 10px 30px rgba(0,0,0,0.4);82 }83 .fab svg { width:90px; height:90px; fill:#0f1a2b; }84</style>85</head>86<body>87<div id="render-target">88 89 <!-- Status bar -->90 <div class="status-bar">91 <div>12:51</div>92 <div class="status-icons">93 <!-- simple icons to mimic Wi-Fi / Signal / Battery -->94 <svg viewBox="0 0 24 24"><path d="M2 9l2 2c4-4 12-4 16 0l2-2C16-1 8-1 2 9z"/><path d="M6 13l2 2c2-2 6-2 8 0l2-2c-4-4-8-4-12 0z"/><circle cx="12" cy="18" r="2"/></svg>95 <svg viewBox="0 0 24 24"><path d="M2 20h4V10H2v10zm6 0h4V6H8v14zm6 0h4V2h-4v18z"/></svg>96 <svg viewBox="0 0 24 24"><path d="M16 4h-1V2H9v2H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zM8 6h8v14H8V6z"/></svg>97 </div>98 </div>99 100 <!-- App bar -->101 <div class="app-bar">102 <div class="app-top">103 <div class="icon-btn">104 <!-- Hamburger -->105 <svg viewBox="0 0 24 24"><path d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z"/></svg>106 </div>107 <div style="display:flex; align-items:center; gap:10px;">108 <div class="icon-btn">109 <!-- Search -->110 <svg viewBox="0 0 24 24"><path d="M15.5 14h-.8l-.3-.3A6.5 6.5 0 1 0 14 15.5l.3.3v.8L20 22l2-2-6.5-6zM6.5 11A4.5 4.5 0 1 1 11 6.5 4.5 4.5 0 0 1 6.5 11z"/></svg>111 </div>112 <div class="icon-btn">113 <!-- More vert -->114 <svg viewBox="0 0 24 24"><path d="M12 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/></svg>115 </div>116 </div>117 </div>118 <div class="title">All lists</div>119 <div class="subtitle">120 <span>All todo 0</span>121 <span class="caret"></span>122 </div>123 </div>124 125 <!-- Tip banner -->126 <div class="tip">127 <div class="icon-btn" style="width:64px;height:64px;">128 <!-- Simple "long press" hand icon -->129 <svg viewBox="0 0 24 24"><path d="M7 11V6a2 2 0 1 1 4 0v5h1V7a2 2 0 1 1 4 0v6l.6-.3A2 2 0 0 1 19 15v3c0 2.8-2.2 5-5 5H9c-2.2 0-4-1.8-4-4v-6h2z"/></svg>130 </div>131 <div>Long press on any task to select many tasks</div>132 <div class="dismiss">133 <!-- Close -->134 <svg viewBox="0 0 24 24"><path d="M18 6L6 18M6 6l12 12" stroke="#122033" stroke-width="2" fill="none" stroke-linecap="round"/></svg>135 </div>136 </div>137 138 <!-- Empty state section -->139 <div class="empty-state">140 <div class="clock-placeholder">[IMG: Sleeping alarm clock]</div>141 <div class="empty-title">No tasks</div>142 <div class="links">143 <a href="#">All todo</a>144 <a href="#">All lists</a>145 </div>146 <button class="outline-btn">Finished 1</button>147 </div>148 149 <!-- Floating add button -->150 <div class="fab" title="Add task">151 <svg viewBox="0 0 24 24"><path d="M11 5h2v14h-2zM5 11h14v2H5z"/></svg>152 </div>153 154 <!-- Quick task input -->155 <div class="quick-task">156 <svg viewBox="0 0 24 24"><path d="M12 14a3 3 0 0 0 3-3V6a3 3 0 1 0-6 0v5a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 14 0h-2z"/></svg>157 <div>Quick task...</div>158 </div>159 160</div>161</body>162</html>