GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Inbox - Dark</title>7<style>8  body{margin:0;padding:0;background:transparent;}9  #render-target{10    width:1080px;height:2400px;position:relative;overflow:hidden;11    background:#000;color:#fff;font-family:Roboto, Arial, sans-serif;12  }13  .status-bar{14    position:absolute;top:0;left:0;right:0;height:96px;15    display:flex;align-items:center;justify-content:space-between;16    padding:0 32px;font-size:36px;color:#fff;opacity:.95;17  }18  .status-icons{display:flex;gap:24px;align-items:center;}19  .app-bar{20    position:absolute;top:96px;left:0;right:0;height:120px;21    display:flex;align-items:center;padding:0 24px 0 8px;22  }23  .icon-btn{width:88px;height:88px;display:flex;align-items:center;justify-content:center;}24  .title{25    font-size:54px;font-weight:700;letter-spacing:.2px;margin-left:4px;26  }27  .title small{font-weight:700;color:#cfcfcf;margin-left:8px;}28  .more{margin-left:auto;}29  .content{position:absolute;left:32px;right:32px;top:256px;}30  .event-row{display:flex;align-items:flex-start;gap:24px;}31  .checkbox{32    width:56px;height:56px;border:3px solid #6e6e6e;border-radius:8px;margin-top:6px;33  }34  .event-text{flex:1;}35  .event-line{display:flex;align-items:center;gap:16px;}36  .blue{color:#4d74ff;}37  .gray{color:#9e9e9e;}38  .event-sub{display:flex;align-items:center;gap:12px;margin-top:10px;font-size:34px;}39  .flag{width:48px;height:48px;margin-left:auto;margin-top:4px;opacity:.9;}40  .big-title{font-size:78px;font-weight:800;margin-top:44px;letter-spacing:.3px;}41  .desc{font-size:44px;color:#8e8e8e;margin-top:22px;}42  .bottom-toolbar{43    position:absolute;left:0;right:0;bottom:88px;height:120px;44    display:flex;align-items:center;gap:64px;padding-left:36px;color:#bdbdbd;45  }46  .toolbar-icon svg{width:64px;height:64px;opacity:.75;}47  .gesture{48    position:absolute;left:50%;transform:translateX(-50%);49    bottom:24px;width:280px;height:12px;border-radius:8px;background:#e6e6e6;opacity:.95;50  }51</style>52</head>53<body>54<div id="render-target">55 56  <!-- Status bar -->57  <div class="status-bar">58    <div>10:01</div>59    <div class="status-icons">60      <!-- simple alarm icon -->61      <svg width="40" height="40" viewBox="0 0 24 24" fill="none">62        <circle cx="12" cy="13" r="6" stroke="#fff" stroke-width="2"/>63        <path d="M12 13V9M12 13l3 2" stroke="#fff" stroke-width="2" stroke-linecap="round"/>64      </svg>65      <svg width="40" height="40" viewBox="0 0 24 24" fill="none">66        <path d="M3 8l5-4M21 8l-5-4" stroke="#fff" stroke-width="2" stroke-linecap="round"/>67      </svg>68      <svg width="40" height="40" viewBox="0 0 24 24" fill="none">69        <path d="M2 18h20" stroke="#fff" stroke-width="2" stroke-linecap="round"/>70        <path d="M7 18V8a5 5 0 0 1 10 0v10" stroke="#fff" stroke-width="2"/>71      </svg>72      <!-- WiFi -->73      <svg width="40" height="40" viewBox="0 0 24 24" fill="none">74        <path d="M2 9c5-5 15-5 20 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>75        <path d="M5 12c3-3 11-3 14 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>76        <path d="M8 15c2-2 6-2 8 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>77        <circle cx="12" cy="18" r="1.6" fill="#fff"/>78      </svg>79      <!-- Battery -->80      <svg width="44" height="44" viewBox="0 0 28 24" fill="none">81        <rect x="1" y="5" width="22" height="14" rx="2" stroke="#fff" stroke-width="2"/>82        <rect x="3" y="7" width="18" height="10" fill="#fff"/>83        <rect x="23" y="9" width="4" height="6" rx="1" fill="#fff"/>84      </svg>85    </div>86  </div>87 88  <!-- App bar -->89  <div class="app-bar">90    <div class="icon-btn">91      <!-- Back arrow -->92      <svg width="56" height="56" viewBox="0 0 24 24" fill="none">93        <path d="M15 5l-7 7 7 7" stroke="#fff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>94      </svg>95    </div>96    <div class="title">Inbox97      <small>98        <svg width="28" height="28" viewBox="0 0 24 24" fill="none">99          <path d="M6 9l6 6 6-6" stroke="#cfcfcf" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>100        </svg>101      </small>102    </div>103    <div class="more" style="padding-right:12px;">104      <!-- Overflow menu -->105      <svg width="64" height="64" viewBox="0 0 24 24" fill="#fff">106        <circle cx="12" cy="5" r="2.2"/>107        <circle cx="12" cy="12" r="2.2"/>108        <circle cx="12" cy="19" r="2.2"/>109      </svg>110    </div>111  </div>112 113  <!-- Content -->114  <div class="content">115    <div class="event-row">116      <div class="checkbox"></div>117      <div class="event-text">118        <div class="event-line">119          <!-- clock icon -->120          <svg width="40" height="40" viewBox="0 0 24 24" fill="none">121            <circle cx="12" cy="12" r="9" stroke="#4d74ff" stroke-width="2"/>122            <path d="M12 7v6l4 2" stroke="#4d74ff" stroke-width="2" stroke-linecap="round"/>123          </svg>124          <div class="blue" style="font-size:44px;font-weight:700;">Aug 20, 09:00AM, 9d left</div>125        </div>126        <div class="event-sub gray">127          <!-- repeat icon -->128          <svg width="32" height="32" viewBox="0 0 24 24" fill="none">129            <path d="M4 7h10l-2-2M20 17H10l2 2" stroke="#9e9e9e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>130          </svg>131          Daily132        </div>133      </div>134      <div class="flag">135        <svg width="48" height="48" viewBox="0 0 24 24" fill="none">136          <path d="M5 3v18" stroke="#d9d9d9" stroke-width="2" stroke-linecap="round"/>137          <path d="M6 4h11l-2.5 3L17 10H6z" stroke="#d9d9d9" stroke-width="2" fill="none" stroke-linejoin="round"/>138        </svg>139      </div>140    </div>141 142    <div class="big-title">Shimla tour</div>143    <div class="desc">Description</div>144  </div>145 146  <!-- Bottom toolbar -->147  <div class="bottom-toolbar">148    <div class="toolbar-icon">149      <!-- tag icon -->150      <svg viewBox="0 0 24 24" fill="none" stroke="#bdbdbd" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">151        <path d="M3 12l9 9 9-9-9-9H7L3 7z"/>152        <circle cx="9" cy="9" r="1.5" fill="#bdbdbd"/>153      </svg>154    </div>155    <div class="toolbar-icon">156      <!-- list icon -->157      <svg viewBox="0 0 24 24" fill="none" stroke="#bdbdbd" stroke-width="2" stroke-linecap="round">158        <circle cx="5" cy="7" r="1.6" fill="#bdbdbd"/>159        <circle cx="5" cy="12" r="1.6" fill="#bdbdbd"/>160        <circle cx="5" cy="17" r="1.6" fill="#bdbdbd"/>161        <path d="M10 7h10M10 12h10M10 17h10"/>162      </svg>163    </div>164    <div class="toolbar-icon">165      <!-- image icon -->166      <svg viewBox="0 0 24 24" fill="none" stroke="#bdbdbd" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">167        <rect x="3" y="5" width="18" height="14" rx="2"/>168        <path d="M6 15l4-4 4 4 2-2 3 3"/>169        <circle cx="9" cy="9" r="1.6" fill="#bdbdbd"/>170      </svg>171    </div>172  </div>173 174  <!-- Gesture bar -->175  <div class="gesture"></div>176 177</div>178</body>179</html>