GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>Journal UI Mock</title>6<style>7  body {8    margin: 0;9    padding: 0;10    background: transparent;11    font-family: "Roboto", Arial, sans-serif;12  }13  #render-target {14    width: 1080px;15    height: 2400px;16    position: relative;17    overflow: hidden;18    background: #232629;19    color: #EDEDED;20  }21 22  /* Status bar */23  .statusbar {24    height: 110px;25    padding: 0 40px;26    display: flex;27    align-items: center;28    justify-content: space-between;29    color: #D9D9D9;30    font-size: 38px;31    letter-spacing: 0.5px;32  }33  .status-left {34    display: flex;35    align-items: center;36    gap: 16px;37  }38  .status-right {39    display: flex;40    align-items: center;41    gap: 28px;42  }43  .status-icon svg {44    width: 40px;45    height: 40px;46    fill: none;47    stroke: #D9D9D9;48    stroke-width: 3.5;49  }50 51  /* Page title and top actions */52  .header {53    padding: 20px 40px 0 40px;54  }55  .title-row {56    position: relative;57    margin-top: 40px;58  }59  .title {60    font-size: 120px;61    font-weight: 500;62    line-height: 1.1;63    color: #FAFAFA;64  }65  .top-actions {66    position: absolute;67    right: 40px;68    top: -20px;69    display: flex;70    align-items: center;71    gap: 28px;72  }73  .round-btn {74    width: 86px;75    height: 86px;76    border-radius: 50%;77    background: #2F3236;78    display: flex;79    align-items: center;80    justify-content: center;81    box-shadow: 0 6px 14px rgba(0,0,0,0.35);82  }83  .round-btn svg {84    width: 42px;85    height: 42px;86    stroke: #D9D9D9;87    fill: none;88    stroke-width: 3.5;89  }90  .avatar {91    width: 86px;92    height: 86px;93    border-radius: 50%;94    background: #1F9D8B;95    display: flex;96    align-items: center;97    justify-content: center;98    color: #132F2A;99    font-weight: 700;100    font-size: 42px;101  }102 103  /* Today row */104  .today-row {105    margin-top: 28px;106    padding: 0 40px;107    display: flex;108    align-items: center;109    justify-content: space-between;110    color: #B7BEC3;111    font-size: 40px;112  }113  .metrics {114    display: flex;115    align-items: center;116    gap: 38px;117    font-size: 36px;118  }119  .metric {120    display: inline-flex;121    align-items: center;122    gap: 12px;123    color: #90C2FF;124  }125  .metric .heart {126    color: #79D08F;127  }128  .divider {129    margin: 24px 0 0 0;130    height: 2px;131    background: #3A3D41;132  }133 134  /* Entry card */135  .entry {136    padding: 40px;137  }138  .entry-card {139    padding-top: 26px;140  }141  .entry-top {142    display: flex;143    align-items: center;144    gap: 16px;145    color: #B9BFC4;146    font-size: 34px;147  }148  .entry-title {149    margin-top: 18px;150    font-size: 56px;151    color: #F1F1F1;152  }153  .entry-subtitle {154    margin-top: 12px;155    font-size: 40px;156    color: #AAB0B5;157  }158  .entry-action {159    position: absolute;160    right: 40px;161    top: 460px;162    width: 140px;163    height: 140px;164    border-radius: 50%;165    background: #3B3E42;166    display: flex;167    align-items: center;168    justify-content: center;169  }170  .entry-action svg {171    width: 64px;172    height: 64px;173    fill: none;174    stroke: #9DB8FF;175    stroke-width: 4.5;176  }177 178  /* Floating Add button */179  .fab {180    position: absolute;181    right: 44px;182    bottom: 260px;183    width: 132px;184    height: 132px;185    border-radius: 50%;186    background: #3B3E42;187    box-shadow: 0 10px 22px rgba(0,0,0,0.45);188    display: flex;189    align-items: center;190    justify-content: center;191  }192 193  /* Bottom navigation */194  .bottom-nav {195    position: absolute;196    left: 0;197    bottom: 120px;198    width: 1080px;199    height: 160px;200    background: #2E3135;201    display: flex;202    align-items: center;203    justify-content: space-around;204    color: #BFC5CA;205  }206  .nav-item {207    display: flex;208    flex-direction: column;209    align-items: center;210    gap: 14px;211    font-size: 34px;212  }213  .nav-item svg {214    width: 64px;215    height: 64px;216    stroke: #BFC5CA;217    fill: none;218    stroke-width: 3.5;219  }220  .nav-item.active svg {221    stroke: #82A7FF;222  }223  .nav-item.active .label {224    color: #82A7FF;225    font-weight: 600;226  }227  .label {228    color: #BFC5CA;229  }230 231  /* Gesture bar */232  .gesture {233    position: absolute;234    left: 50%;235    transform: translateX(-50%);236    bottom: 40px;237    width: 360px;238    height: 18px;239    background: #EDEDED;240    border-radius: 12px;241    opacity: 0.8;242  }243</style>244</head>245<body>246<div id="render-target">247 248  <!-- Status bar -->249  <div class="statusbar">250    <div class="status-left">251      <div>11:50</div>252      <div class="status-icon">253        <!-- Play triangle -->254        <svg viewBox="0 0 24 24">255          <polygon points="6,4 20,12 6,20" fill="#D9D9D9" stroke="none"></polygon>256        </svg>257      </div>258    </div>259    <div class="status-right">260      <div class="status-icon">261        <!-- Location pin -->262        <svg viewBox="0 0 24 24">263          <path d="M12 22s-7-8-7-12a7 7 0 1 1 14 0c0 4-7 12-7 12z"></path>264          <circle cx="12" cy="10" r="3"></circle>265        </svg>266      </div>267      <div class="status-icon">268        <!-- Wi-Fi -->269        <svg viewBox="0 0 24 24">270          <path d="M2 8c5-4 15-4 20 0"></path>271          <path d="M5 11c4-3 10-3 14 0"></path>272          <path d="M8 14c3-2 5-2 8 0"></path>273          <circle cx="12" cy="18" r="1.8" fill="#D9D9D9" stroke="none"></circle>274        </svg>275      </div>276      <div class="status-icon">277        <!-- Battery -->278        <svg viewBox="0 0 26 24">279          <rect x="2" y="5" width="18" height="14" rx="2"></rect>280          <rect x="21" y="9" width="3" height="6" rx="1" fill="#D9D9D9" stroke="none"></rect>281          <rect x="4.5" y="7.5" width="13" height="9" fill="#D9D9D9" stroke="none"></rect>282        </svg>283      </div>284    </div>285  </div>286 287  <!-- Header title and actions -->288  <div class="header">289    <div class="title-row">290      <div class="title">Journal</div>291      <div class="top-actions">292        <div class="round-btn">293          <!-- Refresh icon -->294          <svg viewBox="0 0 24 24">295            <path d="M21 12a9 9 0 0 0-15-6"></path>296            <polyline points="6,5 6,11 1,11"></polyline>297            <path d="M3 12a9 9 0 0 0 15 6"></path>298            <polyline points="18,19 18,13 23,13"></polyline>299          </svg>300        </div>301        <div class="avatar">C</div>302      </div>303    </div>304  </div>305 306  <!-- Today and metrics -->307  <div class="today-row">308    <div>Today</div>309    <div class="metrics">310      <div class="metric">311        <!-- Steps icon (shoe/running) -->312        <svg viewBox="0 0 24 24">313          <path d="M5 16c2-1 5-1 8 1l4-5-3-3-5 4c-2 1-3 2-4 3z"></path>314        </svg>315        <span>0 steps</span>316      </div>317      <div class="metric heart">318        <!-- Heart icon -->319        <svg viewBox="0 0 24 24">320          <path d="M12 21s-8-6-9-10a5 5 0 0 1 9-3 5 5 0 0 1 9 3c-1 4-9 10-9 10z" stroke="#79D08F"></path>321        </svg>322        <span>0 pts</span>323      </div>324    </div>325  </div>326  <div class="divider"></div>327 328  <!-- Entry card -->329  <div class="entry">330    <div class="entry-card">331      <div class="entry-top">332        <!-- Tiny walking icon -->333        <svg viewBox="0 0 24 24" width="36" height="36" style="stroke:#B9BFC4;fill:none;stroke-width:3.5;">334          <circle cx="10" cy="4" r="2"></circle>335          <path d="M8 7l3 3-1 3-3 4"></path>336          <path d="M12 10l4 2 2 5"></path>337        </svg>338        <div>11:32 AM</div>339      </div>340      <div class="entry-title">Lunch walk</div>341      <div class="entry-subtitle">0.02 miles in 2 min</div>342    </div>343  </div>344 345  <!-- Entry action (edit pencil) -->346  <div class="entry-action">347    <svg viewBox="0 0 24 24">348      <path d="M3 17l3.5-.5L17 6l-3-3L3.5 14.5z"></path>349      <path d="M14 3l3 3"></path>350    </svg>351  </div>352 353  <!-- Floating Add Button with Google-colored plus -->354  <div class="fab">355    <svg viewBox="0 0 64 64">356      <rect x="30" y="12" width="4" height="40" fill="#34A853"></rect>357      <rect x="12" y="30" width="40" height="4" fill="#4285F4"></rect>358      <rect x="30" y="12" width="4" height="18" fill="#EA4335"></rect>359      <rect x="30" y="34" width="4" height="18" fill="#FBBC05"></rect>360    </svg>361  </div>362 363  <!-- Bottom navigation -->364  <div class="bottom-nav">365    <div class="nav-item">366      <!-- Timer icon -->367      <svg viewBox="0 0 24 24">368        <circle cx="12" cy="13" r="8"></circle>369        <path d="M12 13l4-2"></path>370        <rect x="9" y="3" width="6" height="2" rx="1"></rect>371      </svg>372      <div class="label"> </div>373    </div>374    <div class="nav-item active">375      <!-- Clipboard icon -->376      <svg viewBox="0 0 24 24">377        <rect x="6" y="6" width="12" height="14" rx="2"></rect>378        <rect x="9" y="3" width="6" height="4" rx="1"></rect>379        <path d="M9 11h6"></path>380        <path d="M9 15h6"></path>381      </svg>382      <div class="label">Journal</div>383    </div>384    <div class="nav-item">385      <!-- List icon -->386      <svg viewBox="0 0 24 24">387        <path d="M5 7h14"></path>388        <path d="M5 12h14"></path>389        <path d="M5 17h14"></path>390      </svg>391      <div class="label"> </div>392    </div>393    <div class="nav-item">394      <!-- Person icon -->395      <svg viewBox="0 0 24 24">396        <circle cx="12" cy="8" r="4"></circle>397        <path d="M4 20c2-4 6-6 8-6s6 2 8 6"></path>398      </svg>399      <div class="label"> </div>400    </div>401  </div>402 403  <!-- Gesture bar -->404  <div class="gesture"></div>405</div>406</body>407</html>