GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Mobile UI Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px; height: 2400px;10    position: relative; overflow: hidden;11    background: #121212;12    font-family: Arial, Helvetica, sans-serif;13    color: #fff;14  }15  /* Status bar */16  .status-bar {17    position: absolute; left: 0; top: 0; width: 100%; height: 120px;18    background: #1a1a1a;19    display: flex; align-items: center; padding: 0 32px; box-sizing: border-box;20  }21  .status-time { font-size: 36px; font-weight: 600; margin-right: 24px; }22  .status-icons { margin-left: auto; display: flex; gap: 26px; align-items: center; }23  /* Toolbar */24  .toolbar {25    position: absolute; left: 0; top: 120px; width: 100%; height: 120px;26    background: #1a1a1a; display: flex; align-items: center; padding: 0 28px; box-sizing: border-box;27    gap: 28px;28  }29  .tool-spacer { flex: 1; }30  .icon-btn svg { width: 48px; height: 48px; }31  .icon-btn.disabled svg path, .icon-btn.disabled svg circle { stroke: #545454; fill: none; }32  .icon-btn svg path, .icon-btn svg circle { stroke: #fff; fill: none; stroke-width: 3; }33  /* Title row */34  .title-row {35    position: absolute; left: 0; top: 240px; width: 100%; height: 80px;36    display: flex; align-items: center; padding: 0 42px; box-sizing: border-box;37  }38  .title-left { display: flex; align-items: center; gap: 16px; }39  .title-text { font-size: 34px; font-weight: 600; }40  .title-right { margin-left: auto; font-size: 26px; color: #b0b0b0; }41  /* Slide canvas */42  .slide-wrapper {43    position: absolute; left: 60px; top: 380px; width: 960px; height: 540px;44    background: #ffffff; border: 1px solid #2f2f2f;45    box-shadow: 0 8px 24px rgba(0,0,0,0.45);46  }47  .slide-inner { position: absolute; inset: 0; padding: 40px; box-sizing: border-box; color: #222; }48  .slide-title {49    position: absolute; left: 50%; top: 50%;50    transform: translate(-50%, -70%);51    text-align: center;52    font-size: 54px; font-weight: 800; letter-spacing: 1px;53  }54  .slide-sub {55    position: absolute; left: 50%; top: 58%;56    transform: translateX(-50%);57    font-size: 30px; color: #e68378;58  }59  .img-placeholder {60    background: #E0E0E0; border: 1px solid #BDBDBD;61    display: flex; justify-content: center; align-items: center;62    color: #757575; font-size: 22px;63  }64  .bulb { position: absolute; left: 24px; top: 18px; width: 160px; height: 120px; }65  .clock { position: absolute; right: 24px; top: 24px; width: 120px; height: 120px; border-radius: 60px; }66  .plant { position: absolute; right: 40px; bottom: 24px; width: 140px; height: 160px; }67  /* Transition panel */68  .panel {69    position: absolute; left: 0; top: 980px; width: 100%; bottom: 210px;70    background: #0f0f0f; color: #fff; padding: 40px; box-sizing: border-box;71  }72  .panel-header { display: flex; align-items: center; }73  .panel-title { font-size: 56px; font-weight: 700; }74  .panel-controls { margin-left: auto; display: flex; align-items: center; gap: 24px; }75  .control-icon svg { width: 56px; height: 56px; }76  .row { margin-top: 34px; display: flex; align-items: center; }77  .label { font-size: 32px; color: #eaeaea; }78  .value { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 32px; color: #eaeaea; }79  .chev { width: 22px; height: 22px; border-right: 3px solid #fff; border-bottom: 3px solid #fff; transform: rotate(-45deg); margin-left: 12px; }80  .subtle { color: #8f8f8f; font-size: 28px; margin-top: 14px; }81  .section-title { color: #6FA3FF; font-weight: 600; font-size: 26px; margin-top: 40px; letter-spacing: 0.5px; }82  /* Slider */83  .slider {84    margin-top: 16px; width: 880px; height: 12px; background: #2c2c2c; border-radius: 6px; position: relative;85  }86  .slider .thumb {87    position: absolute; left: 40px; top: -16px; width: 28px; height: 28px; background: #e26a6a; border-radius: 50%; border: 2px solid #c95353;88  }89  .slider-value { font-size: 32px; margin-left: 24px; }90  .checkbox-row { margin-top: 40px; display: flex; align-items: center; gap: 16px; }91  .checkbox {92    width: 44px; height: 44px; border: 3px solid #6e6e6e; border-radius: 8px;93    background: transparent;94  }95  .after-text { font-size: 32px; color: #eaeaea; }96  /* Bottom gesture pill */97  .gesture {98    position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%);99    width: 240px; height: 12px; background: #d9d9d9; border-radius: 6px; opacity: 0.8;100  }101</style>102</head>103<body>104<div id="render-target">105 106  <!-- Status Bar -->107  <div class="status-bar">108    <div class="status-time">5:48</div>109    <div class="status-icons">110      <!-- Simple Wi-Fi -->111      <svg viewBox="0 0 48 48">112        <path d="M6 18 C16 10,32 10,42 18" stroke="#fff" fill="none" stroke-width="3"/>113        <path d="M12 24 C20 18,28 18,36 24" stroke="#fff" fill="none" stroke-width="3"/>114        <path d="M18 30 C24 26,24 26,30 30" stroke="#fff" fill="none" stroke-width="3"/>115        <circle cx="24" cy="34" r="3" fill="#fff" stroke="none"/>116      </svg>117      <!-- Battery -->118      <svg viewBox="0 0 60 48">119        <rect x="4" y="10" width="44" height="28" rx="4" ry="4" stroke="#fff" fill="none" stroke-width="3"/>120        <rect x="8" y="14" width="28" height="20" fill="#fff"/>121        <rect x="50" y="16" width="6" height="16" rx="2" stroke="#fff" fill="none" stroke-width="3"/>122      </svg>123    </div>124  </div>125 126  <!-- Toolbar -->127  <div class="toolbar">128    <!-- Back -->129    <div class="icon-btn">130      <svg viewBox="0 0 48 48">131        <polyline points="30,10 14,24 30,38" stroke="#fff" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>132      </svg>133    </div>134    <!-- Undo -->135    <div class="icon-btn">136      <svg viewBox="0 0 48 48">137        <path d="M18 16 L10 24 L18 32" stroke="#fff" stroke-width="4" fill="none" stroke-linecap="round"/>138        <path d="M12 24 C20 12,40 12,40 28" stroke="#fff" stroke-width="4" fill="none"/>139      </svg>140    </div>141    <!-- Redo (disabled) -->142    <div class="icon-btn disabled">143      <svg viewBox="0 0 48 48">144        <path d="M30 16 L38 24 L30 32" stroke="#545454" stroke-width="4" fill="none" stroke-linecap="round"/>145        <path d="M36 24 C28 12,8 12,8 28" stroke="#545454" stroke-width="4" fill="none"/>146      </svg>147    </div>148    <!-- Add -->149    <div class="icon-btn">150      <svg viewBox="0 0 48 48">151        <path d="M24 10 L24 38 M10 24 L38 24" stroke="#fff" stroke-width="4" fill="none" stroke-linecap="round"/>152      </svg>153    </div>154    <!-- Play -->155    <div class="icon-btn">156      <svg viewBox="0 0 48 48">157        <circle cx="24" cy="24" r="19" stroke="#fff" stroke-width="3" fill="none"/>158        <polygon points="20,16 34,24 20,32" fill="#fff"/>159      </svg>160    </div>161    <!-- Share -->162    <div class="icon-btn">163      <svg viewBox="0 0 48 48">164        <circle cx="12" cy="24" r="4" fill="#fff"/>165        <circle cx="36" cy="12" r="4" fill="#fff"/>166        <circle cx="36" cy="36" r="4" fill="#fff"/>167        <path d="M16 24 L32 14 M16 24 L32 34" stroke="#fff" stroke-width="4" fill="none" stroke-linecap="round"/>168      </svg>169    </div>170    <div class="tool-spacer"></div>171  </div>172 173  <!-- Title Row -->174  <div class="title-row">175    <div class="title-left">176      <svg viewBox="0 0 48 48" width="36" height="36">177        <path d="M8 34 L10 40 L16 38 L38 16 L32 10 Z" stroke="#fff" stroke-width="3" fill="none"/>178      </svg>179      <div class="title-text">Untitled Presentation</div>180    </div>181    <div class="title-right">Last modified on 5:45:44 PM</div>182  </div>183 184  <!-- Slide Canvas -->185  <div class="slide-wrapper">186    <div class="slide-inner">187      <div class="img-placeholder bulb">[IMG: Hanging bulbs]</div>188      <div class="img-placeholder clock">[IMG: Clock]</div>189      <div class="slide-title">TOMORROWLAND FESTIVE</div>190      <div class="slide-sub">My favorite event is the Tomorrowland Festival</div>191      <div class="img-placeholder plant">[IMG: Plant]</div>192    </div>193  </div>194 195  <!-- Transition Panel -->196  <div class="panel">197    <div class="panel-header">198      <div class="panel-title">Transition</div>199      <div class="panel-controls">200        <!-- skip/next indicators (simple) -->201        <div class="control-icon">202          <svg viewBox="0 0 56 56">203            <polygon points="18,14 34,28 18,42" fill="#9a9a9a"/>204            <polygon points="30,14 46,28 30,42" fill="#9a9a9a"/>205          </svg>206        </div>207        <div class="control-icon">208          <svg viewBox="0 0 56 56">209            <circle cx="28" cy="28" r="24" stroke="#fff" stroke-width="3" fill="none"/>210            <polygon points="22,18 40,28 22,38" fill="#fff"/>211          </svg>212        </div>213        <div class="control-icon">214          <svg viewBox="0 0 56 56">215            <path d="M14 38 L42 38 L42 46 L14 46 Z" fill="#fff"/>216            <path d="M20 10 L36 10 L36 32 L20 32 Z" stroke="#fff" stroke-width="3" fill="none"/>217          </svg>218        </div>219        <div class="control-icon">220          <svg viewBox="0 0 56 56">221            <circle cx="28" cy="10" r="4" fill="#fff"/>222            <circle cx="28" cy="28" r="4" fill="#fff"/>223            <circle cx="28" cy="46" r="4" fill="#fff"/>224          </svg>225        </div>226      </div>227    </div>228 229    <div class="row" style="margin-top: 32px;">230      <div class="label">Type</div>231      <div class="value">Draw <div class="chev"></div></div>232    </div>233    <div class="subtle">No variant</div>234 235    <div class="section-title">DURATION</div>236    <div class="row" style="align-items: center;">237      <div class="slider">238        <div class="thumb"></div>239      </div>240      <div class="slider-value">1.0</div>241    </div>242 243    <div class="section-title">ADVANCE SLIDE</div>244    <div class="checkbox-row">245      <div class="checkbox"></div>246      <div class="after-text">After</div>247    </div>248  </div>249 250  <!-- Gesture Pill -->251  <div class="gesture"></div>252 253</div>254</body>255</html>