GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>My Files - Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #ffffff;14    border-radius: 0;15    box-shadow: none;16  }17 18  /* Status bar */19  .statusbar {20    height: 100px;21    padding: 0 36px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    color: #4a4a4a;26    font-size: 36px;27  }28  .status-left { display: flex; align-items: center; gap: 26px; }29  .status-right { display: flex; align-items: center; gap: 28px; }30 31  /* Header */32  .header {33    height: 180px;34    padding: 0 36px;35    display: flex;36    align-items: center;37    position: relative;38  }39  .hamburger {40    width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; margin-right: 24px;41  }42  .title-wrap { display: flex; flex-direction: column; }43  .title {44    font-size: 58px; color: #333; line-height: 1.1; font-weight: 500;45  }46  .subtitle { font-size: 28px; color: #9e9e9e; margin-top: 6px; }47 48  .header-actions {49    position: absolute; right: 36px; top: 50%; transform: translateY(-50%);50    display: flex; align-items: center; gap: 40px;51  }52 53  /* Breadcrumb */54  .breadcrumb {55    height: 86px;56    padding: 0 36px;57    display: flex;58    align-items: center;59    border-top: 1px solid #eeeeee;60    color: #bdbdbd;61    font-size: 34px;62    letter-spacing: 0.5px;63  }64  .crumb { color: #bdbdbd; }65  .sep {66    margin: 0 16px;67    color: #bdbdbd;68    display: inline-flex;69    align-items: center;70  }71  .current { color: #1e88e5; font-weight: 500; }72 73  /* File list */74  .list { padding-top: 16px; }75  .item {76    display: flex;77    align-items: center;78    padding: 24px 36px;79    border-top: 1px solid #eeeeee;80  }81  .file-icon {82    width: 120px; height: 120px; border-radius: 60px;83    background: #d84335; display: flex; align-items: center; justify-content: center;84    margin-right: 36px; color: #fff;85  }86  .file-info { display: flex; flex-direction: column; }87  .file-name { font-size: 40px; color: #444; margin-bottom: 10px; }88  .file-meta { font-size: 28px; color: #9e9e9e; }89  .file-date {90    margin-left: auto; color: #9e9e9e; font-size: 28px;91  }92 93  /* Floating Action Button */94  .fab {95    position: absolute;96    right: 48px;97    bottom: 180px;98    width: 144px; height: 144px; border-radius: 72px;99    background: #f4b400;100    box-shadow: 0 12px 18px rgba(0,0,0,0.24);101    display: flex; align-items: center; justify-content: center;102  }103 104  /* Gesture bar */105  .gesture-bar {106    position: absolute;107    bottom: 30px; left: 50%; transform: translateX(-50%);108    width: 420px; height: 16px; border-radius: 8px; background: #616161;109    opacity: 0.6;110  }111 112  /* Utility */113  .icon-btn svg { display: block; }114</style>115</head>116<body>117<div id="render-target">118 119  <!-- Status bar -->120  <div class="statusbar">121    <div class="status-left">122      <div>11:17</div>123      <div style="color:#616161;">33°</div>124      <div style="color:#9e9e9e;">my</div>125      <div style="color:#9e9e9e;">⏻</div>126      <div style="color:#9e9e9e;">↺</div>127    </div>128    <div class="status-right">129      <!-- Wi-Fi -->130      <svg width="48" height="48" viewBox="0 0 24 24" fill="#616161">131        <path d="M12 20l2-2-2-2-2 2 2 2zm-6.7-8.3 1.4 1.4A8 8 0 0 1 12 12a8 8 0 0 1 5.3 1.1l1.4-1.4A10 10 0 0 0 12 10a10 10 0 0 0-6.7 1.7z"/>132        <path d="M3 9.5 4.4 11A12 12 0 0 1 12 8a12 12 0 0 1 7.6 3l1.4-1.5A14 14 0 0 0 12 6.5 14 14 0 0 0 3 9.5z"/>133      </svg>134      <!-- Battery -->135      <svg width="48" height="48" viewBox="0 0 24 24" fill="#616161">136        <path d="M18 6h1v12h-1v1H4V5h14v1zM6 7h10v10H6V7z"/>137      </svg>138    </div>139  </div>140 141  <!-- Header -->142  <div class="header">143    <div class="hamburger icon-btn">144      <svg width="60" height="60" viewBox="0 0 24 24" fill="#4a4a4a">145        <path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/>146      </svg>147    </div>148    <div class="title-wrap">149      <div class="title">My Files</div>150      <div class="subtitle">1 file</div>151    </div>152    <div class="header-actions">153      <!-- search -->154      <div class="icon-btn">155        <svg width="60" height="60" viewBox="0 0 24 24" fill="#1e88e5">156          <path d="M15.5 14h-.8l-.3-.3A6.5 6.5 0 1 0 14 15.5l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z"/>157        </svg>158      </div>159      <!-- more -->160      <div class="icon-btn">161        <svg width="60" height="60" viewBox="0 0 24 24" fill="#4a4a4a">162          <circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/>163        </svg>164      </div>165    </div>166  </div>167 168  <!-- Breadcrumb -->169  <div class="breadcrumb">170    <div class="crumb">INTERNAL MEMORY</div>171    <div class="sep">172      <svg width="32" height="32" viewBox="0 0 24 24" fill="#bdbdbd">173        <path d="M9 6l6 6-6 6z"/>174      </svg>175    </div>176    <div class="current">MUSIC</div>177  </div>178 179  <!-- Single file item -->180  <div class="list">181    <div class="item">182      <div class="file-icon">183        <!-- simple music note -->184        <svg width="64" height="64" viewBox="0 0 24 24" fill="#ffffff">185          <path d="M9 4v10.3A3.5 3.5 0 1 0 11 18V8h7V4H9z"/>186        </svg>187      </div>188      <div class="file-info">189        <div class="file-name">Lyrics.mp3</div>190        <div class="file-meta">1.11 KB</div>191      </div>192      <div class="file-date">Jun 15, 2023, 11:20:58 AM</div>193    </div>194    <div style="height:1px;background:#eeeeee;margin:0 36px;"></div>195  </div>196 197  <!-- Floating action button -->198  <div class="fab">199    <svg width="72" height="72" viewBox="0 0 24 24" fill="#ffffff">200      <path d="M11 5h2v14h-2zM5 11h14v2H5z"/>201    </svg>202  </div>203 204  <!-- Bottom gesture bar -->205  <div class="gesture-bar"></div>206 207</div>208</body>209</html>