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 UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #1f1b1b; color: #eadbd4;13  }14 15  /* Status bar */16  .status-bar {17    position: absolute; top: 0; left: 0; width: 100%; height: 96px;18    display: flex; align-items: center; justify-content: space-between;19    padding: 0 36px; font-size: 40px; color: #ffffff;20  }21  .status-left { font-weight: 500; }22  .status-right { display: flex; align-items: center; gap: 28px; }23  .icon { width: 40px; height: 40px; fill: none; stroke: #ffffff; stroke-width: 2.5; }24 25  /* Header */26  .header {27    position: absolute; top: 120px; left: 36px; right: 36px;28    display: flex; align-items: center; gap: 28px;29  }30  .back {31    width: 64px; height: 64px;32  }33  .title {34    font-size: 72px; font-weight: 500; letter-spacing: 0.5px;35    color: #e9d7cf;36  }37 38  /* Content */39  .content { position: absolute; top: 240px; left: 36px; right: 36px; bottom: 0; }40  .section-title {41    font-size: 52px; color: #d3c8c2; margin: 36px 0 22px;42  }43  .grid {44    display: grid;45    grid-template-columns: repeat(3, 1fr);46    gap: 40px 40px;47  }48  .card { display: flex; flex-direction: column; }49  .thumb {50    height: 360px; border: 1px solid #bdbdbd; background: #e0e0e0;51    display: flex; align-items: center; justify-content: center;52    color: #757575; font-size: 32px; text-align: center;53  }54  .label {55    margin-top: 22px; line-height: 1.25;56  }57  .label .primary { display: block; font-size: 40px; color: #e7d6cf; }58  .label .secondary { display: block; font-size: 34px; color: #c7bab4; }59 60  /* Spacing between sections */61  .spacer-xxl { height: 70px; }62</style>63</head>64<body>65<div id="render-target">66 67  <!-- Status Bar -->68  <div class="status-bar">69    <div class="status-left">9:10</div>70    <div class="status-right">71      <!-- Location -->72      <svg class="icon" viewBox="0 0 24 24">73        <path d="M12 22s7-8.5 7-12a7 7 0 1 0-14 0c0 3.5 7 12 7 12z"></path>74        <circle cx="12" cy="10" r="3"></circle>75      </svg>76      <!-- Wi-Fi -->77      <svg class="icon" viewBox="0 0 24 24">78        <path d="M2 8c5-4.5 15-4.5 20 0"></path>79        <path d="M5 12c3.5-3 10.5-3 14 0"></path>80        <path d="M8 16c2-1.5 6-1.5 8 0"></path>81        <circle cx="12" cy="19" r="1.8" fill="#ffffff" stroke="none"></circle>82      </svg>83      <!-- Battery -->84      <svg class="icon" viewBox="0 0 24 24">85        <rect x="3" y="6" width="16" height="12" rx="2"></rect>86        <rect x="20" y="10" width="2" height="4" rx="1"></rect>87        <rect x="5" y="8" width="10" height="8" fill="#ffffff" stroke="none"></rect>88      </svg>89    </div>90  </div>91 92  <!-- Header -->93  <div class="header">94    <svg class="back" viewBox="0 0 24 24">95      <path d="M15 5l-7 7 7 7" fill="none" stroke="#e9d7cf" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>96    </svg>97    <div class="title">Templates</div>98  </div>99 100  <!-- Content -->101  <div class="content">102    <div class="section-title">CVs</div>103    <div class="grid">104      <!-- Row 1 -->105      <div class="card">106        <div class="thumb">[IMG: Resume - Swiss]</div>107        <div class="label">108          <span class="primary">Resume</span>109          <span class="secondary">Swiss</span>110        </div>111      </div>112      <div class="card">113        <div class="thumb">[IMG: Resume - Serif]</div>114        <div class="label">115          <span class="primary">Resume</span>116          <span class="secondary">Serif</span>117        </div>118      </div>119      <div class="card">120        <div class="thumb">[IMG: Resume - Coral]</div>121        <div class="label">122          <span class="primary">Resume</span>123          <span class="secondary">Coral</span>124        </div>125      </div>126      <!-- Row 2 -->127      <div class="card">128        <div class="thumb">[IMG: Resume - Spearmint]</div>129        <div class="label">130          <span class="primary">Resume</span>131          <span class="secondary">Spearmint</span>132        </div>133      </div>134      <div class="card">135        <div class="thumb">[IMG: Resume - Modern writer]</div>136        <div class="label">137          <span class="primary">Resume</span>138          <span class="secondary">Modern writer</span>139        </div>140      </div>141      <!-- Empty slot to visually match screenshot spacing -->142      <div class="card"></div>143    </div>144 145    <div class="spacer-xxl"></div>146 147    <div class="section-title">Letters</div>148    <div class="grid">149      <div class="card">150        <div class="thumb">[IMG: Letter - Spearmint]</div>151        <div class="label">152          <span class="primary">Letter</span>153          <span class="secondary">Spearmint</span>154        </div>155      </div>156      <div class="card">157        <div class="thumb">[IMG: Letter - Swiss]</div>158        <div class="label">159          <span class="primary">Letter</span>160          <span class="secondary">Swiss</span>161        </div>162      </div>163      <div class="card">164        <div class="thumb">[IMG: Business letter - Geometric]</div>165        <div class="label">166          <span class="primary">Business letter</span>167          <span class="secondary">Geometric</span>168        </div>169      </div>170    </div>171  </div>172 173</div>174</body>175</html>