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>Slide Editor UI Mock</title>6<style>7  body { margin:0; padding:0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width:1080px; height:2400px;10    position:relative; overflow:hidden;11    background:#201d23; color:#fff;12  }13 14  /* Top status bar */15  .status-bar {16    position:absolute; top:20px; left:24px; right:24px;17    height:36px; display:flex; align-items:center; justify-content:space-between;18    color:#e6e6e6; font-size:28px; letter-spacing:0.5px;19  }20  .status-icons { display:flex; align-items:center; gap:20px; font-size:26px; color:#dcdcdc; }21 22  /* App toolbar */23  .app-toolbar {24    position:absolute; top:90px; left:0; right:0;25    height:90px; display:flex; align-items:center;26    padding:0 32px; gap:36px; color:#dcdcdc;27  }28  .tool-icon { width:56px; height:56px; display:flex; align-items:center; justify-content:center; border-radius:8px; }29  .tool-icon svg { width:38px; height:38px; fill:none; stroke:#dcdcdc; stroke-width:3; }30 31  /* Editing stage */32  .stage {33    position:absolute; top:210px; left:0; right:0;34    height:1500px;35    display:flex; align-items:flex-start; justify-content:center;36  }37 38  .slide-frame {39    width:980px; height:740px; border-radius:8px;40    background:#2a2730; box-shadow:0 8px 20px rgba(0,0,0,0.5);41    position:relative; margin-top:360px; /* pushes slide into middle of screen like screenshot */42  }43 44  /* Slide preview (turquoise theme) */45  .slide-preview {46    position:absolute; left:40px; top:120px;47    width:900px; height:520px; background:#33add0;48    border-radius:8px; box-shadow:0 6px 14px rgba(0,0,0,0.35) inset;49  }50  .slide-preview .stripe { position:absolute; height:8px; background:#ffffff; border-radius:4px; }51  .slide-preview .stripe.top { top:22px; left:50px; right:50px; }52  .slide-preview .stripe.bottom { bottom:22px; left:50px; right:50px; }53 54  /* Large image placed over slide */55  .photo {56    position:absolute; left:110px; top:70px; right:110px; bottom:70px;57    background:#E0E0E0; border:1px solid #BDBDBD;58    display:flex; align-items:center; justify-content:center; color:#757575; font-size:32px;59  }60 61  .slide-title {62    position:absolute; left:60px; top:160px; color:#ffffff;63    font-weight:700; font-size:64px; letter-spacing:1px;64    text-shadow:0 2px 4px rgba(0,0,0,0.4);65  }66  .slide-sub {67    position:absolute; left:60px; top:240px; font-size:30px; color:#eaf7ff;68  }69  .slide-author {70    position:absolute; left:60px; bottom:90px; font-size:36px; color:#ffd633; font-weight:700;71  }72 73  /* Bottom filmstrip */74  .filmstrip {75    position:absolute; bottom:0; left:0; right:0;76    height:360px; background:#2a2730; border-top:1px solid rgba(255,255,255,0.08);77    display:flex; align-items:center; padding:0 24px; gap:28px;78  }79 80  .thumb {81    width:240px; height:170px; background:#2f2b35; border:2px solid #605b69; border-radius:12px;82    box-shadow:0 6px 10px rgba(0,0,0,0.35); position:relative;83  }84  .thumb.selected { border-color:#7d6aff; background:#3a3540; }85  .thumb .mini {86    position:absolute; inset:12px; background:#33add0; border-radius:6px;87  }88  .thumb .mini .mini-img {89    position:absolute; inset:28px 24px 28px 24px; background:#E0E0E0; border:1px solid #BDBDBD;90    display:flex; align-items:center; justify-content:center; color:#757575; font-size:20px;91  }92  .thumb-label {93    position:absolute; bottom:-36px; left:0; right:0; text-align:center; color:#cfcfe4; font-size:28px;94  }95 96  /* Floating add button on the right of filmstrip */97  .add-tile {98    position:absolute; right:28px; bottom:26px;99    width:110px; height:110px; border-radius:22px; background:#3a3540;100    border:2px solid #6a6574; display:flex; align-items:center; justify-content:center;101    box-shadow:0 6px 12px rgba(0,0,0,0.35);102  }103  .add-tile svg { width:44px; height:44px; stroke:#e6e6e6; stroke-width:6; fill:none; }104 105</style>106</head>107<body>108<div id="render-target">109 110  <!-- Status bar -->111  <div class="status-bar">112    <div class="time">3:57</div>113    <div class="status-icons">114      <span>LR</span>115      <span>Q</span>116      <span>S</span>117      <span>•</span>118      <span>Wi‑Fi</span>119      <span>🔋</span>120    </div>121  </div>122 123  <!-- App Toolbar -->124  <div class="app-toolbar">125    <!-- Back -->126    <div class="tool-icon">127      <svg viewBox="0 0 24 24">128        <path d="M15 5l-7 7 7 7M21 12H8"></path>129      </svg>130    </div>131    <!-- Undo -->132    <div class="tool-icon">133      <svg viewBox="0 0 24 24">134        <path d="M8 9H4l4-4"></path>135        <path d="M12 5a8 8 0 110 14"></path>136      </svg>137    </div>138    <!-- Redo -->139    <div class="tool-icon">140      <svg viewBox="0 0 24 24">141        <path d="M16 9h4l-4-4"></path>142        <path d="M12 5a8 8 0 100 14"></path>143      </svg>144    </div>145    <!-- Play -->146    <div class="tool-icon">147      <svg viewBox="0 0 24 24">148        <path d="M8 5l12 7-12 7z" fill="#dcdcdc" stroke="none"></path>149      </svg>150    </div>151    <!-- Add -->152    <div class="tool-icon">153      <svg viewBox="0 0 24 24">154        <path d="M12 5v14M5 12h14"></path>155      </svg>156    </div>157    <!-- Comment -->158    <div class="tool-icon">159      <svg viewBox="0 0 24 24">160        <path d="M4 5h16v12H8l-4 4z"></path>161      </svg>162    </div>163    <!-- More -->164    <div class="tool-icon">165      <svg viewBox="0 0 24 24">166        <circle cx="5" cy="12" r="2"></circle>167        <circle cx="12" cy="12" r="2"></circle>168        <circle cx="19" cy="12" r="2"></circle>169      </svg>170    </div>171  </div>172 173  <!-- Main Editing Stage -->174  <div class="stage">175    <div class="slide-frame">176      <div class="slide-preview">177        <div class="stripe top"></div>178        <div class="stripe bottom"></div>179 180        <!-- Content that peeks from the slide behind the photo -->181        <div class="slide-title">My G</div>182        <div class="slide-sub">Climate change project</div>183        <div class="slide-author">By Student Name</div>184 185        <!-- Large image on slide -->186        <div class="photo">[IMG: Large Photo on Slide]</div>187      </div>188    </div>189  </div>190 191  <!-- Filmstrip thumbnails at bottom -->192  <div class="filmstrip">193    <div class="thumb selected">194      <div class="mini">195        <div class="mini-img">[IMG: Title Slide]</div>196      </div>197      <div class="thumb-label">1</div>198    </div>199    <div class="thumb">200      <div class="mini">201        <div class="mini-img">[IMG: Paragraph Slide]</div>202      </div>203      <div class="thumb-label">2</div>204    </div>205    <div class="thumb">206      <div class="mini">207        <div class="mini-img">[IMG: Bullet Points]</div>208      </div>209      <div class="thumb-label">3</div>210    </div>211    <div class="thumb">212      <div class="mini">213        <div class="mini-img">[IMG: Facts Slide]</div>214      </div>215      <div class="thumb-label">4</div>216    </div>217  </div>218 219  <!-- Floating Add button -->220  <div class="add-tile">221    <svg viewBox="0 0 24 24"><path d="M12 4v16M4 12h16"></path></svg>222  </div>223 224</div>225</body>226</html>