GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Journal UI</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; position:relative; overflow:hidden;10    background:#ffffff; border-radius:0; box-shadow:none;11  }12  /* Status bar */13  .status-bar {14    position:absolute; top:20px; left:30px; right:30px; height:60px;15    display:flex; align-items:center; justify-content:space-between; color:#333;16    font-size:32px;17  }18  .status-left { display:flex; align-items:center; gap:18px; }19  .status-right { display:flex; align-items:center; gap:20px; }20  .icon { width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; }21  .icon svg { width:100%; height:100%; }22  /* Header area */23  .top-actions {24    position:absolute; top:160px; right:40px; display:flex; align-items:center; gap:26px;25  }26  .circle-btn {27    width:88px; height:88px; border-radius:50%; background:#f1f3f4; display:flex; align-items:center; justify-content:center;28  }29  .avatar {30    width:88px; height:88px; border-radius:50%; background:#cfd8dc; color:#37474f; font-weight:bold; font-size:40px;31    display:flex; align-items:center; justify-content:center;32  }33  .title {34    position:absolute; top:240px; left:60px; font-size:112px; font-weight:500; color:#202124;35  }36  /* Today row */37  .today-row {38    position:absolute; top:420px; left:60px; right:60px; display:flex; align-items:center; justify-content:space-between;39    border-bottom:1px solid #e0e0e0; padding-bottom:24px;40  }41  .today-left { display:flex; align-items:center; gap:30px; }42  .today-label { font-size:44px; color:#202124; }43  .metrics { display:flex; align-items:center; gap:34px; color:#5f6368; font-size:34px; }44  .metrics .blue { color:#1a73e8; }45  .metrics .green { color:#14a37f; }46  .ring {47    width:60px; height:60px; border-radius:50%;48    display:flex; align-items:center; justify-content:center;49  }50  /* List items */51  .list { position:absolute; top:520px; left:60px; right:60px; }52  .entry {53    display:flex; justify-content:space-between; align-items:center; padding:38px 0; border-bottom:1px solid #eeeeee;54  }55  .entry:last-child { border-bottom:none; }56  .entry .left { display:flex; flex-direction:column; gap:16px; }57  .time-row { display:flex; align-items:center; gap:16px; color:#5f6368; font-size:32px; }58  .entry-title { font-size:48px; color:#202124; }59  .sub { font-size:34px; color:#5f6368; }60  .entry .right .big-circle {61    width:132px; height:132px; border-radius:50%; background:#e8f0fe; display:flex; align-items:center; justify-content:center;62  }63  /* Bottom FAB */64  .fab {65    position:absolute; bottom:240px; right:60px; width:128px; height:128px; border-radius:50%;66    background:#ffffff; box-shadow:0 8px 18px rgba(0,0,0,0.16); display:flex; align-items:center; justify-content:center;67  }68  /* Bottom nav */69  .bottom-nav {70    position:absolute; bottom:76px; left:0; right:0; height:160px; background:#ffffff; border-top:1px solid #e0e0e0;71    display:flex; align-items:center; justify-content:space-around;72  }73  .nav-item { display:flex; flex-direction:column; align-items:center; gap:12px; color:#5f6368; font-size:28px; }74  .nav-item.active { color:#1a73e8; font-weight:600; }75  .nav-icon { width:56px; height:56px; }76  /* Home indicator */77  .home-indicator {78    position:absolute; bottom:22px; left:50%; transform:translateX(-50%);79    width:400px; height:12px; background:#9e9e9e; border-radius:6px;80  }81</style>82</head>83<body>84<div id="render-target">85  <!-- Status bar -->86  <div class="status-bar">87    <div class="status-left">88      <div>1:12</div>89      <div class="icon">90        <svg viewBox="0 0 24 24"><path d="M6 15c0-3 2.5-5.5 5.5-5.5 1.1 0 2.1.3 3 .9C15 8 16.7 7 18.5 7 21 7 23 9 23 11.5S21 16 18.5 16H7.5C6.7 16 6 15.6 6 15z" fill="#9e9e9e"/></svg>91      </div>92    </div>93    <div class="status-right">94      <div class="icon">95        <svg viewBox="0 0 24 24"><path d="M2 18h20l-2.5-6.5c-.3-.8-1-1.5-1.9-1.5H6.4c-.9 0-1.7.6-2 1.5L2 18z" fill="#757575"/></svg>96      </div>97      <div class="icon">98        <svg viewBox="0 0 24 24"><path d="M16 4v16h-2V4h2zm4 6v6h-2v-6h2zM8 10v10H6V10h2zM4 14v6H2v-6h2z" fill="#757575"/></svg>99      </div>100    </div>101  </div>102 103  <!-- Top actions -->104  <div class="top-actions">105    <div class="circle-btn">106      <svg viewBox="0 0 24 24">107        <path d="M12 5v4l3-3M12 19v-4l-3 3M5 12h4l-3-3M19 12h-4l3 3" stroke="#5f6368" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>108      </svg>109    </div>110    <div class="avatar">C</div>111  </div>112 113  <!-- Title -->114  <div class="title">Journal</div>115 116  <!-- Today row -->117  <div class="today-row">118    <div class="today-left">119      <div class="today-label">Today</div>120      <div class="metrics">121        <span class="blue">122          <svg class="icon" viewBox="0 0 24 24">123            <path d="M6 18c1.2-2.8 3.2-4.5 6-5.1 1.6-.4 2.7-1.4 3.2-3 .3-1.1-.4-2.2-1.5-2.5-1.5-.4-2.9.6-3.3 2.1l-.5 1.7-2.5.8C5.7 12.5 4.5 14.3 4 16l2 .1z" fill="#1a73e8"/>124          </svg>125          8,066 steps126        </span>127        <span class="green">128          <svg class="icon" viewBox="0 0 24 24">129            <path d="M12.1 21s-7.1-4.9-7.1-9.4C5 8.4 7.3 6 10.1 6c1.3 0 2.6.6 3.4 1.6C14.3 6.6 15.6 6 16.9 6c2.8 0 5.1 2.4 5.1 5.6 0 4.5-7.1 9.4-7.1 9.4-.6.4-1.2.4-1.8 0z" fill="#14a37f"/>130          </svg>131          117 pts132        </span>133      </div>134    </div>135    <div class="ring">136      <svg viewBox="0 0 48 48">137        <circle cx="24" cy="24" r="20" stroke="#e0e0e0" stroke-width="6" fill="none"/>138        <path d="M24 4a20 20 0 1 1 0 40" stroke="#1a73e8" stroke-width="6" fill="none" stroke-linecap="round"/>139      </svg>140    </div>141  </div>142 143  <!-- Entries list -->144  <div class="list">145    <!-- Entry 1 -->146    <div class="entry">147      <div class="left">148        <div class="time-row">149          <svg class="icon" viewBox="0 0 24 24">150            <path d="M6 19l3-5 2 2 3-6 4 3" stroke="#757575" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>151          </svg>152          <span>11:01 AM</span>153        </div>154        <div class="entry-title">Lunch dance</div>155        <div class="sub">2h 11m • <span style="color:#14a37f;">117 pts</span></div>156      </div>157      <div class="right">158        <div class="big-circle">159          <svg viewBox="0 0 24 24" width="80" height="80">160            <path d="M8 5c1 0 2 .8 2 1.8S9 9 8 9s-2-.8-2-1.8S7 5 8 5zm6 2l-2 3 2 1-3 4-2-1 1-3-3-1 1-2 3 1 1-2 2 0z" fill="#1a73e8"/>161          </svg>162        </div>163      </div>164    </div>165    <!-- Entry 2 -->166    <div class="entry">167      <div class="left">168        <div class="time-row">169          <svg class="icon" viewBox="0 0 24 24">170            <path d="M6 19l3-5 2 2 3-6 4 3" stroke="#757575" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>171          </svg>172          <span>10:00 AM</span>173        </div>174        <div class="entry-title">Dancing</div>175        <div class="sub">1h 1m</div>176      </div>177      <div class="right">178        <div class="big-circle">179          <svg viewBox="0 0 24 24" width="80" height="80">180            <path d="M8 5c1 0 2 .8 2 1.8S9 9 8 9s-2-.8-2-1.8S7 5 8 5zm6 2l-2 3 2 1-3 4-2-1 1-3-3-1 1-2 3 1 1-2 2 0z" fill="#1a73e8"/>181          </svg>182        </div>183      </div>184    </div>185  </div>186 187  <!-- Floating action button -->188  <div class="fab">189    <svg viewBox="0 0 100 100" width="64" height="64">190      <rect x="46" y="18" width="8" height="64" fill="#34a853"/>191      <rect x="18" y="46" width="64" height="8" fill="#4285f4"/>192      <rect x="46" y="18" width="8" height="24" fill="#ea4335"/>193      <rect x="70" y="46" width="12" height="8" fill="#fbbc05"/>194    </svg>195  </div>196 197  <!-- Bottom navigation -->198  <div class="bottom-nav">199    <div class="nav-item">200      <svg class="nav-icon" viewBox="0 0 24 24">201        <circle cx="12" cy="12" r="9" stroke="#5f6368" stroke-width="2" fill="none"/>202        <path d="M12 7v6l4 2" stroke="#5f6368" stroke-width="2" fill="none" stroke-linecap="round"/>203      </svg>204    </div>205    <div class="nav-item active">206      <svg class="nav-icon" viewBox="0 0 24 24">207        <rect x="6" y="4" width="12" height="16" rx="2" ry="2" fill="#1a73e8"/>208        <line x1="9" y1="8" x2="15" y2="8" stroke="#ffffff" stroke-width="2"/>209        <line x1="9" y1="12" x2="15" y2="12" stroke="#ffffff" stroke-width="2"/>210        <line x1="9" y1="16" x2="15" y2="16" stroke="#ffffff" stroke-width="2"/>211      </svg>212      <div>Journal</div>213    </div>214    <div class="nav-item">215      <svg class="nav-icon" viewBox="0 0 24 24">216        <path d="M4 6h16M4 12h16M4 18h12" stroke="#5f6368" stroke-width="2" fill="none" stroke-linecap="round"/>217      </svg>218    </div>219    <div class="nav-item">220      <svg class="nav-icon" viewBox="0 0 24 24">221        <circle cx="12" cy="8" r="4" fill="#5f6368"/>222        <path d="M4 20c1.5-4 6-6 8-6s6.5 2 8 6" fill="none" stroke="#5f6368" stroke-width="2" stroke-linecap="round"/>223      </svg>224    </div>225  </div>226 227  <!-- Home indicator -->228  <div class="home-indicator"></div>229</div>230</body>231</html>