GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>New Folder Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #ffffff;15    font-family: Arial, Helvetica, sans-serif;16    color: #212121;17  }18 19  /* Top blue app area */20  .top-area {21    position: absolute;22    top: 0;23    left: 0;24    width: 1080px;25    height: 300px; /* includes status + app bar */26    background: #03A9F4;27  }28 29  /* Status bar */30  .status-bar {31    height: 100px;32    padding: 0 36px;33    color: #fff;34    display: flex;35    align-items: center;36    justify-content: space-between;37    font-size: 40px;38    letter-spacing: 0.5px;39    opacity: 0.95;40  }41  .status-right {42    display: flex;43    align-items: center;44    gap: 24px;45  }46  .icon {47    display: inline-flex;48    width: 48px;49    height: 48px;50    align-items: center;51    justify-content: center;52  }53  .icon svg { width: 48px; height: 48px; fill: none; stroke: #fff; stroke-width: 4; }54 55  /* App bar */56  .app-bar {57    height: 200px;58    display: flex;59    align-items: center;60    padding: 0 36px;61    box-sizing: border-box;62    color: #fff;63  }64  .app-title {65    font-size: 64px;66    font-weight: 600;67    margin-left: 24px;68  }69  .spacer { flex: 1; }70  .action-disabled {71    font-size: 48px;72    letter-spacing: 2px;73    opacity: 0.55;74  }75 76  /* Content */77  .content {78    position: absolute;79    top: 300px;80    left: 0;81    right: 0;82    bottom: 140px; /* leave room for gesture bar */83    background: #ffffff;84  }85  .field {86    margin: 60px 40px 0 40px;87    padding: 16px 0 24px 0;88    border-bottom: 4px solid #E0E0E0;89  }90  .field input {91    width: 100%;92    border: none;93    outline: none;94    font-size: 72px;95    color: #263238;96  }97  .field input::placeholder {98    color: #90A4AE;99  }100 101  /* Bottom gesture/nav bar */102  .gesture-bar {103    position: absolute;104    left: 0;105    right: 0;106    bottom: 0;107    height: 140px;108    background: #000;109    display: flex;110    align-items: center;111    justify-content: center;112  }113  .gesture-pill {114    width: 220px;115    height: 14px;116    background: #E0E0E0;117    border-radius: 10px;118    opacity: 0.9;119  }120</style>121</head>122<body>123<div id="render-target">124  <!-- Top status and app bar -->125  <div class="top-area">126    <div class="status-bar">127      <div class="status-left">8:48</div>128      <div class="status-right">129        <!-- simple placeholders for status icons -->130        <div class="icon" title="signal">131          <svg viewBox="0 0 24 24"><path d="M2 20h2M6 16h2M10 12h2M14 8h2M18 4h2"/></svg>132        </div>133        <div class="icon" title="wifi">134          <svg viewBox="0 0 24 24"><path d="M2 8c5-5 15-5 20 0"/><path d="M6 12c3-3 9-3 12 0"/><path d="M10 16c1.5-1.5 4.5-1.5 6 0"/><circle cx="12" cy="19" r="1.5" fill="#fff" stroke="none"/></svg>135        </div>136        <div class="icon" title="battery">137          <svg viewBox="0 0 28 24">138            <rect x="2" y="6" width="20" height="12" rx="2" ry="2" stroke="#fff" fill="none" stroke-width="3"/>139            <rect x="4.5" y="8.5" width="12" height="7" fill="#fff" stroke="none"/>140            <rect x="22.5" y="9" width="3.5" height="6" rx="1" fill="#fff" stroke="none"/>141          </svg>142        </div>143      </div>144    </div>145 146    <div class="app-bar">147      <div class="icon" title="close">148        <svg viewBox="0 0 24 24"><path d="M4 4L20 20M20 4L4 20"/></svg>149      </div>150      <div class="app-title">New Folder</div>151      <div class="spacer"></div>152      <div class="action-disabled">SAVE</div>153    </div>154  </div>155 156  <!-- Main content -->157  <div class="content">158    <div class="field">159      <input type="text" placeholder="Title">160    </div>161  </div>162 163  <!-- Gesture bar -->164  <div class="gesture-bar">165    <div class="gesture-pill"></div>166  </div>167</div>168</body>169</html>