GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Save As Dialog UI</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: "Segoe UI", Arial, sans-serif; }7  #render-target {8    width:1080px; height:2400px; position:relative; overflow:hidden;9    background:#0d0d0f;10    border-radius:38px;11    box-shadow:0 30px 90px rgba(0,0,0,0.6);12  }13 14  /* Status bar */15  .status-bar {16    position:absolute; top:0; left:0; width:100%; height:120px;17    display:flex; align-items:center; justify-content:space-between;18    padding:0 40px; color:#cfcfd5; font-size:40px; letter-spacing:0.5px;19  }20  .status-icons { display:flex; align-items:center; gap:28px; }21  .status-icons svg { width:40px; height:40px; fill:#cfcfd5; opacity:0.9; }22 23  /* App toolbar */24  .toolbar {25    position:absolute; top:120px; left:0; width:100%; height:120px;26    display:flex; align-items:center; gap:36px; padding:0 40px; color:#b9b9c2;27  }28  .tool-icon { width:70px; height:70px; display:flex; align-items:center; justify-content:center; }29  .tool-icon svg { width:48px; height:48px; fill:#b9b9c2; }30 31  /* Workspace (dark canvas) */32  .workspace {33    position:absolute; top:240px; left:0; right:0; bottom:280px;34    background:#111116;35  }36 37  /* Slide background placeholder */38  .slide-placeholder {39    position:absolute; left:60px; top:340px; right:60px; bottom:520px;40    background:#0f2930;41    border-radius:16px;42    opacity:0.25;43  }44 45  /* Bottom thumbnails strip */46  .thumb-strip {47    position:absolute; left:0; bottom:0; width:100%; height:260px;48    background:#19181f;49    border-top:1px solid #24232b;50    display:flex; align-items:center; padding:20px 24px; gap:24px;51  }52  .thumb {53    width:180px; height:140px; background:#101115; border:2px solid #2b2c35; border-radius:20px;54    display:flex; align-items:center; justify-content:center; color:#81808d; font-size:28px;55    position:relative;56  }57  .thumb-label { position:absolute; bottom:-40px; left:0; width:100%; text-align:center; color:#b1b0bb; font-size:32px; }58 59  /* Gesture handle */60  .gesture {61    position:absolute; bottom:16px; left:50%; transform:translateX(-50%);62    width:240px; height:10px; background:#bfbfc6; border-radius:8px; opacity:0.35;63  }64 65  /* Modal overlay + dialog */66  .overlay { position:absolute; inset:0; background:rgba(0,0,0,0.35); }67  .dialog {68    position:absolute; left:65px; top:520px; width:950px;69    background:#2b2831; color:#e8e6f0;70    border-radius:60px; box-shadow:0 40px 120px rgba(0,0,0,0.5);71    padding:70px 70px 50px;72  }73  .dialog h1 {74    margin:0 0 40px 0; font-size:80px; font-weight:700; letter-spacing:0.4px;75  }76  .subhead { color:#cfcbd9; font-size:40px; margin-bottom:34px; }77  .radio-list { display:flex; flex-direction:column; gap:36px; }78  .radio-item { display:flex; align-items:center; gap:28px; color:#e6e3ee; font-size:44px; }79  .radio {80    width:54px; height:54px; border-radius:50%; border:6px solid #cfcbd9;81    box-sizing:border-box;82  }83  .radio.selected { border-color:#c8a4ff; position:relative; }84  .radio.selected::after {85    content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);86    width:26px; height:26px; background:#c8a4ff; border-radius:50%;87  }88  .dialog-footer {89    margin-top:60px; display:flex; justify-content:space-between; align-items:center;90  }91  .text-btn { font-size:50px; color:#c8a4ff; }92</style>93</head>94<body>95<div id="render-target">96 97  <!-- Status bar -->98  <div class="status-bar">99    <div>3:58</div>100    <div class="status-icons">101      <!-- location dot -->102      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/></svg>103      <!-- wifi -->104      <svg viewBox="0 0 24 24"><path d="M2 9c5-5 15-5 20 0l-2 2c-4-4-12-4-16 0L2 9zm4 5c3-3 9-3 12 0l-2 2c-2-2-6-2-8 0l-2-2zm6 5l-3-3 3-3 3 3-3 3z"/></svg>105      <!-- battery -->106      <svg viewBox="0 0 24 24"><rect x="2" y="6" width="18" height="12" rx="2"></rect><rect x="20" y="10" width="2" height="4"></rect></svg>107    </div>108  </div>109 110  <!-- App toolbar -->111  <div class="toolbar">112    <div class="tool-icon">113      <!-- back -->114      <svg viewBox="0 0 24 24"><path d="M14 7l-5 5 5 5V7z"/></svg>115    </div>116    <div class="tool-icon">117      <!-- undo -->118      <svg viewBox="0 0 24 24"><path d="M12 5a7 7 0 0 1 7 7h-4l5 5 5-5h-4c0-6-5-11-11-11L5 3l3 3c1-1 2-1 4-1z"/></svg>119    </div>120    <div class="tool-icon">121      <!-- redo -->122      <svg viewBox="0 0 24 24"><path d="M12 5a7 7 0 0 0-7 7h4l-5 5-5-5h4c0-6 5-11 11-11l3 2-3 3c-1-1-2-1-4-1z"/></svg>123    </div>124    <div class="tool-icon">125      <!-- play -->126      <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7-11-7z"/></svg>127    </div>128    <div class="tool-icon">129      <!-- plus -->130      <svg viewBox="0 0 24 24"><path d="M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6V5z"/></svg>131    </div>132    <div class="tool-icon">133      <!-- comment bubble -->134      <svg viewBox="0 0 24 24"><path d="M4 4h16v12H7l-3 4V4z"/></svg>135    </div>136    <div class="tool-icon">137      <!-- more -->138      <svg viewBox="0 0 24 24"><circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/></svg>139    </div>140  </div>141 142  <!-- Workspace background -->143  <div class="workspace"></div>144  <div class="slide-placeholder"></div>145 146  <!-- Bottom thumbnails -->147  <div class="thumb-strip">148    <div class="thumb"><div>[IMG: Slide 1]</div><div class="thumb-label">1</div></div>149    <div class="thumb" style="border-color:#3a3b46; background:#122228;"><div>[IMG: Slide 2]</div><div class="thumb-label">2</div></div>150    <div class="thumb" style="border-color:#3a3b46;"><div>[IMG: Slide 3]</div><div class="thumb-label">3</div></div>151    <div class="thumb" style="border-color:#3a3b46;"><div>[IMG: Slide 4]</div><div class="thumb-label">4</div></div>152    <div class="thumb" style="width:120px; height:120px;"><div>[+]</div></div>153  </div>154 155  <!-- Gesture handle -->156  <div class="gesture"></div>157 158  <!-- Modal dialog -->159  <div class="overlay"></div>160  <div class="dialog">161    <h1>Save As</h1>162    <div class="subhead">Choose format</div>163 164    <div class="radio-list">165      <div class="radio-item">166        <div class="radio selected"></div>167        <div>PowerPoint (.pptx)</div>168      </div>169 170      <div class="radio-item">171        <div class="radio"></div>172        <div>PDF Document (.pdf)</div>173      </div>174 175      <div class="radio-item">176        <div class="radio"></div>177        <div>OpenDocument format (.odp)</div>178      </div>179 180      <div class="radio-item">181        <div class="radio"></div>182        <div>Plain Text (.txt)</div>183      </div>184 185      <div class="radio-item">186        <div class="radio"></div>187        <div>JPEG image (.jpg, current slide)</div>188      </div>189 190      <div class="radio-item">191        <div class="radio"></div>192        <div>PNG image (.png, current slide)</div>193      </div>194 195      <div class="radio-item">196        <div class="radio"></div>197        <div>SVG (.svg, current slide)</div>198      </div>199    </div>200 201    <div class="dialog-footer">202      <div class="text-btn">Cancel</div>203      <div class="text-btn">OK</div>204    </div>205  </div>206 207</div>208</body>209</html>