GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Inbox UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #000000;13  }14 15  /* Status bar */16  .status-bar {17    height: 90px;18    padding: 0 36px;19    color: #fff;20    display: flex;21    align-items: center;22    justify-content: space-between;23    font-size: 36px;24    box-sizing: border-box;25  }26  .status-right {27    display: flex; align-items: center; gap: 24px;28  }29  .status-icon { width: 48px; height: 48px; }30 31  /* App bar */32  .appbar {33    height: 140px;34    display: flex; align-items: center;35    padding: 0 36px;36    box-sizing: border-box;37    color: #fff;38  }39  .hamburger { width: 64px; height: 64px; margin-right: 24px; }40  .app-title { font-size: 64px; font-weight: 700; letter-spacing: 0.5px; }41  .appbar-spacer { flex: 1; }42  .more-vert { width: 48px; height: 48px; }43 44  /* List item card */45  .content-area { padding: 24px 36px; }46  .card {47    background: #1f1f1f;48    border-radius: 28px;49    height: 140px;50    display: flex; align-items: center;51    padding: 0 32px;52    box-sizing: border-box;53    color: #fff;54    box-shadow: 0 6px 16px rgba(0,0,0,0.45);55  }56  .checkbox {57    width: 56px; height: 56px;58    margin-right: 28px;59  }60  .card-title {61    font-size: 48px; font-weight: 500;62  }63  .card-spacer { flex: 1; }64  .card-date {65    font-size: 40px; color: #e15a5a; font-weight: 600;66  }67 68  /* Floating action button */69  .fab {70    position: absolute;71    right: 48px;72    bottom: 280px;73    width: 160px; height: 160px;74    background: #3f6df6;75    border-radius: 50%;76    box-shadow: 0 10px 24px rgba(0,0,0,0.6);77    display: flex; align-items: center; justify-content: center;78  }79  .fab svg { width: 96px; height: 96px; }80 81  /* Bottom navigation */82  .bottom-nav {83    position: absolute; left: 0; bottom: 100px;84    width: 100%; height: 160px;85    display: flex; align-items: center; justify-content: space-around;86    color: #9e9e9e;87  }88  .nav-icon { width: 84px; height: 84px; }89  .active { color: #3f6df6; }90 91  /* Home indicator */92  .home-indicator {93    position: absolute; bottom: 36px; left: 50%;94    transform: translateX(-50%);95    width: 360px; height: 16px;96    background: #E0E0E0; border-radius: 8px;97    opacity: 0.9;98  }99</style>100</head>101<body>102<div id="render-target">103 104  <!-- Status bar -->105  <div class="status-bar">106    <div class="status-left">8:01</div>107    <div class="status-right">108      <!-- Simple wifi icon -->109      <svg class="status-icon" viewBox="0 0 24 24" fill="#fff">110        <path d="M12 18.5l-1.2-1.2c-2-2-5.3-2-7.3 0l-1.2-1.2c3.2-3.2 8.7-3.2 11.9 0L12 18.5z"/>111        <circle cx="12" cy="21" r="1.5" />112      </svg>113      <!-- Battery icon -->114      <svg class="status-icon" viewBox="0 0 24 24" fill="#fff">115        <rect x="2" y="6" width="18" height="12" rx="2" ry="2"/>116        <rect x="21" y="10" width="2" height="4" />117      </svg>118    </div>119  </div>120 121  <!-- App bar -->122  <div class="appbar">123    <svg class="hamburger" viewBox="0 0 24 24" fill="#fff">124      <rect x="3" y="5" width="18" height="2" />125      <rect x="3" y="11" width="18" height="2" />126      <rect x="3" y="17" width="18" height="2" />127    </svg>128    <div class="app-title">Inbox</div>129    <div class="appbar-spacer"></div>130    <svg class="more-vert" viewBox="0 0 24 24" fill="#fff">131      <circle cx="12" cy="5" r="2"/>132      <circle cx="12" cy="12" r="2"/>133      <circle cx="12" cy="19" r="2"/>134    </svg>135  </div>136 137  <!-- Content -->138  <div class="content-area">139    <div class="card">140      <svg class="checkbox" viewBox="0 0 24 24">141        <rect x="3" y="3" width="18" height="18" rx="3" ry="3" fill="none" stroke="#bdbdbd" stroke-width="2"/>142      </svg>143      <div class="card-title">Weeding plan</div>144      <div class="card-spacer"></div>145      <div class="card-date">Jul 19</div>146    </div>147  </div>148 149  <!-- Floating action button -->150  <div class="fab">151    <svg viewBox="0 0 24 24" fill="#fff">152      <rect x="11" y="5" width="2" height="14"/>153      <rect x="5" y="11" width="14" height="2"/>154    </svg>155  </div>156 157  <!-- Bottom navigation -->158  <div class="bottom-nav">159    <!-- Active check icon -->160    <svg class="nav-icon active" viewBox="0 0 24 24">161      <rect x="3" y="3" width="18" height="18" rx="4" ry="4" fill="currentColor"/>162      <path d="M9.5 12.5l2 2 4-4" stroke="#fff" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>163    </svg>164    <!-- Calendar icon -->165    <svg class="nav-icon" viewBox="0 0 24 24" fill="#9e9e9e">166      <rect x="3" y="6" width="18" height="14" rx="2" ry="2"/>167      <rect x="7" y="2" width="2" height="4" fill="#9e9e9e"/>168      <rect x="15" y="2" width="2" height="4" fill="#9e9e9e"/>169      <rect x="7" y="10" width="10" height="2" fill="#00000022"/>170      <rect x="9" y="13" width="4" height="4" rx="1" ry="1" fill="#cfcfcf"/>171    </svg>172    <!-- Settings icon -->173    <svg class="nav-icon" viewBox="0 0 24 24" fill="#9e9e9e">174      <path d="M12 8.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 0 1 0-7zm8.5 3.5a6.7 6.7 0 0 0-.2-1.6l-2.1-.4-.7-1.7 1.3-1.7a7 7 0 0 0-2.7-2.7l-1.7 1.3-1.7-.7-.4-2.1A6.7 6.7 0 0 0 12 3.5a6.7 6.7 0 0 0-1.6.2l-.4 2.1-1.7.7-1.7-1.3a7 7 0 0 0-2.7 2.7l1.3 1.7-.7 1.7-2.1.4c-.1.5-.2 1.1-.2 1.6s.1 1.1.2 1.6l2.1.4.7 1.7-1.3 1.7a7 7 0 0 0 2.7 2.7l1.7-1.3 1.7.7.4 2.1c.5.1 1.1.2 1.6.2s1.1-.1 1.6-.2l.4-2.1 1.7-.7 1.7 1.3a7 7 0 0 0 2.7-2.7l-1.3-1.7.7-1.7 2.1-.4c.1-.5.2-1.1.2-1.6z"/>175    </svg>176  </div>177 178  <!-- Home indicator -->179  <div class="home-indicator"></div>180 181</div>182</body>183</html>