椋庤亞Music - 鍙戠幇 AI 鍘熷垱闊充箰鐨勫湴鏂?/title> <link rel="stylesheet" href="css/style.css?v=20260422b"> <link rel="stylesheet" href="css/home.css?v=20260422b"> </head> <body class="gradient-bg home-gradient">  <nav class="navbar"> <div class="container"> <a href="index.html" class="navbar-brand"> <div class="logo"> <svg width="20" height="20" viewBox="0 0 24 24" fill="white"> <path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/> </svg> </div> <span>椋庤亞Music</span> </a> <div class="navbar-nav"> <a href="index.html">棣栭〉</a> <a href="discover.html">鍙戠幇闊充箰</a> <a href="artists.html">AI闊充箰浜?/a> <a href="community.html">绀惧尯</a> <a href="events.html">娲诲姩姒滃崟</a> <a href="create.html">鍙戝竷浣滃搧</a> <a href="profile.html">鎴戠殑</a> </div> <div class="navbar-actions"> <div class="mobile-menu-toggle"> <span></span> <span></span> <span></span> </div> <div class="user-dropdown" id="user-dropdown"> <div class="user-avatar-btn" onclick="toggleDropdown(this)"> <img src="assets/placeholders/avatar.svg" alt="鐢ㄦ埛澶村儚" decoding="async"> </div> <div class="dropdown-menu"> <div class="dropdown-user-info"> <div class="dropdown-user-name">闊充箰鍒涗綔鑰?/div> <div class="dropdown-user-email">creator@fenglingmusic.com</div> </div> <a href="profile.html" class="dropdown-item"> <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg> 鐢ㄦ埛璁剧疆 </a> <div class="dropdown-divider"></div> <button class="dropdown-item logout" onclick="logout()"> <svg viewBox="0 0 24 24" fill="currentColor"><path d="M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5zM4 5h8V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8v-2H4V5z"/></svg> 閫€鍑虹櫥褰? </button> </div> </div> </div> </div> </nav>  <div class="mobile-nav"> <a href="index.html">棣栭〉</a> <a href="discover.html">鍙戠幇闊充箰</a> <a href="artists.html">AI闊充箰浜?/a> <a href="community.html">绀惧尯</a> <a href="events.html">娲诲姩姒滃崟</a> <a href="create.html">鍙戝竷浣滃搧</a> <a href="profile.html">鎴戠殑</a> <div style="margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--color-border);"> <div id="mobile-user-area" class="mobile-user-area"> <img src="assets/placeholders/avatar.svg" alt="鐢ㄦ埛澶村儚" style="width: 40px; height: 40px; border-radius: 50%; margin-right: 12px;" decoding="async"> <div> <div style="font-weight: 600;">闊充箰鍒涗綔鑰?/div> <div style="font-size: 0.8rem; color: var(--color-text-muted);">creator@fenglingmusic.com</div> </div> </div> <div style="margin-top: 16px; display: flex; gap: 8px;"> <a href="profile.html" class="btn btn-secondary" style="flex: 1; text-align: center;">鐢ㄦ埛璁剧疆</a> <button onclick="logout(); location.reload();" class="btn btn-secondary" style="flex: 1; text-align: center; color: #ef4444;">閫€鍑虹櫥褰?/button> </div> </div> </div> <div class="home-onboarding" id="home-onboarding" hidden> <div class="home-onboarding-panel"> <div class="onboarding-topline"> <div> <span class="onboarding-kicker">绗竴娆℃潵锛屽厛閫変竴涓叆鍙?/span> <h2 class="onboarding-title">鍏堝憡璇夋垜浣犵幇鍦ㄦ兂鍚粈涔?/h2> <p class="onboarding-copy">閫変竴涓満鏅拰涓€涓亸濂界殑鏇查锛屾垜浼氬厛甯︿綘鍘绘洿鎺ヨ繎褰撳墠鐘舵€佺殑浣滃搧鍒楄〃銆傝繖閲屼笉澶嶆潅锛屽彧鏄府浣犳洿蹇壘鍒扮涓€棣栨兂鐐瑰紑鐨勬瓕銆?/p> </div> <button class="onboarding-close" id="onboarding-skip-top" type="button" aria-label="鍏堥殢渚跨湅鐪?>脳</button> </div> <div class="onboarding-groups"> <section class="onboarding-group"> <div class="onboarding-group-head"> <strong>鐜板湪鏇村儚鍝釜鍦烘櫙</strong> <span>鍗曢€夛紝鍚庨潰涔熷彲浠ュ啀鎹?/span> </div> <div class="onboarding-options" id="onboarding-scene-options"></div> </section> <section class="onboarding-group"> <div class="onboarding-group-head"> <strong>浠婂ぉ鏇存兂鍏堝惉鍝被椋庢牸</strong> <span>鍗曢€夛紝甯綘鍏堢缉灏忎竴鐐硅寖鍥?/span> </div> <div class="onboarding-options" id="onboarding-style-options"></div> </section> </div> <div class="onboarding-actions"> <span class="onboarding-note" id="onboarding-note">浣犱篃鍙互鐩存帴璺宠繃锛屽厛闅忎究鐪嬬湅棣栭〉銆?/span> <div style="display: flex; gap: 12px; flex-wrap: wrap;"> <button class="btn btn-secondary" id="onboarding-skip" type="button">鍏堥殢渚跨湅鐪?/button> <button class="btn btn-primary" id="onboarding-submit" type="button">甯垜鐢熸垚鍏ュ彛</button> </div> </div> </div> </div> <div class="home-shell">  <section class="hero hero-immersive"> <div class="container"> <div class="hero-grid"> <div class="hero-banner-strip scroll-animate" id="hero-banner"> <div class="hero-banner-track" id="hero-banner-track"> <section class="hero-banner-slide is-brand" aria-label="椋庤亞 Music 鍝佺墝椤?> <div class="banner-brand-main"> <img class="banner-brand-logo" src="assets/brand/fengling-logo-lockup.svg" alt="椋庤亞 Music logo"> <div class="banner-wordmark"> <h2 class="banner-wordmark-title">鍚?AI 鍘熷垱闊充箰锛屼篃璁よ瘑鍒涗綔鐨勪汉</h2> <p class="banner-wordmark-copy"> 浠庝竴棣栦綔鍝佸紑濮嬶紝缁х画鎵惧埌浣犳兂鍏虫敞鐨勫垱浣滆€呭拰璁ㄨ銆? </p> </div> </div> <div class="banner-brand-side"> <div class="banner-feature-card"> <strong>鏈€杩戝€煎緱涓€鍚?/strong> <span>鍏堝惉鏈€鏂板彂甯冨拰缂栬緫鎺ㄨ崘銆?/span> </div> <div class="banner-feature-card"> <strong>璁よ瘑鍒涗綔鑰?/strong> <span>缁х画鐪嬩唬琛ㄤ綔銆佽鏄庡拰鏈€杩戝彂瑷€銆?/span> </div> <div class="banner-feature-card"> <strong>鍙戝竷浣滃搧</strong> <span>涓婁紶闊抽銆佸皝闈㈠拰鍒涗綔璇存槑銆?/span> </div> </div> </section> <section class="hero-banner-slide is-intro" aria-label="缃戠珯浠嬬粛绗竴椤?> <div class="banner-slide-main"> <span class="banner-slide-kicker">浠庝綔鍝佸紑濮?/span> <h2 class="banner-slide-title">鍏堝惉锛屽啀缁х画鎵惧枩娆㈢殑澹伴煶</h2> <p class="banner-slide-copy"> 棣栭〉鍏堢粰浣犲€煎緱鐐瑰紑鐨勪綔鍝侊紝鍙戠幇椤靛啀鎸夋洸椋庛€佸満鏅拰鍏抽敭璇嶇户缁壘銆? </p> </div> <div class="banner-slide-side"> <div class="banner-chip"> <strong>鏈€杩戝€煎緱涓€鍚?/strong> <span>浠庢渶鏂颁綔鍝佸拰缂栬緫鎺ㄨ崘寮€濮嬨€?/span> </div> <div class="banner-chip"> <strong>鍦烘櫙娴忚</strong> <span>璺戞銆佸紑杞︺€佸鏅氥€佸伐浣滈兘鑳藉垏鍏ャ€?/span> </div> <div class="banner-chip"> <strong>鏈€鏂板彂甯?/strong> <span>鏈€杩戞洿鏂扮殑浣滃搧浼氭洿鏃╁嚭鐜般€?/span> </div> <div class="banner-chip"> <strong>鐩存帴鎾斁</strong> <span>鐪嬪埌鍠滄鐨勪綔鍝侊紝鍙互绔嬪埢璇曞惉銆?/span> </div> </div> </section> <section class="hero-banner-slide is-intro" aria-label="缃戠珯浠嬬粛绗簩椤?> <div class="banner-slide-main"> <span class="banner-slide-kicker">鍒涗綔鑰呬笌绀惧尯</span> <h2 class="banner-slide-title">鍚畬涓€棣栵紝涔熻兘缁х画鐪嬭鍒涗綔鐨勪汉</h2> <p class="banner-slide-copy"> 鍠滄涓€棣栨瓕涔嬪悗锛屼綘杩樿兘缁х画鐪嬪垱浣滆€呬富椤点€佺ぞ鍖鸿璁哄拰鐩稿叧浣滃搧銆? </p> </div> <div class="banner-slide-side"> <div class="banner-chip"> <strong>鍒涗綔鑰呬富椤?/strong> <span>浠ｈ〃浣溿€佸垱浣滅瑪璁板拰鍙戣█闆嗕腑灞曠ず銆?/span> </div> <div class="banner-chip"> <strong>绀惧尯璁ㄨ</strong> <span>鎻愰棶銆佺粡楠屽垎浜拰宸茶В鍐冲笘瀛愭寔缁矇娣€銆?/span> </div> <div class="banner-chip"> <strong>浣滃搧鑱斿姩</strong> <span>甯栧瓙鍜屼綔鍝佽鎯呭彲浠ヤ簰鐩歌烦杞€?/span> </div> <div class="banner-chip"> <strong>娲诲姩姒滃崟</strong> <span>姒滃崟鍜屾寫鎴樹細缁х画娌夋穩鏂颁綔鍝併€?/span> </div> </div> </section> </div> <div class="hero-banner-controls"> <button type="button" class="hero-banner-control prev" id="hero-banner-prev" aria-label="涓婁竴椤?> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"> <path d="M15 18l-6-6 6-6"/> </svg> </button> <div class="hero-banner-dots"> <button type="button" class="hero-banner-dot active" data-index="0" aria-label="绗?1 椤?></button> <button type="button" class="hero-banner-dot" data-index="1" aria-label="绗?2 椤?></button> <button type="button" class="hero-banner-dot" data-index="2" aria-label="绗?3 椤?></button> </div> <button type="button" class="hero-banner-control next" id="hero-banner-next" aria-label="涓嬩竴椤?> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"> <path d="M9 18l6-6-6-6"/> </svg> </button> </div> </div> <div class="hero-copy scroll-animate"> <div class="hero-actions"> <a href="discover.html" class="btn btn-primary"> <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"> <polygon points="5,3 19,12 5,21"/> </svg> 寮€濮嬪惉姝? </a> <a href="create.html" class="btn btn-secondary"> <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"> <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/> </svg> 鍙戝竷浣滃搧 </a> <a href="community.html" class="btn btn-secondary"> <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"> <path d="M21 6h-2v9H6v2c0 .55.45 1 1 1h11l4 4V7c0-.55-.45-1-1-1zm-4 6V3c0-.55-.45-1-1-1H3c-.55 0-1 .45-1 1v14l4-4h10c.55 0 1-.45 1-1z"/> </svg> 杩涘叆绀惧尯 </a> </div> <div class="hero-metrics" id="hero-metrics">  </div> </div> <div class="hero-stage scroll-animate"> <a href="track-detail.html?id=1" class="hero-spotlight" id="hero-spotlight-link"> <div class="hero-spotlight-cover"> <img id="hero-spotlight-cover" src="assets/placeholders/cover.svg" alt="浠婃棩鑱氱劍浣滃搧" decoding="async" fetchpriority="high"> <div class="spotlight-cover-caption"> <span class="spotlight-cover-label">浠婃棩鎺ㄨ崘</span> <span class="spotlight-cover-state">鐐瑰紑璇曞惉</span> </div> </div> <div class="hero-spotlight-body"> <div class="spotlight-topline"> <span class="spotlight-badge">绮鹃€変綔鍝?/span> <div class="spotlight-topline-side"> <span class="spotlight-side-chip">鏈€杩戝€煎緱涓€鍚?/span> <span class="spotlight-time" id="hero-spotlight-duration">3:42</span> </div> </div> <h2 class="hero-spotlight-title" id="hero-spotlight-title">浣滃搧鍔犺浇涓?/h2> <div class="spotlight-submeta"> <strong class="spotlight-artist-name" id="hero-spotlight-artist">椋庤亞缂栬緫閮?/strong> <span class="spotlight-artist-note" id="hero-spotlight-note">缂栬緫鎺ㄨ崘</span> </div> <p class="hero-spotlight-desc" id="hero-spotlight-desc">浠婂ぉ鍏堜粠杩欓寮€濮嬪惉銆?/p> <div class="hero-spotlight-tags" id="hero-spotlight-tags"></div> <div class="hero-spotlight-footer"> <div class="spotlight-meta" id="hero-spotlight-meta"></div> <span class="spotlight-open">鏌ョ湅璇︽儏</span> </div> </div> </a> </div> <div class="hero-queue scroll-animate"> <div class="queue-head"> <strong>鏈€鏂版洿鏂?/strong> <span>鏈€杩戞洿鏂扮殑 3 棣栦綔鍝?/span> </div> <div class="queue-list" id="hero-queue">  </div> </div> </div> </div> </section>  <main class="page-content home-page">  <section class="section featured-section"> <div class="container"> <div class="featured-layout"> <aside class="featured-copy panel-glass scroll-animate"> <span class="section-kicker">鏈懆鎺ㄨ崘</span> <h3>鍏堝惉杩欏嚑棣?/h3> <p> 鏀跺綍鏈€杩戞洿鍊煎緱鐐瑰紑鐨勪綔鍝侊紝閫傚悎浠庤繖閲屽紑濮嬪惉銆? </p> <div class="featured-copy-list" id="featured-track-highlights">  </div> <a href="discover.html" class="btn btn-secondary">鏌ョ湅鍏ㄩ儴浣滃搧</a> </aside> <div> <div class="section-header section-header-stack"> <div class="scroll-animate"> <span class="section-kicker">绮鹃€変綔鍝?/span> <h2 class="section-title">鏈€杩戝€煎緱涓€鍚?/h2> </div> <a href="discover.html" class="section-more scroll-animate"> 鏌ョ湅鏇村 <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"> <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/> </svg> </a> </div> <div id="featured-tracks" class="grid grid-4 featured-grid">  </div> </div> </div> </div> </section> <section class="section creators-community-section"> <div class="container dual-section"> <div class="dual-panel scroll-animate"> <div class="section-header section-header-stack"> <div> <span class="section-kicker">鍒涗綔鑰呮帹鑽?/span> <h2 class="section-title">鏈€杩戞湁鏇存柊鐨勫垱浣滆€?/h2> </div> <a href="artists.html" class="section-more"> 鏌ョ湅鏇村 <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"> <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/> </svg> </a> </div> <div id="featured-artists" class="home-artists-grid">  </div> </div> <aside class="dual-panel challenge-panel scroll-animate"> <div class="challenge-stack"> <span class="challenge-tag">鏈懆鎸戞垬</span> <h3>鏈潵鍩庡競</h3> <p> 鍥寸粫鏈潵鍩庡競涓婚鍙戜竴棣栦綔鍝侊紝鐢ㄦ棆寰嬨€侀煶鑹插拰鑺傚鍐欎笅浣犳兂璞′腑鐨勮閬撲笌澶滆壊銆? </p> <div class="challenge-meta"> <span>鎴鏃堕棿锛?026-05-12</span> <span>鍒涗綔鏂瑰悜锛氬煄甯傛皼鍥?/ 鍚堟垚鍣ㄦ棆寰?/ 浣庨鎺ㄨ繘</span> <span>鍙備笌鏂瑰紡锛氬彂甯冧綔鍝佸悗鍚屾鍒版椿鍔ㄦ鍗?/span> </div> <div class="challenge-actions"> <a href="create.html" class="btn btn-primary">鍘诲彂甯冧綔鍝?/a> <a href="events.html" class="btn btn-secondary">鏌ョ湅娲诲姩姒滃崟</a> </div> </div> </aside> </div> </section>  <section class="section community-preview-section"> <div class="container community-preview-shell"> <div class="section-header section-header-stack"> <div class="scroll-animate"> <span class="section-kicker">绀惧尯璁ㄨ</span> <h2 class="section-title">鏈€杩戝湪鑱?/h2> </div> <a href="community.html" class="section-more scroll-animate"> 杩涘叆绀惧尯 <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"> <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/> </svg> </a> </div> <div class="community-preview-layout"> <aside class="community-note panel-glass scroll-animate"> <h3>绀惧尯閲屾渶杩戝湪鑱?/h3> <p> 杩欓噷鏈変汉鑱婃贩闊炽€佹湁浜洪棶缂栨帓锛屼篃鏈変汉鎶婁綔鍝佹寕杩涘笘瀛愰噷缁х画鏀跺弽棣堛€? </p> <ul class="community-note-list"> <li>娣烽煶涓庢瘝甯?/li> <li>浣滃搧鍙嶉</li> <li>宸ヤ綔娴佷氦娴?/li> </ul> <a href="community.html" class="btn btn-secondary">鏌ョ湅鍏ㄩ儴璁ㄨ</a> </aside> <div id="hot-posts" class="home-post-list">  </div> </div> </div> </section> </main>  <footer class="footer"> <div class="container"> <div class="footer-content"> <div class="footer-brand"> <div class="logo" style="display:flex;align-items:center;gap:8px;margin-bottom:12px;"> <svg width="24" height="24" viewBox="0 0 24 24" fill="white"> <path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/> </svg> <span style="font-weight:700;">椋庤亞Music</span> </div> <p class="desc">闈炶惀鍒╁師鍒涢煶涔愮ぞ鍖猴紝浠呭睍绀哄師鍒涘強鍚堟硶鎺堟潈浣滃搧銆?br>娆㈣繋璁ょ湡鍒涗綔锛屼篃娆㈣繋璁ょ湡鑱嗗惉銆?/p> </div> <div class="footer-links"> <h4>浜у搧</h4> <a href="discover.html">鍙戠幇闊充箰</a> <a href="artists.html">AI闊充箰浜?/a> <a href="community.html">绀惧尯</a> <a href="create.html">鍙戝竷浣滃搧</a> </div> <div class="footer-links"> <h4>鍏充簬</h4> <a href="about.html">鍏充簬鎴戜滑</a> <a href="help.html">甯姪涓績</a> <a href="agreement.html">鐢ㄦ埛鍗忚</a> <a href="privacy.html">闅愮鏀跨瓥</a> <a href="https://work.weixin.qq.com/ca/cawcde71e759204b9a" target="_blank" rel="noopener noreferrer">鑱旂郴鎴戜滑</a> </div> </div> <div class="footer-bottom"> <span>漏椋庤亞Music</span> <span>闈炶惀鍒╁師鍒涢煶涔愮ぞ鍖猴紝浠呭睍绀哄師鍒涘強鍚堟硶鎺堟潈浣滃搧锛屼镜鏉冨繀绌?/span> <span>浜琁CP澶?026013751鍙?2</span> </div> </div> </footer> </div>  <div class="player-bar" id="player-bar"> <div class="player-info"> <div class="player-cover"> <img src="assets/placeholders/cover.svg" alt="灏侀潰" decoding="async"> </div> <div> <div class="player-title">鏄熼檯婕父</div> <div class="player-artist">鏄熸渤鐢靛瓙</div> </div> </div> <div class="player-controls"> <div class="player-buttons"> <button class="player-btn prev"> <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"> <path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/> </svg> </button> <button class="player-btn play"> <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"> <polygon points="5,3 19,12 5,21"/> </svg> </button> <button class="player-btn next"> <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"> <path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/> </svg> </button> </div> <div class="player-progress"> <span class="player-time current">0:00</span> <div class="progress-bar"> <div class="fill"></div> </div> <span class="player-time end">3:42</span> </div> </div> <div class="player-volume"> <button class="volume-btn"> <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"> <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/> </svg> </button> <div class="volume-slider"> <div class="fill"></div> </div> </div> </div> <script src="js/music-store.js?v=20260425a"></script> <script src="js/app.js?v=20260425a"></script> <script src="js/home.js?v=20260425c"></script> </body> </html>