PaperFolder.github.io/index.html at main · liufc2020/PaperFolder.github.io · 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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Open Source Project</title>
    <!-- 引入Tailwind CSS（可选，用于快速美化） -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome（可选，用于图标） -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 引入Chart.js（用于图表） -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <link rel="stylesheet" href="css/style.css">
</head>
<body class="bg-gray-50">
    <!-- 导航栏 -->
    <nav class="bg-blue-600 text-white p-4">
        <div class="container mx-auto flex justify-between items-center">
            <h1 class="text-2xl font-bold">My Project</h1>
            <div>
                <a href="https://github.com/your-username/your-repo" class="mr-4" target="_blank">
                    <i class="fa fa-github text-xl"></i> GitHub
                </a>
                <a href="#features">Features</a>
                <a href="#stats" class="ml-4">Stats</a>
            </div>
        </div>
    </nav>

    <!-- 项目介绍 -->
    <section class="container mx-auto p-8">
        <div class="flex flex-col md:flex-row items-center">
            <div class="md:w-1/2 mb-8 md:mb-0">
                <h2 class="text-3xl font-bold mb-4">About the Project</h2>
                <p class="text-gray-700 mb-4">
                    This is an open-source tool for [项目功能描述]. It helps users [解决的问题] with high performance and ease of use.
                </p>
                <a href="https://github.com/your-username/your-repo" class="bg-blue-600 text-white px-6 py-2 rounded-md inline-block">
                    Get Started <i class="fa fa-arrow-right ml-2"></i>
                </a>
            </div>
            <div class="md:w-1/2 md:pl-8">
                <img src="assets/project-screenshot.png" alt="Project Screenshot" class="rounded-lg shadow-lg w-full">
            </div>
        </div>
    </section>

    <!-- 功能特点 -->
    <section id="features" class="bg-white py-12">
        <div class="container mx-auto px-8">
            <h2 class="text-3xl font-bold mb-8 text-center">Key Features</h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div class="border border-gray-200 rounded-lg p-6 shadow-sm hover:shadow-md transition">
                    <i class="fa fa-bolt text-blue-500 text-3xl mb-4"></i>
                    <h3 class="text-xl font-semibold mb-2">High Performance</h3>
                    <p>Optimized for speed, handling 10k+ operations per second.</p>
                </div>
                <div class="border border-gray-200 rounded-lg p-6 shadow-sm hover:shadow-md transition">
                    <i class="fa fa-code-fork text-blue-500 text-3xl mb-4"></i>
                    <h3 class="text-xl font-semibold mb-2">Easy Integration</h3>
                    <p>Works with major frameworks like React, Vue, and Angular.</p>
                </div>
                <div class="border border-gray-200 rounded-lg p-6 shadow-sm hover:shadow-md transition">
                    <i class="fa fa-shield text-blue-500 text-3xl mb-4"></i>
                    <h3 class="text-xl font-semibold mb-2">Secure</h3>
                    <p>Built-in encryption and compliance with data protection standards.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 数据图表 -->
    <section id="stats" class="py-12">
        <div class="container mx-auto px-8">
            <h2 class="text-3xl font-bold mb-8 text-center">Project Stats</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <!-- 下载量趋势图 -->
                <div class="bg-white p-6 rounded-lg shadow-md">
                    <h3 class="text-xl font-semibold mb-4">Downloads Trend</h3>
                    <canvas id="downloadsChart" height="250"></canvas>
                </div>
                <!-- 功能使用占比图 -->
                <div class="bg-white p-6 rounded-lg shadow-md">
                    <h3 class="text-xl font-semibold mb-4">Feature Usage</h3>
                    <canvas id="featuresChart" height="250"></canvas>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="bg-gray-800 text-white py-8">
        <div class="container mx-auto px-8 text-center">
            <p>© 2024 My Project. Hosted on GitHub Pages.</p>
        </div>
    </footer>

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