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>New - Template Picker</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #0B0B0B;15    color: #FFFFFF;16    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;17  }18  /* Status bar */19  .status-bar {20    height: 110px;21    padding: 24px 36px 0 36px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    color: #fff;26    box-sizing: border-box;27  }28  .status-left { font-size: 32px; font-weight: 600; }29  .status-right { display: flex; align-items: center; gap: 22px; }30  .sb-dot { width: 10px; height: 10px; background: #CFCFCF; border-radius: 50%; opacity: 0.85; }31  .wifi-icon, .battery-icon { display: inline-block; }32  .battery-icon { width: 44px; height: 22px; border: 2px solid #fff; border-radius: 3px; position: relative; }33  .battery-icon::after {34    content: "";35    position: absolute;36    right: -6px; top: 6px;37    width: 6px; height: 10px; background: #fff; border-radius: 2px;38  }39  .battery-fill { position: absolute; left: 3px; top: 3px; height: 14px; width: 28px; background: #ffffff; }40  /* App bar */41  .app-bar {42    height: 90px;43    display: flex;44    align-items: center;45    padding: 6px 32px 0 24px;46    box-sizing: border-box;47    gap: 20px;48  }49  .back-btn {50    width: 64px; height: 64px;51    display: flex; align-items: center; justify-content: center;52    border-radius: 32px;53  }54  .app-title { font-size: 44px; font-weight: 600; }55  /* Create in section */56  .section { padding: 12px 48px 0 48px; box-sizing: border-box; }57  .section-label { font-size: 28px; color: #B0B0B0; margin-bottom: 16px; }58  .dropdown {59    height: 90px;60    border: 1.5px solid #353535;61    border-radius: 12px;62    display: flex; align-items: center; justify-content: space-between;63    padding: 0 22px;64    color: #EDEDED;65    background: #121212;66    box-sizing: border-box;67    font-size: 30px;68  }69  .caret {70    width: 36px; height: 36px;71    display: flex; align-items: center; justify-content: center;72  }73  /* Template cards */74  .cards { padding: 22px 48px 120px 48px; box-sizing: border-box; }75  .card { margin-bottom: 52px; }76  .thumb {77    width: 984px; height: 260px;78    background: #E0E0E0;79    border: 1px solid #BDBDBD;80    border-radius: 20px;81    display: flex; align-items: center; justify-content: center;82    color: #757575; font-size: 30px; text-align: center;83  }84  .caption { font-size: 30px; margin-top: 16px; color: #F0F0F0; }85  /* Bottom gesture pill */86  .gesture-bar {87    position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%);88    width: 300px; height: 12px; background: #E6E6E6; border-radius: 10px;89  }90</style>91</head>92<body>93<div id="render-target">94 95  <!-- Status Bar -->96  <div class="status-bar">97    <div class="status-left">9:42</div>98    <div class="status-right">99      <div class="sb-dot"></div>100      <div class="sb-dot"></div>101      <div class="sb-dot"></div>102      <!-- Simple Wifi icon -->103      <svg class="wifi-icon" width="32" height="24" viewBox="0 0 24 24">104        <path d="M2 8c5-4 15-4 20 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>105        <path d="M5 12c4-3 10-3 14 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>106        <path d="M9 16c2-2 4-2 6 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>107        <circle cx="12" cy="19" r="1.5" fill="#fff"/>108      </svg>109      <!-- Battery -->110      <div class="battery-icon"><div class="battery-fill"></div></div>111    </div>112  </div>113 114  <!-- App Bar -->115  <div class="app-bar">116    <div class="back-btn">117      <svg width="40" height="40" viewBox="0 0 24 24">118        <path d="M15 18l-6-6 6-6" stroke="#ffffff" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>119      </svg>120    </div>121    <div class="app-title">New</div>122  </div>123 124  <!-- Create in section -->125  <div class="section">126    <div class="section-label">Create in</div>127    <div class="dropdown">128      <div>This device &gt; Documents</div>129      <div class="caret">130        <svg width="28" height="28" viewBox="0 0 24 24">131          <path d="M6 9l6 6 6-6" fill="none" stroke="#EDEDED" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>132        </svg>133      </div>134    </div>135  </div>136 137  <!-- Templates list -->138  <div class="cards">139    <div class="card">140      <div class="thumb">[IMG: Blank presentation thumbnail]</div>141      <div class="caption">Blank presentation</div>142    </div>143 144    <div class="card">145      <div class="thumb">[IMG: Madison template thumbnail]</div>146      <div class="caption">Madison</div>147    </div>148 149    <div class="card">150      <div class="thumb">[IMG: Atlas template thumbnail]</div>151      <div class="caption">Atlas</div>152    </div>153 154    <div class="card">155      <div class="thumb">[IMG: Welcome to PowerPoint thumbnail with arrow]</div>156      <div class="caption">Welcome to PowerPoint</div>157    </div>158 159    <!-- Partial next item hint at bottom (as seen) -->160    <div class="thumb" style="width: 984px; height: 110px;">[IMG: Next template preview]</div>161  </div>162 163  <!-- Gesture Bar -->164  <div class="gesture-bar"></div>165 166</div>167</body>168</html>