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>Saved Template UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; color: #2b2b2b; }9  #render-target {10    position: relative; overflow: hidden;11    width: 1080px; height: 2400px;12    background: #F6F8FC;13    border-radius: 0;14    box-shadow: none;15  }16  .status-bar {17    position: absolute; top: 0; left: 0; right: 0;18    height: 96px; background: #000;19  }20  .header {21    position: absolute; top: 96px; left: 0; right: 0;22    height: 180px; background: #EFF2F7;23    display: flex; align-items: center; justify-content: center;24    border-bottom: 1px solid #E3E6EC;25  }26  .header h1 {27    margin: 0; font-size: 50px; font-weight: 600; color: #222;28  }29  .back-btn {30    position: absolute; left: 28px; top: 50%; transform: translateY(-50%);31    width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;32    border-radius: 36px;33  }34  .tabs {35    position: absolute; top: 276px; left: 0; right: 0;36    height: 120px; background: #EFF2F7;37    display: flex; align-items: flex-end; justify-content: center; gap: 120px;38    padding-bottom: 24px;39  }40  .tab {41    font-size: 40px; color: #9AA0A6; padding-bottom: 8px;42  }43  .tab.active {44    color: #1F2A37; border-bottom: 6px solid #2E77FF;45  }46 47  .list {48    position: absolute; top: 396px; left: 0; right: 0; bottom: 310px; /* leave room for ad & home bar */49    padding: 24px 32px;50    overflow: hidden;51  }52  .card {53    background: #fff; border-radius: 18px; border: 1px solid #E7E9EE;54    height: 170px; display: flex; align-items: center;55    padding: 24px 28px; margin-bottom: 28px;56  }57  .pdf-icon {58    width: 112px; height: 112px; margin-right: 26px;59    display: flex; align-items: center; justify-content: center;60  }61  .file-name {62    font-size: 36px; color: #333; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;63  }64  .kebab {65    width: 54px; height: 54px; display: flex; align-items: center; justify-content: center;66  }67 68  /* Bottom ad banner */69  .ad-banner {70    position: absolute; left: 0; right: 0; bottom: 96px;71    height: 210px; background: #FFFFFF; border-top: 1px solid #E5E7EB;72    display: flex; align-items: center; padding: 0 28px;73  }74  .ad-info {75    width: 44px; height: 44px; border-radius: 22px; background: #E6F0FF; color: #2E77FF;76    display: flex; align-items: center; justify-content: center; font-weight: 700; margin-right: 18px;77  }78  .ad-text {79    flex: 1; font-size: 32px; color: #333; line-height: 44px;80  }81  .ad-close {82    position: absolute; left: 10px; bottom: 10px; color: #2E77FF; font-size: 36px;83  }84  .ad-button {85    background: #2E77FF; color: #fff; font-weight: 600; font-size: 34px;86    padding: 26px 34px; border-radius: 16px; display: flex; align-items: center; gap: 16px;87  }88  .home-bar {89    position: absolute; left: 0; right: 0; bottom: 0; height: 96px; background: #000;90  }91  .gesture {92    position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);93    width: 200px; height: 10px; background: #C9CDD3; border-radius: 6px; opacity: 0.7;94  }95</style>96</head>97<body>98<div id="render-target">99  <div class="status-bar"></div>100 101  <div class="header">102    <div class="back-btn" aria-label="Back">103      <svg width="40" height="40" viewBox="0 0 24 24" fill="none">104        <path d="M15 18l-6-6 6-6" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>105      </svg>106    </div>107    <h1>Saved Template</h1>108  </div>109 110  <div class="tabs">111    <div class="tab active">Pdf Letters</div>112    <div class="tab">Draft Letters</div>113  </div>114 115  <div class="list">116    <div class="card">117      <div class="pdf-icon">118        <svg width="88" height="88" viewBox="0 0 64 64">119          <!-- Document with folded corner -->120          <path d="M12 6h28l10 10v34a4 4 0 0 1-4 4H12a4 4 0 0 1-4-4V10a4 4 0 0 1 4-4z" fill="#E6F0FF" stroke="#C9D4EE"/>121          <path d="M40 6v12h12" fill="#DDE8FF"/>122          <!-- Red PDF label -->123          <rect x="8" y="36" width="20" height="14" rx="3" fill="#E74C3C"/>124          <text x="18" y="46" text-anchor="middle" font-size="8" font-weight="700" fill="#fff">PDF</text>125        </svg>126      </div>127      <div class="file-name">Sample letter 1691337902411.pdf</div>128      <div class="kebab">129        <svg width="24" height="24" viewBox="0 0 24 24" fill="#3C3C43">130          <circle cx="12" cy="5" r="2"></circle>131          <circle cx="12" cy="12" r="2"></circle>132          <circle cx="12" cy="19" r="2"></circle>133        </svg>134      </div>135    </div>136 137    <div class="card">138      <div class="pdf-icon">139        <svg width="88" height="88" viewBox="0 0 64 64">140          <path d="M12 6h28l10 10v34a4 4 0 0 1-4 4H12a4 4 0 0 1-4-4V10a4 4 0 0 1 4-4z" fill="#E6F0FF" stroke="#C9D4EE"/>141          <path d="M40 6v12h12" fill="#DDE8FF"/>142          <rect x="8" y="36" width="20" height="14" rx="3" fill="#E74C3C"/>143          <text x="18" y="46" text-anchor="middle" font-size="8" font-weight="700" fill="#fff">PDF</text>144        </svg>145      </div>146      <div class="file-name">Sample letter 1691337807675.pdf</div>147      <div class="kebab">148        <svg width="24" height="24" viewBox="0 0 24 24" fill="#3C3C43">149          <circle cx="12" cy="5" r="2"></circle>150          <circle cx="12" cy="12" r="2"></circle>151          <circle cx="12" cy="19" r="2"></circle>152        </svg>153      </div>154    </div>155 156    <div class="card">157      <div class="pdf-icon">158        <svg width="88" height="88" viewBox="0 0 64 64">159          <path d="M12 6h28l10 10v34a4 4 0 0 1-4 4H12a4 4 0 0 1-4-4V10a4 4 0 0 1 4-4z" fill="#E6F0FF" stroke="#C9D4EE"/>160          <path d="M40 6v12h12" fill="#DDE8FF"/>161          <rect x="8" y="36" width="20" height="14" rx="3" fill="#E74C3C"/>162          <text x="18" y="46" text-anchor="middle" font-size="8" font-weight="700" fill="#fff">PDF</text>163        </svg>164      </div>165      <div class="file-name">Sample letter 1691230553938.pdf</div>166      <div class="kebab">167        <svg width="24" height="24" viewBox="0 0 24 24" fill="#3C3C43">168          <circle cx="12" cy="5" r="2"></circle>169          <circle cx="12" cy="12" r="2"></circle>170          <circle cx="12" cy="19" r="2"></circle>171        </svg>172      </div>173    </div>174  </div>175 176  <div class="ad-banner">177    <div class="ad-info">i</div>178    <div class="ad-text">Compete against friends or play on your own. Try Facebook Gaming.</div>179    <div class="ad-button">180      DOWNLOAD181      <svg width="22" height="22" viewBox="0 0 24 24" fill="none">182        <path d="M9 6l6 6-6 6" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>183      </svg>184    </div>185    <div class="ad-close">×</div>186  </div>187 188  <div class="home-bar">189    <div class="gesture"></div>190  </div>191</div>192</body>193</html>