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 Task Screen</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: #0f0f0f; color: #fff;12  }13 14  /* Top status and app bar */15  .top-bar {16    position: absolute; left: 0; top: 0; width: 1080px;17    background: #3a3a3a;18    box-shadow: 0 2px 0 rgba(0,0,0,0.4);19  }20  .status-row {21    height: 90px; display: flex; align-items: center; padding: 0 32px; color: #eaeaea; font-size: 32px;22    letter-spacing: 0.5px;23  }24  .status-icons { margin-left: auto; display: flex; align-items: center; gap: 24px; }25  .status-dot { width: 16px; height: 16px; background: #cfcfcf; border-radius: 50%; opacity: 0.8; }26  .battery {27    width: 40px; height: 22px; border: 2px solid #eaeaea; border-radius: 4px; position: relative;28  }29  .battery::after { content: ""; position: absolute; right: -8px; top: 6px; width: 6px; height: 10px; background: #eaeaea; border-radius: 2px; }30  .battery .level { position: absolute; left: 2px; top: 2px; height: 16px; width: 30px; background: #eaeaea; }31 32  .app-bar {33    height: 170px; display: flex; align-items: center; padding: 0 28px; gap: 22px;34  }35  .title { font-size: 64px; font-weight: 700; margin-right: auto; letter-spacing: 0.5px; }36  .icon-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; border-radius: 16px; }37  .icon-btn svg { width: 48px; height: 48px; stroke: #fff; fill: none; stroke-width: 4; }38 39  /* Content area */40  .content { position: absolute; left: 0; top: 260px; right: 0; bottom: 0; padding: 24px; }41  .task-card {42    background: #1a1a1a;43    border-radius: 46px;44    padding: 28px 32px;45    display: flex; align-items: center;46    box-shadow: 0 6px 18px rgba(0,0,0,0.5);47    width: calc(100% - 48px);48    margin: 8px 24px;49  }50  .check-circle {51    width: 86px; height: 86px; border: 6px solid #777; border-radius: 50%;52    margin-right: 26px;53  }54  .task-texts { display: flex; flex-direction: column; gap: 16px; }55  .task-title { font-size: 48px; font-weight: 700; color: #fff; }56  .task-date { display: flex; align-items: center; gap: 16px; color: #bdbdbd; font-size: 34px; }57  .task-date svg { width: 40px; height: 40px; stroke: #bdbdbd; fill: none; stroke-width: 3.6; }58 59  /* FAB */60  .fab {61    position: absolute; right: 56px; bottom: 164px;62    width: 160px; height: 160px; background: #f5b73a;63    border-radius: 50%;64    box-shadow: 0 10px 26px rgba(0,0,0,0.6);65    display: flex; align-items: center; justify-content: center;66  }67  .fab svg { width: 80px; height: 80px; stroke: #000; stroke-width: 10; }68 69  /* Toast */70  .toast {71    position: absolute; left: 50%; bottom: 270px; transform: translateX(-50%);72    background: #2c2c2c; color: #fff;73    padding: 26px 34px; border-radius: 44px;74    display: flex; align-items: center; gap: 26px;75    box-shadow: 0 8px 22px rgba(0,0,0,0.5);76    font-size: 40px;77  }78  .toast .avatar {79    width: 84px; height: 84px; border-radius: 50%;80    background: linear-gradient(135deg, #69a9d9, #f6c287);81    display: flex; align-items: center; justify-content: center; color: #0d0d0d; font-weight: 700; font-size: 36px;82    border: 2px solid rgba(255,255,255,0.35);83  }84  .home-bar {85    position: absolute; left: 50%; bottom: 64px; transform: translateX(-50%);86    width: 520px; height: 16px; background: #e6e6e6; border-radius: 16px; opacity: 0.8;87  }88</style>89</head>90<body>91<div id="render-target">92 93  <!-- Top area -->94  <div class="top-bar">95    <div class="status-row">96      <div>10:17</div>97      <div class="status-icons">98        <div class="status-dot"></div>99        <div class="status-dot" style="width: 18px; height: 18px;"></div>100        <div class="status-dot" style="background:#e0e0e0;"></div>101        <svg width="32" height="32" viewBox="0 0 24 24" style="stroke:#eaeaea; fill:none; stroke-width:2;">102          <circle cx="12" cy="12" r="10"></circle>103          <path d="M12 6v6l4 2"></path>104        </svg>105        <svg width="34" height="34" viewBox="0 0 24 24" style="stroke:#eaeaea; fill:none; stroke-width:2;">106          <path d="M4 12h16"></path>107          <path d="M12 4l8 8-8 8"></path>108        </svg>109        <div class="battery"><div class="level"></div></div>110      </div>111    </div>112 113    <div class="app-bar">114      <!-- Hamburger -->115      <div class="icon-btn">116        <svg viewBox="0 0 24 24">117          <path d="M3 6h18"></path>118          <path d="M3 12h18"></path>119          <path d="M3 18h18"></path>120        </svg>121      </div>122      <div class="title">Shopping</div>123      <!-- Search -->124      <div class="icon-btn">125        <svg viewBox="0 0 24 24">126          <circle cx="11" cy="11" r="6.5"></circle>127          <path d="M20 20l-4.5-4.5"></path>128        </svg>129      </div>130      <!-- Filter/Tune -->131      <div class="icon-btn">132        <svg viewBox="0 0 24 24">133          <path d="M4 7h10"></path>134          <path d="M18 7h2"></path>135          <circle cx="15" cy="7" r="2"></circle>136          <path d="M4 12h4"></path>137          <path d="M12 12h8"></path>138          <circle cx="10" cy="12" r="2"></circle>139          <path d="M4 17h14"></path>140          <path d="M20 17h0"></path>141          <circle cx="19" cy="17" r="2"></circle>142        </svg>143      </div>144      <!-- Checklist/Done -->145      <div class="icon-btn">146        <svg viewBox="0 0 24 24">147          <path d="M5 12l4 4 9-9"></path>148        </svg>149      </div>150      <!-- More vertical -->151      <div class="icon-btn">152        <svg viewBox="0 0 24 24">153          <circle cx="12" cy="5" r="2.2" style="fill:#fff; stroke:none;"></circle>154          <circle cx="12" cy="12" r="2.2" style="fill:#fff; stroke:none;"></circle>155          <circle cx="12" cy="19" r="2.2" style="fill:#fff; stroke:none;"></circle>156        </svg>157      </div>158    </div>159  </div>160 161  <!-- Content -->162  <div class="content">163    <div class="task-card">164      <div class="check-circle"></div>165      <div class="task-texts">166        <div class="task-title">Buy New Balance Hiking shoes</div>167        <div class="task-date">168          <svg viewBox="0 0 24 24">169            <rect x="3" y="5" width="18" height="16" rx="2"></rect>170            <path d="M3 9h18"></path>171            <path d="M7 3v4"></path>172            <path d="M17 3v4"></path>173          </svg>174          <span>Sa, Dec 23</span>175        </div>176      </div>177    </div>178  </div>179 180  <!-- Toast -->181  <div class="toast">182    <div class="avatar">Do</div>183    <div>Task added</div>184  </div>185 186  <!-- Floating action button -->187  <div class="fab">188    <svg viewBox="0 0 24 24">189      <path d="M12 5v14"></path>190      <path d="M5 12h14"></path>191    </svg>192  </div>193 194  <!-- Home bar -->195  <div class="home-bar"></div>196</div>197</body>198</html>