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>Inbox - Detail</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: #000000;15    color: #FFFFFF;16    font-family: Arial, Helvetica, sans-serif;17  }18 19  /* Status bar */20  .status-bar {21    height: 110px;22    padding: 20px 32px 0 32px;23    box-sizing: border-box;24    display: flex;25    align-items: center;26    justify-content: space-between;27    color: #fff;28    font-weight: 600;29    font-size: 34px;30    letter-spacing: 0.5px;31    opacity: 0.95;32  }33  .status-icons {34    display: flex;35    align-items: center;36    gap: 16px;37  }38  .icon-signal, .icon-wifi, .icon-battery {39    display: inline-block;40  }41  .icon-signal {42    width: 32px; height: 32px; border-left: 4px solid #fff; border-bottom: 4px solid #fff; transform: skewX(-20deg);43  }44  .icon-wifi {45    width: 36px; height: 22px; border-top: 4px solid #fff; border-radius: 0 0 20px 20px; position: relative;46  }47  .icon-wifi::after {48    content: ""; position: absolute; left: 50%; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: #fff; transform: translateX(-50%);49  }50  .icon-battery {51    width: 54px; height: 28px; border: 4px solid #fff; border-radius: 4px; position: relative;52  }53  .icon-battery::after {54    content: ""; position: absolute; right: -8px; top: 7px; width: 8px; height: 14px; background: #fff; border-radius: 2px;55  }56  .battery-fill {57    position: absolute; left: 4px; top: 4px; height: 20px; width: 34px; background: #fff;58  }59 60  /* Top app bar */61  .top-bar {62    height: 140px;63    padding: 0 32px;64    display: flex;65    align-items: center;66    justify-content: space-between;67  }68  .left-group {69    display: flex;70    align-items: center;71    gap: 20px;72  }73  .title {74    font-size: 54px;75    font-weight: 700;76  }77  .inbox-dd {78    font-size: 46px;79    font-weight: 700;80  }81  .dd-arrow {82    width: 20px; height: 20px; margin-left: 8px;83  }84  .kebab {85    width: 40px; height: 80px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;86  }87  .kebab span {88    width: 8px; height: 8px; background: #fff; border-radius: 50%;89    display: block;90  }91  .icon-btn {92    width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;93  }94  .back-icon svg { width: 48px; height: 48px; }95 96  /* Meta row */97  .meta-row {98    display: flex;99    align-items: center;100    justify-content: space-between;101    padding: 12px 32px 0 32px;102    margin-top: 10px;103  }104  .meta-left {105    display: flex;106    align-items: center;107    gap: 20px;108  }109  .checkbox {110    width: 48px; height: 48px; border: 4px solid #8E8E8E; border-radius: 8px;111  }112  .meta-text {113    color: #ff5a52;114    font-size: 42px;115    font-weight: 700;116  }117  .flag-btn svg { width: 46px; height: 46px; }118 119  /* Content */120  .content {121    padding: 28px 32px;122  }123  .note-title {124    margin-top: 28px;125    font-size: 80px;126    font-weight: 800;127    color: #ffffff;128  }129  .note-desc {130    margin-top: 28px;131    font-size: 46px;132    color: #7a7a7a;133  }134 135  /* Bottom action bar */136  .bottom-bar {137    position: absolute;138    left: 0; right: 0; bottom: 0;139    height: 160px;140    padding: 22px 36px 64px 36px;141    display: flex;142    align-items: flex-end;143    gap: 44px;144    color: #bdbdbd;145  }146  .bottom-icon {147    width: 80px; height: 80px; display: flex; align-items: center; justify-content: center;148    opacity: 0.8;149  }150  .bottom-icon svg { width: 56px; height: 56px; fill: #bdbdbd; }151 152  .home-indicator {153    position: absolute;154    bottom: 18px; left: 50%;155    width: 300px; height: 12px; background: #e6e6e6; border-radius: 8px;156    transform: translateX(-50%);157    opacity: 0.95;158  }159</style>160</head>161<body>162<div id="render-target">163 164  <!-- Status Bar -->165  <div class="status-bar">166    <div>8:02</div>167    <div class="status-icons">168      <span class="icon-signal"></span>169      <span class="icon-wifi"></span>170      <span class="icon-battery"><span class="battery-fill"></span></span>171    </div>172  </div>173 174  <!-- Top App Bar -->175  <div class="top-bar">176    <div class="left-group">177      <div class="icon-btn back-icon">178        <svg viewBox="0 0 64 64">179          <path d="M38 10 L16 32 L38 54" stroke="#fff" stroke-width="8" fill="none" stroke-linecap="round" stroke-linejoin="round"/>180        </svg>181      </div>182      <div class="inbox-dd" style="display:flex; align-items:center;">183        Inbox184        <svg class="dd-arrow" viewBox="0 0 24 24">185          <path d="M5 8 L12 15 L19 8" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>186        </svg>187      </div>188    </div>189    <div class="kebab">190      <span></span><span></span><span></span>191    </div>192  </div>193 194  <!-- Meta row -->195  <div class="meta-row">196    <div class="meta-left">197      <div class="checkbox"></div>198      <div class="meta-text">Last Wed, Jul 19, 12:30pm</div>199    </div>200    <div class="flag-btn">201      <svg viewBox="0 0 64 64">202        <path d="M12 8 L12 56" stroke="#fff" stroke-width="6" stroke-linecap="round"/>203        <path d="M14 10 L52 16 L34 26 L52 36 L14 40 Z" fill="#ffffff"/>204      </svg>205    </div>206  </div>207 208  <!-- Content -->209  <div class="content">210    <div class="note-title">Weeding plan</div>211    <div class="note-desc">Description</div>212  </div>213 214  <!-- Bottom toolbar -->215  <div class="bottom-bar">216    <!-- Tag icon -->217    <div class="bottom-icon">218      <svg viewBox="0 0 64 64">219        <path d="M8 28 L32 8 L56 8 L56 32 L32 56 L8 32 Z" fill="none" stroke="#bdbdbd" stroke-width="4"/>220        <circle cx="44" cy="20" r="5" fill="#bdbdbd"/>221      </svg>222    </div>223    <!-- List icon -->224    <div class="bottom-icon">225      <svg viewBox="0 0 64 64">226        <circle cx="12" cy="16" r="5" />227        <circle cx="12" cy="32" r="5" />228        <circle cx="12" cy="48" r="5" />229        <rect x="22" y="12" width="34" height="8" rx="3" />230        <rect x="22" y="28" width="34" height="8" rx="3" />231        <rect x="22" y="44" width="34" height="8" rx="3" />232      </svg>233    </div>234    <!-- Image icon -->235    <div class="bottom-icon">236      <svg viewBox="0 0 64 64">237        <rect x="6" y="10" width="52" height="44" rx="6" fill="none" stroke="#bdbdbd" stroke-width="4"/>238        <circle cx="22" cy="24" r="6"/>239        <path d="M10 48 L30 32 L42 42 L56 36 L56 54 L8 54 Z" />240      </svg>241    </div>242  </div>243 244  <div class="home-indicator"></div>245</div>246</body>247</html>