GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Deep Sleep 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;10    position: relative; overflow: hidden;11    background: #212a36;12  }13 14  /* Status bar */15  .status-bar {16    height: 120px;17    background: #1b2330;18    color: #c7d0da;19    display: flex; align-items: center; justify-content: space-between;20    padding: 0 28px;21    font-size: 36px;22  }23  .status-icons { display: flex; align-items: center; gap: 24px; }24  .icon-small svg { width: 36px; height: 36px; fill: #c7d0da; }25 26  /* Search header */27  .search-header {28    height: 160px;29    background: #283345;30    display: flex; align-items: center;31    padding: 0 32px;32    color: #e5eef7;33    border-bottom: 1px solid rgba(255,255,255,0.06);34  }35  .search-row { display: flex; align-items: center; gap: 28px; width: 100%; }36  .search-row .label { font-size: 44px; color: #e8edf4; flex: 1; }37  .header-icon svg { width: 48px; height: 48px; fill: #cfd8e3; }38 39  /* Tabs */40  .tabs {41    height: 120px;42    background: #2a3545;43    display: flex; align-items: center;44    padding: 0 32px;45    position: relative;46    color: #aab4c1;47    gap: 86px;48    border-bottom: 1px solid rgba(255,255,255,0.05);49  }50  .tab { font-size: 34px; }51  .tab.active { color: #ffffff; }52  .tabs .active-underline {53    position: absolute; bottom: 0; left: 32px;54    width: 140px; height: 6px; background: #5dd0cf; border-radius: 3px;55  }56 57  /* Grid */58  .content {59    padding: 24px 24px 140px 24px;60  }61  .grid {62    display: flex; flex-wrap: wrap; gap: 24px;63  }64  .card {65    width: calc((1080px - 24px*3) / 2);66    color: #ffffff;67  }68  .thumb {69    height: 320px;70    background: #E0E0E0;71    border: 1px solid #BDBDBD;72    border-radius: 18px;73    display: flex; justify-content: center; align-items: center;74    color: #757575;75    font-size: 32px;76    position: relative;77  }78 79  /* Overlays */80  .badge {81    position: absolute; top: 14px; left: 14px;82    width: 56px; height: 56px; border-radius: 28px;83    background: #f7c3d0; display: flex; align-items: center; justify-content: center;84    box-shadow: 0 2px 6px rgba(0,0,0,0.25);85  }86  .badge svg { width: 34px; height: 34px; fill: #ffffff; }87  .add-btn {88    position: absolute; top: 14px; right: 14px;89    width: 56px; height: 56px; border-radius: 28px;90    background: rgba(255,255,255,0.18);91    display: flex; align-items: center; justify-content: center;92    border: 1px solid rgba(255,255,255,0.25);93  }94  .add-btn svg { width: 28px; height: 28px; stroke: #ffffff; stroke-width: 6; }95 96  .title { margin-top: 22px; font-size: 38px; line-height: 44px; color: #ffffff; }97  .subtitle { margin-top: 10px; font-size: 30px; color: #93A1AF; }98 99  /* Gesture bar */100  .gesture {101    position: absolute; bottom: 24px; left: 50%;102    transform: translateX(-50%);103    width: 300px; height: 10px; border-radius: 6px;104    background: #e9e9ea;105    opacity: 0.8;106  }107</style>108</head>109<body>110<div id="render-target">111 112  <!-- Status Bar -->113  <div class="status-bar">114    <div>3:56</div>115    <div class="status-icons">116      <span class="icon-small">117        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="6"/></svg>118      </span>119      <span class="icon-small">120        <svg viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" rx="3"/></svg>121      </span>122      <span class="icon-small">123        <svg viewBox="0 0 24 24"><path d="M2 18h20M6 14h12M10 10h4" stroke="#c7d0da" stroke-width="2" fill="none"/></svg>124      </span>125      <span class="icon-small">126        <svg viewBox="0 0 24 24"><path d="M3 12l4 4 6-6" stroke="#c7d0da" stroke-width="2" fill="none"/></svg>127      </span>128      <span class="icon-small">129        <svg viewBox="0 0 24 24"><path d="M3 12h18" stroke="#c7d0da" stroke-width="2"/></svg>130      </span>131      <span class="icon-small">132        <svg viewBox="0 0 24 24"><path d="M3 8h14l2 2v4l-2 2H3z" fill="#c7d0da"/></svg>133      </span>134    </div>135  </div>136 137  <!-- Search Header -->138  <div class="search-header">139    <div class="search-row">140      <span class="header-icon">141        <svg viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6" fill="#cfd8e3"/></svg>142      </span>143      <span class="header-icon">144        <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M20 20l-4-4" stroke="#cfd8e3" stroke-width="2"/></svg>145      </span>146      <div class="label">deep sleep</div>147      <span class="header-icon">148        <svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18" stroke="#cfd8e3" stroke-width="2"/></svg>149      </span>150    </div>151  </div>152 153  <!-- Tabs -->154  <div class="tabs">155    <div class="tab active">All</div>156    <div class="tab">5 min</div>157    <div class="tab">10 min<