<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>NasifyTech 納啟科技</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-p6H9eH3j3z2mXbxqGIdl0u4i3s3G4B6cXX8tK6Xj6xJ8bF4lK2o5j4Q5m9B6j6h6d5k5j6j7k7l8m9n0p1q==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;700&family=Exo+2:wght@500;700&display=swap" rel="stylesheet">
  <link href="source/css/indcss.css" rel="stylesheet">
  <script src="https://www.gstatic.com/firebasejs/9.22.1/firebase-app-compat.js"></script>
  <script src="https://www.gstatic.com/firebasejs/9.22.1/firebase-database-compat.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-286HZQTWFH"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'G-286HZQTWFH');
  </script>
  <style>
    *, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --primary-color: #333;
  --secondary-color: #555;
  --accent-color: #ae7d2f;
  --background-color: #f9f9f9;
  --header-height: 70px;
  --transition-speed: 0.3s;
  --font-family-primary: 'Noto Sans TC', sans-serif;
  --font-family-secondary: 'Exo 2', sans-serif;
}

body {
  font-family: var(--font-family-primary);
  color: var(--primary-color);
  background-color: #fff;
  line-height: 1.6;
  overflow-x: hidden;
}

a {
  color: var(--primary-color);
  text-decoration: none;
  transition: color var(--transition-speed) ease;
}

a:hover {
  color: var(--secondary-color);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Header */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.95);
  padding: 15px 0;
  z-index: 1000;
  transition: background var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

header.scrolled {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

header h1 {
  font-family: var(--font-family-secondary);
  font-size: 1.8em;
  color: var(--primary-color);
  transition: color var(--transition-speed) ease;
}

nav ul {
  list-style: none;
  display: flex;
  gap: 20px;
  align-items: center;
}

nav ul li a {
  font-size: 1em;
  font-weight: 600;
  position: relative;
  padding: 5px 0;
  color: var(--primary-color);
  display: flex;
  align-items: center;
  gap: 8px;
}

nav ul li a::after {
  content: '';
  position: absolute;
  width: 0%;
  height: 2px;
  background: var(--primary-color);
  left: 0;
  bottom: -2px;
  transition: width var(--transition-speed) ease;
}

nav ul li a:hover::after {
  width: 100%;
}

.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 25px;
  height: 20px;
  cursor: pointer;
}

.menu-toggle div {
  width: 100%;
  height: 3px;
  background: var(--primary-color);
  border-radius: 1.5px;
  transition: all var(--transition-speed) ease;
}

.menu-toggle.active div:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.menu-toggle.active div:nth-child(2) {
  opacity: 0;
}

.menu-toggle.active div:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* 版面區段設定 */
section {
  padding: 100px 20px 60px;
  position: relative;
  overflow: hidden;
}

.section-title {
  text-align: center;
  margin-bottom: 40px;
}

.section-title h2 {
  font-family: var(--font-family-secondary);
  font-size: 2.5em;
  margin-bottom: 10px;
  color: var(--primary-color);
  position: relative;
  display: inline-block;
}

.section-title h2::after {
  content: '';
  width: 50px;
  height: 3px;
  background: var(--accent-color);
  display: block;
  margin: 10px auto 0;
  border-radius: 1.5px;
}

.section-title p {
  color: #777;
  font-size: 1.1em;
  max-width: 700px;
  margin: 10px auto 0;
}

#home {
  height: 100vh;
  background: url('https://i.meee.com.tw/8FQeqHk.gif') no-repeat center center/cover;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  text-align: center;
  animation: subtleZoom 30s infinite alternate;
}

@keyframes subtleZoom {
  0% { transform: scale(1); }
  100% { transform: scale(1.05); }
}

#home::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0);
  z-index: 1;
}

#home .content {
  z-index: 2;
  animation: fadeInUp 1s ease-out;
  padding: 30px;
  border-radius: 10px;
  max-width: 90%;
  box-shadow: 0 2px 8px rgb(255, 255, 255);
}

@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(50px); }
  100% { opacity: 1; transform: translateY(0); }
}

#home h1 {
  font-family: var(--font-family-secondary);
  font-size: 3em;
  margin-bottom: 20px;
  color: white;
  text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

#home p {
  font-size: 1.2em;
  max-width: 800px;
  margin: 0 auto;
  color: white;
  text-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

#about {
  background: var(--background-color);
}

#about .timeline {
  position: relative;
  padding-left: 50px;
  margin-top: 20px;
  border-left: 3px solid var(--accent-color);
  color: var(--primary-color);
}

#about .timeline-item {
  position: relative;
  margin-bottom: 40px;
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  padding-right: 20px;
}

#about .timeline-item h3 {
  font-size: 1.4em;
  margin-bottom: 10px;
  color: var(--primary-color);
}

#about .timeline-item p {
  font-size: 1.1em;
  line-height: 1.6;
  color: var(--secondary-color);
}

#about .timeline-item::before {
  content: '';
  position: absolute;
  left: -23px;
  top: 5px;
  width: 16px;
  height: 16px;
  background: var(--accent-color);
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--accent-color);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* 服務項目 */
#services {
  background: #fff;
}

.services-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: flex-start;
  justify-items: center;
}

.services-description {
  max-width: 600px;
  text-align: left;
}

.services-description h2 {
  font-family: var(--font-family-secondary);
  font-size: 2em;
  margin-bottom: 15px;
  color: var(--primary-color);
}

.services-description p {
  font-size: 1.1em;
  color: #555;
  line-height: 1.8;
}

/* 調整聯絡我們按鈕與聯絡資訊 */
.btn-contact {
  padding: 16px 32px;
  border: none;
  background: var(--primary-color);
  color: #fff;
  font-size: 1.1em;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: background var(--transition-speed) ease, transform var(--transition-speed) ease;
  /* 新增與上方文字的間距 */
  margin-top: 20px;
}

.btn-contact:hover {
  background: var(--secondary-color);
  transform: translateY(-2px);
}

/* 調整聯絡資訊字型大小 */
.contact-info {
  margin-top: 20px;
  padding: 10px 0;
  border-top: 1px solid #ccc;
  color: #555;
  font-size: 0.9em; /* 調小字型 */
  line-height: 1.8;
}
.contact-info p {
  margin-bottom: 10px;
}

/* 服務列表 */
.services-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  width: 100%;
}

.service-category {
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 25px;
  transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}

.service-category:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.service-category h3 {
  font-family: var(--font-family-secondary);
  font-size: 1.6em;
  color: var(--primary-color);
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.service-category ul {
  list-style: disc inside;
  color: #555;
  line-height: 1.8;
  padding-left: 20px;
}

.service-category ul li {
  margin-bottom: 10px;
}

/* 最新消息 / 專案 */
#news {
  background: var(--background-color);
}

.news-list,
.project-list {
  display: grid;
  gap: 30px;
  margin-top: 20px;
}

.news-list {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.news-item {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 25px;
  transition: box-shadow var(--transition-speed) ease;
}

.news-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.news-item h3 {
  font-family: var(--font-family-secondary);
  font-size: 1.6em;
  margin-bottom: 10px;
  color: var(--primary-color);
}

.news-item p {
  color: #555;
  line-height: 1.6;
}

.project-item {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow var(--transition-speed) ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.project-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.project-item img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.project-content {
  padding: 20px;
}

.project-content h3 {
  font-family: var(--font-family-secondary);
  font-size: 1.6em;
  color: var(--primary-color);
  margin-bottom: 10px;
}

.project-content p {
  font-size: 1em;
  color: #555;
  line-height: 1.6;
  margin-bottom: 15px;
}

.project-content a {
  display: inline-block;
  margin-top: 10px;
  color: var(--accent-color);
  text-decoration: none;
  font-weight: 600;
  transition: color var(--transition-speed) ease;
}

.project-content a:hover {
  color: #ffba4c;
}

/* 客戶見證 */
.section-testimonials {
  padding: 60px 20px;
  background-color: #fff;
  text-align: center;
}

.section-testimonials .section-title h2::after {
  background-color: var(--accent-color);
}

.testimonial-images {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}

.testimonial-images img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border: 2px solid #ddd;
  border-radius: 8px;
  transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}

.testimonial-images img:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

#contact {
  background: #f5f5f5;
}

.contact-container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 40px;
  justify-content: center;
}

.contact-form-container,
.contact-description {
  flex: 1 1 400px;
  max-width: 500px;
}

.contact-description {
  text-align: left;
}

.contact-description h2 {
  font-family: var(--font-family-secondary);
  font-size: 2em;
  margin-bottom: 15px;
  color: var(--primary-color);
}

.contact-description p {
  font-size: 1.1em;
  color: #555;
  line-height: 1.8;
  margin-bottom: 10px;
}

.contact-form {
  animation: fadeIn 1.5s ease-out forwards;
  opacity: 0;
  transform: translateY(40px);
}

@keyframes fadeIn {
  to { opacity: 1; transform: translateY(0); }
}

.contact-form form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-form input, 
.contact-form textarea {
  padding: 16px 20px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1.1em;
  font-family: var(--font-family-primary);
  background: #fff;
  color: #333;
  resize: vertical;
  transition: border var(--transition-speed) ease, background var(--transition-speed) ease;
  width: 100%;
}

.contact-form input::placeholder, 
.contact-form textarea::placeholder {
  color: #aaa;
}

.contact-form input:focus, 
.contact-form textarea:focus {
  background: #f0f0f0;
  border-color: var(--primary-color);
  outline: none;
}

.contact-form button {
  padding: 16px 32px;
  border: none;
  background: var(--primary-color);
  color: #fff;
  font-size: 1.1em;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: background var(--transition-speed) ease, transform var(--transition-speed) ease;
  align-self: flex-start;
}

.contact-form button:hover {
  background: var(--secondary-color);
  transform: translateY(-2px);
}

/* 響應式調整 */
@media (max-width: 1024px) {
  .menu-toggle {
    display: flex;
  }

  nav ul {
    flex-direction: column;
    align-items: center;
    background: rgba(255, 255, 255, 0.95);
    position: absolute;
    top: var(--header-height);
    right: 0;
    width: 220px;
    display: none;
    padding: 20px 0;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }

  nav ul.active {
    display: flex;
  }

  nav ul li {
    margin: 15px 0;
  }
}

@media (max-width: 768px) {
  #home h1 {
    font-size: 2.5em;
  }
  #home p {
    font-size: 1.1em;
  }

  .services-container {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .services-description {
    max-width: 100%;
  }
  .services-list {
    grid-template-columns: 1fr;
  }
  .service-category {
    max-width: 100%;
  }
  .testimonial-images {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .testimonial-images img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
  }
  .project-list {
    grid-template-columns: 1fr;
  }
  .project-item {
    width: 100%;
    max-width: 500px;
  }
  .contact-container {
    flex-direction: column;
    align-items: center;
  }
  .contact-form-container,
  .contact-description {
    width: 100%;
    text-align: left;
    max-width: 500px;
  }

  #about .timeline {
    padding-left: 20px;  
    margin-top: 20px;
    border-left: 2px solid var(--accent-color);
  }
  #about .timeline-item {
    margin-bottom: 20px;
    padding-right: 0;  
  }
  #about .timeline-item::before {
    left: -10px;       
  }
  #about .timeline-item h3 {
    font-size: 1.2em;
  }
  #about .timeline-item p {
    font-size: 1em;
  }
}

@media (min-width: 1200px) {
  .container {
    width: 80%;
    max-width: 1100px;
  }
}

@media (max-width: 1024px) {
  nav ul.active {
    display: flex;
    max-height: calc(100vh - var(--header-height));
    overflow-y: auto;
  }
}

footer .container {
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  gap: 10px;
}

footer p, footer a { 
  font-size: 0.9em; 
}
  </style>
</head>
<body>

  <header>
    <div class="container">
      <h1>NasifyTech</h1>
      <nav>
        <ul id="nav-links">
          <li><a href="#home"><i class="fas fa-home"></i> 首頁</a></li>
          <li><a href="#about"><i class="fas fa-info-circle"></i> 關於我們</a></li>
          <li><a href="#services"><i class="fas fa-cogs"></i> 服務項目</a></li>
          <li><a href="#testimonials"><i class="fas fa-comments"></i> 客戶見證</a></li>
          <li><a href="member/index.html"><i class="fas fa-envelope"></i> 線上服務</a></li>
          <li><a href="https://www.oneztest.com"><i class="fas fa-envelope"></i> 1zTeSt</a></li>
          <li><a href="./about.html" target="_blank" rel="noopener noreferrer"><i class="fas fa-user"></i> 關於創辦人</a></li>
        </ul>
      </nav>
      <div class="menu-toggle" id="mobile-menu" aria-label="導航選單切換" aria-expanded="false" role="button" tabindex="0">
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
  </header>

  <section id="home" aria-labelledby="home-title">
    <div class="content animate__animated animate__fadeInUp" data-aos="fade-up">
      <h1 id="home-title" class="animate__animated animate__bounceIn" data-aos="bounce-in">納啟科技創新世紀</h1>
      <p class="animate__animated animate__fadeInUp" data-aos="fade-up" data-aos-delay="500">
        納啟科技致力於提供最專業的諮詢結果
      </p>
    </div>
  </section>

  <section id="about">
    <div class="container">
      <div class="section-title animate__animated animate__fadeInUp" data-aos="fade-up">
        <h2>關於我們</h2>
        <p>納啟科技的願景及發展</p>
      </div>
      <div class="timeline">
        <div class="timeline-item" data-aos="fade-right">
          <h3>2024年</h3>
          <p>納啟創辦人Nasir早已開始接取部分開發案和諮詢服務，奠定基礎。</p>
        </div>
        <div class="timeline-item" data-aos="fade-right" data-aos-delay="200">
          <h3>2025年</h3>
          <p>納啟科技正式成立，致力於協助資訊較為弱勢之族群。</p>
        </div>
        <div class="timeline-item" data-aos="fade-right" data-aos-delay="400">
          <h3>2026年</h3>
          <p>持續提供資訊諮詢服務及額外接下小專案</p>
        </div>
        <div class="timeline-item" data-aos="fade-right" data-aos-delay="600">
          <h3>2027年</h3>
          <p>與各學校及小企業進行合作，開發內部小系統。</p>
        </div>
      </div>
    </div>
  </section>

  <section id="services">
    <div class="container">
      <div class="section-title animate__animated animate__fadeInUp" data-aos="fade-up">
        <h2>服務項目</h2>
        <p>我們提供多樣化諮詢服務，滿足各式各樣之需求。</p>
      </div>
      <div class="services-container">
        <div class="services-description animate__animated animate__fadeInLeft" data-aos="fade-left">
          <h2>We Can Do It!</h2>
          <p>
            我們致力於協助較弱勢或經費有限的客戶，根據您的需求提供專業且可負擔之成本建製的系統建立與開發服務。
            如需更高階或專業的設計，建議您尋求專業設計師，以獲得最佳的設計效果。
          </p>
          <button class="btn-contact" onclick="window.location.href='https://www.facebook.com/profile.php?id=61571159491052'">聯絡我們</button>
          <div class="contact-info">
            <p>Email：it@nasify.org</p>
            <p>Instagram：hayashiiii__</p>
          </div>
        </div>
        <div class="services-list">
          <div class="service-category" data-aos="fade-up">
            <h3><i class="fas fa-user-headset"></i> 💁 專人服務</h3>
            <ul>
              <li>個人電腦維護與重灌</li>
              <li>辦公軟體安裝與設定</li>
              <li>客製化軟體安裝及設定</li>
              <li>電腦疑難排解與優化</li>
              <li>技術諮詢及學習</li>
            </ul>
          </div>
          <div class="service-category" data-aos="fade-up" data-aos-delay="200">
            <h3><i class="fas fa-building"></i> 💼 企業服務</h3>
            <ul>
              <li>網站設計與開發</li>
              <li>網頁代管與維護</li>
              <li>形象網頁設計建構</li>
              <li>電子商務平台設置</li>
              <li>客製化解決方案</li>
              <li>IT顧問服務</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="mission-statement animate__animated animate__fadeInUp" data-aos="fade-up">
      </div>
    </div>
  </section>

  <section id="news">
    <div class="container">
      <div class="section-title animate__animated animate__fadeInUp" data-aos="fade-up">
        <h2>最新消息</h2>
        <p>納啟科技的最新動態</p>
      </div>
      <div class="news-list">
        <div class="news-item" data-aos="fade-up">
          <h3><a href="source/cleanmacnasir.html">納啟科技開發小工具-CleanmacNasir</a></h3>
          <p>
            這是一個簡易型，同時也可將 MAC 空間清出超過 1GB 以上的免費最佳化工具，
            幫助您清除已經刪除陳年已久的 APP DATA。
          </p>
        </div>
        <div class="news-item" data-aos="fade-up">
          <h3><a href="#contact">納啟科技開發專利系統 - 班群班費管理系統</a></h3>
          <p>
            這是一個班群班費推播系統，只要一張試算表，有班費流通紀錄，班群就會自通通知！（獨家專利），需要者請填寫表單聯繫！
          </p>
        </div>
        <div class="project-item" data-aos="fade-up">
          <img src="https://i.imgur.com/ZIwciIT.jpeg" alt="草商測驗系統專案">
          <div class="project-content">
            <h3>TTVS國立草屯商工測驗系統</h3>
            <p>這是一個供國立學校作為學生測驗之系統，供教師作為平時測驗，和學生平時練習之用途。</p>
            <a href="#">已併入到新開發1zTeSt系統</a>
          </div>
        </div>
        <div class="project-item" data-aos="fade-up" data-aos-delay="200">
          <img src="https://i.imgur.com/8h9wrUj.jpeg" alt="北商大體育器材借還系統">
          <div class="project-content">
            <h3>NTUB國立台北商業大學 體育器材借閱系統</h3>
            <p>這是一個供國立台北商業大學體育器材方便借閱及後台管理之客製系統。</p>
            <a href="#">即將上線</a>
          </div>
        </div>
      </div>
    </div>
  </section>
  
  <section id="testimonials" class="section-testimonials">
    <div class="container">
      <div class="section-title animate__animated animate__fadeInUp" data-aos="fade-up">
        <h2>客戶見證</h2>
        <p>各式各樣的疑難雜症及反饋，我們聽見了，經評估後，我們會給予正確方向！</p>
      </div>
      <div class="testimonial-images">
        <img src="https://i.imgur.com/jTA6Nu3.jpeg" alt="客戶截圖一" data-aos="zoom-in">
        <img src="https://i.imgur.com/sS0lHcv.jpeg" alt="客戶截圖二" data-aos="zoom-in" data-aos-delay="100">
        <img src="https://i.imgur.com/rG9dd5d.jpeg" alt="客戶截圖三" data-aos="zoom-in" data-aos-delay="200">
        <img src="https://i.imgur.com/4n97pWq.jpeg" alt="客戶截圖四" data-aos="zoom-in" data-aos-delay="300">
        <img src="https://i.imgur.com/Nqv2vSt.jpeg" alt="客戶截圖五" data-aos="zoom-in" data-aos-delay="400">
        <img src="https://i.imgur.com/3HRqnsK.jpeg" alt="客戶截圖六" data-aos="zoom-in" data-aos-delay="500">
        <img src="https://i.imgur.com/OvFUoVM.jpeg" alt="客戶截圖七" data-aos="zoom-in" data-aos-delay="600">
        <img src="https://i.imgur.com/0pMKN1X.jpeg" alt="客戶截圖八" data-aos="zoom-in" data-aos-delay="700">
        <img src="https://i.imgur.com/0Uf0FQH.jpeg" alt="客戶截圖九" data-aos="zoom-in" data-aos-delay="800">
        <img src="https://i.imgur.com/vdiqMCA.jpeg" alt="客戶截圖十" data-aos="zoom-in" data-aos-delay="900">                
      </div>
    </div>
  </section>

  <footer>
    <div class="container">
      <p>&copy; Copyright 2025 NasifyTech 納啟科技</p>
      <p>
        <a href="https://www.instagram.com/hayashiiii__" target="_blank" aria-label="Instagram">
          <i class="fab fa-instagram"></i> Instagram
        </a> |
        <a href="https://www.facebook.com/profile.php?id=61571159491052" target="_blank" aria-label="LINE">
          <i class="fab fa-facebook"></i> Facebook
        </a>
      </p>
    </div>
  </footer>

  <script>
    AOS.init({
      duration: 800,
      easing: 'ease-in-out',
      once: true,
      mirror: false
    });
  </script>
  <script>
    window.addEventListener('scroll', () => {
        const header = document.querySelector('header');
        header.classList.toggle('scrolled', window.scrollY > 50);
    });
    
    document.querySelectorAll('nav ul li a[href^="#"]').forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            const targetId = this.getAttribute('href').substring(1);
            const target = document.getElementById(targetId);
            const headerOffset = 80;
            const elementPosition = target.getBoundingClientRect().top;
            const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
    
            window.scrollTo({
                top: offsetPosition,
                behavior: 'smooth'
            });
            if (navLinks.classList.contains('active')) {
                navLinks.classList.remove('active');
                menuToggle.classList.remove('active');
                menuToggle.setAttribute('aria-expanded', 'false');
            }
        });
    });
    
    const menuToggle = document.getElementById('mobile-menu');
    const navLinks = document.getElementById('nav-links');
    
    menuToggle.addEventListener('click', () => {
        const isActive = navLinks.classList.toggle('active');
        menuToggle.classList.toggle('active');
        menuToggle.setAttribute('aria-expanded', isActive);
    });
    
    
    function detectDevTools() {
        const threshold = 160;
        const isMobile = /Mobi|Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
    
        if (!isMobile) {
            const isDevToolsOpen = window.outerWidth - window.innerWidth > threshold || window.outerHeight - window.innerHeight > threshold;
    
            if (isDevToolsOpen) {
                window.location.href = 'about:blank';
            }
        }
    }
    
    document.addEventListener('keydown', (e) => {
        if (e.key === 'F12') {
            e.preventDefault();
            window.location.href = 'about:blank';
        }
    });
    document.addEventListener('keydown', (e) => {
        if ((e.ctrlKey || e.metaKey) && e.key === 's') {
            e.preventDefault();
        }
    });
    
    document.addEventListener('keydown', (e) => {
        if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key.toLowerCase() === 'i') {
            e.preventDefault();
            window.location.href = 'about:blank';
        }
    });
    
    setInterval(detectDevTools, 50);</script>

</body>
</html>
