GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI Mock</title>5<style>6 body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }7 #render-target {8 width:1080px; height:2400px; position:relative; overflow:hidden;9 background:#F7F7F7; border-radius:48px; box-shadow:0 10px 24px rgba(0,0,0,0.18);10 color:#222;11 }12 .status {13 height:120px; padding:28px 40px; display:flex; align-items:center; justify-content:space-between;14 font-weight:600; font-size:44px; color:#2b2b2b;15 }16 .status .left, .status .right { display:flex; align-items:center; gap:22px; }17 .icon { width:48px; height:48px; }18 .header {19 padding:12px 40px 24px 40px; position:relative;20 }21 .close-btn {22 width:96px; height:96px; border-radius:48px; background:#FFFFFF; box-shadow:0 2px 6px rgba(0,0,0,0.08);23 display:flex; align-items:center; justify-content:center; position:absolute; left:40px; top:0;24 }25 .close-btn span { font-size:44px; color:#333; line-height:1; }26 .tabs {27 display:flex; gap:60px; justify-content:center; align-items:flex-end; padding-top:12px; margin-top:8px;28 }29 .tab { font-size:56px; color:#666; padding-bottom:12px; }30 .tab.active { color:#111; border-bottom:6px solid #111; }31 .search {32 margin:28px 40px 18px 40px; background:#fff; border-radius:36px; border:1px solid #e5e5e5;33 height:140px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; font-size:46px;34 }35 .search .label { color:#777; }36 .search .value { color:#333; font-weight:600; }37 .card {38 margin:24px 24px; background:#fff; border-radius:40px; box-shadow:0 2px 8px rgba(0,0,0,0.06);39 padding:54px 40px 40px 40px;40 }41 .card h1 {42 font-size:72px; margin:0 0 40px 0; font-weight:800; letter-spacing:0.2px;43 }44 .segments {45 display:flex; gap:22px; margin-bottom:36px;46 }47 .segment {48 background:#efefef; color:#555; border-radius:60px; height:110px; padding:0 38px;49 display:flex; align-items:center; font-size:46px; font-weight:600;50 }51 .segment.active { background:#fff; color:#111; border:1px solid #ddd; }52 .dow {53 display:grid; grid-template-columns: repeat(7, 1fr); gap:0; padding:0 8px; border-bottom:1px solid #eee; padding-bottom:16px;54 color:#777; font-size:36px; text-align:center;55 }56 .month-title {57 font-size:52px; font-weight:700; color:#222; margin:36px 8px 18px 8px;58 }59 .calendar {60 display:grid; grid-template-columns: repeat(7, 1fr); gap:26px; padding:0 8px; margin-bottom:24px;61 }62 .day {63 height:90px; display:flex; align-items:center; justify-content:center; font-size:46px; color:#222;64 }65 .day.muted { color:#c7c7c7; }66 .day.bold { font-weight:700; color:#111; }67 .options {68 display:flex; gap:26px; margin-top:34px; flex-wrap:wrap;69 }70 .pill {71 height:110px; padding:0 40px; border-radius:60px; border:1px solid #ddd; background:#fff;72 display:flex; align-items:center; font-size:44px; color:#333; font-weight:600;73 }74 .pill.active { background:#111; color:#fff; border-color:#111; }75 .footer {76 position:absolute; left:0; right:0; bottom:0; padding:28px 40px 40px 40px;77 display:flex; justify-content:space-between; align-items:center;78 }79 .skip { font-size:52px; color:#111; text-decoration:underline; }80 .next-btn {81 background:#111; color:#fff; border-radius:32px; height:120px; padding:0 60px; font-size:52px; font-weight:700;82 display:flex; align-items:center; justify-content:center; box-shadow:0 6px 14px rgba(0,0,0,0.15);83 }84</style>85</head>86<body>87<div id="render-target">88 89 <!-- Status Bar -->90 <div class="status">91 <div class="left">92 <div>12:47</div>93 <!-- Calendar icon -->94 <svg class="icon" viewBox="0 0 24 24">95 <rect x="3" y="5" width="18" height="16" fill="none" stroke="#333" stroke-width="2"/>96 <line x1="3" y1="9" x2="21" y2="9" stroke="#333" stroke-width="2"/>97 <line x1="7" y1="3" x2="7" y2="7" stroke="#333" stroke-width="2"/>98 <line x1="17" y1="3" x2="17" y2="7" stroke="#333" stroke-width="2"/>99 </svg>100 <!-- Cloud icon -->101 <svg class="icon" viewBox="0 0 24 24">102 <path d="M6 15a5 5 0 1 0 2-9 6 6 0 0 0-5 5" fill="none" stroke="#333" stroke-width="2"/>103 <path d="M4 15h12a4 4 0 0 0 0-8c-1.5 0-2.7.6-3.5 1.5" fill="none" stroke="#333" stroke-width="2"/>104 </svg>105 </div>106 <div class="right">107 <!-- WiFi icon -->108 <svg class="icon" viewBox="0 0 24 24">109 <path d="M2 8c5-5 15-5 20 0" fill="none" stroke="#333" stroke-width="2"/>110 <path d="M5 11c3.5-3.5 10.5-3.5 14 0" fill="none" stroke="#333" stroke-width="2"/>111 <path d="M8 14c2-2 6-2 8 0" fill="none" stroke="#333" stroke-width="2"/>112 <circle cx="12" cy="18" r="2" fill="#333"/>113 </svg>114 <!-- Battery icon -->115 <svg class="icon" viewBox="0 0 28 24">116 <rect x="2" y="6" width="20" height="12" rx="2" fill="none" stroke="#333" stroke-width="2"/>117 <rect x="22" y="10" width="4" height="4" rx="1" fill="#333"/>118 <rect x="4" y="8" width="12" height="8" fill="#333"/>119 </svg>120 </div>121 </div>122 123 <!-- Header with tabs and close -->124 <div class="header">125 <div class="close-btn"><span>×</span></div>126 <div class="tabs">127 <div class="tab active">Stays</div>128 <div class="tab">Experiences</div>129 </div>130 </div>131 132 <!-- Search input -->133 <div class="search">134 <div class="label">Where</div>135 <div class="value">Newark</div>136 </div>137 138 <!-- Card -->139 <div class="card">140 <h1>When's your trip?</h1>141 142 <div class="segments">143 <div class="segment active">Dates</div>144 <div class="segment">Months</div>145 <div class="segment">Flexible</div>146 </div>147 148 <div class="dow">149 <div>Sun</div><div>Mon</div><div>Tue</div><div>Wed</div><div>Thu</div><div>Fri</div><div>Sat</div>150 </div>151 152 <div class="month-title">June 2023</div>153 <div class="calendar">154 <div class="day muted">12</div>155 <div class="day muted">13</div>156 <div class="day muted">14</div>157 <div class="day muted">15</div>158 <div class="day muted">16</div>159 <div class="day muted">17</div>160 <div class="day muted"></div>161 162 <div class="day">18</div>163 <div class="day bold">19</div>164 <div class="day bold">20</div>165 <div class="day bold">21</div>166 <div class="day bold">22</div>167 <div class="day bold">23</div>168 <div class="day bold">24</div>169 170 <div class="day bold">25</div>171 <div class="day bold">26</div>172 <div class="day bold">27</div>173 <div class="day bold">28</div>174 <div class="day bold">29</div>175 <div class="day bold">30</div>176 <div class="day"></div>177 </div>178 179 <div class="month-title">July 2023</div>180 181 <div class="options">182 <div class="pill active">Exact dates</div>183 <div class="pill">+ 1 day</div>184 <div class="pill">+ 2 days</div>185 <div class="pill">+ 3 days</div>186 </div>187 </div>188 189 <!-- Footer -->190 <div class="footer">191 <div class="skip">Skip</div>192 <div class="next-btn">Next</div>193 </div>194 195</div>196</body>197</html>