<!-- 水墨装饰元素 -->
<div class="ink-mountain no-flash"></div>
<div class="ink-water no-flash"></div>

<div class="container">
  <div class="main-content">
    <!-- 侧边导航 -->
    <aside class="sidebar no-flash">
      <h2 class="sidebar-title">数智共创平台</h2>
      <ul class="module-nav">
        <li>
          <a href="#cultural-resource-library" class="active"><i class="fas fa-database"></i> 文化资源库</a>
          <ul class="sub-nav">
            <li><a href="#multimodal-collection"><i class="fas fa-microphone-alt"></i> 多模态采集中心</a></li>
            <li><a href="#knowledge-graph"><i class="fas fa-sitemap"></i> 分类知识图谱</a></li>
          </ul>
        </li>
        <li>
          <a href="#smart-app-center"><i class="fas fa-brain"></i> 智慧应用中心</a>
          <ul class="sub-nav">
            <li><a href="#digital-workshop"><i class="fas fa-paint-brush"></i> 数字文创工坊</a></li>
            <li><a href="#smart-tourism"><i class="fas fa-map-marked-alt"></i> 智慧文旅系统</a></li>
            <li><a href="#ip-incubation"><i class="fas fa-egg"></i> IP孵化平台</a></li>
          </ul>
        </li>
        <li>
          <a href="#co-creation-community"><i class="fas fa-users"></i> 共创社区</a>
          <ul class="sub-nav">
            <li><a href="#university-alliance"><i class="fas fa-graduation-cap"></i> 高校联盟</a></li>
            <li><a href="#gov-collab"><i class="fas fa-landmark"></i> 政府协作</a></li>
            <li><a href="#public-creation"><i class="fas fa-edit"></i> 全民创作</a></li>
          </ul>
        </li>
      </ul>
    </aside>

    <!-- 主内容区 -->
    <main class="content-area no-flash">
      <!-- 文化资源库 -->
      <div class="section-anchor" id="cultural-resource-library"></div>
      <div class="content-header">
        <h1 class="content-title">
          <i class="fas fa-database content-title-icon"></i>
          文化资源库
        </h1>
        <div class="stats-container">
          <div *ngFor="let stat of stats" class="stat-card">
            <h3>{{stat.title}}</h3>
            <p>{{stat.value}}</p>
          </div>
        </div>
      </div>

      <!-- 轮播图 -->
      <div class="swiper-container cultural-resource-swiper no-flash">
        <div class="swiper-wrapper">
          <div *ngFor="let slide of slides" class="swiper-slide" [style.background-image]="'url(' + slide.image + ')'">
            <div class="slide-content">
              <h3 class="slide-title">{{slide.title}}</h3>
              <p>{{slide.description}}</p>
            </div>
          </div>
        </div>
        <div class="swiper-pagination"></div>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
      </div>

      <!-- 功能模块网格 -->
      <div class="module-grid">
        <!-- 多模态采集中心 -->
        <div class="module-card no-flash" id="multimodal-collection" [style.--module-color]="modules[0].bgColor">
          <div class="card-header" [style.background]="modules[0].bgColor">
            <i [class]="modules[0].icon + ' card-icon'"></i>
            <h3 class="card-title">{{modules[0].title}}</h3>
            <p class="card-subtitle">{{modules[0].subtitle}}</p>
          </div>
          <div class="card-body">
            <ul class="card-features">
              <li *ngFor="let feature of modules[0].features">
                <i [class]="feature.icon"></i> {{feature.text}}
              </li>
            </ul>
            <div class="card-actions">
              <button class="btn btn-primary" [style.background]="modules[0].bgColor">
                <i [class]="modules[0].btnPrimary.icon"></i> {{modules[0].btnPrimary.text}}
              </button>
              <button class="btn btn-outline" [style.border-color]="modules[0].bgColor" [style.color]="modules[0].bgColor">
                <i [class]="modules[0].btnOutline.icon"></i> {{modules[0].btnOutline.text}}
              </button>
            </div>
          </div>
        </div>
        
        <!-- 分类知识图谱 -->
        <div class="module-card no-flash" id="knowledge-graph" [style.--module-color]="modules[1].bgColor">
          <div class="card-header" [style.background]="modules[1].bgColor">
            <i [class]="modules[1].icon + ' card-icon'"></i>
            <h3 class="card-title">{{modules[1].title}}</h3>
            <p class="card-subtitle">{{modules[1].subtitle}}</p>
          </div>
          <div class="card-body">
            <ul class="card-features">
              <li *ngFor="let feature of modules[1].features">
                <i [class]="feature.icon"></i> {{feature.text}}
              </li>
            </ul>
            <div class="card-actions">
              <button class="btn btn-primary" [style.background]="modules[1].bgColor">
                <i [class]="modules[1].btnPrimary.icon"></i> {{modules[1].btnPrimary.text}}
              </button>
              <button class="btn btn-outline" [style.border-color]="modules[1].bgColor" [style.color]="modules[1].bgColor">
                <i [class]="modules[1].btnOutline.icon"></i> {{modules[1].btnOutline.text}}
              </button>
            </div>
          </div>
        </div>
      </div>
      
      
      <!-- 智慧应用中心 -->
      <div class="section-anchor" id="smart-app-center"></div>
      <div class="section-header">
        <h1 class="section-title">
          <i class="fas fa-brain section-title-icon"></i>
          智慧应用中心
        </h1>
      </div>
      <!-- 新增：智慧应用中心轮播图 -->
      <div class="swiper-container smart-app-swiper no-flash">
        <div class="swiper-wrapper">
          <div *ngFor="let slide of slidesForSmartApp" class="swiper-slide" [style.background-image]="'url(' + slide.image + ')'">
            <div class="slide-content">
              <h3 class="slide-title">{{slide.title}}</h3>
              <p>{{slide.description}}</p>
            </div>
          </div>
        </div>
        <div class="swiper-pagination"></div>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
      </div>
      
      <div class="module-grid">
        <!-- 数字文创工坊 -->
        <div class="module-card no-flash" id="digital-workshop" [style.--module-color]="modules[2].bgColor">
          <div class="card-header" [style.background]="modules[2].bgColor">
            <i [class]="modules[2].icon + ' card-icon'"></i>
            <h3 class="card-title">{{modules[2].title}}</h3>
            <p class="card-subtitle">{{modules[2].subtitle}}</p>
          </div>
          <div class="card-body">
            <ul class="card-features">
              <li *ngFor="let feature of modules[2].features">
                <i [class]="feature.icon"></i> {{feature.text}}
              </li>
            </ul>
            <div class="card-actions">
              <button class="btn btn-primary" [style.background]="modules[2].bgColor">
                <i [class]="modules[2].btnPrimary.icon"></i> {{modules[2].btnPrimary.text}}
              </button>
              <button class="btn btn-outline" [style.border-color]="modules[2].bgColor" [style.color]="modules[2].bgColor">
                <i [class]="modules[2].btnOutline.icon"></i> {{modules[2].btnOutline.text}}
              </button>
            </div>
          </div>
        </div>
        
        <!-- 智慧文旅系统 -->
        <div class="module-card no-flash" id="smart-tourism" [style.--module-color]="modules[3].bgColor">
          <div class="card-header" [style.background]="modules[3].bgColor">
            <i [class]="modules[3].icon + ' card-icon'"></i>
            <h3 class="card-title">{{modules[3].title}}</h3>
            <p class="card-subtitle">{{modules[3].subtitle}}</p>
          </div>
          <div class="card-body">
            <ul class="card-features">
              <li *ngFor="let feature of modules[3].features">
                <i [class]="feature.icon"></i> {{feature.text}}
              </li>
            </ul>
            <div class="card-actions">
              <button class="btn btn-primary" [style.background]="modules[3].bgColor">
                <i [class]="modules[3].btnPrimary.icon"></i> {{modules[3].btnPrimary.text}}
              </button>
              <button class="btn btn-outline" [style.border-color]="modules[3].bgColor" [style.color]="modules[3].bgColor">
                <i [class]="modules[3].btnOutline.icon"></i> {{modules[3].btnOutline.text}}
              </button>
            </div>
          </div>
        </div>
        
        <!-- IP孵化平台 -->
        <div class="module-card no-flash" id="ip-incubation" [style.--module-color]="modules[4].bgColor">
          <div class="card-header" [style.background]="modules[4].bgColor">
            <i [class]="modules[4].icon + ' card-icon'"></i>
            <h3 class="card-title">{{modules[4].title}}</h3>
            <p class="card-subtitle">{{modules[4].subtitle}}</p>
          </div>
          <div class="card-body">
            <ul class="card-features">
              <li *ngFor="let feature of modules[4].features">
                <i [class]="feature.icon"></i> {{feature.text}}
              </li>
            </ul>
            <div class="card-actions">
              <button class="btn btn-primary" [style.background]="modules[4].bgColor">
                <i [class]="modules[4].btnPrimary.icon"></i> {{modules[4].btnPrimary.text}}
              </button>
              <button class="btn btn-outline" [style.border-color]="modules[4].bgColor" [style.color]="modules[4].bgColor">
                <i [class]="modules[4].btnOutline.icon"></i> {{modules[4].btnOutline.text}}
              </button>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 共创社区 -->
      <div class="section-anchor" id="co-creation-community"></div>
      <div class="section-header">
        <h1 class="section-title">
          <i class="fas fa-users section-title-icon"></i>
          共创社区
        </h1>
      </div>

      <div class="swiper-container community-swiper no-flash">
        <div class="swiper-wrapper">
          <div *ngFor="let slide of slidesForCommunity" class="swiper-slide" [style.background-image]="'url(' + slide.image + ')'">
            <div class="slide-content">
              <h3 class="slide-title">{{slide.title}}</h3>
              <p>{{slide.description}}</p>
            </div>
          </div>
        </div>
        <div class="swiper-pagination"></div>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
      </div>
      
      <div class="module-grid">
        <!-- 高校联盟 -->
        <div class="module-card no-flash" id="university-alliance" [style.--module-color]="modules[5].bgColor">
          <div class="card-header" [style.background]="modules[5].bgColor">
            <i [class]="modules[5].icon + ' card-icon'"></i>
            <h3 class="card-title">{{modules[5].title}}</h3>
            <p class="card-subtitle">{{modules[5].subtitle}}</p>
          </div>
          <div class="card-body">
            <ul class="card-features">
              <li *ngFor="let feature of modules[5].features">
                <i [class]="feature.icon"></i> {{feature.text}}
              </li>
            </ul>
            <div class="card-actions">
              <button class="btn btn-primary" [style.background]="modules[5].bgColor">
                <i [class]="modules[5].btnPrimary.icon"></i> {{modules[5].btnPrimary.text}}
              </button>
              <button class="btn btn-outline" [style.border-color]="modules[5].bgColor" [style.color]="modules[5].bgColor">
                <i [class]="modules[5].btnOutline.icon"></i> {{modules[5].btnOutline.text}}
              </button>
            </div>
          </div>
        </div>
        
        <!-- 政府协作 -->
        <div class="module-card no-flash" id="gov-collab" [style.--module-color]="modules[6].bgColor">
          <div class="card-header" [style.background]="modules[6].bgColor">
            <i [class]="modules[6].icon + ' card-icon'"></i>
            <h3 class="card-title">{{modules[6].title}}</h3>
            <p class="card-subtitle">{{modules[6].subtitle}}</p>
          </div>
          <div class="card-body">
            <ul class="card-features">
              <li *ngFor="let feature of modules[6].features">
                <i [class]="feature.icon"></i> {{feature.text}}
              </li>
            </ul>
            <div class="card-actions">
              <button class="btn btn-primary" [style.background]="modules[6].bgColor">
                <i [class]="modules[6].btnPrimary.icon"></i> {{modules[6].btnPrimary.text}}
              </button>
              <button class="btn btn-outline" [style.border-color]="modules[6].bgColor" [style.color]="modules[6].bgColor">
                <i [class]="modules[6].btnOutline.icon"></i> {{modules[6].btnOutline.text}}
              </button>
            </div>
          </div>
        </div>
        
        <!-- 全民创作 -->
        <div class="module-card no-flash" id="public-creation" [style.--module-color]="modules[7].bgColor">
          <div class="card-header" [style.background]="modules[7].bgColor">
            <i [class]="modules[7].icon + ' card-icon'"></i>
            <h3 class="card-title">{{modules[7].title}}</h3>
            <p class="card-subtitle">{{modules[7].subtitle}}</p>
          </div>
          <div class="card-body">
            <ul class="card-features">
              <li *ngFor="let feature of modules[7].features">
                <i [class]="feature.icon"></i> {{feature.text}}
              </li>
            </ul>
            <div class="card-actions">
              <button class="btn btn-primary" [style.background]="modules[7].bgColor">
                <i [class]="modules[7].btnPrimary.icon"></i> {{modules[7].btnPrimary.text}}
              </button>
              <button class="btn btn-outline" [style.border-color]="modules[7].bgColor" [style.color]="modules[7].bgColor">
                <i [class]="modules[7].btnOutline.icon"></i> {{modules[7].btnOutline.text}}
              </button>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</div>

<footer class="no-flash">
  <div class="footer-content">
    <div class="footer-section">
      <h3>平台导航</h3>
      <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">数智共创平台</a></li>
        <li><a href="#">文化地图</a></li>
        <li><a href="#">文创商城</a></li>
        <li><a href="#">活动日历</a></li>
      </ul>
    </div>
    <div class="footer-section">
      <h3>合作伙伴</h3>
      <ul>
        <li><a href="#">江西省文化和旅游厅</a></li>
        <li><a href="#">南昌水利水电大学</a></li>
        <li><a href="#">江西师范大学</a></li>
        <li><a href="#">景德镇陶瓷大学</a></li>
        <li><a href="#">语伴科技</a></li>
      </ul>
    </div>
    <div class="footer-section">
      <h3>联系我们</h3>
      <ul>
        <li><i class="fas fa-map-marker-alt"></i> 江西省南昌市红谷滩区</li>
        <li><i class="fas fa-phone"></i> 0791-88888888</li>
        <li><i class="fas fa-envelope"></i> contact&#64;ganpowl.com</li>
        <li><i class="fas fa-weixin"></i> 赣鄱文链官方公众号</li>
      </ul>
    </div>
  </div>
  <div class="copyright">
    &copy; 2023 赣鄱文链数字文旅平台 - 传承江西文化，智创文旅未来
  </div>
</footer>