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>Templates</title>7<style>8  body { margin:0; padding:0; background:transparent; }9  #render-target {10    width:1080px; height:2400px;11    position:relative; overflow:hidden;12    background:#2b2421; color:#f1ece7;13    font-family: system-ui, -apple-system, Arial, sans-serif;14  }15  .status-bar {16    position:absolute; top:0; left:0; width:100%; height:90px;17    padding:0 28px; box-sizing:border-box;18    display:flex; align-items:center;19    color:#e7e2dc; font-size:36px;20  }21  .right-icons { margin-left:auto; display:flex; align-items:center; gap:26px; }22  .appbar {23    position:absolute; top:90px; left:0; width:100%; height:220px;24    background:#3a302c;25    display:flex; align-items:flex-end;26    padding:0 40px 28px; box-sizing:border-box;27  }28  .appbar h1 { margin:0; font-size:56px; font-weight:500; letter-spacing:0.5px; }29  .back { margin-right:16px; display:flex; align-items:center; }30  .content {31    position:absolute; top:310px; left:0; right:0; bottom:0;32    padding:30px 40px 60px; box-sizing:border-box;33    color:#efeae5;34  }35  .grid-two { display:grid; grid-template-columns:repeat(2, 1fr); gap:40px; margin-bottom:42px; }36  .grid-three { display:grid; grid-template-columns:repeat(3, 1fr); gap:30px; margin-bottom:60px; }37  .item .thumb {38    width:100%; height:250px;39    background:#E0E0E0; border:1px solid #BDBDBD;40    display:flex; align-items:center; justify-content:center;41    color:#757575; font-size:28px; text-align:center;42  }43  .grid-three .item .thumb { height:370px; }44  .title { font-size:36px; margin-top:16px; color:#f4efea; }45  .subtitle { font-size:26px; color:#bdb6b0; margin-top:6px; }46  .section-title { font-size:42px; color:#e6ded6; margin:12px 0 24px; }47</style>48</head>49<body>50<div id="render-target">51  <!-- Status bar -->52  <div class="status-bar">53    <div>9:12</div>54    <div class="right-icons">55      <!-- Location pin -->56      <svg width="36" height="36" viewBox="0 0 24 24">57        <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" fill="#e7e2dc"/>58      </svg>59      <!-- Wi-Fi -->60      <svg width="36" height="36" viewBox="0 0 24 24">61        <path d="M2 8c5-4 15-4 20 0M5 12c4-3 10-3 14 0M8 16c3-2 5-2 8 0" stroke="#e7e2dc" stroke-width="2" fill="none" stroke-linecap="round"/>62        <circle cx="12" cy="19" r="1.5" fill="#e7e2dc"/>63      </svg>64      <!-- Battery -->65      <svg width="40" height="36" viewBox="0 0 26 16">66        <rect x="1" y="3" width="20" height="10" rx="2" ry="2" stroke="#e7e2dc" fill="none" stroke-width="2"/>67        <rect x="3" y="5" width="14" height="6" fill="#e7e2dc"/>68        <rect x="22" y="6" width="3" height="4" rx="1" fill="#e7e2dc"/>69      </svg>70    </div>71  </div>72 73  <!-- App bar -->74  <div class="appbar">75    <div class="back">76      <svg width="44" height="44" viewBox="0 0 24 24">77        <path d="M15 4L7 12l8 8" stroke="#ffffff" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>78      </svg>79    </div>80    <h1>Templates</h1>81  </div>82 83  <!-- Content -->84  <div class="content">85    <!-- Top row: Resume -->86    <div class="grid-two">87      <div class="item">88        <div class="thumb">[IMG: Resume template preview]</div>89        <div class="title">Resume</div>90        <div class="subtitle">Spearmint</div>91      </div>92      <div class="item">93        <div class="thumb">[IMG: Resume template preview]</div>94        <div class="title">Resume</div>95        <div class="subtitle">Modern writer</div>96      </div>97    </div>98 99    <div class="section-title">Letters</div>100 101    <div class="grid-three">102      <div class="item">103        <div class="thumb">[IMG: Letter template preview]</div>104        <div class="title">Letter</div>105        <div class="subtitle">Spearmint</div>106      </div>107      <div class="item">108        <div class="thumb">[IMG: Letter template preview]</div>109        <div class="title">Letter</div>110        <div class="subtitle">Swiss</div>111      </div>112      <div class="item">113        <div class="thumb">[IMG: Business letter preview]</div>114        <div class="title">Business letter</div>115        <div class="subtitle">Geometric</div>116      </div>117    </div>118 119    <div class="grid-two">120      <div class="item">121        <div class="thumb">[IMG: Business letter preview]</div>122        <div class="title">Business letter</div>123        <div class="subtitle">Modern writer</div>124      </div>125      <div class="item">126        <div class="thumb">[IMG: Informal letter preview]</div>127        <div class="title">Informal letter</div>128        <div class="subtitle">Plum</div>129      </div>130    </div>131 132    <div class="section-title">Education</div>133 134    <div class="grid-three">135      <div class="item">136        <div class="thumb">[IMG: Education template - Cat: The Ideal Pet]</div>137        <div class="title">Cat: The Ideal Pet</div>138        <div class="subtitle">Your Name</div>139      </div>140      <div class="item">141        <div class="thumb">[IMG: Education template - Cells: Basic Units of Life]</div>142        <div class="title">CELLS</div>143        <div class="subtitle">Basic Units of Life</div>144      </div>145      <div class="item">146        <div class="thumb">[IMG: Science Lab Report cover]</div>147        <div class="title">Science Lab Report</div>148        <div class="subtitle">Education</div>149      </div>150    </div>151  </div>152</div>153</body>154</html>