test/index.html at main · wcchung/test · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>孫中山逝世100週年 - AI 人工智慧歷史資料集</title>
    <!-- Google Fonts removed to improve loading time -->
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="landing-container">
        <!-- Video Background -->
        <video autoplay muted loop playsinline preload="auto" id="background-video" poster="images/KMT banner.png" webkit-playsinline="true" x5-playsinline="true" x5-video-player-fullscreen="true" x5-video-player-type="h5" x5-video-orientation="portrait">
            <source src="images/KMT banner.mp4" type="video/mp4">
            <!-- Fallback image for browsers that don't support video -->
            <img src="images/KMT banner.png" alt="Background" class="fallback-image">
            Your browser does not support the video tag.
        </video>

        <div class="landing-content">
            <div class="title-container">
                <h1 class="main-title">
                    <span class="white-text">孫中山逝世</span>
                    <span class="gold-text">100</span>
                    <span class="white-text">週年</span>
                </h1>
                <h2 class="subtitle white-text">開源 AI 人工智慧歷史資料集</h2>
            </div>

            <div class="powered-by">
                <p>Powered by</p>
                <div class="logo-container">
                    <a href="https://captureapp.xyz/" target="_blank">
                        <div class="capture-logo-container">
                            <img src="images/Capture_logo.webp" alt="Capture App" class="logo">
                        </div>
                    </a>
                    <a href="https://kmt.studio/" target="_blank">
                        <div class="kmt-logo-container">
                            <img src="images/kmtstudio-logotype-long.png" alt="KMT Studio" class="kmt-logo">
                        </div>
                    </a>
                </div>
            </div>

            <div class="buttons">
                <a href="gallery.html" target="_blank" rel="noopener noreferrer" class="btn enter-btn">Enter</a>
                <a href="#" class="learn-more" id="learnMoreBtn">Learn more</a>
            </div>
        </div>
    </div>

    <!-- Learn More Modal -->
    <div id="infoModal" class="modal">
        <div class="modal-content">
            <div class="modal-text">
                <p>中華民國國父暨中國國民黨總理孫中山墨跡典藏數位化專案，由國民黨黨史館提供墨跡及註解資料，由 KMT Studio x Capture 團隊合作，配合孫中山逝世一百週年系列活動，推動文件資料線上開源與典藏計畫。本專案旨在實現數位化建檔與長期保存，並逐步提供豐富的文史資料，供人工智慧及大語言模型等開發計畫使用，讓人工智慧得以學習與訓練，同時傳承孫文思想及其深厚的文化價值</p>

                <p class="credits">
                    典藏邀集：<a href="https://www.kmt.org.tw/" class="link">中國國民黨| KMT, Kuomintang</a><br>
                    主編：中華民國各界紀念國父百年誕辰籌備委員會<br>
                    AI 人工智慧資料集技術協力：<a href="https://captureapp.xyz/" class="link">Capture Team</a><br>
                    *本專案由中國國民黨黨史館支持
                </p>
            </div>
            <button id="closeModal" class="btn close-btn">OK</button>
        </div>
    </div>

    <script src="main.js"></script>
</body>
</html>