GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Email Thread - Dark</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8  body { margin:0; padding:0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target{10    width:1080px; height:2400px; position:relative; overflow:hidden;11    background:#121212; color:#EDEDED;12  }13  .statusbar{14    height:90px; padding:0 32px; display:flex; align-items:center; justify-content:space-between;15    font-size:34px; color:#fff;16  }17  .status-icons{ display:flex; align-items:center; gap:18px; opacity:0.9; }18  .icon{ width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; }19  .topbar{20    height:100px; padding:0 20px; display:flex; align-items:center; justify-content:space-between;21  }22  .top-left{ display:flex; align-items:center; gap:18px; }23  .top-right{ display:flex; align-items:center; gap:28px; }24  .subject{25    padding:18px 24px 10px 24px; display:flex; align-items:center; gap:18px; position:relative;26  }27  .subject .hilite{28    background:#F1DE9C; color:#111; font-size:54px; line-height:1.1; padding:8px 10px; border-radius:6px;29  }30  .pill{31    font-size:28px; color:#DDD; background:#2E2E2E; border-radius:16px; padding:6px 14px; border:1px solid #3a3a3a;32  }33  .star{34    position:absolute; right:24px; top:24px; opacity:0.9;35  }36  .thread{ padding:6px 24px 0 24px; }37  .msg{38    padding:26px 0; border-bottom:1px solid rgba(255,255,255,0.08);39  }40  .header{41    display:flex; align-items:flex-start; gap:22px;42  }43  .avatar{44    width:110px; height:110px; background:#E0E0E0; border:1px solid #BDBDBD; border-radius:50%;45    display:flex; align-items:center; justify-content:center; color:#555; font-size:22px;46  }47  .h-text{ flex:1; }48  .name-row{ display:flex; align-items:center; gap:12px; }49  .name{ font-size:40px; font-weight:700; color:#fff; }50  .time{ font-size:28px; color:#B0B0B0; }51  .to-row{ font-size:28px; color:#B0B0B0; margin-top:6px; display:flex; align-items:center; gap:8px; }52  .body-text{ font-size:34px; line-height:1.5; color:#E6E6E6; margin-top:22px; }53  .meta-card{54    margin-top:22px; padding:26px; border:1px solid rgba(255,255,255,0.15); border-radius:22px; background:#1B1B1B;55  }56  .meta-row{ display:flex; gap:24px; margin:10px 0; }57  .meta-label{ width:140px; color:#C9C9C9; font-size:30px; }58  .meta-value{ color:#fff; font-size:30px; }59  .meta-link{ color:#79A9FF; font-size:32px; margin-top:12px; }60  .quoted{ color:#79A9FF; margin-top:18px; font-size:32px; }61  .actions{62    position:absolute; left:0; right:0; bottom:180px;63    display:flex; justify-content:space-around; padding:0 20px;64  }65  .btn{66    min-width:220px; height:100px; border-radius:50px; border:2px solid rgba(255,255,255,0.25);67    display:flex; align-items:center; justify-content:center; gap:12px; color:#EDEDED; font-size:34px; background:transparent;68  }69  .bottom-bar{70    position:absolute; left:0; right:0; bottom:0; height:160px; background:#0E0E0E;71    display:flex; align-items:center; justify-content:space-between; padding:0 36px;72    border-top:1px solid rgba(255,255,255,0.08);73  }74  .badge{75    position:absolute; top:-14px; right:-10px; background:#F0B3B5; color:#111; font-size:24px; padding:2px 8px;76    border-radius:16px; border:1px solid rgba(0,0,0,0.2);77  }78  .fab-icon{79    position:relative; width:116px; height:64px; background:#2A2F38; border-radius:32px; display:flex; align-items:center; justify-content:center; color:#EDEDED;80  }81  .gesture{82    position:absolute; left:50%; transform:translateX(-50%); bottom:14px; width:280px; height:8px;83    background:#E6E6E6; border-radius:8px; opacity:0.85;84  }85  /* Small helper for vertical dots */86  .dots{ width:8px; height:8px; border-radius:50%; background:#D9D9D9; margin:3px 0; }87</style>88</head>89<body>90<div id="render-target">91 92  <!-- Status bar -->93  <div class="statusbar">94    <div>9:05</div>95    <div class="status-icons">96      <!-- simple placeholders for status icons -->97      <svg class="icon" viewBox="0 0 24 24" fill="#fff"><path d="M3 18h18v2H3zM5 14h14v2H5zM8 10h8v2H8zM10 6h4v2h-4z"/></svg>98      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><path d="M3 11c4-4 14-4 18 0"/><path d="M6 14c2-2 10-2 12 0"/><circle cx="12" cy="18" r="1.2" fill="#fff"/></svg>99      <svg class="icon" viewBox="0 0 24 24" fill="#fff"><path d="M16 4h-1V2h-6v2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H8V8h8v10z"/></svg>100    </div>101  </div>102 103  <!-- Top action bar -->104  <div class="topbar">105    <div class="top-left">106      <svg class="icon" viewBox="0 0 24 24" fill="#EDEDED"><path d="M15.5 3.5 7 12l8.5 8.5-1.4 1.4L4.2 12l9.9-9.9z"/></svg>107    </div>108    <div class="top-right">109      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#EDEDED" stroke-width="2"><path d="M12 3v14"/><path d="M5 10l7-7 7 7"/><rect x="4" y="17" width="16" height="4" rx="1" fill="#EDEDED"/></svg>110      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#EDEDED" stroke-width="2"><path d="M3 6h18"/><path d="M8 6v12a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2V6"/></svg>111      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#EDEDED" stroke-width="2"><path d="M4 4h16v14H4z"/><path d="m4 4 8 7 8-7"/></svg>112      <div style="display:flex; flex-direction:column; align-items:center; padding:6px 8px;">113        <div class="dots"></div><div class="dots"></div><div class="dots"></div>114      </div>115    </div>116  </div>117 118  <!-- Subject -->119  <div class="subject">120    <span class="hilite">upcoming</span>121    <span class="hilite">events</span>122    <span class="pill">Inbox</span>123    <div class="star">124      <svg class="icon" viewBox="0 0 24 24" fill="#D2D2D2"><path d="m12 2 3 6 6 .9-4.5 4.3 1.1 6.8L12 17l-5.6 3 1.1-6.8L3 8.9 9 8z"/></svg>125    </div>126  </div>127 128  <!-- Thread content -->129  <div class="thread">130 131    <!-- Message 1 -->132    <div class="msg">133      <div class="header">134        <div class="avatar">[IMG: Avatar]</div>135        <div class="h-text">136          <div class="name-row">137            <div class="name">Michael Nguyen</div>138            <div class="time">5 days ago</div>139          </div>140          <div class="to-row">to me141            <svg width="18" height="18" viewBox="0 0 24 24" fill="#B0B0B0"><path d="m7 10 5 5 5-5z"/></svg>142          </div>143        </div>144        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#EDEDED" stroke-width="2"><path d="M4 12h13"/><path d="m12 5 7 7-7 7"/></svg>145      </div>146      <div class="body-text">A concert and a continuing education seminar</div>147    </div>148 149    <!-- Message 2 -->150    <div class="msg" style="border-bottom:none;">151      <div class="header">152        <div class="avatar">[IMG: Avatar]</div>153        <div class="h-text">154          <div class="name-row">155            <div class="name">Cerebra Research</div>156            <div class="time">5 days ago</div>157          </div>158          <div class="to-row">to Michael159            <svg width="18" height="18" viewBox="0 0 24 24" fill="#B0B0B0"><path d="m7 10 5 5 5-5z"/></svg>160          </div>161        </div>162        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#EDEDED" stroke-width="2"><path d="M4 12h13"/><path d="m12 5 7 7-7 7"/></svg>163      </div>164 165      <div class="meta-card">166        <div class="meta-row">167          <div class="meta-label">From</div>168          <div class="meta-value">Cerebra Research • dbwscratch.test.id2@gmail.com</div>169        </div>170        <div class="meta-row">171          <div class="meta-label">To</div>172          <div class="meta-value">Michael Nguyen • nguyemichael558@gmail.com</div>173        </div>174        <div class="meta-row">175          <div class="meta-label">Date</div>176          <div class="meta-value">Oct 20, 2023, 9:44 PM</div>177        </div>178        <div class="meta-link">View security details</div>179      </div>180 181      <div class="body-text" style="margin-top:28px;">182        Hi there! We just wanted to let you know we received your message and will be in touch183      </div>184 185      <div class="quoted">Show quoted text</div>186    </div>187 188  </div>189 190  <!-- Bottom actions -->191  <div class="actions">192    <div class="btn">193      <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#EDEDED" stroke-width="2"><path d="M9 14 4 9l5-5"/><path d="M4 9h11a5 5 0 0 1 0 10H9"/></svg>194      <span>Reply</span>195    </div>196    <div class="btn">197      <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#EDEDED" stroke-width="2"><path d="M9 14 4 9l5-5"/><path d="M4 9h7"/></svg>198      <span>Reply all</span>199    </div>200    <div class="btn">201      <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#EDEDED" stroke-width="2"><path d="M5 12h13"/><path d="m12 5 7 7-7 7"/></svg>202      <span>Forward</span>203    </div>204    <div class="btn">205      <svg width="34" height="34" viewBox="0 0 24 24" fill="#EDEDED"><circle cx="12" cy="12" r="10"/></svg>206    </div>207  </div>208 209  <!-- Bottom navigation -->210  <div class="bottom-bar">211    <div style="position:relative; display:flex; align-items:center;">212      <div class="fab-icon">213        <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#EDEDED" stroke-width="2"><path d="M4 4h16v14H4z"/><path d="m4 4 8 7 8-7"/></svg>214        <span class="badge">99+</span>215      </div>216    </div>217    <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#EDEDED" stroke-width="2">218      <rect x="3" y="6" width="18" height="12" rx="2"/>219      <path d="M7 6v-2h10v2"/>220    </svg>221  </div>222 223  <div class="gesture"></div>224 225</div>226</body>227</html>