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 - Shimla tour</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #000000; color: #FFFFFF;13  }14 15  /* Status bar */16  .status-bar {17    height: 96px;18    display: flex; align-items: center; justify-content: space-between;19    padding: 0 40px;20    font-size: 36px; color: #fff; opacity: 0.95;21  }22  .status-right { display: flex; align-items: center; gap: 22px; }23 24  /* App bar */25  .app-bar {26    height: 140px;27    display: flex; align-items: center;28    padding: 0 36px;29    box-sizing: border-box;30  }31  .app-left { display: flex; align-items: center; gap: 26px; }32  .app-title { font-size: 54px; font-weight: 700; letter-spacing: 0.2px; }33  .app-actions { margin-left: auto; display: flex; align-items: center; gap: 28px; }34 35  /* Content */36  .content { padding: 0 40px; }37  .meta-row {38    margin-top: 28px;39    display: flex; align-items: center; gap: 24px;40  }41  .checkbox {42    width: 48px; height: 48px; border: 4px solid #7A7A7A; border-radius: 8px;43    box-sizing: border-box;44  }45  .meta-text {46    font-size: 42px; color: #4E7BFF; font-weight: 700;47  }48  .flag {49    position: absolute; right: 40px; top: 340px;50    width: 56px; height: 56px;51  }52 53  .title {54    margin: 48px 0 18px 0;55    font-size: 84px; font-weight: 800;56  }57  .desc {58    color: #828282; font-size: 46px;59  }60 61  /* Bottom tools */62  .bottom-tools {63    position: absolute; left: 40px; bottom: 140px;64    display: flex; align-items: center; gap: 80px;65    color: #9E9E9E;66  }67  .tool svg { width: 64px; height: 64px; }68  .home-indicator {69    position: absolute; bottom: 56px; left: 50%; transform: translateX(-50%);70    width: 420px; height: 16px; background: #E6E6E6; border-radius: 12px; opacity: 0.9;71  }72</style>73</head>74<body>75<div id="render-target">76  <!-- Status bar -->77  <div class="status-bar">78    <div>1:59</div>79    <div class="status-right">80      <!-- Simple WiFi icon -->81      <svg width="44" height="44" viewBox="0 0 44 44">82        <path d="M6 16 Q22 6 38 16" stroke="#FFFFFF" stroke-width="4" fill="none" stroke-linecap="round"/>83        <path d="M10 22 Q22 14 34 22" stroke="#FFFFFF" stroke-width="4" fill="none" stroke-linecap="round"/>84        <path d="M14 28 Q22 22 30 28" stroke="#FFFFFF" stroke-width="4" fill="none" stroke-linecap="round"/>85        <circle cx="22" cy="32" r="3.8" fill="#FFFFFF"/>86      </svg>87      <!-- Battery icon -->88      <svg width="48" height="44" viewBox="0 0 48 44">89        <rect x="4" y="10" width="36" height="24" rx="4" ry="4" stroke="#FFFFFF" stroke-width="4" fill="none"/>90        <rect x="8" y="14" width="28" height="16" fill="#FFFFFF"/>91        <rect x="42" y="16" width="4" height="12" fill="#FFFFFF"/>92      </svg>93    </div>94  </div>95 96  <!-- App bar -->97  <div class="app-bar">98    <div class="app-left">99      <!-- Back arrow -->100      <svg width="60" height="60" viewBox="0 0 60 60">101        <path d="M36 12 L20 30 L36 48" stroke="#FFFFFF" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>102      </svg>103      <div class="app-title">Inbox</div>104      <!-- Chevron down -->105      <svg width="44" height="44" viewBox="0 0 44 44">106        <path d="M10 16 L22 28 L34 16" stroke="#FFFFFF" stroke-width="5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>107      </svg>108    </div>109    <div class="app-actions">110      <!-- More (vertical dots) -->111      <svg width="48" height="60" viewBox="0 0 48 60">112        <circle cx="24" cy="12" r="5" fill="#FFFFFF"/>113        <circle cx="24" cy="30" r="5" fill="#FFFFFF"/>114        <circle cx="24" cy="48" r="5" fill="#FFFFFF"/>115      </svg>116    </div>117  </div>118 119  <!-- Content -->120  <div class="content">121    <div class="meta-row">122      <div class="checkbox"></div>123      <!-- Reminder icon (alarm/clock) -->124      <svg width="48" height="48" viewBox="0 0 48 48">125        <circle cx="24" cy="26" r="14" stroke="#4E7BFF" stroke-width="4" fill="none"/>126        <path d="M24 26 L24 18 M24 26 L30 30" stroke="#4E7BFF" stroke-width="4" stroke-linecap="round"/>127        <rect x="10" y="6" width="12" height="6" rx="3" fill="#4E7BFF"/>128        <rect x="26" y="6" width="12" height="6" rx="3" fill="#4E7BFF"/>129      </svg>130      <div class="meta-text">Next Wed, Aug 16, 09:00AM</div>131    </div>132 133    <!-- Flag on the right -->134    <svg class="flag" viewBox="0 0 56 56">135      <path d="M10 6 V50" stroke="#FFFFFF" stroke-width="6" stroke-linecap="round"/>136      <path d="M12 8 H46 L38 20 L46 32 H12 Z" fill="#FFFFFF"/>137    </svg>138 139    <div class="title">Shimla tour</div>140    <div class="desc">Description</div>141  </div>142 143  <!-- Bottom tools -->144  <div class="bottom-tools">145    <div class="tool">146      <!-- Tag icon -->147      <svg viewBox="0 0 64 64">148        <path d="M10 22 L34 6 L56 28 L32 52 L10 30 Z" stroke="#9E9E9E" stroke-width="4" fill="none" stroke-linejoin="round"/>149        <circle cx="26" cy="20" r="4" fill="#9E9E9E"/>150      </svg>151    </div>152    <div class="tool">153      <!-- List icon -->154      <svg viewBox="0 0 64 64">155        <circle cx="12" cy="16" r="4" fill="#9E9E9E"/>156        <circle cx="12" cy="32" r="4" fill="#9E9E9E"/>157        <circle cx="12" cy="48" r="4" fill="#9E9E9E"/>158        <rect x="22" y="12" width="32" height="8" fill="#9E9E9E"/>159        <rect x="22" y="28" width="32" height="8" fill="#9E9E9E"/>160        <rect x="22" y="44" width="32" height="8" fill="#9E9E9E"/>161      </svg>162    </div>163    <div class="tool">164      <!-- Image icon -->165      <svg viewBox="0 0 64 64">166        <rect x="8" y="10" width="48" height="44" rx="8" ry="8" stroke="#9E9E9E" stroke-width="4" fill="none"/>167        <circle cx="22" cy="24" r="5" fill="#9E9E9E"/>168        <path d="M16 44 L28 32 L36 40 L48 28" stroke="#9E9E9E" stroke-width="4" fill="none"/>169      </svg>170    </div>171  </div>172 173  <div class="home-indicator"></div>174</div>175</body>176</html>