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, height=2400, initial-scale=1.0">6<title>Modal List UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: radial-gradient(1200px 1200px at 540px 1200px, #0f1830 0%, #0b1326 55%, #0a0f1e 100%);13 border-radius: 36px; box-shadow: 0 20px 60px rgba(0,0,0,0.65);14 }15 16 /* Status bar */17 .status-bar {18 position: absolute; top: 0; left: 0; width: 100%; height: 120px;19 background: #0a0a0a; color: #e8e8e8;20 display: flex; align-items: center; justify-content: space-between;21 padding: 0 40px; box-sizing: border-box;22 }23 .status-left { display: flex; align-items: center; gap: 22px; }24 .status-time { font-size: 42px; font-weight: 600; letter-spacing: 0.5px; }25 .status-icon { width: 36px; height: 36px; opacity: 0.85; }26 .status-right { display: flex; align-items: center; gap: 24px; }27 .degree { font-size: 32px; color: #cfcfcf; opacity: 0.9; }28 29 /* Simple icons */30 .wifi svg, .cell svg, .air svg { width: 36px; height: 36px; }31 .battery svg { width: 56px; height: 32px; }32 33 /* Modal sheet */34 .sheet {35 position: absolute;36 left: 40px; right: 40px;37 top: 180px; bottom: 140px;38 background: #151716;39 border: 1px solid #262826;40 border-radius: 32px;41 box-shadow: 0 24px 80px rgba(0,0,0,0.65);42 overflow: hidden;43 }44 .list {45 position: absolute; inset: 0;46 display: flex; flex-direction: column;47 }48 .item {49 display: flex; align-items: center; justify-content: space-between;50 padding: 40px 44px;51 color: #f1f1f1;52 font-size: 54px; line-height: 1.1; font-weight: 500;53 border-bottom: 1px solid #232623;54 }55 .item:last-child { border-bottom: none; }56 .radio {57 width: 56px; height: 56px;58 border-radius: 50%;59 border: 3px solid #cdd4c9;60 display: grid; place-items: center;61 background: transparent;62 box-sizing: border-box;63 opacity: 0.9;64 }65 .radio .dot {66 width: 28px; height: 28px; border-radius: 50%;67 background: transparent;68 }69 .radio.selected { border-color: #b7efc1; box-shadow: 0 0 0 4px rgba(132, 247, 167, 0.12) inset; }70 .radio.selected .dot { background: #7cf28b; }71 /* Subtle separators closer to original look */72 .item:nth-child(odd) { background: rgba(255,255,255,0.01); }73 74 /* Gesture bar */75 .gesture {76 position: absolute; bottom: 36px; left: 50%;77 transform: translateX(-50%);78 width: 300px; height: 14px;79 background: #e9e9e9;80 border-radius: 7px;81 opacity: 0.9;82 }83</style>84</head>85<body>86<div id="render-target">87 88 <!-- Status Bar -->89 <div class="status-bar">90 <div class="status-left">91 <div class="status-time">8:29</div>92 <div class="degree">35°</div>93 <div class="wifi status-icon">94 <svg viewBox="0 0 24 24" fill="none">95 <path d="M2 8c5-4 15-4 20 0" stroke="#e8e8e8" stroke-width="2" stroke-linecap="round"/>96 <path d="M5 11c4-3 10-3 14 0" stroke="#e8e8e8" stroke-width="2" stroke-linecap="round"/>97 <path d="M9 14c2-2 4-2 6 0" stroke="#e8e8e8" stroke-width="2" stroke-linecap="round"/>98 <circle cx="12" cy="18" r="1.6" fill="#e8e8e8"/>99 </svg>100 </div>101 <div class="cell status-icon">102 <svg viewBox="0 0 24 24" fill="none">103 <rect x="3" y="13" width="3" height="8" fill="#e8e8e8"/>104 <rect x="9" y="10" width="3" height="11" fill="#e8e8e8"/>105 <rect x="15" y="7" width="3" height="14" fill="#e8e8e8"/>106 <rect x="21" y="4" width="3" height="17" fill="#e8e8e8"/>107 </svg>108 </div>109 <div class="air status-icon">110 <svg viewBox="0 0 24 24" fill="none">111 <path d="M3 7h12" stroke="#e8e8e8" stroke-width="2" stroke-linecap="round"/>112 <path d="M3 12h18" stroke="#e8e8e8" stroke-width="2" stroke-linecap="round"/>113 <path d="M3 17h9" stroke="#e8e8e8" stroke-width="2" stroke-linecap="round"/>114 </svg>115 </div>116 </div>117 <div class="status-right">118 <div class="battery status-icon">119 <svg viewBox="0 0 52 24" fill="none">120 <rect x="1" y="2" width="44" height="20" rx="4" stroke="#e8e8e8" stroke-width="2"/>121 <rect x="47" y="8" width="4" height="8" rx="2" fill="#e8e8e8"/>122 <rect x="5" y="6" width="26" height="12" rx="2" fill="#e8e8e8"/>123 </svg>124 </div>125 </div>126 </div>127 128 <!-- Modal Sheet with List -->129 <div class="sheet">130 <div class="list">131 <div class="item">132 <span>JSON</span>133 <span class="radio selected"><span class="dot"></span></span>134 </div>135 <div class="item">136 <span>Java</span>137 <span class="radio"><span class="dot"></span></span>138 </div>139 <div class="item">140 <span>JavaScript</span>141 <span class="radio"><span class="dot"></span></span>142 </div>143 <div class="item">144 <span>Less</span>145 <span class="radio"><span class="dot"></span></span>146 </div>147 <div class="item">148 <span>Markdown</span>149 <span class="radio"><span class="dot"></span></span>150 </div>151 <div class="item">152 <span>PHP</span>153 <span class="radio"><span class="dot"></span></span>154 </div>155 <div class="item">156 <span>Pug</span>157 <span class="radio"><span class="dot"></span></span>158 </div>159 <div class="item">160 <span>Python</span>161 <span class="radio"><span class="dot"></span></span>162 </div>163 <div class="item">164 <span>Ruby</span>165 <span class="radio"><span class="dot"></span></span>166 </div>167 <div class="item">168 <span>SCSS</span>169 <span class="radio"><span class="dot"></span></span>170 </div>171 <div class="item">172 <span>SH</span>173 <span class="radio"><span class="dot"></span></span>174 </div>175 <div class="item">176 <span>TSX</span>177 <span class="radio"><span class="dot"></span></span>178 </div>179 </div>180 </div>181 182 <!-- Gesture pill -->183 <div class="gesture"></div>184</div>185</body>186</html>