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>Create a Trip</title>7<style>8  body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color:#111; }9  #render-target {10    width:1080px;11    height:2400px;12    position:relative;13    overflow:hidden;14    background:#ffffff;15  }16 17  /* Status bar */18  .status-bar {19    position:absolute;20    top:0; left:0; right:0;21    height:110px;22    background:#12161a;23    color:#e9eef2;24    display:flex;25    align-items:center;26    padding:0 32px;27    box-sizing:border-box;28    font-size:36px;29    letter-spacing:0.5px;30  }31  .status-left { flex:1; }32  .status-right {33    display:flex;34    gap:22px;35    align-items:center;36  }37  .dot { width:14px; height:14px; background:#e9eef2; border-radius:50%; opacity:.9; }38  .battery {39    width:44px; height:22px; border:3px solid #e9eef2; border-radius:4px; position:relative;40  }41  .battery::after { content:""; position:absolute; right:-10px; top:6px; width:6px; height:8px; background:#e9eef2; border-radius:1px; }42  .battery .level { position:absolute; left:2px; top:2px; bottom:2px; right:10px; background:#e9eef2; }43 44  /* App bar */45  .app-bar {46    position:absolute;47    top:110px; left:0; right:0;48    height:140px;49    background:#ffffff;50    display:flex;51    align-items:center;52    padding:0 28px;53    box-sizing:border-box;54    box-shadow:0 2px 6px rgba(0,0,0,0.06);55  }56  .app-bar .title {57    position:absolute;58    left:0; right:0;59    text-align:center;60    font-size:48px;61    font-weight:600;62    color:#111;63  }64  .app-bar .action {65    margin-left:auto;66    font-size:44px;67    color:#0a84ff;68    font-weight:600;69  }70  .nav-icon {71    width:64px; height:64px;72    display:flex; align-items:center; justify-content:center;73  }74 75  /* Form */76  .content {77    position:absolute;78    top:250px;79    left:0; right:0; bottom:120px;80    overflow:hidden;81  }82  .form {83    padding:0 32px;84    box-sizing:border-box;85  }86  .field {87    padding:28px 0 26px 0;88    border-bottom:1px solid #e6e6e6;89  }90  .field .label {91    color:#97A1AA;92    font-size:34px;93    margin-bottom:14px;94  }95  .field .value {96    font-size:48px;97    color:#1b1f23;98  }99 100  /* Gesture bar */101  .gesture {102    position:absolute;103    left:0; right:0; bottom:0;104    height:120px; background:#000;105    display:flex; align-items:center; justify-content:center;106  }107  .gesture .pill {108    width:240px; height:10px; background:#d9d9d9; border-radius:6px;109  }110</style>111</head>112<body>113<div id="render-target">114 115  <!-- Status Bar -->116  <div class="status-bar">117    <div class="status-left">5:59</div>118    <div class="status-right">119      <div class="dot"></div>120      <div class="dot" style="width:20px; height:20px;"></div>121      <svg width="28" height="28" viewBox="0 0 24 24" fill="#e9eef2"><path d="M12 2 2 7l10 5 10-5-10-5Zm0 7L2 14l10 5 10-5-10-5Z"/></svg>122      <div class="dot" style="opacity:.7;"></div>123      <svg width="32" height="32" viewBox="0 0 24 24" fill="#e9eef2"><path d="M3 12a9 9 0 0 1 18 0h-2a7 7 0 0 0-14 0H3Zm2 0a7 7 0 0 1 14 0h-2a5 5 0 0 0-10 0H5Z"/></svg>124      <div class="battery"><div class="level"></div></div>125    </div>126  </div>127 128  <!-- App Bar -->129  <div class="app-bar">130    <div class="nav-icon">131      <svg width="40" height="40" viewBox="0 0 24 24" stroke="#111" stroke-width="2.5" fill="none" stroke-linecap="round">132        <path d="M5 5l14 14M19 5L5 19"/>133      </svg>134    </div>135    <div class="title">Create a Trip</div>136    <div class="action">Save</div>137  </div>138 139  <!-- Content / Form -->140  <div class="content">141    <div class="form">142      <div class="field">143        <div class="label">Destination</div>144        <div class="value">Honolulu</div>145      </div>146 147      <div class="field">148        <div class="label">Trip name</div>149        <div class="value">Honolulu Trip</div>150      </div>151 152      <div class="field">153        <div class="label">Start date</div>154        <div class="value">Wed Jan 24, 2024</div>155      </div>156 157      <div class="field">158        <div class="label">End date</div>159        <div class="value">Fri Jan 26, 2024</div>160      </div>161    </div>162  </div>163 164  <!-- Gesture bar -->165  <div class="gesture">166    <div class="pill"></div>167  </div>168 169</div>170</body>171</html>