GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Mobile Slide Editor Mock</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:#ffffff;11  }12 13  /* Status bar */14  .status-bar {15    height:120px;16    padding:0 36px;17    display:flex;18    align-items:center;19    justify-content:space-between;20    color:#222;21    font-size:40px;22  }23  .status-right {24    display:flex; align-items:center; gap:26px; color:#222;25  }26  .icon { display:inline-flex; width:48px; height:48px; align-items:center; justify-content:center; }27 28  /* App bar */29  .app-bar {30    height:140px;31    display:flex; align-items:center;32    padding:0 28px;33  }34  .app-title {35    font-size:48px; color:#222; font-weight:600;36    flex:1; padding-left:16px;37  }38  .icon-btn { width:84px; height:84px; display:flex; align-items:center; justify-content:center; }39 40  /* Slide area */41  .slide-area {42    margin:0 0 0 0;43    height:600px;44    padding:22px 18px 18px 18px;45  }46  .slide-frame {47    height:560px;48    border:6px solid #c76a55;   /* reddish selection border */49    background:#fff;50    display:flex; align-items:center; justify-content:center;51  }52  .slide-canvas {53    width:100%;54    height:100%;55    margin:6px;56    box-shadow: inset 0 0 0 2px #d5d5d5;57    position:relative;58    background:#ffffff;59  }60  .placeholder {61    position:absolute; left:110px; right:110px;62    border:2px dashed #cfcfcf; color:#111; text-align:center;63  }64  .title-box { top:110px; height:160px; display:flex; align-items:center; justify-content:center; }65  .title-box .t { font-size:68px; font-weight:500; }66  .subtitle-box { top:290px; height:120px; display:flex; align-items:center; justify-content:center; }67  .subtitle-box .s { font-size:32px; color:#333; }68 69  /* Work area background */70  .work-area {71    height:1320px;72    background:#e3e3e3;73    position:relative;74  }75  .white-panel {76    position:absolute; top:36px; left:0; right:0;77    height:540px; background:#ffffff;78  }79 80  /* Bottom navigation bar */81  .bottom-bar {82    position:absolute; left:0; right:0; bottom:0;83    height:220px; background:#ffffff;84    border-top:1px solid #e5e5e5;85    display:flex; align-items:center; justify-content:space-around;86    padding-bottom:20px;87  }88  .bottom-item {89    width:160px; display:flex; flex-direction:column;90    align-items:center; justify-content:center; gap:14px;91    color:#202020;92  }93  .bottom-item svg { width:76px; height:76px; }94  .bottom-item span { font-size:34px; }95 96  /* Gesture pill */97  .gesture-pill {98    position:absolute; bottom:16px; left:50%;99    transform:translateX(-50%);100    width:300px; height:12px; background:#1a1a1a; border-radius:8px;101  }102</style>103</head>104<body>105<div id="render-target">106 107  <!-- Status Bar -->108  <div class="status-bar">109    <div>11:45</div>110    <div class="status-right">111      <!-- Do not disturb (dot) -->112      <div class="icon">113        <svg viewBox="0 0 24 24">114          <circle cx="12" cy="12" r="3" fill="#444"/>115        </svg>116      </div>117      <!-- WiFi -->118      <div class="icon">119        <svg viewBox="0 0 24 24">120          <path d="M2 9c5-4 15-4 20 0" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round"/>121          <path d="M5 12c3-3 11-3 14 0" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round"/>122          <path d="M8 15c2-2 6-2 8 0" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round"/>123          <circle cx="12" cy="18" r="1.6" fill="#444"/>124        </svg>125      </div>126      <!-- Battery -->127      <div class="icon" style="width:90px;">128        <svg viewBox="0 0 36 24">129          <rect x="1" y="5" width="28" height="14" rx="2" ry="2" stroke="#444" stroke-width="2" fill="none"/>130          <rect x="4" y="8" width="22" height="8" fill="#444"/>131          <rect x="30" y="9" width="4" height="6" fill="#444"/>132        </svg>133      </div>134      <div style="font-size:34px; color:#222;">100%</div>135    </div>136  </div>137 138  <!-- App Bar -->139  <div class="app-bar">140    <div class="icon-btn">141      <svg viewBox="0 0 24 24" width="56" height="56">142        <path d="M15 5 L7 12 L15 19" stroke="#222" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>143      </svg>144    </div>145    <div class="app-title">Presentation (1) - Saved</div>146    <div class="icon-btn">147      <svg viewBox="0 0 24 24" width="44" height="44">148        <circle cx="12" cy="5" r="2.2" fill="#222"/>149        <circle cx="12" cy="12" r="2.2" fill="#222"/>150        <circle cx="12" cy="19" r="2.2" fill="#222"/>151      </svg>152    </div>153  </div>154 155  <!-- Slide Area -->156  <div class="slide-area">157    <div class="slide-frame">158      <div class="slide-canvas">159        <div class="placeholder title-box">160          <div class="t">Double tap to add title</div>161        </div>162        <div class="placeholder subtitle-box">163          <div class="s">Double tap to add subtitle</div>164        </div>165      </div>166    </div>167  </div>168 169  <!-- Work Area -->170  <div class="work-area">171    <div class="white-panel"></div>172  </div>173 174  <!-- Bottom Bar -->175  <div class="bottom-bar">176    <div class="bottom-item">177      <svg viewBox="0 0 24 24">178        <rect x="3" y="4" width="18" height="12" rx="2" ry="2" stroke="#2e6b2e" fill="none" stroke-width="2"/>179        <rect x="9" y="18" width="6" height="2" fill="#2e6b2e"/>180        <polygon points="11,8 16,11 11,14" fill="#2e6b2e"/>181      </svg>182      <span>Present</span>183    </div>184    <div class="bottom-item">185      <svg viewBox="0 0 24 24">186        <rect x="4" y="3" width="16" height="18" rx="2" ry="2" stroke="#444" fill="none" stroke-width="2"/>187        <line x1="7" y1="8" x2="17" y2="8" stroke="#444" stroke-width="2"/>188        <line x1="7" y1="12" x2="17" y2="12" stroke="#444" stroke-width="2"/>189        <line x1="7" y1="16" x2="14" y2="16" stroke="#444" stroke-width="2"/>190      </svg>191      <span>Notes</span>192    </div>193    <div class="bottom-item">194      <svg viewBox="0 0 24 24">195        <path d="M3 17l8-8 4 4-8 8H3z" fill="none" stroke="#444" stroke-width="2"/>196        <path d="M14 3l4 4" stroke="#444" stroke-width="2"/>197      </svg>198      <span>Edit</span>199    </div>200    <div class="bottom-item">201      <svg viewBox="0 0 24 24">202        <circle cx="11" cy="11" r="6" stroke="#444" stroke-width="2" fill="none"/>203        <line x1="16.5" y1="16.5" x2="21" y2="21" stroke="#444" stroke-width="2"/>204      </svg>205      <span>Find</span>206    </div>207    <div class="bottom-item">208      <svg viewBox="0 0 24 24">209        <circle cx="6" cy="8" r="2.5" fill="none" stroke="#444" stroke-width="2"/>210        <circle cx="18" cy="5" r="2.5" fill="none" stroke="#444" stroke-width="2"/>211        <circle cx="18" cy="18" r="2.5" fill="none" stroke="#444" stroke-width="2"/>212        <line x1="8.5" y1="7" x2="15.5" y2="5.7" stroke="#444" stroke-width="2"/>213        <line x1="8.5" y1="9" x2="15.5" y2="17" stroke="#444" stroke-width="2"/>214      </svg>215      <span>Share</span>216    </div>217  </div>218 219  <div class="gesture-pill"></div>220</div>221</body>222</html>