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>UI Render</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: #FFFFFF;15    border-radius: 48px;16  }17 18  /* Notification card */19  .notif-card {20    position: absolute;21    top: 120px;22    left: 60px;23    width: 960px;24    background: #F4EFFA;25    border-radius: 36px;26    box-shadow: 0 10px 30px rgba(0,0,0,0.12);27    padding: 32px 40px 28px 40px;28    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;29    color: #1F1F1F;30  }31  .notif-header {32    display: flex;33    align-items: center;34  }35  .app-icon {36    width: 64px;37    height: 64px;38    border-radius: 50%;39    background: #276EF1;40    display: flex;41    align-items: center;42    justify-content: center;43    margin-right: 18px;44  }45  .title-row {46    display: flex;47    align-items: baseline;48    gap: 10px;49    flex: 1;50    font-size: 36px;51  }52  .title-row .prefix {53    color: #4F4F4F;54    font-weight: 600;55    font-size: 30px;56  }57  .title-row .main {58    font-weight: 700;59    letter-spacing: 0.2px;60  }61  .title-row .dot {62    color: #8A8A8A;63    font-weight: 600;64  }65  .title-row .time {66    color: #8A8A8A;67    font-size: 30px;68    font-weight: 500;69  }70  .chevron {71    width: 48px;72    height: 48px;73    border-radius: 24px;74    background: #EBE7F3;75    display: flex;76    align-items: center;77    justify-content: center;78    margin-left: 12px;79  }80  .notif-actions {81    margin-top: 26px;82    display: flex;83    gap: 24px;84  }85  .pill-btn {86    padding: 18px 34px;87    border-radius: 28px;88    background: #DCD9FF;89    color: #212121;90    font-weight: 800;91    font-size: 32px;92    letter-spacing: 1px;93    box-shadow: 0 2px 0 rgba(0,0,0,0.06) inset;94  }95 96  /* Brand area */97  .brand {98    position: absolute;99    top: 1450px;100    left: 0;101    width: 1080px;102    display: flex;103    justify-content: center;104    align-items: center;105  }106  .img-placeholder {107    width: 200px;108    height: 160px;109    background: #E0E0E0;110    border: 1px solid #BDBDBD;111    border-radius: 24px;112    display: flex;113    align-items: center;114    justify-content: center;115    color: #757575;116    font-size: 28px;117    text-align: center;118  }119  .brand-text {120    margin-left: 28px;121    font-size: 120px;122    font-weight: 800;123    color: #111111;124    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;125    letter-spacing: 0.5px;126  }127 128  /* Bottom gesture area */129  .bottom-bar {130    position: absolute;131    bottom: 0;132    left: 0;133    width: 1080px;134    height: 140px;135    background: #000000;136  }137  .home-indicator {138    position: absolute;139    bottom: 40px;140    left: 50%;141    transform: translateX(-50%);142    width: 320px;143    height: 12px;144    background: #C9C9C9;145    border-radius: 8px;146  }147</style>148</head>149<body>150<div id="render-target">151 152  <!-- Notification card -->153  <div class="notif-card">154    <div class="notif-header">155      <div class="app-icon">156        <!-- Simple person icon -->157        <svg width="36" height="36" viewBox="0 0 24 24">158          <circle cx="12" cy="8" r="4" fill="#FFFFFF"/>159          <path d="M4 20c0-4 4-6 8-6s8 2 8 6" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>160        </svg>161      </div>162      <div class="title-row">163        <span class="prefix">[Snooze]</span>164        <span class="main">DOWNTIME</span>165        <span class="dot">•</span>166        <span class="time">now</span>167      </div>168      <div class="chevron">169        <svg width="24" height="24" viewBox="0 0 24 24">170          <path d="M6 9l6 6 6-6" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>171        </svg>172      </div>173    </div>174    <div class="notif-actions">175      <div class="pill-btn">SNOOZE</div>176      <div class="pill-btn">DISMISS</div>177    </div>178  </div>179 180  <!-- Center brand/logo -->181  <div class="brand">182    <div class="img-placeholder">[IMG: Cloud Logo]</div>183    <div class="brand-text">TeraBox</div>184  </div>185 186  <!-- Bottom gesture area -->187  <div class="bottom-bar">188    <div class="home-indicator"></div>189  </div>190 191</div>192</body>193</html>