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>Internal storage - Move here</title>6<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">7<style>8  :root{9    --bg:#101417;10    --bar:#101417;11    --divider:#22272b;12    --text:#E8EEF3;13    --muted:#91A0AC;14    --link:#7FB1FF;15    --chip:#A9C8F5;16  }17  body{margin:0;padding:0;background:transparent;font-family:Roboto, Arial, Helvetica, sans-serif;}18  #render-target{19    width:1080px;height:2400px;20    position:relative;overflow:hidden;21    background:var(--bg); color:var(--text);22  }23  /* Status bar */24  .status-bar{25    height:120px; padding:0 40px;26    display:flex; align-items:center; justify-content:space-between;27    color:#C9D2DA; font-size:42px;28  }29  .sb-left{display:flex;align-items:center;gap:22px;}30  .sb-right{display:flex;align-items:center;gap:26px;}31  .dot{width:10px;height:10px;background:#C9D2DA;border-radius:50%;}32  /* App bar */33  .app-bar{34    height:170px; display:flex; align-items:center;35    padding:0 40px; gap:28px;36  }37  .title{font-size:64px; font-weight:600; letter-spacing:0.2px;}38  .grow{flex:1}39  .icon-btn{width:84px;height:84px; display:flex;align-items:center;justify-content:center;}40  .icon{width:54px;height:54px; fill:#C9D2DA;}41  .back{width:70px;height:70px;}42  /* Breadcrumb */43  .breadcrumb{44    padding:0 40px; height:90px; display:flex; align-items:center;45    color:#9FB0BD; font-size:40px;46  }47  .breadcrumb .sep{margin:0 16px;color:#72808A;}48  .breadcrumb .current{color:var(--link); font-weight:500;}49  .divider{height:2px;background:var(--divider);}50  /* Content */51  .content{position:absolute; left:0; right:0; top:380px; bottom:220px; padding:24px 34px;}52  .list-item{53    margin-top:34px;54    height:140px; display:flex; align-items:center; gap:28px;55    padding:0 16px; border-radius:12px;56  }57  .folder-ico{58    width:104px;height:104px;border-radius:52px;59    border:3px solid #3A444B; display:flex; align-items:center; justify-content:center;60  }61  .folder-ico svg{width:64px;height:64px; fill:#A7B6C2;}62  .item-title{font-size:48px; color:#D7E1E8;}63  /* Bottom action bar */64  .bottom-bar{65    position:absolute; left:0; right:0; bottom:0;66    height:200px; display:flex; align-items:center; justify-content:center;67    background:linear-gradient(to top, rgba(0,0,0,0.45), rgba(0,0,0,0.0));68    padding-bottom:16px;69  }70  .move-btn{71    width:980px;height:120px; background:var(--chip);72    color:#0B2640; border-radius:60px; display:flex; align-items:center; justify-content:center;73    font-size:48px; font-weight:600; gap:22px;74    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.15);75  }76  .move-btn .check{width:40px;height:40px; fill:#0B2640;}77</style>78</head>79<body>80<div id="render-target">81  <!-- Status Bar -->82  <div class="status-bar">83    <div class="sb-left">84      <div>11:43</div>85      <div class="dot"></div>86      <div class="dot"></div>87    </div>88    <div class="sb-right">89      <!-- simple wifi icon -->90      <svg class="icon" viewBox="0 0 24 24">91        <path d="M12 20c.9 0 1.6-.7 1.6-1.6S12.9 16.8 12 16.8s-1.6.7-1.6 1.6.7 1.6 1.6 1.6zM4 9.7l1.5 1.6C7.5 9.3 9.7 8.5 12 8.5s4.5.8 6.5 2.8L20 9.7C17.6 7.4 14.9 6.3 12 6.3S6.4 7.4 4 9.7zm-2.7-2.8L2.8 8c2.9-2.7 6.1-4 9.2-4s6.3 1.3 9.2 4l1.5-1.1C19.4 4 15.8 2.5 12 2.5S4.6 4 1.3 6.9z"/>92      </svg>93      <!-- battery -->94      <svg class="icon" viewBox="0 0 24 24">95        <path d="M16 6h1c1.1 0 2 .9 2 2v8c0 1.1-.9 2-2 2H7c-1.1 0-2-.9-2-2V8c0-1.1.9-2 2-2h1V4h8v2zM7 8v8h10V8H7z"/>96      </svg>97    </div>98  </div>99 100  <!-- App Bar -->101  <div class="app-bar">102    <div class="icon-btn">103      <svg class="back" viewBox="0 0 24 24">104        <path fill="#C9D2DA" d="M15.4 4.6L7.9 12l7.5 7.4-1.8 1.8L4.4 12l9.2-9.2 1.8 1.8z"/>105      </svg>106    </div>107    <div class="title">Internal storage</div>108    <div class="grow"></div>109    <div class="icon-btn">110      <!-- grid icon -->111      <svg class="icon" viewBox="0 0 24 24">112        <path d="M3 3h7v7H3V3zm11 0h7v7h-7V3zM3 14h7v7H3v-7zm11 0h7v7h-7v-7z"/>113      </svg>114    </div>115    <div class="icon-btn">116      <!-- sort icon -->117      <svg class="icon" viewBox="0 0 24 24">118        <path d="M4 7h16v2H4V7zm4 5h12v2H8v-2zm6 5h6v2h-6v-2z"/>119      </svg>120    </div>121  </div>122 123  <!-- Breadcrumb -->124  <div class="breadcrumb">125    <span>Internal storage</span>126    <span class="sep">›</span>127    <span class="current">Documents</span>128  </div>129  <div class="divider"></div>130 131  <!-- Content -->132  <div class="content">133    <div class="list-item">134      <div class="folder-ico">135        <svg viewBox="0 0 24 24" aria-hidden="true">136          <path d="M10 4l2 2h7c1.1 0 2 .9 2 2v9c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2h5zm2.5 10.5v-2h-2v-1.5h2V9.9h1.5v1.1h2v1.5h-2v2h-1.5z"/>137        </svg>138      </div>139      <div class="item-title">Add new folder</div>140    </div>141  </div>142 143  <!-- Bottom action -->144  <div class="bottom-bar">145    <div class="move-btn">146      <svg class="check" viewBox="0 0 24 24">147        <path d="M9.2 16.6L4.8 12.2l1.6-1.6 2.8 2.8 8-8 1.6 1.6-9.6 9.6z"/>148      </svg>149      <span>Move here</span>150    </div>151  </div>152</div>153</body>154</html>