GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Cycling data</title>6<style>7 body { margin: 0; padding: 0; background: transparent; }8 #render-target {9 width: 1080px; height: 2400px;10 position: relative; overflow: hidden;11 background: #000000;12 font-family: Roboto, Arial, sans-serif;13 color: #ffffff;14 }15 .status-bar {16 position: absolute; top: 0; left: 0; width: 100%;17 height: 120px; background: #1f1f1f; color: #fff;18 display: flex; align-items: center; padding: 0 36px;19 box-sizing: border-box;20 }21 .status-left { display: flex; align-items: center; gap: 18px; }22 .status-time { font-size: 42px; font-weight: 600; letter-spacing: 0.5px; }23 .status-right {24 margin-left: auto; display: flex; align-items: center; gap: 28px;25 }26 .status-text { font-size: 32px; color: #e0e0e0; }27 .icon { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; }28 .app-bar {29 position: absolute; top: 120px; left: 0; width: 100%;30 height: 160px; background: #2b2b2b; color: #ffffff;31 display: flex; align-items: center; padding: 0 36px;32 box-sizing: border-box;33 border-bottom: 1px solid #3a3a3a;34 }35 .back-icon { width: 64px; height: 64px; margin-right: 24px; }36 .title { font-size: 64px; font-weight: 500; }37 .menu { margin-left: auto; display: flex; gap: 8px; }38 .dot { width: 12px; height: 12px; background: #cfcfcf; border-radius: 50%; }39 .content {40 position: absolute; top: 280px; left: 0; right: 0; bottom: 80px;41 padding: 24px 36px; box-sizing: border-box;42 background: #000000;43 }44 .mono {45 font-family: SFMono-Regular, Menlo, Consolas, "Courier New", monospace;46 font-size: 44px; line-height: 68px; color: #ffffff;47 white-space: pre-wrap;48 }49 .gesture {50 position: absolute; bottom: 24px; left: 50%;51 transform: translateX(-50%);52 width: 320px; height: 16px; background: #eaeaea; border-radius: 12px; opacity: 0.9;53 }54</style>55</head>56<body>57<div id="render-target">58 <div class="status-bar">59 <div class="status-left">60 <div class="status-time">10:54</div>61 <div class="status-text">28°</div>62 <div class="icon">63 <svg viewBox="0 0 24 24" width="32" height="32" fill="#e0e0e0">64 <circle cx="12" cy="12" r="10"></circle>65 </svg>66 </div>67 <div class="icon">68 <svg viewBox="0 0 24 24" width="32" height="32" fill="none" stroke="#e0e0e0" stroke-width="2">69 <path d="M2 16l6-6 4 4 4-4 6 6"></path>70 </svg>71 </div>72 <div class="icon">73 <svg viewBox="0 0 24 24" width="32" height="32" fill="none" stroke="#e0e0e0" stroke-width="2">74 <path d="M3 12h6M11 8h6M11 16h6"></path>75 </svg>76 </div>77 </div>78 <div class="status-right">79 <div class="icon">80 <svg viewBox="0 0 24 24" width="36" height="36" fill="none" stroke="#e0e0e0" stroke-width="2">81 <rect x="3" y="6" width="16" height="12" rx="2" ry="2"></rect>82 <rect x="19" y="10" width="2" height="4" fill="#e0e0e0"></rect>83 </svg>84 </div>85 </div>86 </div>87 88 <div class="app-bar">89 <svg class="back-icon" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">90 <path d="M15 18l-6-6 6-6"></path>91 </svg>92 <div class="title">Cycling data</div>93 <div class="menu">94 <div class="dot"></div>95 <div class="dot"></div>96 <div class="dot"></div>97 </div>98 </div>99 100 <div class="content">101 <pre class="mono">TY - NEWS102AU - Strugatz, Rachel103DA - 2020/05/28/104DB - Gale Academic OneFile Select105DP - Gale106KW - Peloton Interactive Inc.107KW - Exercise equipment industry108KW - Personal care industry109LA - English110M1 - D3(L)111M3 - Article112PY - 2020///113SN - 03624331114SP - D3(L)115TI - Peloton Is Breaking Away From SoulCycle116T2 - The New York Times117UR -118https://link.gale.com/apps/doc/A625035793/EAIM?u=anon~ccd71687&sid=sitemap&xid=af3d2f24119Y2 - 2023/9/3/120ER -</pre>121 </div>122 123 <div class="gesture"></div>124</div>125</body>126</html>