GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>New - Google Meet Style</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #121016;14 color: #E8E0FF;15 }16 17 /* Top system/status bar */18 .status-bar {19 height: 84px;20 padding: 0 36px;21 display: flex;22 align-items: center;23 justify-content: space-between;24 color: #cfc6ff;25 font-size: 34px;26 letter-spacing: 0.5px;27 opacity: 0.9;28 }29 .status-icons {30 display: flex;31 align-items: center;32 gap: 22px;33 }34 .dot { width: 10px; height: 10px; background: #cfc6ff; border-radius: 50%; opacity: 0.8; }35 36 /* App bar */37 .app-bar {38 height: 120px;39 display: flex;40 align-items: center;41 padding: 0 32px;42 background: #1B1821;43 box-shadow: 0 2px 0 rgba(255,255,255,0.04) inset;44 }45 .app-bar .title {46 font-size: 54px;47 margin-left: 24px;48 color: #D7C6FF;49 }50 .icon-btn {51 width: 72px;52 height: 72px;53 display: flex;54 align-items: center;55 justify-content: center;56 border-radius: 18px;57 color: #D7C6FF;58 }59 60 /* Search */61 .search-row {62 padding: 26px 32px 12px 32px;63 background: #1B1821;64 }65 .search-field {66 height: 112px;67 background: #241F2C;68 border-radius: 28px;69 padding: 0 28px;70 display: flex;71 align-items: center;72 justify-content: space-between;73 color: #BBA8F7;74 font-size: 38px;75 letter-spacing: 0.3px;76 border: 1px solid #2F2838;77 }78 .app-grid {79 width: 72px; height: 72px;80 display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;81 }82 .app-grid span {83 width: 16px; height: 16px; background: #BBA8F7; border-radius: 4px; opacity: 0.9;84 justify-self: center; align-self: center;85 }86 87 /* Quick actions */88 .section {89 padding: 8px 32px 0 32px;90 }91 .quick-item {92 display: flex;93 align-items: center;94 gap: 28px;95 padding: 34px 8px;96 border-bottom: 1px solid rgba(255,255,255,0.04);97 }98 .quick-item:last-child { border-bottom: none; }99 .quick-icon {100 width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;101 color: #C9B4FF;102 }103 .quick-text {104 font-size: 46px;105 color: #C9B4FF;106 letter-spacing: 0.2px;107 }108 109 /* Contacts section */110 .label {111 padding: 36px 32px 14px 32px;112 color: #9E90B6;113 font-size: 34px;114 }115 .contact {116 display: flex;117 align-items: center;118 justify-content: space-between;119 padding: 26px 32px;120 }121 .contact-info {122 display: flex; align-items: center; gap: 26px;123 }124 .avatar {125 width: 116px; height: 116px; border-radius: 58px;126 background: #2B2436; color: #BFA6FF; display: flex; align-items: center; justify-content: center;127 font-size: 56px; font-weight: 600;128 border: 1px solid #3D324C;129 }130 .name-block .name {131 font-size: 48px; color: #D7C6FF;132 }133 .name-block .phone {134 margin-top: 6px;135 font-size: 38px; color: #A99BC2;136 }137 .invite-btn {138 padding: 22px 54px;139 border-radius: 64px;140 border: 2px solid #7B69D9;141 color: #CDBAFF;142 background: rgba(123,105,217,0.12);143 font-size: 42px;144 }145 146 /* Helper: simple svg color */147 svg { width: 56px; height: 56px; }148</style>149</head>150<body>151<div id="render-target">152 153 <!-- Status Bar -->154 <div class="status-bar">155 <div>8:35</div>156 <div class="status-icons">157 <div class="dot"></div>158 <div class="dot"></div>159 <div class="dot"></div>160 <div class="dot"></div>161 <div class="dot" style="width:18px;height:18px;border-radius:4px;"></div>162 </div>163 </div>164 165 <!-- App Bar -->166 <div class="app-bar">167 <div class="icon-btn" aria-label="Back">168 <svg viewBox="0 0 24 24" fill="none" stroke="#D7C6FF" stroke-width="2">169 <path d="M5 5 L19 19"></path>170 <path d="M19 5 L5 19"></path>171 </svg>172 </div>173 <div class="title">New</div>174 </div>175 176 <!-- Search -->177 <div class="search-row">178 <div class="search-field">179 <div>Search contacts or dial</div>180 <div class="app-grid" aria-label="Apps grid">181 <span></span><span></span><span></span>182 <span></span><span></span><span></span>183 <span></span><span></span><span></span>184 </div>185 </div>186 </div>187 188 <!-- Quick Actions -->189 <div class="section">190 <div class="quick-item">191 <div class="quick-icon">192 <!-- Link icon -->193 <svg viewBox="0 0 24 24" stroke="#C9B4FF" fill="none" stroke-width="2">194 <path d="M10 13a5 5 0 0 1 0-7l1-1a5 5 0 0 1 7 7l-1 1"></path>195 <path d="M14 11a5 5 0 0 1 0 7l-1 1a5 5 0 0 1-7-7l1-1"></path>196 </svg>197 </div>198 <div class="quick-text">Create a new meeting</div>199 </div>200 201 <div class="quick-item">202 <div class="quick-icon">203 <!-- Calendar icon -->204 <svg viewBox="0 0 24 24" stroke="#C9B4FF" fill="none" stroke-width="2">205 <rect x="3" y="5" width="18" height="16" rx="2"></rect>206 <path d="M8 3v4M16 3v4M3 11h18"></path>207 </svg>208 </div>209 <div class="quick-text">Schedule in Google Calendar</div>210 </div>211 212 <div class="quick-item">213 <div class="quick-icon">214 <!-- Group/add icon -->215 <svg viewBox="0 0 24 24" stroke="#C9B4FF" fill="none" stroke-width="2">216 <circle cx="10" cy="8" r="3"></circle>217 <path d="M3 19c0-3 3-5 7-5s7 2 7 5"></path>218 <path d="M18 8v4M16 10h4"></path>219 </svg>220 </div>221 <div class="quick-text">Create group</div>222 </div>223 </div>224 225 <!-- Invite section label -->226 <div class="label">Invite to Meet calling</div>227 228 <!-- Contacts -->229 <div class="contact">230 <div class="contact-info">231 <div class="avatar">J</div>232 <div class="name-block">233 <div class="name">JJJ</div>234 <div class="phone">+91 99999 99999</div>235 </div>236 </div>237 <button class="invite-btn">Invite</button>238 </div>239 240 <div class="contact">241 <div class="contact-info">242 <div class="avatar">M</div>243 <div class="name-block">244 <div class="name">Monu</div>245 <div class="phone">+91 1234 567 890</div>246 </div>247 </div>248 <button class="invite-btn">Invite</button>249 </div>250 251</div>252</body>253</html>