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>Help & Contact Screen</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Roboto, Arial, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #FFFFFF;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 100%;22 height: 120px;23 padding: 30px 40px;24 display: flex;25 align-items: center;26 justify-content: space-between;27 color: #333;28 box-sizing: border-box;29 font-weight: 600;30 }31 .sb-left, .sb-right {32 display: flex;33 align-items: center;34 gap: 22px;35 }36 .sb-time {37 font-size: 44px;38 letter-spacing: 0.5px;39 }40 .sb-icon {41 width: 36px;42 height: 36px;43 }44 45 /* Header with close and title */46 .header {47 position: absolute;48 top: 160px;49 left: 40px;50 right: 40px;51 display: flex;52 align-items: center;53 gap: 28px;54 }55 .close-btn {56 width: 112px;57 height: 112px;58 border-radius: 56px;59 background: #F5F6F7;60 display: flex;61 align-items: center;62 justify-content: center;63 }64 .title {65 font-size: 64px;66 font-weight: 800;67 color: #111;68 letter-spacing: 0.2px;69 }70 71 /* Spinner */72 .spinner {73 position: absolute;74 top: 1200px;75 left: 480px; /* centered: (1080 - 120)/2 */76 width: 120px;77 height: 120px;78 border-radius: 50%;79 border: 16px solid #3366FF;80 border-left-color: transparent;81 animation: spin 1.2s linear infinite;82 }83 @keyframes spin {84 to { transform: rotate(360deg); }85 }86 87 /* Home indicator */88 .home-indicator {89 position: absolute;90 bottom: 60px;91 left: 50%;92 transform: translateX(-50%);93 width: 500px;94 height: 14px;95 background: #8E8E8E;96 border-radius: 8px;97 opacity: 0.7;98 }99</style>100</head>101<body>102<div id="render-target">103 <!-- Status Bar -->104 <div class="status-bar">105 <div class="sb-left">106 <div class="sb-time">10:48</div>107 <!-- small status icon (sun/brightness style) -->108 <svg class="sb-icon" viewBox="0 0 24 24">109 <circle cx="12" cy="12" r="4" fill="#666"/>110 <g stroke="#666" stroke-width="2" stroke-linecap="round">111 <line x1="12" y1="1.5" x2="12" y2="5.5"/>112 <line x1="12" y1="18.5" x2="12" y2="22.5"/>113 <line x1="1.5" y1="12" x2="5.5" y2="12"/>114 <line x1="18.5" y1="12" x2="22.5" y2="12"/>115 <line x1="4.2" y1="4.2" x2="6.8" y2="6.8"/>116 <line x1="17.2" y1="17.2" x2="19.8" y2="19.8"/>117 <line x1="17.2" y1="6.8" x2="19.8" y2="4.2"/>118 <line x1="4.2" y1="19.8" x2="6.8" y2="17.2"/>119 </g>120 </svg>121 </div>122 <div class="sb-right">123 <!-- WiFi icon -->124 <svg class="sb-icon" viewBox="0 0 24 24">125 <path d="M2 9c5.5-5.5 14.5-5.5 20 0" fill="none" stroke="#555" stroke-width="2" stroke-linecap="round"/>126 <path d="M5 12c3.8-3.8 10.2-3.8 14 0" fill="none" stroke="#555" stroke-width="2" stroke-linecap="round"/>127 <path d="M8 15c2.2-2.2 5.8-2.2 8 0" fill="none" stroke="#555" stroke-width="2" stroke-linecap="round"/>128 <circle cx="12" cy="18" r="1.8" fill="#555"/>129 </svg>130 <!-- Battery icon -->131 <svg class="sb-icon" viewBox="0 0 28 24">132 <rect x="2" y="6" width="20" height="12" rx="2" ry="2" fill="none" stroke="#555" stroke-width="2"/>133 <rect x="4" y="8" width="16" height="8" fill="#555"/>134 <rect x="22.5" y="9" width="3" height="6" rx="1" ry="1" fill="#555"/>135 </svg>136 </div>137 </div>138 139 <!-- Header -->140 <div class="header">141 <div class="close-btn">142 <svg width="44" height="44" viewBox="0 0 24 24">143 <g stroke="#222" stroke-width="2.6" stroke-linecap="round">144 <line x1="5" y1="5" x2="19" y2="19"/>145 <line x1="19" y1="5" x2="5" y2="19"/>146 </g>147 </svg>148 </div>149 <div class="title">Help & Contact</div>150 </div>151 152 <!-- Loading Spinner -->153 <div class="spinner"></div>154 155 <!-- Home Indicator -->156 <div class="home-indicator"></div>157</div>158</body>159</html>