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</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #202124; /* dark background */15    color: #E8EAED;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 100%;24    height: 120px;25    padding: 0 32px;26    box-sizing: border-box;27    display: flex;28    align-items: center;29    justify-content: space-between;30    color: #E8EAED;31    font-size: 40px;32    letter-spacing: 0.5px;33  }34  .status-right {35    display: flex; align-items: center; gap: 26px;36  }37  .icon { width: 40px; height: 40px; }38  .battery {39    display: flex; align-items: center; gap: 12px; font-size: 34px; color: #E8EAED;40  }41  .battery svg { width: 52px; height: 32px; }42 43  /* App bar / title */44  .app-bar {45    position: absolute;46    top: 120px;47    left: 0;48    width: 100%;49    height: 140px;50    display: flex;51    align-items: center;52    padding: 0 32px;53    box-sizing: border-box;54    gap: 22px;55  }56  .back-btn svg { width: 56px; height: 56px; fill: #E8EAED; }57  .title { font-size: 64px; font-weight: 500; color: #E8EAED; }58 59  /* Input */60  .form-wrap {61    position: absolute;62    top: 360px;63    left: 40px;64    width: 1000px;65  }66  .input-field {67    position: relative;68    width: 1000px;69    height: 180px;70    border: 3px solid #8AB4F8;71    border-radius: 22px;72    box-sizing: border-box;73    padding: 58px 36px 36px 36px;74    color: #E8EAED;75  }76  .input-label {77    position: absolute;78    top: 14px;79    left: 26px;80    font-size: 38px;81    color: #8AB4F8;82  }83  .caret {84    position: absolute;85    top: 98px;86    left: 44px;87    width: 2px;88    height: 64px;89    background: #8AB4F8;90    border-radius: 2px;91  }92 93  /* Actions */94  .actions {95    position: absolute;96    top: 610px;97    left: 40px;98    display: flex;99    align-items: center;100    gap: 26px;101  }102  .btn {103    display: inline-flex;104    align-items: center;105    gap: 16px;106    padding: 24px 34px;107    font-size: 44px;108    border-radius: 18px;109    border: none;110    background: transparent;111    cursor: default;112  }113  .btn-outline {114    border: 3px solid #8AB4F8;115    color: #8AB4F8;116  }117  .btn-outline svg { fill: #8AB4F8; width: 44px; height: 44px; }118  .btn-disabled {119    background: #3C4043;120    color: #9AA0A6;121  }122  .btn-disabled svg { fill: #9AA0A6; width: 44px; height: 44px; }123 124  /* Bottom gesture area */125  .gesture-area {126    position: absolute;127    bottom: 0;128    left: 0;129    width: 100%;130    height: 140px;131    background: #000000;132    display: flex;133    align-items: center;134    justify-content: center;135  }136  .gesture-pill {137    width: 260px;138    height: 14px;139    background: #FFFFFF;140    opacity: 0.9;141    border-radius: 10px;142  }143</style>144</head>145<body>146<div id="render-target">147 148  <!-- Status bar -->149  <div class="status-bar">150    <div class="status-left">6:12</div>151    <div class="status-right">152      <!-- simple icons approximation -->153      <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#E8EAED"/></svg>154      <svg class="icon" viewBox="0 0 24 24"><path d="M3 7h18l-4 10H7L3 7z" fill="#E8EAED"/></svg>155      <svg class="icon" viewBox="0 0 24 24"><rect x="2" y="6" width="20" height="12" rx="2" fill="#E8EAED"/></svg>156      <div class="battery">157        <svg viewBox="0 0 36 18">158          <rect x="1" y="3" width="30" height="12" rx="2" fill="none" stroke="#E8EAED" stroke-width="2"/>159          <rect x="4" y="5" width="24" height="8" rx="1" fill="#E8EAED"/>160          <rect x="32" y="6" width="3" height="6" rx="1" fill="#E8EAED"/>161        </svg>162        <span>100%</span>163      </div>164    </div>165  </div>166 167  <!-- App bar -->168  <div class="app-bar">169    <div class="back-btn">170      <svg viewBox="0 0 24 24">171        <path d="M15 18l-6-6 6-6" fill="none" stroke="#E8EAED" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>172      </svg>173    </div>174    <div class="title">New folder</div>175  </div>176 177  <!-- Input field -->178  <div class="form-wrap">179    <div class="input-field">180      <div class="input-label">Folder name</div>181      <div class="caret"></div>182    </div>183  </div>184 185  <!-- Actions -->186  <div class="actions">187    <button class="btn btn-outline">188      <svg viewBox="0 0 24 24"><path d="M18 6L6 18M6 6l12 12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>189      Cancel190    </button>191    <button class="btn btn-disabled">192      <svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>193      Create194    </button>195  </div>196 197  <!-- Bottom gesture bar -->198  <div class="gesture-area">199    <div class="gesture-pill"></div>200  </div>201 202</div>203</body>204</html>