GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Shopping UI Mock</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; position:relative; overflow:hidden;10    background:#0f0f0f; color:#fff;11  }12 13  /* Status bar */14  .statusbar {15    position:absolute; top:0; left:0; right:0;16    height:100px; background:#3a3a3a; color:#fff;17    display:flex; align-items:center; padding:0 36px;18    font-size:34px; letter-spacing:0.5px;19  }20  .status-right { margin-left:auto; display:flex; align-items:center; gap:20px; }21  .sb-dot { width:12px; height:12px; background:#bdbdbd; border-radius:50%; display:inline-block; }22  .battery {23    width:48px; height:28px; border:3px solid #fff; border-radius:6px; position:relative;24  }25  .battery::after { content:''; position:absolute; right:-12px; top:8px; width:8px; height:12px; background:#fff; border-radius:2px; }26  .battery-fill { position:absolute; top:3px; left:3px; height:20px; width:28px; background:#8bc34a; }27 28  /* App bar */29  .appbar {30    position:absolute; top:100px; left:0; right:0;31    height:140px; background:#2f2f2f; display:flex; align-items:center;32    padding:0 36px; box-sizing:border-box;33  }34  .hamburger { width:68px; height:68px; border-radius:8px; display:flex; align-items:center; justify-content:center; }35  .hamburger svg { fill:#fff; }36  .title { font-size:64px; font-weight:700; margin-left:24px; }37  .actions { margin-left:auto; display:flex; align-items:center; gap:36px; }38  .icon-btn { width:68px; height:68px; display:flex; align-items:center; justify-content:center; }39  .icon-btn svg { fill:#fff; }40 41  /* List area */42  .content {43    position:absolute; top:240px; left:0; right:0; bottom:0; padding:24px 24px 180px;44    box-sizing:border-box; background:#0f0f0f;45  }46  .card {47    background:#1a1a1a; border-radius:48px; padding:36px;48    display:flex; align-items:flex-start; margin-bottom:30px; box-shadow:0 2px 0 rgba(255,255,255,0.04) inset;49  }50  .check-circle {51    width:100px; height:100px; border-radius:50%; background:#f8c44f; display:flex; align-items:center; justify-content:center; flex-shrink:0;52    box-shadow:0 6px 16px rgba(0,0,0,0.5);53  }54  .check-circle svg { width:56px; height:56px; fill:#1a1a1a; }55  .empty-circle {56    width:100px; height:100px; border-radius:50%; border:8px solid #6b6b6b; background:#222; flex-shrink:0;57  }58  .card-text { margin-left:30px; }59  .title-line {60    font-size:52px; font-weight:700; color:#fff; margin-bottom:18px;61  }62  .title-line.strike { text-decoration:line-through; color:#d9d9d9; }63  .subline { display:flex; align-items:center; gap:18px; color:#cfcfcf; font-size:34px; }64  .small-icon svg { width:38px; height:38px; fill:#cfcfcf; }65 66  /* FAB */67  .fab {68    position:absolute; right:48px; bottom:72px; width:156px; height:156px; border-radius:50%;69    background:#f8c44f; display:flex; align-items:center; justify-content:center;70    box-shadow:0 18px 40px rgba(0,0,0,0.6);71  }72  .fab svg { width:80px; height:80px; fill:#0f0f0f; }73 74</style>75</head>76<body>77<div id="render-target">78 79  <!-- Status Bar -->80  <div class="statusbar">81    <div>12:16</div>82    <div class="status-right">83      <div class="sb-dot"></div>84      <div class="sb-dot"></div>85      <div class="sb-dot"></div>86      <div class="battery"><div class="battery-fill"></div></div>87    </div>88  </div>89 90  <!-- App Bar -->91  <div class="appbar">92    <div class="hamburger">93      <svg viewBox="0 0 24 24"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg>94    </div>95    <div class="title">Shopping</div>96    <div class="actions">97      <div class="icon-btn">98        <svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16a6.471 6.471 0 004.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zM9.5 14A4.5 4.5 0 115 9.5 4.5 4.5 0 019.5 14z"/></svg>99      </div>100      <div class="icon-btn">101        <svg viewBox="0 0 24 24"><path d="M3 5h18v2H3zm4 6h14v2H7zm-4 6h18v2H3z"/></svg>102      </div>103      <div class="icon-btn">104        <svg viewBox="0 0 24 24"><path d="M9 16.2l-3.5-3.5L4 14.2l5 5 12-12-1.4-1.4z"/></svg>105      </div>106      <div class="icon-btn">107        <svg viewBox="0 0 24 24"><path d="M12 8a2 2 0 110-4 2 2 0 010 4zm0 6a2 2 0 110-4 2 2 0 010 4zm0 6a2 2 0 110-4 2 2 0 010 4z"/></svg>108      </div>109    </div>110  </div>111 112  <!-- Content List -->113  <div class="content">114 115    <!-- Completed item -->116    <div class="card">117      <div class="check-circle">118        <svg viewBox="0 0 24 24"><path d="M9 16.2l-3.5-3.5L4 14.2l5 5 12-12-1.4-1.4z"/></svg>119      </div>120      <div class="card-text">121        <div class="title-line strike">Buy New Balance Hiking shoes</div>122        <div class="subline">123          <span class="small-icon">124            <svg viewBox="0 0 24 24"><path d="M19 4h-3V2H8v2H5c-1.1 0-2 .9-2 2v14a2 2 0 002 2h14a2 2 0 002-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z"/></svg>125          </span>126          <span>Sa, Dec 23 02:00 PM •</span>127          <span class="small-icon">128            <svg viewBox="0 0 24 24"><path d="M12 6v6l4 2-.6 1.2L11 13V6zM12 2a10 10 0 100 20 10 10 0 000-20z"/></svg>129          </span>130        </div>131      </div>132    </div>133 134    <!-- Item 2 -->135    <div class="card">136      <div class="empty-circle"></div>137      <div class="card-text">138        <div class="title-line">Buy groceries</div>139      </div>140    </div>141 142    <!-- Item 3 -->143    <div class="card">144      <div class="empty-circle"></div>145      <div class="card-text">146        <div class="title-line">Buy Milk and Chicken</div>147      </div>148    </div>149 150  </div>151 152  <!-- Floating Action Button -->153  <div class="fab">154    <svg viewBox="0 0 24 24"><path d="M11 5h2v14h-2zM5 11h14v2H5z"/></svg>155  </div>156 157</div>158</body>159</html>