GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Journal UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #202326;15    color: #e6e6e6;16  }17 18  /* Status bar */19  .statusbar {20    position: absolute;21    top: 0; left: 0;22    width: 100%;23    height: 120px;24    padding: 24px 40px;25    display: flex;26    align-items: center;27    justify-content: space-between;28    color: #eaeaea;29    font-size: 42px;30    box-sizing: border-box;31  }32  .status-left { display: flex; align-items: center; gap: 28px; }33  .status-right { display: flex; align-items: center; gap: 28px; }34 35  /* Header & actions */36  .header {37    position: absolute;38    top: 200px;39    left: 60px;40    right: 60px;41  }42  .title {43    font-size: 120px;44    font-weight: 600;45    letter-spacing: 0.5px;46    margin-bottom: 60px;47  }48  .header-actions {49    position: absolute;50    top: 10px;51    right: 0;52    display: flex;53    align-items: center;54    gap: 28px;55  }56  .avatar {57    width: 96px; height: 96px; border-radius: 50%;58    background: #118a72;59    display: flex; align-items: center; justify-content: center;60    font-weight: 700; font-size: 44px;61  }62  .icon-btn {63    width: 68px; height: 68px; border-radius: 50%;64    background: transparent;65    display: flex; align-items: center; justify-content: center;66  }67 68  /* Sections */69  .section-row {70    margin-top: 20px;71    padding: 0 60px;72    display: flex;73    align-items: center;74    justify-content: space-between;75  }76  .section-title {77    font-size: 54px;78    font-weight: 600;79  }80  .stats { display: flex; align-items: center; gap: 30px; font-size: 40px; color: #9aa0a6; }81  .stat { display: flex; align-items: center; gap: 12px; }82  .stat .blue { color: #8ab4f8; }83  .stat .green { color: #34d399; }84 85  /* Entries */86  .entry {87    margin-top: 24px;88    border-top: 1px solid #2f3338;89    padding: 36px 60px;90    display: flex;91    align-items: center;92    justify-content: space-between;93  }94  .entry-left { display: flex; flex-direction: column; gap: 16px; }95  .time-row { display: flex; align-items: center; gap: 16px; color: #9aa0a6; font-size: 40px; }96  .entry-title { font-size: 60px; font-weight: 600; }97  .entry-sub { font-size: 42px; color: #9aa0a6; }98 99  .entry-icon {100    width: 156px; height: 156px; border-radius: 50%;101    background: #2b2f34;102    display: flex; align-items: center; justify-content: center;103  }104 105  /* Floating action button */106  .fab {107    position: absolute;108    right: 60px;109    bottom: 300px;110    width: 156px; height: 156px;111    border-radius: 50%;112    background: #3a3f45;113    box-shadow: 0 8px 18px rgba(0,0,0,0.45);114    display: flex; align-items: center; justify-content: center;115  }116  .plus {117    position: relative; width: 92px; height: 92px;118  }119  .plus span {120    position: absolute;121  }122  .plus .vert { left: 40px; top: 0; width: 12px; height: 92px; background: #34a853; }123  .plus .h1 { top: 40px; left: 0; width: 92px; height: 12px; background: #4285f4; }124  .plus .h2 { top: 40px; left: 46px; width: 46px; height: 12px; background: #ea4335; }125  .plus .vert2 { left: 40px; top: 46px; width: 12px; height: 46px; background: #fbbc05; }126 127  /* Bottom navigation */128  .navbar {129    position: absolute;130    left: 0; right: 0; bottom: 90px;131    height: 160px;132    background: #2a2d31;133    border-top: 1px solid #3a3d40;134    display: flex; align-items: center; justify-content: space-around;135  }136  .nav-item { display: flex; flex-direction: column; align-items: center; gap: 12px; color: #bfc5ca; font-size: 34px; }137  .nav-item.selected { color: #8ab4f8; font-weight: 600; }138  .nav-icon { width: 64px; height: 64px; }139 140  /* Gesture bar */141  .gesture {142    position: absolute; bottom: 24px; left: 50%;143    transform: translateX(-50%);144    width: 320px; height: 16px; border-radius: 12px;145    background: #ffffff;146    opacity: 0.9;147  }148</style>149</head>150<body>151<div id="render-target">152 153  <!-- Status bar -->154  <div class="statusbar">155    <div class="status-left">156      <div>11:08</div>157      <svg width="40" height="40" viewBox="0 0 24 24">158        <polygon points="6,4 20,12 6,20" fill="#e6e6e6"></polygon>159      </svg>160    </div>161    <div class="status-right">162      <!-- WiFi -->163      <svg width="44" height="44" viewBox="0 0 24 24">164        <g fill="none" stroke="#e6e6e6" stroke-width="2" stroke-linecap="round">165          <path d="M3 9c4-3 14-3 18 0"></path>166          <path d="M6 12c3-2 9-2 12 0"></path>167          <path d="M9 15c2-1 4-1 6 0"></path>168          <circle cx="12" cy="18" r="1.5" fill="#e6e6e6"></circle>169        </g>170      </svg>171      <!-- Battery -->172      <svg width="44" height="44" viewBox="0 0 24 24">173        <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#e6e6e6" stroke-width="2"></rect>174        <rect x="4" y="8" width="10" height="8" fill="#e6e6e6"></rect>175        <rect x="20" y="10" width="2.5" height="8" rx="1" fill="#e6e6e6"></rect>176      </svg>177    </div>178  </div>179 180  <!-- Header -->181  <div class="header">182    <div class="title">Journal</div>183    <div class="header-actions">184      <!-- Refresh -->185      <div class="icon-btn">186        <svg width="44" height="44" viewBox="0 0 24 24">187          <g fill="none" stroke="#cfd3d7" stroke-width="2" stroke-linecap="round">188            <path d="M20 12a8 8 0 0 0-14-5"></path>189            <path d="M6 7V3"></path>190            <path d="M4 12a8 8 0 0 0 14 5"></path>191            <path d="M18 17v4"></path>192          </g>193        </svg>194      </div>195      <div class="avatar">C</div>196    </div>197  </div>198 199  <!-- Today stats -->200  <div class="section-row" style="margin-top: 220px;">201    <div class="section-title">Today</div>202    <div class="stats">203      <div class="stat">204        <svg class="nav-icon" width="44" height="44" viewBox="0 0 24 24">205          <circle cx="12" cy="5" r="2" fill="#8ab4f8"></circle>206          <path d="M12 7v6" stroke="#8ab4f8" stroke-width="2" stroke-linecap="round"></path>207          <path d="M10 13l-4 6" stroke="#8ab4f8" stroke-width="2" stroke-linecap="round"></path>208          <path d="M14 13l4 6" stroke="#8ab4f8" stroke-width="2" stroke-linecap="round"></path>209        </svg>210        <span class="blue">43 steps</span>211      </div>212      <div class="stat">213        <svg width="44" height="44" viewBox="0 0 24 24">214          <path d="M12 20s-7-4.5-7-9a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 4.5-7 9-7 9z" fill="#34d399"></path>215        </svg>216        <span class="green">0 pts</span>217      </div>218      <div class="stat">219        <svg width="44" height="44" viewBox="0 0 24 24">220          <circle cx="12" cy="12" r="9" fill="none" stroke="#83c5be" stroke-width="2"></circle>221          <circle cx="12" cy="12" r="2" fill="#172c2b"></circle>222        </svg>223      </div>224    </div>225  </div>226 227  <!-- Entry 1 -->228  <div class="entry">229    <div class="entry-left">230      <div class="time-row">231        <svg width="36" height="36" viewBox="0 0 24 24">232          <circle cx="12" cy="4.5" r="2" fill="#9aa0a6"></circle>233          <path d="M12 6.5v6" stroke="#9aa0a6" stroke-width="2" stroke-linecap="round"></path>234          <path d="M10 12.5l-4 6" stroke="#9aa0a6" stroke-width="2" stroke-linecap="round"></path>235          <path d="M14 12.5l4 6" stroke="#9aa0a6" stroke-width="2" stroke-linecap="round"></path>236        </svg>237        <span>11:35 AM</span>238      </div>239      <div class="entry-title">Lunch walk</div>240      <div class="entry-sub">5.61 miles in 23h 11m</div>241    </div>242    <div class="entry-icon">243      <svg width="84" height="84" viewBox="0 0 24 24">244        <path d="M4 16l12-8 4 4-12 8z" fill="#8ab4f8"></path>245      </svg>246    </div>247  </div>248 249  <!-- Yesterday stats -->250  <div class="section-row" style="margin-top: 12px;">251    <div class="section-title">Yesterday</div>252    <div class="stats">253      <div class="stat">254        <svg width="44" height="44" viewBox="0 0 24 24">255          <circle cx="12" cy="5" r="2" fill="#8ab4f8"></circle>256          <path d="M12 7v6" stroke="#8ab4f8" stroke-width="2" stroke-linecap="round"></path>257          <path d="M10 13l-4 6" stroke="#8ab4f8" stroke-width="2" stroke-linecap="round"></path>258          <path d="M14 13l4 6" stroke="#8ab4f8" stroke-width="2" stroke-linecap="round"></path>259        </svg>260        <span class="blue">21 steps</span>261      </div>262      <div class="stat">263        <svg width="44" height="44" viewBox="0 0 24 24">264          <path d="M12 20s-7-4.5-7-9a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 4.5-7 9-7 9z" fill="#34d399"></path>265        </svg>266        <span class="green">0 pts</span>267      </div>268      <div class="stat">269        <svg width="44" height="44" viewBox="0 0 24 24">270          <circle cx="12" cy="12" r="9" fill="none" stroke="#83c5be" stroke-width="2"></circle>271          <circle cx="12" cy="12" r="2" fill="#172c2b"></circle>272        </svg>273      </div>274    </div>275  </div>276 277  <!-- Entry 2 -->278  <div class="entry">279    <div class="entry-left">280      <div class="time-row">281        <svg width="36" height="36" viewBox="0 0 24 24">282          <circle cx="12" cy="4.5" r="2" fill="#9aa0a6"></circle>283          <path d="M12 6.5v6" stroke="#9aa0a6" stroke-width="2" stroke-linecap="round"></path>284          <path d="M10 12.5l-4 6" stroke="#9aa0a6" stroke-width="2" stroke-linecap="round"></path>285          <path d="M14 12.5l4 6" stroke="#9aa0a6" stroke-width="2" stroke-linecap="round"></path>286        </svg>287        <span>11:32 AM</span>288      </div>289      <div class="entry-title">Lunch walk</div>290      <div class="entry-sub">0.02 miles in 2 min</div>291    </div>292    <div class="entry-icon">293      <svg width="84" height="84" viewBox="0 0 24 24">294        <path d="M5 16l10-6 4 6-10 6z" fill="#8ab4f8"></path>295      </svg>296    </div>297  </div>298 299  <!-- Floating action button -->300  <div class="fab">301    <div class="plus">302      <span class="h1"></span>303      <span class="vert"></span>304      <span class="h2"></span>305      <span class="vert2"></span>306    </div>307  </div>308 309  <!-- Bottom navigation -->310  <div class="navbar">311    <div class="nav-item">312      <svg class="nav-icon" viewBox="0 0 24 24">313        <circle cx="12" cy="12" r="10" fill="none" stroke="#bfc5ca" stroke-width="2"></circle>314        <path d="M12 7v6l4 2" stroke="#bfc5ca" stroke-width="2" stroke-linecap="round"></path>315      </svg>316      <div> </div>317    </div>318    <div class="nav-item selected">319      <svg class="nav-icon" viewBox="0 0 24 24">320        <rect x="6" y="6" width="12" height="14" rx="2" fill="none" stroke="#8ab4f8" stroke-width="2"></rect>321        <rect x="9" y="3" width="6" height="4" rx="1" fill="#8ab4f8"></rect>322      </svg>323      <div>Journal</div>324    </div>325    <div class="nav-item">326      <svg class="nav-icon" viewBox="0 0 24 24">327        <path d="M4 7h16M4 12h16M4 17h16" stroke="#bfc5ca" stroke-width="2" stroke-linecap="round"></path>328      </svg>329      <div> </div>330    </div>331    <div class="nav-item">332      <svg class="nav-icon" viewBox="0 0 24 24">333        <circle cx="12" cy="8" r="4" fill="none" stroke="#bfc5ca" stroke-width="2"></circle>334        <path d="M4 21c2-5 14-5 16 0" stroke="#bfc5ca" stroke-width="2" fill="none"></path>335      </svg>336      <div> </div>337    </div>338  </div>339 340  <!-- Gesture bar -->341  <div class="gesture"></div>342 343</div>344</body>345</html>