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>Mobile UI Mock</title>7<style>8  body { margin:0; padding:0; background:transparent; }9  #render-target{10    width:1080px; height:2400px; position:relative; overflow:hidden;11    background:#121212; color:#EAEAEA; font-family: Roboto, "Segoe UI", Arial, sans-serif;12  }13 14  /* Top status bar */15  .status-bar{16    position:absolute; top:0; left:0; width:100%; height:90px;17    display:flex; align-items:center; justify-content:space-between;18    padding:0 28px; color:#ffffff; font-size:36px; letter-spacing:0.5px;19  }20  .status-right{ display:flex; align-items:center; gap:26px; opacity:0.95; }21  .status-icon{ width:38px; height:38px; }22 23  /* Header with title and action icons */24  .header{25    position:absolute; top:90px; left:0; width:100%; height:190px;26    color:#c97a3c; text-align:center;27  }28  .header h1{29    margin:18px 0 16px; font-weight:500; font-size:44px;30  }31  .action-row{32    display:flex; align-items:center; justify-content:center;33    gap:60px; color:#CFCFCF;34  }35  .action-row svg{ width:54px; height:54px; stroke:#CFCFCF; fill:none; stroke-width:2.6; }36 37  /* Workspace (black canvas) */38  .workspace{39    position:absolute; top:280px; bottom:400px; left:0; right:0;40    background:#121212;41  }42 43  /* Slide preview */44  .slide{45    width:960px; height:560px; background:#FFFFFF; border-radius:10px;46    margin:210px auto 0; position:relative; overflow:hidden;47    box-shadow:0 4px 20px rgba(0,0,0,0.35);48  }49  /* faint decorative arcs */50  .slide::before, .slide::after{51    content:""; position:absolute; inset:-140px -200px auto auto; width:1200px; height:1200px;52    border-radius:50%; border:2px solid rgba(0,0,0,0.06);53  }54  .slide::after{ inset:auto auto -240px -260px; }55 56  /* Red title callout */57  .callout-wrap{ position:absolute; left:56px; top:120px; width:400px; }58  .callout-top{ height:44px; background:#E04122; }59  .callout{60    background:#E04122; color:#fff; padding:52px 30px; font-size:44px; line-height:1.25;61    border:2px dashed rgba(255,255,255,0.7);62    position:relative;63  }64  .callout::after{65    content:""; position:absolute; left:90px; bottom:-22px; width:0; height:0;66    border-left:18px solid transparent; border-right:18px solid transparent; border-top:22px solid #E04122;67  }68 69  /* Right image placeholder on slide */70  .slide-img{71    position:absolute; right:56px; top:150px; width:520px; height:300px;72    background:#E0E0E0; border:1px solid #BDBDBD; color:#757575;73    display:flex; align-items:center; justify-content:center; text-align:center; font-size:28px;74  }75 76  /* Notes / Comments labels */77  .meta-row{78    position:absolute; bottom:330px; left:40px; right:40px;79    display:flex; gap:40px; align-items:center; color:#D0D0D0; font-size:34px;80  }81 82  /* Filmstrip */83  .filmstrip{84    position:absolute; left:0; right:0; bottom:140px; height:260px;85    background:#0f0f0f; border-top:1px solid #222;86    padding:18px 24px; display:flex; gap:24px; align-items:flex-end;87  }88  .thumb{89    width:300px; height:200px; background:#FFFFFF; border-radius:6px; position:relative;90    display:flex; align-items:center; justify-content:center; color:#999; font-size:28px;91    overflow:hidden;92  }93  .thumb .mini-red{ position:absolute; left:18px; top:36px; width:120px; height:60px; background:#E04122; }94  .thumb.selected{ outline:6px solid #C7773A; }95  .thumb .index{96    position:absolute; left:10px; bottom:8px; color:#EAEAEA; font-size:28px;97    background:rgba(0,0,0,0.55); padding:4px 10px; border-radius:16px;98  }99  .thumb .selbar{100    position:absolute; left:0; right:0; bottom:0; height:46px; background:#C7773A; color:#fff;101    display:flex; align-items:center; justify-content:center; font-size:28px;102  }103 104  /* Bottom tools bar */105  .tools{106    position:absolute; bottom:60px; left:0; right:0; height:60px; display:flex;107    justify-content:space-around; align-items:center; padding:0 26px; color:#CFCFCF;108  }109  .tools svg{ width:54px; height:54px; stroke:#CFCFCF; fill:none; stroke-width:2.6; }110 111  /* Home indicator */112  .home-indicator{113    position:absolute; bottom:24px; left:50%; transform:translateX(-50%);114    width:210px; height:10px; background:#ffffff; border-radius:10px; opacity:0.85;115  }116</style>117</head>118<body>119<div id="render-target">120 121  <!-- Status bar -->122  <div class="status-bar">123    <div>11:08</div>124    <div class="status-right">125      <!-- Wi-Fi -->126      <svg class="status-icon" viewBox="0 0 24 24">127        <path fill="#fff" d="M12 18.5l2.1-2.1a3 3 0 0 0-4.2 0L12 18.5zM7 14.4l1.8 1.8a6 6 0 0 1 6.4 0L17 14.4a8 8 0 0 0-10 0zM2.5 10.1l1.9 1.9a12 12 0 0 1 15.2 0l1.9-1.9a14 14 0 0 0-19 0z"/>128      </svg>129      <!-- Battery -->130      <svg class="status-icon" viewBox="0 0 24 24">131        <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"/>132        <rect x="4" y="8" width="14" height="8" fill="#fff"/>133        <rect x="20" y="10" width="2" height="4" fill="#fff"/>134      </svg>135    </div>136  </div>137 138  <!-- Header with title and action icons -->139  <div class="header">140    <h1>Presentation - Saved</h1>141    <div class="action-row">142      <!-- Check -->143      <svg viewBox="0 0 24 24"><path d="M4 12l4 4 12-12"/></svg>144      <!-- Pen -->145      <svg viewBox="0 0 24 24"><path d="M3 17l1 4 4-1 10-10-4-4L3 17zM14 6l4 4"/></svg>146      <!-- Cloud -->147      <svg viewBox="0 0 24 24"><path d="M7 17h9a4 4 0 0 0 0-8 5 5 0 0 0-9.7 1A3.5 3.5 0 0 0 7 17z"/></svg>148      <!-- Search -->149      <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="6"/><path d="M20 20l-4.5-4.5"/></svg>150      <!-- Slideshow -->151      <svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="12" rx="2"/><path d="M12 17v3M9 20h6"/></svg>152      <!-- Undo -->153      <svg viewBox="0 0 24 24"><path d="M9 7H5v-4M5 7a8 8 0 1 1 0 12"/></svg>154      <!-- More -->155      <svg viewBox="0 0 24 24" fill="#CFCFCF"><circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/></svg>156    </div>157  </div>158 159  <!-- Main working area -->160  <div class="workspace">161    <div class="slide">162      <div class="callout-wrap">163        <div class="callout-top"></div>164        <div class="callout">Double tap to add title</div>165      </div>166 167      <div class="slide-img">[IMG: Secure Distributed Workspace]</div>168    </div>169  </div>170 171  <!-- Meta row: Notes / Comments -->172  <div class="meta-row">173    <div>Notes</div>174    <div>Comments</div>175  </div>176 177  <!-- Filmstrip thumbnails -->178  <div class="filmstrip">179    <div class="thumb">180      <div class="mini-red"></div>181      <div class="index">1 ★</div>182    </div>183    <div class="thumb">184      <div style="position:absolute; left:24px; top:34px; width:120px; height:90px; background:#E04122;"></div>185      <div style="position:absolute; right:24px; top:28px; width:160px; height:120px; background:#dcdcdc;"></div>186      <div class="index">2 ★</div>187    </div>188    <div class="thumb selected">189      <div style="position:absolute; left:24px; top:34px; width:130px; height:90px; background:#E04122;"></div>190      <div style="position:absolute; right:24px; top:60px; width:170px; height:110px; background:#dcdcdc;"></div>191      <div class="selbar">3 ★</div>192    </div>193    <div class="thumb" style="background:#1b1b1b; color:#bbb; border:2px dashed #444;">194      +195    </div>196  </div>197 198  <!-- Bottom tools bar -->199  <div class="tools">200    <svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2"/></svg>201    <svg viewBox="0 0 24 24"><path d="M5 20V8l7-4 7 4v12"/></svg>202    <svg viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12"/><path d="M7 10h10M7 14h10"/></svg>203    <svg viewBox="0 0 24 24"><rect x="4" y="8" width="7" height="8"/><rect x="13" y="8" width="7" height="8"/></svg>204    <svg viewBox="0 0 24 24"><circle cx="9" cy="12" r="4"/><circle cx="17" cy="12" r="2"/></svg>205    <svg viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="12"/><path d="M12 9v6M9 12h6"/></svg>206    <svg viewBox="0 0 24 24"><rect x="6" y="4" width="12" height="16" rx="2"/><path d="M8 8h8M8 12h8M8 16h8"/></svg>207  </div>208 209  <!-- Home indicator -->210  <div class="home-indicator"></div>211 212</div>213</body>214</html>