GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>Cycling data - Bottom Sheet</title>6<style>7  body { margin:0; padding:0; background: transparent; font-family: Roboto, Arial, sans-serif; }8  #render-target {9    width:1080px; height:2400px; position:relative; overflow:hidden;10    background:#0c0c0c;11  }12 13  /* Status bar */14  .statusbar {15    position:absolute; top:0; left:0; width:100%; height:120px;16    background:#111; color:#fff; display:flex; align-items:center; padding:0 32px;17    font-weight:500; font-size:40px;18  }19  .status-icons { margin-left:auto; display:flex; align-items:center; gap:28px; color:#eaeaea; }20  .status-dot { width:18px; height:18px; border-radius:50%; background:#eaeaea; opacity:.9; }21  .status-icon-svg svg { width:44px; height:44px; fill:#eaeaea; }22 23  /* App header */24  .app-header {25    position:absolute; top:120px; left:0; width:100%; height:180px;26    display:flex; align-items:center; padding:0 28px 0 24px; color:#c8d1d1; background:#0c0c0c;27  }28  .app-header .title { font-size:72px; font-weight:500; margin-left:24px; letter-spacing:0.5px; }29  .app-header .spacer { flex:1; }30  .icon-btn svg { width:56px; height:56px; fill:#c8d1d1; }31 32  /* Underlying content */33  .content {34    position:absolute; top:300px; left:0; width:100%; bottom:0;35    padding:24px 36px; color:#a9a9a9; font-family: "SFMono-Regular", Menlo, Consolas, monospace;36    font-size:42px; line-height:70px;37  }38  .content .line { opacity:.6; }39 40  /* Bottom sheet */41  .sheet {42    position:absolute; left:0; right:0; top:540px; height:1600px;43    background:#172424; color:#e7f2f2; border-top-left-radius:48px; border-top-right-radius:48px;44    box-shadow: 0 -18px 40px rgba(0,0,0,0.55);45  }46  .sheet-header {47    display:flex; align-items:center; padding:44px 44px 32px 44px; color:#e7f2f2; font-size:54px; font-weight:500;48  }49  .file-icon {50    width:60px; height:60px; border-radius:8px; background:#76a9ff; margin-right:24px; position:relative;51  }52  .file-icon::after { content:""; position:absolute; right:0; top:0; width:20px; height:20px; background:#dce9ff; border-bottom-left-radius:6px; }53 54  .action-list { padding:20px 0; }55  .action-row {56    display:flex; align-items:center; gap:28px;57    padding:26px 44px; color:#d7e6e6; font-size:48px;58  }59  .action-row svg { width:48px; height:48px; fill:#b8c7c7; }60  .divider { height:2px; background:#243535; margin:10px 44px; }61 62  /* Gesture bar */63  .gesture {64    position:absolute; bottom:40px; left:50%; transform:translateX(-50%);65    width:280px; height:10px; background:#f4f4f4; border-radius:6px; opacity:.85;66  }67</style>68</head>69<body>70<div id="render-target">71 72  <!-- Status bar -->73  <div class="statusbar">74    10:5075    <div class="status-icons">76      <div style="font-size:40px; opacity:.9;">28°</div>77      <div class="status-dot"></div>78      <div class="status-icon-svg">79        <!-- Mail icon -->80