1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>ç åé¨ - åå·å¤§å¦é£æ¬ä¿±ä¹é¨</title> 7 <link rel="stylesheet" href="css/style.css"> 8 <link rel="shortcut icon" href="../../favicon.ico"> 9 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" /> 10 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&display=swap"> 11 <style> 12 /* æ°å¢æ ·å¼ï¼ç¾åè¿åæé® */ 13 .back-home-btn { 14 display: inline-flex; 15 align-items: center; 16 gap: 8px; 17 text-decoration: none; 18 color: #202124; 19 font-family: 'Inter', sans-serif; 20 font-size: 16px; 21 padding: 8px 12px; 22 border-radius: 4px; 23 transition: background-color 0.2s ease; 24 } 25 .back-home-btn:hover { 26 background-color: #f1f3f4; 27 } 28 .back-home-btn .material-symbols-outlined { 29 font-size: 20px; 30 } 31 </style> 32</head> 33<body> 34<div class="header-wrapper"> 35 <header> 36 <!-- æ¿æ¢åæSVG Logo为è¿åé¦é¡µæé® --> 37 <a href="../../index.html" class="back-home-btn"> 38 <span class="material-symbols-outlined">arrow_back</span> 39 <span>è¿åé¦é¡µ</span> 40 </a> 41 42 <!-- Small Screen: Toggle --> 43 <input class="menu-checkbox" type="checkbox" id="menu-checkbox" /> 44 <label class="menu-button" for="menu-checkbox"> 45 <span class="material-symbols-outlined not-sr-only" data-show-when="closed">dehaze</span> 46 <span class="material-symbols-outlined not-sr-only" data-show-when="open">close</span> 47 <span class="sr-only">Toggle Menu</span> 48 </label> 49 </header> 50</div> 51 52<section id="welcome" class="center"> 53 <h1> 54 <span class="sr-only">ç åé¨ - åå·å¤§å¦é£æ¬ä¿±ä¹é¨</span> 55 <!-- ä¿®æ£ï¼æ·»å images/åç¼ï¼æåæ£ç¡®çå¾çè·¯å¾ --> 56 <picture><source srcset="images/logo512.webp" type="image/webp"><img src="images/logo512.png" alt="ç åé¨ - åå·å¤§å¦é£æ¬ä¿±ä¹é¨" style=" 57 width: 180px; /* æ ¸å¿ï¼è®¾ç½®logo宽度ï¼é«åº¦èªå¨éé */ 58 height: auto; /* ä¿æå¾çæ¯ä¾ */ 59 display: block; /* å± ä¸æ¾ç¤º */ 60 margin: 0 auto; /* æ°´å¹³å± ä¸ */ 61 object-fit: contain; /* é²æ¢å¾çåå½¢ */ 62 "></picture> 63 </h1> 64 <p>é£æ¬ä¿±ä¹é¨ç åé¨ <span>æå¾ ä½ çå å ¥</span></p> 65</section> 66 67<section id="product"> 68 69 <div class="icons"> 70 <div class="icon"><span class="material-symbols-outlined">keyboard_return</span></div> 71 <div class="icon"><span class="material-symbols-outlined">keyboard_tab</span></div> 72 <div class="icon"><span class="material-symbols-outlined">merge</span></div> 73 <div class="icon"><span class="material-symbols-outlined">folder</span></div> 74 <div class="icon"><span class="material-symbols-outlined">deployed_code</span></div> 75 <div class="icon"><span class="material-symbols-outlined">dashboard_customize</span></div> 76 <div class="icon"><span class="material-symbols-outlined">commit</span></div> 77 <div class="icon"><span class="material-symbols-outlined">chat_add_on</span></div> 78 <div class="icon"><span class="material-symbols-outlined">device_hub</span></div> 79 <div class="icon"><span class="material-symbols-outlined">refresh</span></div> 80 <div class="icon"><span class="material-symbols-outlined">code</span></div> 81 <div class="icon"><span class="material-symbols-outlined">file_copy</span></div> 82 <div class="icon"><span class="material-symbols-outlined">code_blocks</span></div> 83 <div class="icon"><span class="material-symbols-outlined">
83keyboard_command_key</span></div> 84 <div class="icon"><span class="material-symbols-outlined">upload</span></div> 85 <div class="icon"><span class="material-symbols-outlined">terminal</span></div> 86 <div class="icon"><span class="material-symbols-outlined">swap_horiz</span></div> 87 <div class="icon"><span class="material-symbols-outlined">last_page</span></div> 88 <div class="icon"><span class="material-symbols-outlined">apps_outage</span></div> 89 <div class="icon"><span class="material-symbols-outlined">keyboard_option_key</span></div> 90 <div class="icon"><span class="material-symbols-outlined">recenter</span></div> 91 <div class="icon"><span class="material-symbols-outlined">power_settings_new</span></div> 92 <div class="icon"><span class="material-symbols-outlined">design_services</span></div> 93 <div class="icon"><span class="material-symbols-outlined">widgets</span></div> 94 </div> 95 96 <div id="features"> 97 <div class="feature"> 98 <div class="img-wrapper"> 99 <picture><source srcset="images/photo4.webp" type="image/webp"><img src="images/photo4.png" alt="" loading="lazy"></picture> 100 </div> 101 <div class="content"> 102 <h3>æ¥ å¸¸ å¹³ å° ç»´ æ¤</h3> 103 <p>è´ è´£ ç å é¨ ç¸ å ³ ç å® ç½ ã å° ç¨ åº å æ å¡ å¨ ç æ¥ å¸¸ ç»´ æ¤ å·¥ ä½ ï¼ å 好 åº ç¡ è¿ è¥ ä¿ é ï¼ ç¡® ä¿ å¹³ å° åº ç¡ å è½ æ£ å¸¸ è¿ è½¬ ã</p> 104 </div> 105 </div> 106 <div class="feature"> 107 <div class="img-wrapper"> 108 <picture><source srcset="images/photo5.webp" type="image/webp"><img src="images/photo5.png" alt="" loading="lazy"></picture> 109 </div> 110 <div class="content"> 111 <h3>å¹³ å° ä¼ å å 级</h3> 112 <p>å¼ å± å® ç½ ã å° ç¨ åº å æ å¡ å¨ ç æ§ è½ ä¼ å ä¸ ç æ¬ æ´æ° å·¥ ä½ ï¼ æ ç» æ å å¹³ å° è¿ è¡ æ ç ï¼ ä¿ é å¹³ å° å® å ¨ ã é« æ è¿ è¡ ã</p> 113 </div> 114 </div> 115 <div class="feature"> 116 <div class="img-wrapper"> 117 <picture><source srcset="images/photo6.webp" type="image/webp"><img src="images/photo6.png" alt="" loading="lazy"></picture> 118 </div> 119 <div class="content"> 120 <h3>ç« èµ ç» éª å 享</h3> 121 <p>å® æ ç» ç» ç« èµ ç» éª å 享 ä¼ ï¼ æ¢³ ç æ² æ· ç« èµ ç¸ å ³ æ æ¯ ä¸ å® æ ç» éª ï¼ å® ç° å¢ é å é¨ ç» éª äº é ã æ æ å ± 享 ã</p> 122 </div> 123 </div> 124 <div class="feature"> 125 <div class="img-wrapper"> 126 <picture><source srcset="images/photo7.webp" type="image/webp"><img src="images/photo7.png" alt="" loading="lazy"></picture> 127 </div> 128 <div class="content"> 129 <h3>æ æ¯ äº¤ æµ ç 讨</h3> 130 <p>常 æ å å¼ å± æ æ¯ ç 讨 ä¸ äº¤ æµ æ´» å¨ ï¼ æ 建 å¢ é æ æ¯ æ² é æ¡¥ æ¢ ï¼ è¥ é 积 æ å ä¸ ç æ æ¯ å¦ ä¹ ä¸ äº¤ æµ æ° å´ ã</p> 131 </div> 132 </div> 133 <div class="feature"> 134 <div class="img-wrapper"> 135 <picture><source srcset="images/photo8.webp" type="image/webp"><img src="images/photo8.png" alt="" loading="lazy"></picture> 136 </div> 137 <div class="content"> 138 <h3>å¦ ä¹ èµ æº æ¨ é</h3> 139 <p>æ ç» æ é 并 æ¨ é ä¼ è´¨ æ æ¯ å¦ ä¹ èµ æ ã ä¸ ä¸ æ ç¨ å è¡ ä¸ å 沿 èµ è®¯ ï¼ å© å å¢ é æ å æ å ä¸ ä¸ æ è½ ï¼ å® ç° ä¸ª 人 ä¸ å¢ é å ± å æ é¿ ã</p> 140 </div> 141 </div> 142 </div> 143</section> 144 145<section id="developers"> 146 <div> 147 <h2>é¨é¿å¢ä»ç»</h2> 148 <p class=intro></p> 149 </div> 150 151 <div class="carousel"> 152 <div class="developer"> 153 <figure> 154 <picture><source srcset="images/photo12.webp" type="image/webp"><img src="images/photo12.jpg" loading="lazy"></picture> 155 <figcaption class="typewriter">é¨ é¿</figcaption> 156 </figure> 157 <h3>许æ¶</h3> 158 <p style="white-space: nowrap;">23计ç®æºå¦é¢ï¼Tim also has his spring</p> 159 160 </div> 161 <div class="developer"> 162 <figure> 163 <picture><source srcset="images/photo13.webp" type="image/webp"><img src="images/photo13.jpg" loading="lazy"></picture> 164 <figcaption class="typewriter">å¯ é¨ é¿</figcaption> 165 </figure> 166 <h3>æå®æ¨</h3> 167 <p>24级计ç®æºå¦é¢ï¼åé¢ççæç¼ä¸ä¼</p> 168 169 </div> 170 <div class="developer"> 171 <figure> 172 <picture><source srcset="images/photo15.webp" type="image/webp"><img src="images/photo15.jpg" loading="lazy"></picture>
173 <figcaption class="typewriter">å¯ é¨ é¿</figcaption> 174 </figure> 175 <h3>ä¸ç«¥ç«¥</h3> 176 <p>25级计ç®æºå¦é¢ï¼å®¹æ失å¿ï¼ä¸¢ä¼å¤§ç</p> 177 178 </div> 179 </div> 180</section> 181 182<!-- <footer> 183 <h3>Experience liftoff</h3> 184 <dl> 185 <dt>Product</dt> 186 <dd> 187 <ul> 188 <li><a href="#">Download</a></li> 189 <li><a href="#">Product</a></li> 190 <li><a href="#">Docs</a></li> 191 <li><a href="#">Changelog</a></li> 192 </ul> 193 </dd> 194 <dt>Resources</dt> 195 <dd> 196 <ul> 197 <li><a href="#">Blog</a></li> 198 <li><a href="#">Pricing</a></li> 199 <li><a href="#">Use Cases</a></li> 200 </ul> 201 </dd> 202 </dl> 203 <p>Antigravity</p> 204</footer> --> 205 206<section id="feiyang-gallery-section" style="padding: 80px 0; background-color: #f8f9fa; width: 100%; overflow: hidden;"> 207 <div class="feiyang-section-header"> 208 <style> 209 .feiyang-section-header { 210 text-align: center; 211 max-width: 1200px; 212 margin: 0 auto 50px auto; 213 padding: 0 20px; 214 } 215 .feiyang-section-header h2 { 216 font-family: 'FZYaoti', sans-serif; 217 font-size: 38px; 218 color: #202124; 219 margin-bottom: 15px; 220 } 221 .feiyang-section-header .intro { 222 font-size: 16px; 223 color: #5f6368; 224 max-width: 700px; 225 margin: 0 auto; 226 line-height: 1.6; 227 } 228 .feiyang-section-header .divider { 229 display: block; 230 width: 50px; 231 height: 4px; 232 background-color: #3186FF; 233 margin: 20px auto 0 auto; 234 border-radius: 2px; 235 } 236 237 .feiyang-gallery { 238 display: flex; 239 justify-content: center; 240 flex-wrap: wrap; 241 gap: 30px; 242 width: 100%; 243 max-width: 1300px; 244 margin: 0 auto; 245 padding: 0 20px; 246 } 247 248 249 .feiyang-card { 250 flex: 1; 251 min-width: 320px; 252 max-width: 400px; 253 position: relative; 254 border-radius: 12px; 255 overflow: hidden; 256 box-shadow: 0 4px 20px rgba(0,0,0,0.08); 257 transition: all 0.3s ease; 258 background: #fff; 259 aspect-ratio: 16/10; 260 } 261 262 .feiyang-card:hover { 263 transform: translateY(-5px); 264 box-shadow: 0 10px 30px rgba(0,0,0,0.15); 265 } 266 267 /* å¾ç */ 268 .feiyang-card img { 269 width: 100%; 270 height: 100%; 271 object-fit: cover; 272 border-radius: 12px; 273 } 274 275 .feiyang-card-info { 276 position: absolute; 277 bottom: 0; 278 left: 0; 279 width: 100%; 280 padding: 20px; 281 background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); 282 color: #fff; 283 opacity: 0; 284 transition: opacity 0.3s ease; 285 } 286 287 .feiyang-card:hover .feiyang-card-info { 288 opacity: 1; 289 } 290 291 .feiyang-card-info h4 { 292 font-size: 18px; 293 margin: 0 0 5px 0; 294 color: #fff; 295 } 296 .feiyang-card-info p { 297 font-size: 14px; 298 margin: 0; 299 opacity: 0.9; 300 color: #eee; 301 } 302 303 @media (max-width: 900px) { 304 .feiyang-gallery { 305 flex-direction: column; 306 align-items: center; 307 gap: 20px; 308 } 309 .feiyang-card { 310 width: 100%; 311 max-width: 500px; 312 } 313 .feiyang-section-header h2 { 314 font-size: 28px; 315 } 316 } 317 </style> 318 319<p class="intro-title" style="text-align: center; font-size: 24px; font-weight: bold; margin-bottom: 20px;">ç åé¨æ¥å¸¸å·¥ä½</p> 320 321<p class="intro"> 322 è®°å½æ们çæ客æ¶å ãå¨è¿éï¼æ们ç¨ä»£ç æ建æªæ¥ï¼ç¨ææ¯æå¡å·å¤§ãæ 论æ¯æ·±å¤çCodingï¼è¿æ¯çççææ¯å享ï¼æ¯ä¸ç¬é´é½åèçæ们ççæ ä¸æºæ §ã 323 </p>
324 <span class="divider"></span> 325 </div> 326 327 <div class="feiyang-gallery"> 328 <div class="feiyang-card"> 329 <picture><source srcset="images/photo1.webp" type="image/webp"><img src="images/photo1.jpg" alt="ç åé¨æ¥å¸¸1" loading="lazy"></picture> 330 <div class="feiyang-card-info"> 331 <h4>æ客代ç æ¶å </h4> 332 <p>è´è´£å®ç½ç»´æ¤ä¸ç³»ç»ç å</p> 333 </div> 334 </div> 335 <div class="feiyang-card"> 336 <picture><source srcset="images/photo2.webp" type="image/webp"><img src="images/photo2.jpg" alt="ç åé¨æ¥å¸¸2" loading="lazy"></picture> 337 <div class="feiyang-card-info"> 338 <h4>跨平å°å¼åå®è·µ</h4> 339 <p>移å¨ç«¯ä¸å°ç¨åºææ¯æ¢ç´¢</p> 340 </div> 341 </div> 342 <div class="feiyang-card"> 343 <picture><source srcset="images/photo3.webp" type="image/webp"><img src="images/photo3.jpg" alt="ç åé¨æ¥å¸¸3" loading="lazy"></picture> 344 <div class="feiyang-card-info"> 345 <h4>å¢éææ¯å享</h4> 346 <p>å®æå¼å±ä»£ç Review ä¸å享</p> 347 </div> 348 </div> 349 </div> 350</section> 351 <!-- æ¬å°JS --> 352
352<script defer src="js/main.js"></script>
352 353 354</body> 355</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.