GD-ML/AndroidCode
13.4k
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>Add Trip UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #1f2940; /* deep navy */15 color: #e8edf5;16 }17 18 /* Status bar */19 .statusbar {20 height: 120px;21 padding: 24px 36px 0 36px;22 box-sizing: border-box;23 color: #eaeff7;24 display: flex;25 align-items: flex-start;26 justify-content: space-between;27 font-size: 38px;28 letter-spacing: 1px;29 opacity: 0.95;30 }31 .status-left { display: flex; gap: 22px; align-items: center; }32 .status-right { display: flex; gap: 22px; align-items: center; }33 .icon {34 width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;35 }36 .icon svg { width: 40px; height: 40px; fill: #e8edf5; }37 38 /* App bar */39 .appbar {40 padding: 16px 36px 8px 36px;41 display: flex;42 align-items: center;43 justify-content: space-between;44 }45 .back-btn, .save-btn {46 width: 80px; height: 80px; display: inline-flex; align-items: center; justify-content: center;47 }48 .back-btn svg, .save-btn svg { width: 52px; height: 52px; fill: #e8edf5; opacity: 0.95; }49 50 .title {51 padding: 8px 36px 8px 36px;52 font-size: 88px;53 font-weight: 500;54 color: #e8edf5;55 }56 57 /* Form */58 .form {59 padding: 20px 36px 0 36px;60 }61 .label {62 font-size: 38px;63 color: #a6b1c7;64 margin: 32px 0 14px 0;65 }66 .field {67 position: relative;68 padding-right: 90px;69 }70 .text-input {71 width: 100%;72 background: transparent;73 border: none;74 outline: none;75 font-size: 56px;76 color: #ffffff;77 padding: 0 0 14px 0;78 }79 .underline {80 height: 2px;81 background: #3e4a62;82 width: 100%;83 }84 .underline.active { height: 4px; background: #2196f3; }85 86 .clear {87 position: absolute;88 right: 0;89 top: 8px;90 width: 64px; height: 64px;91 display: flex; align-items: center; justify-content: center;92 opacity: 0.55;93 }94 .clear svg { width: 44px; height: 44px; fill: #c3c8d4; }95 96 .row-field {97 position: relative;98 padding-right: 90px;99 padding-bottom: 22px;100 }101 .row-value {102 font-size: 54px;103 color: #ffffff;104 font-weight: 700;105 margin-bottom: 14px;106 }107 .row-placeholder {108 font-size: 52px;109 color: #9aa5b8;110 margin-bottom: 14px;111 }112 113 /* Bottom gesture area */114 .gesture-area {115 position: absolute;116 left: 0; right: 0; bottom: 0;117 height: 140px;118 background: #000;119 display: flex; align-items: center; justify-content: center;120 }121 .gesture-handle {122 width: 220px; height: 12px; background: #e7e7e7; border-radius: 12px;123 opacity: 0.9;124 }125</style>126</head>127<body>128<div id="render-target">129 130 <!-- Status bar -->131 <div class="statusbar">132 <div class="status-left">133 <div>11:40</div>134 <div class="icon" title="notify"><svg viewBox="0 0 24 24"><path d="M12 2a6 6 0 0 0-6 6v4l-2 2v2h16v-2l-2-2V8a6 6 0 0 0-6-6zM8 20a4 4 0 0 0 8 0h-2a2 2 0 0 1-4 0H8z"/></svg></div>135 <div class="icon" title="mail"><svg viewBox="0 0 24 24"><path d="M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z"/></svg></div>136 </div>137 <div class="status-right">138 <div class="icon" title="wifi"><svg viewBox="0 0 24 24"><path d="M12 18c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-8-6 2 2c3.3-3.3 8.7-3.3 12 0l2-2c-4.4-4.4-11.6-4.4-16 0zm4-4 2 2c2.2-2.2 5.8-2.2 8 0l2-2c-3.3-3.3-8.7-3.3-12 0z"/></svg></div>139 <div class="icon" title="battery"><svg viewBox="0 0 24 24"><path d="M16 7V5h-2V3H10v2H8v2H4v12h16V7h-4z"/></svg></div>140 </div>141 </div>142 143 <!-- App Bar with back and save -->144 <div class="appbar">145 <div class="back-btn" aria-label="Back">146 <svg viewBox="0 0 24 24"><path d="M15.5 5 7.5 12l8 7 1.5-1.8-5.7-5.2 5.7-5.2L15.5 5z"/></svg>147 </div>148 <div class="save-btn" aria-label="Save">149 <svg viewBox="0 0 24 24"><path d="M17 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V7l-4-4zM7 5h8v4H7V5zm5 12a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"/></svg>150 </div>151 </div>152 153 <div class="title">Add Trip</div>154 155 <!-- Form fields -->156 <div class="form">157 158 <!-- Destination -->159 <div class="label">Destination</div>160 <div class="field">161 <input class="text-input" value="Montreal's Cruise" />162 <div class="clear" aria-hidden="true">163 <svg viewBox="0 0 24 24"><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.3 10.6 10.6 16.9 4.3z"/></svg>164 </div>165 <div class="underline active"></div>166 </div>167 168 <!-- Start Date -->169 <div class="label">Start Date</div>170 <div class="row-field">171 <div class="row-value">Nov 2, 2023</div>172 <div class="clear" aria-hidden="true">173 <svg viewBox="0 0 24 24"><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.3 10.6 10.6 16.9 4.3z"/></svg>174 </div>175 <div class="underline"></div>176 </div>177 178 <!-- End Date -->179 <div class="label">End Date</div>180 <div class="row-field">181 <div class="row-placeholder"> </div>182 <div class="clear" aria-hidden="true">183 <svg viewBox="0 0 24 24"><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.3 10.6 10.6 16.9 4.3z"/></svg>184 </div>185 <div class="underline"></div>186 </div>187 188 <!-- Trip Name -->189 <div class="label">Trip Name</div>190 <div class="row-field">191 <div class="row-placeholder"></div>192 <div class="underline"></div>193 </div>194 195 <!-- Description -->196 <div class="label">Description</div>197 <div class="row-field">198 <div class="row-placeholder"></div>199 <div class="underline"></div>200 </div>201 202 </div>203 204 <!-- Gesture area -->205 <div class="gesture-area">206 <div class="gesture-handle"></div>207 </div>208 209</div>210</body>211</html>