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>Add Trip - Saving</title>7<style>8  body { margin:0; padding:0; background:transparent; font-family: Roboto, Arial, Helvetica, sans-serif; }9  #render-target {10    width:1080px; height:2400px; position:relative; overflow:hidden;11    background:#141823; color:#E7EAF0;12  }13 14  /* Status bar */15  .status-bar {16    position:absolute; top:0; left:0; right:0; height:100px;17    color:#E7EAF0; font-weight:500; font-size:40px;18    display:flex; align-items:center; padding:0 36px; box-sizing:border-box;19  }20  .status-left { flex:1; opacity:0.9; }21  .status-right { display:flex; gap:22px; align-items:center; opacity:0.9; }22 23  /* Header */24  .header {25    position:absolute; top:110px; left:0; right:0; padding:0 48px 24px 48px; box-sizing:border-box;26  }27  .back {28    width:88px; height:88px; display:flex; align-items:center; justify-content:center;29    opacity:0.9;30  }31  .title {32    margin-top:12px; font-size:96px; line-height:1.05; letter-spacing:0.5px; color:#b9bfcb;33  }34 35  /* Floating save icon on right */36  .float-save {37    position:absolute; right:48px; top:360px; width:64px; height:64px; border-radius:10px;38    background:#3A3F49; display:flex; align-items:center; justify-content:center; opacity:0.8;39  }40 41  /* Form area */42  .form {43    position:absolute; top:420px; left:0; right:0; padding:0 48px; box-sizing:border-box;44  }45  .field {46    position:relative; padding:34px 0 36px 0; border-bottom:1px solid #2a2f3b;47  }48  .label {49    font-size:34px; color:#9ea5b3; margin-bottom:10px;50  }51  .value {52    font-size:54px; font-weight:800; color:#f0f2f7;53  }54  .placeholder {55    font-size:48px; color:#737B88;56  }57  .clear-icon {58    position:absolute; right:6px; top:50%; transform:translateY(-10%);59    width:56px; height:56px; opacity:0.28;60  }61 62  /* Saving dialog */63  .overlay {64    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;65    background:rgba(0,0,0,0.12);66  }67  .dialog {68    width:900px; max-width:90%; height:210px; background:#444444; color:#FFFFFF;69    border-radius:14px; box-shadow:0 14px 30px rgba(0,0,0,0.45);70    display:flex; align-items:center; padding:0 48px; gap:38px;71  }72  .spinner {73    width:90px; height:90px; border-radius:50%;74    border:10px solid rgba(255,255,255,0.12);75    border-top-color:#1E88E5;76    animation:spin 1.1s linear infinite;77  }78  @keyframes spin { to { transform:rotate(360deg);} }79  .dialog-text { font-size:56px; font-weight:600; letter-spacing:0.3px; }80 81  /* Bottom gesture bar */82  .gesture-bar {83    position:absolute; left:0; right:0; bottom:0; height:110px; background:#000000;84    display:flex; align-items:center; justify-content:center;85  }86  .gesture-pill {87    width:240px; height:12px; background:#EAEAEA; border-radius:8px; opacity:0.9;88  }89</style>90</head>91<body>92<div id="render-target">93 94  <!-- Status bar -->95  <div class="status-bar">96    <div class="status-left">11:42</div>97    <div class="status-right">98      <!-- simple signal icon -->99      <svg width="40" height="40" viewBox="0 0 24 24" fill="#E7EAF0"><path d="M2 20h2v-2H2v2zm4 0h2v-6H6v6zm4 0h2v-10h-2v10zm4 0h2V6h-2v14zm4 0h2V2h-2v18z"/></svg>100      <!-- wifi -->101      <svg width="40" height="40" viewBox="0 0 24 24" fill="#E7EAF0"><path d="M12 18.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm-6-5 1.4 1.4a8 8 0 0 1 9.2 0L18 13.5a9.9 9.9 0 0 0-12 0zM3 8.8l1.6 1.2a13 13 0 0 1 14.8 0L21 8.8a15.7 15.7 0 0 0-18 0z"/></svg>102      <!-- battery -->103      <svg width="52" height="40" viewBox="0 0 28 16" fill="none" stroke="#E7EAF0" stroke-width="2">104        <rect x="1" y="3" width="22" height="10" rx="2"></rect>105        <rect x="3" y="5" width="18" height="6" fill="#E7EAF0"></rect>106        <rect x="23" y="6" width="3" height="4" fill="#E7EAF0" stroke="none"></rect>107      </svg>108    </div>109  </div>110 111  <!-- Header with back and title -->112  <div class="header">113    <div class="back">114      <svg width="72" height="72" viewBox="0 0 24 24" fill="#D9DCE3">115        <path d="M15.5 19 8.5 12l7-7 1.5 1.5L11.5 12l5.5 5.5z"/>116      </svg>117    </div>118    <div class="title">Add Trip</div>119  </div>120 121  <!-- Floating save icon -->122  <div class="float-save" aria-label="Save">123    <svg width="36" height="36" viewBox="0 0 24 24" fill="#C7CBD5">124      <path d="M17 3H5c-1.1 0-2 .9-2 2v14l4-4h10c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM7 7h8v2H7z"/>125    </svg>126  </div>127 128  <!-- Form fields -->129  <div class="form">130    <div class="field">131      <div class="label">Destination</div>132      <div class="value">Montreal's Cruise</div>133    </div>134 135    <div class="field">136      <div class="label">Start Date</div>137      <div class="value">Nov 2, 2023</div>138      <svg class="clear-icon" viewBox="0 0 24 24" fill="#D9DCE3">139        <path d="M18.3 5.7 12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3l6.3 6.3 6.3-6.3z"/>140      </svg>141    </div>142 143    <div class="field">144      <div class="label">End Date</div>145      <div class="value">Nov 3, 2023</div>146      <svg class="clear-icon" viewBox="0 0 24 24" fill="#D9DCE3">147        <path d="M18.3 5.7 12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3l6.3 6.3 6.3-6.3z"/>148      </svg>149    </div>150 151    <div class="field">152      <div class="label">Trip Name</div>153      <div class="placeholder"> </div>154    </div>155 156    <div class="field">157      <div class="label">Description</div>158      <div class="placeholder"> </div>159    </div>160  </div>161 162  <!-- Saving dialog overlay -->163  <div class="overlay">164    <div class="dialog">165      <div class="spinner"></div>166      <div class="dialog-text">Saving...</div>167    </div>168  </div>169 170  <!-- Bottom gesture area -->171  <div class="gesture-bar">172    <div class="gesture-pill"></div>173  </div>174 175</div>176</body>177</html>