GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Tasks UI Mock</title>6<meta name="viewport" content="width=device-width, initial-scale=1.0">7<style>8  :root{9    --blue:#1E88E5;10    --blue-light:#2FA4F5;11    --blue-mid:#2196F3;12    --dark:#3a3a3a;13    --dark-2:#424242;14    --grey:#BDBDBD;15    --text:#FFFFFF;16    --muted:#D0D0D0;17    --red:#E53935;18  }19  body{ margin:0; padding:0; background:transparent; font-family: Roboto, Arial, Helvetica, sans-serif; }20  #render-target{21    width:1080px; height:2400px;22    position:relative; overflow:hidden;23    background:#3a3a3a;24    border-radius:0; box-shadow:none;25  }26 27  /* Status bar */28  .statusbar{29    position:absolute; top:0; left:0; width:100%; height:120px;30    background:linear-gradient(180deg, var(--blue-light) 0%, var(--blue) 100%);31    color:#fff;32  }33  .status-left{ position:absolute; left:40px; top:24px; font-size:46px; font-weight:500; letter-spacing:1px; }34  .status-right{ position:absolute; right:40px; top:30px; display:flex; gap:26px; align-items:center; }35  .status-icon svg{ width:42px; height:42px; fill:none; stroke:#fff; stroke-width:4; }36 37  /* App bar */38  .appbar{39    position:absolute; top:120px; left:0; width:100%; height:170px;40    background:var(--blue-mid); color:#fff;41    display:flex; align-items:center;42  }43  .appbar .menu{ width:110px; height:100%; display:flex; align-items:center; justify-content:center; }44  .appbar .title{ font-size:64px; font-weight:700; letter-spacing:0.5px; }45  .appbar .actions{ margin-left:auto; display:flex; align-items:center; gap:40px; padding-right:36px; }46  .icon-btn{ width:88px; height:88px; display:flex; align-items:center; justify-content:center; }47  .icon-btn svg{ width:76px; height:76px; fill:none; stroke:#fff; stroke-width:6; }48 49  /* Notification bar */50  .notify{51    position:absolute; top:290px; left:0; width:100%; height:110px;52    background:#505050; color:#fff; display:flex; align-items:center;53    padding:0 36px; box-sizing:border-box;54  }55  .notify .warn{ display:flex; align-items:center; gap:22px; color:var(--red); font-size:40px; }56  .notify .btn{ margin-left:auto; background:#4FB2FF; color:#fff; padding:18px 28px; border-radius:10px; font-size:38px; font-weight:600; }57 58  /* Section header */59  .section{60    position:absolute; top:400px; left:0; width:100%; height:100px;61    background:#37A8F7; color:#fff; display:flex; align-items:center;62    font-size:44px; font-weight:700; padding:0 36px; box-sizing:border-box;63  }64 65  /* Task card */66  .card{67    position:absolute; top:500px; left:0; width:100%; background:#424242; color:#fff;68    padding:32px 36px 40px; box-sizing:border-box; border-top:1px solid rgba(255,255,255,0.06);69    border-bottom:1px solid rgba(0,0,0,0.35);70  }71  .card-header{ display:flex; align-items:center; }72  .card-title{ font-size:56px; font-weight:700; flex:1; }73  .chevron{ width:60px; height:60px; }74  .detail-row{ display:flex; align-items:center; gap:18px; margin-top:22px; color:#E0E0E0; font-size:42px; }75  .detail-row .icon{ width:54px; height:54px; }76  .detail-row .sep{ margin:0 26px; color:#CFCFCF; }77 78  /* Spacer area */79  .content-spacer{ position:absolute; top:770px; left:0; width:100%; height:1290px; background:#3a3a3a; }80 81  /* Banner Ad placeholder */82  .ad{83    position:absolute; bottom:170px; left:0; width:100%; height:190px;84    background:#E0E0E0; border-top:1px solid #BDBDBD; border-bottom:1px solid #BDBDBD;85    display:flex; align-items:center; justify-content:center; color:#757575; font-size:40px; font-weight:600;86  }87 88  /* Floating Action Button */89  .fab{90    position:absolute; right:60px; bottom:260px; width:170px; height:170px;91    background:radial-gradient(circle at 30% 30%, #62c2ff, #1e88e5 70%);92    border-radius:50%; box-shadow:0 14px 24px rgba(0,0,0,0.5);93    display:flex; align-items:center; justify-content:center;94  }95  .fab svg{ width:110px; height:110px; fill:none; stroke:#fff; stroke-width:8; }96 97  /* Gesture pill */98  .gesture{99    position:absolute; bottom:60px; left:50%; transform:translateX(-50%);100    width:360px; height:18px; background:#fff; border-radius:12px; opacity:0.85;101  }102</style>103</head>104<body>105<div id="render-target">106 107  <!-- Status bar -->108  <div class="statusbar">109    <div class="status-left">6:20</div>110    <div class="status-right">111      <div class="status-icon">112        <!-- Wi-Fi icon -->113        <svg viewBox="0 0 24 24">114          <path d="M2 8c5-4 15-4 20 0"></path>115          <path d="M6 12c3-3 9-3 12 0"></path>116          <path d="M10 16c2-2 4-2 6 0"></path>117          <circle cx="12" cy="20" r="1.8" fill="#fff" stroke="none"></circle>118        </svg>119      </div>120      <div class="status-icon">121        <!-- Battery icon -->122        <svg viewBox="0 0 28 24">123          <rect x="2" y="6" width="20" height="12" rx="2"></rect>124          <rect x="22" y="9" width="3" height="6" rx="1" fill="none"></rect>125          <rect x="4" y="8" width="14" height="8" fill="#fff" stroke="none"></rect>126        </svg>127      </div>128    </div>129  </div>130 131  <!-- App bar -->132  <div class="appbar">133    <div class="menu">134      <svg viewBox="0 0 72 72">135        <path d="M10 18h52M10 36h52M10 54h52" stroke="#fff" stroke-width="6" stroke-linecap="round" fill="none"></path>136      </svg>137    </div>138    <div class="title">Tasks</div>139    <div class="actions">140      <div class="icon-btn" title="Add Alarm">141        <!-- alarm + icon -->142        <svg viewBox="0 0 72 72">143          <circle cx="36" cy="40" r="20"></circle>144          <path d="M18 18l8 6M54 18l-8 6" stroke-linecap="round"></path>145          <path d="M36 32v16M28 40h16" stroke-linecap="round"></path>146        </svg>147      </div>148      <div class="icon-btn" title="Check">149        <svg viewBox="0 0 72 72">150          <circle cx="36" cy="36" r="26"></circle>151          <path d="M24 36l10 10 18-20" stroke-linecap="round" stroke-linejoin="round"></path>152        </svg>153      </div>154      <div class="icon-btn" title="Search">155        <svg viewBox="0 0 72 72">156          <circle cx="30" cy="30" r="16"></circle>157          <path d="M44 44l16 16" stroke-linecap="round"></path>158        </svg>159      </div>160    </div>161  </div>162 163  <!-- Notification permission bar -->164  <div class="notify">165    <div class="warn">166      <svg viewBox="0 0 60 60" width="54" height="54">167        <circle cx="30" cy="30" r="26" fill="none" stroke="#E53935" stroke-width="6"></circle>168        <path d="M30 18v16" stroke="#E53935" stroke-width="6" stroke-linecap="round"></path>169        <circle cx="30" cy="42" r="3.2" fill="#E53935" stroke="none"></circle>170      </svg>171      <span>Please allow app to send you notification</span>172    </div>173    <div class="btn">Enable</div>174  </div>175 176  <!-- Section label -->177  <div class="section">Next 7 days</div>178 179  <!-- Task card -->180  <div class="card">181    <div class="card-header">182      <div class="card-title">Roslyn Flower Show</div>183      <svg class="chevron" viewBox="0 0 24 24">184        <path d="M6 9l6 6 6-6" fill="none" stroke="#A0A0A0" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>185      </svg>186    </div>187 188    <div class="detail-row">189      <svg class="icon" viewBox="0 0 24 24">190        <circle cx="12" cy="13" r="7" fill="none" stroke="#CFCFCF" stroke-width="2"></circle>191        <path d="M12 13l4 0M12 6v7" stroke="#CFCFCF" stroke-width="2" stroke-linecap="round"></path>192      </svg>193      <span>01:30 PM</span>194      <span class="sep">•</span>195      <svg class="icon" viewBox="0 0 24 24">196        <path d="M6 12a6 6 0 1 0 12 0" fill="none" stroke="#CFCFCF" stroke-width="2"></path>197        <path d="M12 6v6h6" fill="none" stroke="#CFCFCF" stroke-width="2" stroke-linecap="round"></path>198      </svg>199      <span>Once</span>200    </div>201 202    <div class="detail-row">203      <svg class="icon" viewBox="0 0 24 24">204        <rect x="3" y="4" width="18" height="16" rx="2" fill="none" stroke="#CFCFCF" stroke-width="2"></rect>205        <path d="M7 4v4M17 4v4M3 10h18" stroke="#CFCFCF" stroke-width="2"></path>206      </svg>207      <span>Sat, Oct 14, 2023</span>208    </div>209  </div>210 211  <!-- Spacer -->212  <div class="content-spacer"></div>213 214  <!-- Banner ad placeholder -->215  <div class="ad">[IMG: Green banner ad - Milk]</div>216 217  <!-- Floating action button -->218  <div class="fab" title="Add Reminder">219    <svg viewBox="0 0 64 64">220      <circle cx="32" cy="36" r="18"></circle>221      <path d="M18 18l8 6M46 18l-8 6" stroke-linecap="round"></path>222      <path d="M32 28v16M24 36h16" stroke-linecap="round"></path>223    </svg>224  </div>225 226  <!-- Gesture navigation pill -->227  <div class="gesture"></div>228 229</div>230</body>231</html>