GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Save As Screen</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px; height: 2400px;9    position: relative; overflow: hidden;10    background: #F7F7F7;11  }12 13  /* Status bar */14  .status-bar {15    position: absolute; top: 0; left: 0; right: 0;16    height: 96px; background: #2F6EF5; color: #fff;17    display: flex; align-items: center; padding: 0 32px;18    font-size: 30px;19  }20  .status-icons {21    margin-left: auto; display: flex; gap: 24px; align-items: center;22  }23  .dot { width: 18px; height: 18px; background: #fff; border-radius: 50%; opacity: 0.9; }24  .status-indicator {25    width: 30px; height: 20px; border: 3px solid #fff; border-radius: 4px; position: relative;26  }27  .status-indicator:after { content: ''; position: absolute; right: -8px; top: 6px; width: 6px; height: 8px; background: #fff; border-radius: 2px; }28  .battery {29    width: 42px; height: 24px; border: 3px solid #fff; border-radius: 4px; position: relative;30  }31  .battery:after { content: ''; position: absolute; right: -8px; top: 6px; width: 6px; height: 10px; background: #fff; border-radius: 2px; }32 33  /* App bar */34  .app-bar {35    position: absolute; top: 96px; left: 0; right: 0;36    height: 184px; background: #2F6EF5; color: #fff;37    display: flex; align-items: center; padding: 0 28px;38  }39  .app-title { font-size: 66px; font-weight: 700; margin-left: 24px; }40  .right-action { margin-left: auto; }41  .icon-btn { width: 88px; height: 88px; display: flex; align-items: center; justify-content: center; }42 43  /* Content area */44  .content {45    position: absolute; top: 280px; left: 0; right: 0; bottom: 944px;46    padding: 32px;47  }48  .input-row {49    background: #fff; border-radius: 8px; box-shadow: inset 0 0 0 1px #E0E0E0;50    height: 140px; display: flex; align-items: center; padding: 0 24px; font-size: 52px; color: #333;51  }52  .docx { margin-left: auto; color: #555; }53  .highlight {54    background: #A9C8FF; color: #0D2C7A; padding: 8px 6px; border-radius: 6px;55  }56  .drive-row {57    margin-top: 26px; height: 120px; background: #fff; border-radius: 8px; box-shadow: inset 0 0 0 1px #E0E0E0;58    display: flex; align-items: center; padding: 0 24px; font-size: 48px; color: #333;59  }60  .drive-label { margin-left: 18px; }61  .chev { margin-left: auto; }62  .empty-area {63    margin-top: 36px; height: 820px; background: #fff; border-radius: 12px; box-shadow: inset 0 0 0 1px #E5E5E5;64    display: flex; flex-direction: column; align-items: center; justify-content: center; color: #999;65  }66  .empty-icon { width: 200px; height: 240px; border: 6px solid #D6D6D6; border-radius: 16px; position: relative; }67  .empty-icon:before {68    content: ''; position: absolute; right: 22px; top: 18px; width: 80px; height: 80px;69    border: 10px solid #D6D6D6; border-left-color: transparent; border-bottom-color: transparent;70    transform: rotate(45deg); border-radius: 4px;71  }72  .empty-text { margin-top: 40px; font-size: 54px; }73 74  /* Bottom buttons */75  .bottom-actions {76    position: absolute; left: 0; right: 0; bottom: 944px; height: 120px;77    display: flex; align-items: center; justify-content: space-between; padding: 0 40px; color: #2F6EF5; font-size: 52px;78    background: transparent;79  }80 81  /* Keyboard */82  .keyboard {83    position: absolute; left: 0; right: 0; bottom: 0; height: 944px; background: #EFEDEF;84    border-top-left-radius: 24px; border-top-right-radius: 24px; box-shadow: 0 -2px 0 #DDD;85    padding: 28px 28px 40px;86  }87  .key-row { display: flex; justify-content: space-between; margin-bottom: 22px; }88  .key {89    width: 88px; height: 120px; background: #FFFFFF; border-radius: 26px; box-shadow: inset 0 0 0 1px #E2E2E2;90    display: flex; align-items: center; justify-content: center; font-size: 46px; color: #333;91  }92  .key.wide { width: 140px; }93  .key.space { flex: 1; margin: 0 16px; }94  .key.round { width: 140px; height: 120px; border-radius: 40px; background: #DBE0FF; color: #2F6EF5; }95  .key.small { width: 120px; }96</style>97</head>98<body>99<div id="render-target">100 101  <!-- Status bar -->102  <div class="status-bar">103    <div>9:13</div>104    <div class="status-icons">105      <div class="dot"></div>106      <div class="dot"></div>107      <div class="status-indicator"></div>108      <div class="battery"></div>109    </div>110  </div>111 112  <!-- App bar -->113  <div class="app-bar">114    <div class="icon-btn">115      <!-- Back Arrow -->116      <svg width="72" height="72" viewBox="0 0 24 24" fill="#fff">117        <path d="M20 11H7.8l4.6-4.6-1.4-1.4L4 12l7 7 1.4-1.4-4.6-4.6H20z"/>118      </svg>119    </div>120    <div class="app-title">Save As</div>121    <div class="right-action icon-btn">122      <!-- Save/Add Icon (simple) -->123      <svg width="72" height="72" viewBox="0 0 24 24" fill="#fff">124        <rect x="5" y="4" width="14" height="16" rx="2"></rect>125        <path d="M12 8v8M8 12h8" stroke="#2F6EF5" stroke-width="0"></path>126      </svg>127    </div>128  </div>129 130  <!-- Main Content -->131  <div class="content">132    <div class="input-row">133      <span class="highlight">New word</span>134      <span class="docx">.docx</span>135    </div>136 137    <div class="drive-row">138      <!-- Folder/Stack icon -->139      <svg width="64" height="64" viewBox="0 0 24 24" fill="#7A8AA5">140        <path d="M2 8h8l2 2h10v8H2z"></path>141        <path d="M2 6h6l2 2h12" opacity="0.5"></path>142      </svg>143      <div class="drive-label">Polaris Drive</div>144      <div class="chev">145        <svg width="56" height="56" viewBox="0 0 24 24" fill="#777">146          <path d="M8 9l4 4 4-4" />147        </svg>148      </div>149    </div>150 151    <div class="empty-area">152      <div class="empty-icon"></div>153      <div class="empty-text">No content</div>154    </div>155  </div>156 157  <!-- Bottom actions -->158  <div class="bottom-actions">159    <div style="color:#3A64F7;">Cancel</div>160    <div style="color:#3A64F7;">Save</div>161  </div>162 163  <!-- Keyboard -->164  <div class="keyboard">165    <div class="key-row">166      <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div>167      <div class="key">t</div><div class="key">y</div><div class="key">u</div><div class="key">i</div>168      <div class="key">o</div><div class="key">p</div>169    </div>170    <div class="key-row">171      <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div>172      <div class="key">g</div><div class="key">h</div><div class="key">j</div><div class="key">k</div>173      <div class="key">l</div>174    </div>175    <div class="key-row">176      <div class="key small">z</div><div class="key small">x</div><div class="key small">c</div>177      <div class="key small">v</div><div class="key small">b</div><div class="key small">n</div>178      <div class="key small">m</div>179      <div class="key small">⌫</div>180    </div>181    <div class="key-row">182      <div class="key wide">?123</div>183      <div class="key wide">,</div>184      <div class="key space"></div>185      <div class="key wide">.</div>186      <div class="key round">✓</div>187    </div>188  </div>189 190</div>191</body>192</html>