GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Toy Store UI</title>5<style>6 body { margin:0; padding:0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }7 #render-target {8 width:1080px; height:2400px;9 position:relative; overflow:hidden;10 background:#ffffff;11 }12 /* Top status bar */13 .status-bar {14 position:absolute; top:0; left:0; right:0;15 height:100px; background:#214c8f; color:#fff;16 display:flex; align-items:center; justify-content:space-between;17 padding:0 40px; box-sizing:border-box;18 }19 .status-right { display:flex; align-items:center; gap:28px; }20 .tab-strip {21 position:absolute; top:100px; left:0; right:0;22 height:130px; background:#ffffff; color:#333;23 display:flex; align-items:flex-end; gap:90px;24 padding:0 60px 18px 60px; box-sizing:border-box;25 font-size:56px; font-weight:600;26 border-bottom:1px solid #e5e5e5;27 }28 .active-tab { color:#133f86; position:relative; }29 .active-tab::after {30 content:""; position:absolute; left:0; bottom:-22px;31 width:120px; height:12px; background:#143e85; border-radius:6px;32 }33 /* helper links */34 .helper-links {35 position:absolute; top:230px; left:0; right:0;36 height:90px; display:flex; justify-content:space-between; align-items:center;37 padding:0 60px; box-sizing:border-box; color:#333;38 font-size:42px; font-weight:600;39 }40 .helper-links span { color:#2b4fa3; }41 /* main header */42 .main-title {43 position:absolute; top:340px; left:60px;44 font-size:76px; font-weight:700; color:#111;45 }46 /* cards */47 .cards {48 position:absolute; top:450px; left:0; right:0;49 padding:0 30px; box-sizing:border-box;50 }51 .card {52 height:270px; background:#f6dfe7; border-radius:18px;53 display:flex; align-items:center; justify-content:space-between;54 margin:26px 0;55 padding:0 40px; box-sizing:border-box;56 }57 .card .title {58 font-size:52px; font-weight:700; color:#111; width:520px;59 }60 .img-ph {61 width:360px; height:220px; background:#E0E0E0;62 border:1px solid #BDBDBD; border-radius:12px;63 display:flex; align-items:center; justify-content:center;64 color:#757575; font-size:30px; text-align:center; padding:8px; box-sizing:border-box;65 }66 /* bottom nav */67 .bottom-nav {68 position:absolute; bottom:0; left:0; right:0;69 height:190px; background:#1e4fa0; display:flex; align-items:center; justify-content:space-around;70 padding:0 40px; box-sizing:border-box;71 color:#fff;72 }73 .nav-icon { width:110px; height:110px; display:flex; align-items:center; justify-content:center; }74 .nav-icon svg { width:96px; height:96px; fill:none; stroke:#fff; stroke-width:8; }75 .gesture {76 position:absolute; bottom:20px; left:50%; transform:translateX(-50%);77 width:540px; height:12px; background:#e6e6e6; border-radius:6px;78 }79</style>80</head>81<body>82<div id="render-target">83 84 <!-- Status bar -->85 <div class="status-bar">86 <div style="font-size:42px; font-weight:700;">11:15</div>87 <div class="status-right">88 <!-- simple status icons -->89 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M3 16l9-9 9 9" stroke="#fff" stroke-width="2" fill="none"/></svg>90 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M2 8c4-4 16-4 20 0l-4 4c-3-3-9-3-12 0L2 8z" stroke="#fff" stroke-width="2" fill="none"/></svg>91 <svg width="40" height="40" viewBox="0 0 24 24"><rect x="6" y="4" width="12" height="16" rx="3" stroke="#fff" stroke-width="2" fill="none"/></svg>92 <svg width="40" height="40" viewBox="0 0 24 24"><circle cx="12" cy="3" r="2" fill="#fff"/><rect x="11" y="5" width="2" height="16" fill="#fff"/></svg>93 </div>94 </div>95 96 <!-- Tabs -->97 <div class="tab-strip">98 <div class="active-tab">Home</div>99 <div style="color:#777;">New toys</div>100 <div style="color:#777;">Best offers</div>101 </div>102 103 <!-- Helper links -->104 <div class="helper-links">105 <div><span>Use our gift finder!</span></div>106 <div><span>Find the nearest store!</span></div>107 </div>108 109 <!-- Main title -->110 <div class="main-title">Featured categories</div>111 112 <!-- Cards list -->113 <div class="cards">114 <div class="card">115 <div class="title">LEGO & building toys</div>116 <div class="img-ph">[IMG: LEGO Mario figure]</div>117 </div>118 119 <div class="card">120 <div class="title">Surprise toys & collectibles</div>121 <div class="img-ph">[IMG: LOL Surprise doll]</div>122 </div>123 124 <div class="card">125 <div class="title">Dolls & doll play</div>126 <div class="img-ph">[IMG: Dollhouse playset]</div>127 </div>128 129 <div class="card">130 <div class="title">Guns, blasters &<br>accessories</div>131 <div class="img-ph">[IMG: Nerf Fortnite blaster]</div>132 </div>133 134 <div class="card">135 <div class="title">Action figures & playsets</div>136 <div class="img-ph">[IMG: Baby Yoda figure]</div>137 </div>138 </div>139 140 <!-- Bottom navigation bar -->141 <div class="bottom-nav">142 <div class="nav-icon">143 <!-- Home icon -->144 <svg viewBox="0 0 24 24">145 <path d="M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1v-9z" />146 </svg>147 </div>148 <div class="nav-icon">149 <!-- Search icon -->150 <svg viewBox="0 0 24 24">151 <circle cx="10" cy="10" r="6"></circle>152 <path d="M16 16l6 6"></path>153 </svg>154 </div>155 <div class="nav-icon">156 <!-- Bag icon -->157 <svg viewBox="0 0 24 24">158 <path d="M5 8h14l-2 12H7L5 8z"></path>159 <path d="M8 8V6a4 4 0 0 1 8 0v2"></path>160 </svg>161 </div>162 <div class="nav-icon">163 <!-- Heart icon -->164 <svg viewBox="0 0 24 24">165 <path d="M12 21s-8-6-8-11a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 5-8 11-10 11z"></path>166 </svg>167 </div>168 <div class="nav-icon">169 <!-- User icon -->170 <svg viewBox="0 0 24 24">171 <circle cx="12" cy="8" r="4"></circle>172 <path d="M4 22c0-5 16-5 16 0"></path>173 </svg>174 </div>175 </div>176 177 <!-- Gesture indicator -->178 <div class="gesture"></div>179 180</div>181</body>182</html>