GD-ML/AndroidCode

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>Blue Sky Contact Form - Thank You</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12  }13  #render-target {14    width: 1080px;15    height: 2400px;16    position: relative;17    overflow: hidden;18    background: #ffffff;19    font-family: "Segoe UI", Arial, sans-serif;20    color: #1a1a1a;21  }22 23  /* Status bar */24  .status-bar {25    position: absolute;26    top: 0;27    left: 0;28    width: 100%;29    height: 120px;30    background: #0d1a54;31    color: #ffffff;32    display: flex;33    align-items: center;34    justify-content: space-between;35    box-sizing: border-box;36    padding: 0 40px;37  }38  .status-left,39  .status-right {40    display: flex;41    align-items: center;42    gap: 26px;43  }44  .status-time {45    font-size: 40px;46    font-weight: 700;47    letter-spacing: 0.5px;48  }49  .status-icon {50    display: inline-flex;51    align-items: center;52    justify-content: center;53  }54 55  /* App bar */56  .app-bar {57    position: absolute;58    top: 120px;59    left: 0;60    width: 100%;61    height: 160px;62    background: #0d1a54;63    display: flex;64    align-items: center;65    justify-content: center;66    color: #ffffff;67  }68  .app-title {69    font-size: 58px;70    font-weight: 800;71    letter-spacing: 0.2px;72  }73  .back-btn {74    position: absolute;75    left: 28px;76    width: 80px;77    height: 80px;78    display: flex;79    align-items: center;80    justify-content: center;81  }82 83  /* Content */84  .content {85    position: absolute;86    top: 280px; /* below status + app bars */87    left: 0;88    width: 100%;89    height: 2120px;90    background: #ffffff;91  }92  .message {93    position: absolute;94    top: 980px; /* place message in lower mid area */95    left: 0;96    width: 100%;97    text-align: center;98    color: #2f3443;99  }100  .message h1 {101    margin: 0;102    font-size: 96px;103    font-weight: 800;104  }105  .message p {106    margin: 36px 0 0 0;107    font-size: 48px;108    color: #4b515d;109  }110 111  /* Gesture bar */112  .gesture-bar {113    position: absolute;114    bottom: 0;115    left: 0;116    width: 100%;117    height: 120px;118    background: #000000;119    display: flex;120    align-items: center;121    justify-content: center;122  }123  .gesture-pill {124    width: 240px;125    height: 14px;126    background: #dcdcdc;127    border-radius: 7px;128  }129</style>130</head>131<body>132<div id="render-target">133 134  <!-- Status Bar -->135  <div class="status-bar">136    <div class="status-left">137      <div class="status-time">2:48</div>138 139      <!-- Simple circular indicators -->140      <span class="status-icon">141        <svg width="28" height="28">142          <circle cx="14" cy="14" r="10" fill="none" stroke="#ffffff" stroke-width="3"></circle>143        </svg>144      </span>145      <span class="status-icon">146        <svg width="28" height="28">147          <circle cx="14" cy="14" r="10" fill="#ffffff"></circle>148        </svg>149      </span>150      <span class="status-icon">151        <svg width="28" height="28" viewBox="0 0 32 32">152          <path d="M4 16 L12 24 L28 8" fill="none" stroke="#ffffff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path>153        </svg>154      </span>155      <span class="status-icon">156        <svg width="28" height="28">157          <circle cx="14" cy="14" r="4" fill="#ffffff"></circle>158        </svg>159      </span>160      <span class="status-icon">161        <svg width="10" height="10">162          <circle cx="5" cy="5" r="3" fill="#ffffff"></circle>163        </svg>164      </span>165    </div>166 167    <div class="status-right">168      <!-- Wi-Fi icon -->169      <span class="status-icon">170        <svg width="44" height="44" viewBox="0 0 44 44">171          <path d="M6 18 Q22 8 38 18" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round"></path>172          <path d="M10 24 Q22 16 34 24" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round"></path>173          <circle cx="22" cy="30" r="3" fill="#ffffff"></circle>174        </svg>175      </span>176      <!-- Battery icon -->177      <span class="status-icon">178        <svg width="54" height="28" viewBox="0 0 54 28">179          <rect x="2" y="4" width="44" height="20" rx="3" ry="3" fill="none" stroke="#ffffff" stroke-width="3"></rect>180          <rect x="6" y="8" width="36" height="12" fill="#ffffff"></rect>181          <rect x="48" y="10" width="4" height="8" fill="#ffffff"></rect>182        </svg>183      </span>184      <div style="font-size: 36px; font-weight: 700;">100%</div>185    </div>186  </div>187 188  <!-- App Bar -->189  <div class="app-bar">190    <div class="back-btn" aria-label="Back">191      <svg width="56" height="56" viewBox="0 0 56 56">192        <path d="M36 12 L20 28 L36 44" fill="none" stroke="#ffffff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"></path>193      </svg>194    </div>195    <div class="app-title">Blue Sky Contact Form</div>196  </div>197 198  <!-- Content -->199  <div class="content">200    <div class="message">201      <h1>Thank you!</h1>202      <p>Your submission has been received!</p>203    </div>204  </div>205 206  <!-- Gesture Bar -->207  <div class="gesture-bar">208    <div class="gesture-pill"></div>209  </div>210 211</div>212</body>213</html>