alanfox2000software.github.io/index.html at main · alanfox2000software/alanfox2000software.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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>alanFox2000 Software</title>
    <style>
        :root {
            --bg: #0f0f0f;
            --accent: #00ccff;
            --text: #e0e0e0;
            --card-bg: #161616;
        }
        body {
            margin: 0;
            font-family: 'Segoe UI', system-ui, sans-serif;
            background: var(--bg);
            color: var(--text);
            line-height: 1.6;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }
        header {
            background: linear-gradient(135deg, #161623, #16213e);
            padding: 2.5rem 1rem;
            text-align: center;
        }
        .tagline {
            font-size: 1.6rem;
            font-weight: 600;
            color: white;
            margin: 0;
            letter-spacing: -0.5px;
        }
        .tagline span {
            color: var(--accent);
        }
        .container {
            max-width: 1000px;
            margin: 0 auto;
            padding: 3rem 1.5rem;
            flex: 1;
        }
        .projects-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 1.5rem;
        }
        .card {
            background: var(--card-bg);
            border-radius: 8px;
            padding: 1.8rem;
            border: 1px solid #222;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
        }
        .card:hover {
            transform: translateY(-4px);
            border-color: var(--accent);
            box-shadow: 0 8px 20px rgba(0, 204, 255, 0.1);
        }
        .card h3 {
            margin: 0 0 0.5rem 0;
            color: white;
            font-size: 1.3rem;
        }
        .card p {
            color: #999;
            font-size: 0.95rem;
            margin: 0 0 1.5rem 0;
        }
        .btn {
            display: inline-block;
            color: var(--accent);
            text-decoration: none;
            font-weight: bold;
            font-size: 0.95rem;
            transition: color 0.2s;
        }
        .card:hover .btn {
            color: #00eeff;
        }
        footer {
            text-align: center;
            padding: 2rem;
            background: #0a0a0a;
            color: #555;
            font-size: 0.85rem;
            border-top: 1px solid #111;
        }
        footer a {
            color: #666;
            text-decoration: none;
            margin-left: 8px;
        }
        footer a:hover {
            color: var(--accent);
        }
    </style>
</head>
<body>

    <!-- 頂部精簡橫幅 -->
    <header>
        <p class="tagline">alanfox2000<span>software</span></p>
    </header>

    <div class="container">
        <!-- 極簡專案卡片流 -->
        <div class="projects-grid">

            <!-- 1. eqweb 地震監測 -->
            <div class="card">
                <div>
                    <h3>🌍 eqweb</h3>
                    <p>Real-time global earthquake monitor integrating data from 25 international agencies with spider-web multi-station visualization.</p>
                </div>
                <a href="https://alanfox2000software.github.io/eqweb/" class="btn" target="_blank">Launch Monitor →</a>
            </div>

            <!-- 2. BibleCake 聖經閱讀器 -->
            <div class="card">
                <div>
                    <h3>📖 BibleCake</h3>
                    <p>A beautiful, clean, and lightweight online Bible reader designed for distractions-free daily scriptures reading.</p>
                </div>
                <a href="https://alanfox2000software.github.io/biblecake/" class="btn" target="_blank">Open BibleCake →</a>
            </div>

            <!-- 3. YTCustomPlayer 多重播放 -->
            <div class="card">
                <div>
                    <h3>📺 YTCustomPlayer</h3>
                    <p>Lightweight player to watch and control multiple YouTube videos simultaneously. Perfect for reaction sync and side-by-side comparison.</p>
                </div>
                <a href="https://alanfox2000software.github.io/ytcustomplayer/" class="btn" target="_blank">Try Custom Player →</a>
            </div>

            <!-- 4. 部落格 -->
            <div class="card">
                <div>
                    <h3>✍️ PureSoftApps</h3>
                    <p>Technical blog sharing windows audio enhancements, APO driver modifications, and standalone utility repacks.</p>
                </div>
                <a href="https://puresoftapps.blogspot.com/" class="btn" target="_blank">Visit Blog →</a>
            </div>

        </div>
    </div>

    <!-- 簡潔頁尾 -->
    <footer>
        <span>&copy; 2026 alanfox2000software</span>
        <a href="https://github.com/alanfox2000software" target="_blank">GitHub</a>
    </footer>

</body>
</html>