Download code/10045/10045_1.html from GD-ML/AndroidCode: direct link, hf CLI and curl.
- Browser
- Download file 7.66 kB
-
https://huggingface.co/datasets/GD-ML/AndroidCode/resolve/main/code/10045/10045_1.html
- Command line
-
hf download hf://datasets/GD-ML/AndroidCode/code/10045/10045_1.html
-
curl -L -o 10045_1.html https://huggingface.co/datasets/GD-ML/AndroidCode/resolve/main/code/10045/10045_1.html
7.66 kB
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=1080, initial-scale=1.0"> | |
| <title>Mobile UI Mock</title> | |
| <style> | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| background: transparent; | |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; | |
| color: #fff; | |
| } | |
| #render-target { | |
| width: 1080px; | |
| height: 2400px; | |
| position: relative; | |
| overflow: hidden; | |
| background: #000000; | |
| border-radius: 36px; | |
| box-shadow: 0 20px 60px rgba(0,0,0,0.45); | |
| } | |
| /* Status bar */ | |
| .status-bar { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 96px; | |
| padding: 0 36px; | |
| box-sizing: border-box; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| color: #ffffff; | |
| font-size: 36px; | |
| letter-spacing: 0.5px; | |
| } | |
| .status-icons { | |
| display: flex; | |
| align-items: center; | |
| gap: 24px; | |
| } | |
| .dot { | |
| width: 16px; height: 16px; background: #fff; border-radius: 50%; | |
| opacity: 0.9; | |
| } | |
| /* App header */ | |
| .app-bar { | |
| position: absolute; | |
| top: 96px; | |
| left: 0; | |
| width: 100%; | |
| height: 140px; | |
| display: flex; | |
| align-items: center; | |
| padding: 0 36px; | |
| box-sizing: border-box; | |
| } | |
| .app-bar .title { | |
| font-size: 64px; | |
| font-weight: 700; | |
| margin-left: 24px; | |
| } | |
| .app-bar .title .wave { | |
| margin-right: 12px; | |
| } | |
| .app-actions { | |
| margin-left: auto; | |
| display: flex; | |
| align-items: center; | |
| gap: 30px; | |
| } | |
| .icon-btn { | |
| width: 72px; | |
| height: 72px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .icon-btn svg { fill: none; stroke: #fff; stroke-width: 8; } | |
| /* List area */ | |
| .list-area { | |
| position: absolute; | |
| top: 236px; | |
| left: 0; | |
| width: 100%; | |
| padding: 0 36px 280px 36px; | |
| box-sizing: border-box; | |
| } | |
| .card { | |
| background: #262626; | |
| border-radius: 28px; | |
| padding: 36px; | |
| margin-bottom: 30px; | |
| box-shadow: 0 8px 20px rgba(0,0,0,0.35); | |
| } | |
| .card-row { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 28px; | |
| } | |
| .checkbox { | |
| width: 48px; height: 48px; | |
| } | |
| .checkbox svg { stroke: #9e9e9e; fill: none; stroke-width: 6; } | |
| .content { | |
| flex: 1; | |
| } | |
| .title-text { | |
| font-size: 52px; | |
| color: #eaeaea; | |
| line-height: 1.2; | |
| letter-spacing: 0.2px; | |
| } | |
| .sub-text { | |
| font-size: 34px; | |
| color: #9e9e9e; | |
| margin-top: 10px; | |
| } | |
| .date-line { | |
| margin-top: 10px; | |
| font-size: 34px; | |
| color: #ff9f2f; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .mini-icon { | |
| width: 30px; height: 30px; | |
| display: inline-block; | |
| } | |
| .mini-icon svg { stroke: #9e9e9e; fill: none; stroke-width: 5; } | |
| /* Bottom nav */ | |
| .bottom-bar { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 220px; | |
| background: #000000; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .nav-inner { | |
| width: 100%; | |
| padding: 0 140px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| box-sizing: border-box; | |
| } | |
| .nav-item { | |
| width: 124px; | |
| height: 124px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .nav-item svg { stroke: #bdbdbd; fill: none; stroke-width: 10; } | |
| .nav-item.active { | |
| background: #ff9300; | |
| border-radius: 16px; | |
| } | |
| .nav-item.active svg { stroke: #000; } | |
| /* FAB */ | |
| .fab { | |
| position: absolute; | |
| right: 48px; | |
| bottom: 276px; | |
| width: 168px; | |
| height: 168px; | |
| background: #ff9300; | |
| border-radius: 50%; | |
| box-shadow: 0 12px 30px rgba(0,0,0,0.5); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: #fff; | |
| font-size: 120px; | |
| line-height: 0; | |
| font-weight: 500; | |
| } | |
| /* Gesture pill */ | |
| .gesture { | |
| position: absolute; | |
| bottom: 24px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 240px; | |
| height: 14px; | |
| border-radius: 8px; | |
| background: #eaeaea; | |
| opacity: 0.9; | |
| } | |
| /* Small helper icons inside text */ | |
| .inline-plus { | |
| display: inline-block; | |
| width: 44px; height: 44px; | |
| vertical-align: middle; | |
| margin: 0 8px; | |
| } | |
| .inline-plus svg { stroke: #8b8b8b; stroke-width: 8; } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="render-target"> | |
| <!-- Status Bar --> | |
| <div class="status-bar"> | |
| <div>2:53</div> | |
| <div class="status-icons"> | |
| <div class="dot"></div> | |
| <div class="dot"></div> | |
| <div class="dot"></div> | |
| <div class="dot" style="width:22px;height:22px;"></div> | |
| </div> | |
| </div> | |
| <!-- App Header --> | |
| <div class="app-bar"> | |
| <div class="icon-btn" aria-label="menu"> | |
| <svg width="56" height="56" viewBox="0 0 56 56"> | |
| <path d="M6 12 H50 M6 28 H50 M6 44 H50" /> | |
| </svg> | |
| </div> | |
| <div class="title"><span class="wave">👋</span>Welcome</div> | |
| <div class="app-actions"> | |
| <div class="icon-btn" aria-label="more"> | |
| <svg width="56" height="56" viewBox="0 0 56 56"> | |
| <circle cx="28" cy="12" r="4" fill="#fff"></circle> | |
| <circle cx="28" cy="28" r="4" fill="#fff"></circle> | |
| <circle cx="28" cy="44" r="4" fill="#fff"></circle> | |
| </svg> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- List Area --> | |
| <div class="list-area"> | |
| <!-- Card 1 --> | |
| <div class="card"> | |
| <div class="card-row"> | |
| <div class="checkbox"> | |
| <svg width="48" height="48" viewBox="0 0 48 48"> | |
| <rect x="4" y="4" width="40" height="40" rx="6"></rect> | |
| </svg> | |
| </div> | |
| <div class="content"> | |
| <div class="title-text">Rent is due</div> | |
| <div class="sub-text">its a new month</div> | |
| <div class="date-line"> | |
| Aug 13, 06:00PM | |
| <span class="mini-icon"> | |
| <svg width="30" height="30" viewBox="0 0 30 30"> | |
| <path d="M15 5 v-2 M7 12 a8 8 0 1 0 16 0 M5 12 h20" /> | |
| </svg> | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Card 2 --> | |
| <div class="card"> | |
| <div class="card-row"> | |
| <div class="checkbox"> | |
| <svg width="48" height="48" viewBox="0 0 48 48"> | |
| <rect x="4" y="4" width="40" height="40" rx="6"></rect> | |
| </svg> | |
| </div> | |
| <div class="content"> | |
| <div class="title-text"> | |
| Create a new task by tapping | |
| <span class="inline-plus" title="plus icon"> | |
| <svg width="44" height="44" viewBox="0 0 44 44"> | |
| <path d="M22 8 V36 M8 22 H36" /> | |
| </svg> | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Card 3 --> | |
| <div class="card"> | |
| <div class="card-row"> | |
| <div class="checkbox"> | |
| <svg width="48" height="48" viewBox="0 0 48 48"> | |
| <rect x="4" y="4" width="40" height="40" rx="6"></rect> | |
| </svg> | |
| </div> | |
| <div class="content"> | |
| <div class="title-text"> | |
| Hold + | |
| <span class="inline-plus"> | |
| <svg width="44" height="44" viewBox="0 0 44 44"> | |
| <path d="M22 8 V36 M8 22 H36" /> | |
| </svg> | |
| </span> | |
| to add another task by voice 🎙️ | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Card 4 --> | |
| <div class="card"> | |
| <div class="card-row"> | |
| <div class="checkbox"> | |
| <svg width="48" height="48" viewBox="0 0 48 48"> | |
| <rect x="4" y="4" width="40" height="40" rx="6"></rect> | |
| </svg> | |
| </div> | |
| <div class="content"> | |
| <div class="title-text">Swipe left to set date and remind |