oceanlabdesign.github.io/web_design.html at main · OceanLabDesign/oceanlabdesign.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
<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OceanLab 網頁設計服務</title>

    <!-- p5.js 函式庫 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.min.js"></script>

    <!-- 額外樣式 -->
    <style>
        /* 基本樣式重置 */
        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            padding: 0;
            overflow-x: hidden;
            background-color: #fdfdfd;
        }

        /* 頁尾樣式 */
        footer {
            text-align: center;
            margin-top: 60px;
            padding: 20px;
            font-family: 'Noto Serif TC', serif;
            color: #888;
            border-top: 1px solid #eee;
        }

        /* 回應式設計 */
        @media screen and (max-width: 1200px) {
            /* 平板直向顯示兩列 */
            #p5Canvas div[style*="grid-template-columns"] {
                grid-template-columns: repeat(2, 1fr) !important;
            }
        }

        @media screen and (max-width: 767px) {
            /* 手機顯示單列 */
            #p5Canvas div[style*="grid-template-columns"] {
                grid-template-columns: 1fr !important;
            }
        }

        /* 淡入動畫 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(15px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* 加載動畫 */
        .loading {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #fdfdfd;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            transition: opacity 0.5s;
        }

        .loading.hide {
            opacity: 0;
            pointer-events: none;
        }

        .spinner {
            width: 40px;
            height: 40px;
            border: 4px solid #ddd;
            border-top: 4px solid #333;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <!-- 加載動畫 -->
    <div class="loading">
        <div class="spinner"></div>
    </div>

    <!-- p5.js 畫布容器 - 改回直接載入本地檔案 -->
    <div id="p5Canvas"></div>

    <!-- 頁尾 -->
    <footer>
        <p>&copy; 2024 OceanLab Design. All rights reserved.</p>
        <p><a href="https://oceanlabdesign.github.io" style="color: inherit; text-decoration: none;">返回首頁</a></p>
    </footer>

    <!-- 直接引用本地 sketch_20250429_141737.js 檔案 -->
    <script src="sketch_20250429_141737.js"></script>

    <!-- 初始化 p5.js -->
    <script>
        // 等待頁面內容載入完成後隱藏加載動畫
        window.addEventListener('load', function() {
            setTimeout(function() {
                document.querySelector('.loading').classList.add('hide');
            }, 500);

            // 為各個卡片添加淡入動畫
            setTimeout(function() {
                const cards = document.querySelectorAll('[style*="border-radius: 8px"]');
                cards.forEach((card, index) => {
                    card.style.opacity = '0';
                    card.style.animation = `fadeIn 0.5s ease forwards ${index * 0.1}s`;
                });
            }, 800);
        });

        // 監聽窗口大小變化，調整佈局
        window.addEventListener('resize', function() {
            const container = document.querySelector('[style*="grid-template-columns"]');
            if (container) {
                if (window.innerWidth < 768) {
                    container.style.gridTemplateColumns = '1fr';
                } else if (window.innerWidth < 1200) {
                    container.style.gridTemplateColumns = 'repeat(2, 1fr)';
                } else {
                    container.style.gridTemplateColumns = 'repeat(3, 1fr)';
                }
            }
        });
    </script>
</body>
</html>