Download code/10045/10045_6.html from GD-ML/AndroidCode: direct link, hf CLI and curl.
- Browser
- Download file 7.21 kB
-
https://huggingface.co/datasets/GD-ML/AndroidCode/resolve/main/code/10045/10045_6.html
- Command line
-
hf download hf://datasets/GD-ML/AndroidCode/code/10045/10045_6.html
-
curl -L -o 10045_6.html https://huggingface.co/datasets/GD-ML/AndroidCode/resolve/main/code/10045/10045_6.html
7.21 kB
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=1080, initial-scale=1"> | |
| <title>Mock UI</title> | |
| <style> | |
| body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } | |
| #render-target { | |
| width: 1080px; | |
| height: 2400px; | |
| position: relative; | |
| overflow: hidden; | |
| background: #000000; | |
| color: #FFFFFF; | |
| } | |
| /* Status bar */ | |
| .status-bar { | |
| height: 110px; | |
| padding: 0 36px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| font-size: 36px; | |
| letter-spacing: 0.2px; | |
| } | |
| .status-left { display: flex; align-items: center; gap: 18px; } | |
| .status-right { display: flex; align-items: center; gap: 24px; } | |
| .icon-mini svg { display: block; } | |
| /* App bar */ | |
| .app-bar { | |
| height: 120px; | |
| padding: 0 32px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .app-left { display: flex; align-items: center; gap: 22px; } | |
| .app-title { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| font-size: 48px; | |
| font-weight: 700; | |
| } | |
| .app-actions { display: flex; align-items: center; gap: 24px; } | |
| /* Reminder block */ | |
| .reminder { | |
| padding: 12px 32px 0 32px; | |
| } | |
| .reminder-row { | |
| display: flex; | |
| align-items: flex-start; | |
| justify-content: space-between; | |
| } | |
| .reminder-left { | |
| display: flex; | |
| align-items: center; | |
| gap: 22px; | |
| } | |
| .checkbox-icon svg { display: block; } | |
| .reminder-text { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| } | |
| .due-line { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| color: #FF9800; | |
| font-size: 36px; | |
| font-weight: 800; | |
| } | |
| .repeat-line { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| color: #BDBDBD; | |
| font-size: 30px; | |
| font-weight: 500; | |
| } | |
| /* Content */ | |
| .content { | |
| padding: 36px 32px 0 32px; | |
| } | |
| .note-title { | |
| font-size: 72px; | |
| font-weight: 800; | |
| margin: 24px 0 18px 0; | |
| color: #FFFFFF; | |
| } | |
| .note-body { | |
| font-size: 42px; | |
| color: #CFCFCF; | |
| } | |
| /* Bottom toolbar */ | |
| .bottom-bar { | |
| position: absolute; | |
| left: 0; | |
| right: 0; | |
| bottom: 120px; | |
| height: 120px; | |
| padding: 0 60px; | |
| display: flex; | |
| align-items: center; | |
| gap: 80px; | |
| color: #BDBDBD; | |
| } | |
| .bottom-bar svg { display: block; } | |
| .nav-pill { | |
| position: absolute; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| bottom: 40px; | |
| width: 300px; | |
| height: 12px; | |
| background: #FFFFFF; | |
| border-radius: 8px; | |
| opacity: 0.95; | |
| } | |
| /* Helpers */ | |
| .icon { width: 56px; height: 56px; } | |
| .icon-lg { width: 64px; height: 64px; } | |
| .icon-sm { width: 44px; height: 44px; } | |
| .muted { color: #9E9E9E; } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="render-target"> | |
| <!-- Status Bar --> | |
| <div class="status-bar"> | |
| <div class="status-left"> | |
| <div>2:57</div> | |
| <!-- Simple status glyphs --> | |
| <div class="icon-mini"> | |
| <svg width="38" height="38" viewBox="0 0 24 24"> | |
| <path d="M3 17h18M6 12h12M9 7h6" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" opacity="0.85"/> | |
| </svg> | |
| </div> | |
| </div> | |
| <div class="status-right"> | |
| <div class="icon-mini"> | |
| <svg width="38" height="38" viewBox="0 0 24 24"> | |
| <path d="M3 10a9 9 0 0 1 18 0" stroke="#FFFFFF" stroke-width="2" fill="none" opacity="0.85"/> | |
| <circle cx="12" cy="16" r="2" fill="#FFFFFF" opacity="0.85"/> | |
| </svg> | |
| </div> | |
| <div class="icon-mini"> | |
| <svg width="38" height="38" viewBox="0 0 24 24"> | |
| <rect x="3" y="7" width="18" height="10" rx="2" stroke="#FFFFFF" stroke-width="2" fill="none"/> | |
| <rect x="15" y="9" width="5" height="6" fill="#FFFFFF"/> | |
| </svg> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- App Bar --> | |
| <div class="app-bar"> | |
| <div class="app-left"> | |
| <svg class="icon" viewBox="0 0 24 24"> | |
| <path d="M15 18l-6-6 6-6" stroke="#FFFFFF" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/> | |
| </svg> | |
| <div class="app-title"><span>👋</span><span>Welcome</span> | |
| <svg class="icon-sm" viewBox="0 0 24 24"> | |
| <path d="M6 9l6 6 6-6" stroke="#FFFFFF" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/> | |
| </svg> | |
| </div> | |
| </div> | |
| <div class="app-actions"> | |
| <svg class="icon" viewBox="0 0 24 24"> | |
| <circle cx="12" cy="5" r="2" fill="#FFFFFF"/> | |
| <circle cx="12" cy="12" r="2" fill="#FFFFFF"/> | |
| <circle cx="12" cy="19" r="2" fill="#FFFFFF"/> | |
| </svg> | |
| </div> | |
| </div> | |
| <!-- Reminder --> | |
| <div class="reminder"> | |
| <div class="reminder-row"> | |
| <div class="reminder-left"> | |
| <div class="checkbox-icon"> | |
| <svg class="icon-lg" viewBox="0 0 24 24"> | |
| <rect x="3" y="3" width="18" height="18" rx="2" stroke="#9E9E9E" stroke-width="2" fill="none"/> | |
| </svg> | |
| </div> | |
| <div class="reminder-text"> | |
| <div class="due-line"> | |
| <svg class="icon-sm" viewBox="0 0 24 24"> | |
| <circle cx="12" cy="12" r="8" stroke="#FF9800" stroke-width="2" fill="none"/> | |
| <path d="M12 12V8M12 12l4 2" stroke="#FF9800" stroke-width="2" stroke-linecap="round"/> | |
| </svg> | |
| <span>2 days later, Aug 13, 06:00PM</span> | |
| </div> | |
| <div class="repeat-line"> | |
| <svg class="icon-sm" viewBox="0 0 24 24"> | |
| <path d="M6 9a6 6 0 1 1 0 6M6 9V6l-3 3" stroke="#BDBDBD" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/> | |
| </svg> | |
| <span>Daily</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="app-actions"> | |
| <svg class="icon-lg" viewBox="0 0 24 24"> | |
| <path d="M6 4v16M6 4h10l-3 4 3 4H6" stroke="#FFFFFF" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/> | |
| </svg> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Content --> | |
| <div class="content"> | |
| <div class="note-title">Rent is due</div> | |
| <div class="note-body">its a new month</div> | |
| </div> | |
| <!-- Bottom toolbar --> | |
| <div class="bottom-bar"> | |
| <!-- Tag icon --> | |
| <svg class="icon-lg" viewBox="0 0 24 24"> | |
| <path d="M3 12l9-9h6l3 3v6l-9 9-9-9z" stroke="#BDBDBD" stroke-width="2" fill="none" stroke-linejoin="round"/> | |
| <circle cx="16" cy="8" r="2" fill="#BDBDBD"/> | |
| </svg> | |
| <!-- List icon --> | |
| <svg class="icon-lg" viewBox="0 0 24 24"> | |
| <circle cx="5" cy="6" r="2" fill="#BDBDBD"/> | |
| <circle cx="5" cy="12" r="2" fill="#BDBDBD"/> | |
| <circle cx="5" cy="18" r="2" fill="#BDBDBD"/> | |
| <path d="M10 6h10M10 12h10M10 18h10" stroke="#BDBDBD" stroke-width="2" stroke-linecap="round"/> | |
| </svg> | |
| <!-- Image icon --> | |
| <svg class="icon-lg" viewBox="0 0 24 24"> | |
| <rect x="3" y="4" width="18" height="16" rx="2" stroke="#BDBDBD" stroke-width="2" fill="none"/> | |
| <circle cx="9" cy="9" r="2" fill="#BDBDBD"/> | |
| <path d="M4 18l6-5 4 3 6-6 1 8H4z" fill="#BDBDBD" opacity="0.5"/> | |
| </svg> | |
| </div> | |
| <!-- Navigation pill --> | |
| <div class="nav-pill"></div> | |
| </div> | |
| </body> | |
| </html> |