GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Cycling Detail</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:#0d0d0d; color:#e5e5e5;11  }12  .status-bar{13    position:absolute; top:0; left:0; right:0; height:110px;14    background:#0a0a0a; color:#dcdcdc; display:flex; align-items:center;15    padding:0 28px; font-size:36px; letter-spacing:0.5px;16  }17  .status-right{ margin-left:auto; display:flex; gap:22px; opacity:0.8; }18  .app-bar{19    position:absolute; top:110px; left:0; right:0; height:120px;20    display:flex; align-items:center; padding:0 30px; color:#bfbfbf;21  }22  .app-title{ font-size:48px; margin-left:22px; }23  .app-actions{ margin-left:auto; display:flex; gap:38px; }24  .icon{ width:50px; height:50px; fill:#cfcfcf; opacity:0.9; }25  .icon.touch{ width:56px; height:56px; }26  .date-tabs{27    position:absolute; top:230px; left:0; right:0; height:140px;28    display:flex; align-items:flex-end; padding:0 34px 16px;29    color:#9aa0a6; font-size:38px; background:#0f0f0f;30    box-shadow: inset 0 -1px 0 rgba(255,255,255,0.06);31  }32  .date-left{ opacity:0.5; }33  .date-center{ margin:0 auto; color:#cfcfcf; }34  .tab-indicator{35    position:absolute; left:50%; transform:translateX(-50%);36    bottom:0; height:6px; width:330px; background:#50565c; border-radius:6px;37  }38  .content{39    position:absolute; top:370px; left:0; right:0; bottom:0;40  }41  .cycle-circle{42    width:520px; height:520px; border-radius:50%;43    background:#0e1630; margin:70px auto 30px;44    display:flex; align-items:center; justify-content:center;45    color:#cfd8dc; font-size:160px;46    box-shadow: 0 0 0 2px rgba(255,255,255,0.03) inset;47  }48  .title-large{49    width:92%; margin:24px auto 0; padding:40px 36px;50    background:linear-gradient(to bottom, rgba(0,0,0,0.65), rgba(0,0,0,0.0));51    border-radius:28px; color:#cfcfcf; font-size:72px; font-weight:600;52  }53 54  /* Bottom sheet */55  .sheet{56    position:absolute; left:0; right:0; bottom:0; height:1340px;57    background:#2d2d2d; border-top-left-radius:28px; border-top-right-radius:28px;58    padding-top:26px; box-shadow:0 -8px 24px rgba(0,0,0,0.45);59  }60  .sheet-section{ padding:10px 0 0; }61  .row{62    display:flex; align-items:center; justify-content:space-between;63    padding:38px 40px; font-size:46px; color:#e5e5e5;64    border-bottom:1px solid rgba(255,255,255,0.06);65  }66  .row .right{ opacity:0.8; }67  .section-title{68    font-size:40px; color:#c9c9c9; opacity:0.9; padding:30px 40px 10px;69    text-transform:none; letter-spacing:0.3px;70  }71  .chevron{72    width:40px; height:40px; fill:#d9d9d9;73  }74</style>75</head>76<body>77<div id="render-target">78 79  <!-- Status bar -->80  <div class="status-bar">81    <div>2:58</div>82    <div class="status-right">83      <div style="width:28px; height:28px; background:#dcdcdc; border-radius:4px; opacity:0.6;"></div>84      <div style="width:28px; height:28px; background:#dcdcdc; border-radius:50%; opacity:0.6;"></div>85      <div style="width:28px; height:28px; background:#dcdcdc; border-radius:2px; opacity:0.6;"></div>86    </div>87  </div>88 89  <!-- App bar -->90  <div class="app-bar">91    <!-- back arrow -->92    <svg class="icon touch" viewBox="0 0 24 24">93      <path d="M15.4 4.6L8 12l7.4 7.4-1.4 1.4L5.2 12l8.8-8.8z"></path>94    </svg>95    <div class="app-title">Cycling</div>96    <div class="app-actions">97      <!-- share/upload -->98      <svg class="icon" viewBox="0 0 24 24">99        <path d="M12 3l4 4-1.4 1.4L13 6.8V16h-2V6.8L9.4 8.4 8 7l4-4zM5 20h14v2H5z"></path>100      </svg>101      <!-- kebab -->102      <svg class="icon" viewBox="0 0 24 24">103        <circle cx="12" cy="5" r="2"></circle>104        <circle cx="12" cy="12" r="2"></circle>105        <circle cx="12" cy="19" r="2"></circle>106      </svg>107    </div>108  </div>109 110  <!-- Date tabs -->111  <div class="date-tabs">112    <div class="date-left">12:35 PM</div>113    <div class="date-center">Today, 12:48 PM</div>114    <div class="tab-indicator"></div>115  </div>116 117  <div class="content">118    <div class="cycle-circle">🚴</div>119    <div class="title-large">Cycling</div>120  </div>121 122  <!-- Bottom sheet -->123  <div class="sheet">124    <div class="sheet-section">125      <div class="row">126        <div>Edit</div>127        <svg class="chevron" viewBox="0 0 24 24">128          <path d="M9 6l6 6-6 6" stroke="#ddd" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>129        </svg>130      </div>131      <div class="row" style="border-bottom:1px solid rgba(255,255,255,0.08);">132        <div>Delete</div>133        <svg class="chevron" viewBox="0 0 24 24">134          <path d="M9 6l6 6-6 6" stroke="#ddd" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>135        </svg>136      </div>137    </div>138 139    <div class="section-title">Options</div>140    <div class="row">141      <div>Add a photo</div>142      <svg class="chevron" viewBox="0 0 24 24">143        <path d="M9 6l6 6-6 6" stroke="#ddd" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>144      </svg>145    </div>146    <div class="row">147      <div>Set a goal</div>148      <svg class="chevron" viewBox="0 0 24 24">149        <path d="M9 6l6 6-6 6" stroke="#ddd" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>150      </svg>151    </div>152 153    <div class="section-title">Learn more</div>154    <div class="row" style="border-bottom:none;">155      <div>Activity Guidelines</div>156      <svg class="chevron" viewBox="0 0 24 24">157        <path d="M9 6l6 6-6 6" stroke="#ddd" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>158      </svg>159    </div>160  </div>161 162</div>163</body>164</html>