-
Notifications
You must be signed in to change notification settings - Fork 0
/
indexORI (1).html
236 lines (215 loc) · 10.8 KB
/
indexORI (1).html
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
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>個人作品集與學習平台</title>
<link id="mobileStyle" rel="stylesheet" href="css/mobileStyle.css">
<link id="body-main-stylesheet" rel="stylesheet" href="css/bodyMain.css">
<link id="welcome-featured-profile-highlight-stylesheet" rel="stylesheet" href="css/welcomeFeatured.css">
<link id="nav-stylesheet" rel="stylesheet" href="css/navStyles.css">
<link id="news-stylesheet" rel="stylesheet" href="css/newsStyles.css">
<link id="register-auth-modal-stylesheet" rel="stylesheet" href="css/registerModal.css">
<link id="card-display-stylesheet" rel="stylesheet" href="css/card.css">
<link id="footer-celebrate-btn-stylesheet" rel="stylesheet" href="css/footerStyles.css">
<link id="search-stylesheet" rel="stylesheet" href="css/search.css">
<script src="JS/main.js" defer></script>
<script src="JS/search.js" defer></script>
</head>
<body>
<!-- 懸浮視窗的 HTML 結構 -->
<div id="authModal" class="modal">
<div class="modalContent">
<span class="RScloseBtn" onclick="RScloseModal()">×</span>
<h2>welcome！</h2>
<div id="authForm">
<div id="loginForm">
<h3>好久不見！</h3>
<form>
<label for="loginEmail">電子郵件：</label>
<input type="email" id="loginEmail" name="loginEmail" required>
<label for="loginPassword">密碼：</label>
<input type="password" id="loginPassword" name="loginPassword" required>
<button type="submit" class="submitBtn">登入</button>
</form>
<p>還沒有帳號？ <button class="toggleFormBtn" onclick="showRegisterForm()">註冊</button></p>
</div>
<div id="registerForm" style="display:none;">
<h3>你好啊，新朋友！</h3>
<form>
<label for="registerEmail">電子郵件：</label>
<input type="email" id="registerEmail" name="registerEmail" required>
<label for="registerPassword">密碼：</label>
<input type="password" id="registerPassword" name="registerPassword" required>
<button type="submit" class="submitBtn">註冊</button>
</form>
<p>已有帳號？ <button class="toggleFormBtn" onclick="showLoginForm()">登入</button></p>
</div>
</div>
</div>
</div>
<!-- 向下箭頭提示色塊 -->
<div class="arrow-indicator">⏑</div>
<!-- 搜尋列 -->
<div class="search-container">
<input type="text" id="searchInput" placeholder="搜尋內容...">
<button id="searchButton">搜尋</button>
</div>
<div id="noResults" style="display: none; color: red;">
沒有找到結果
</div>
<div id="searchingNotification" class="notification">
<p>正在導向搜尋結果...</p>
</div>
<!-- 導航列 -->
<nav>
<img src="img\BACKBTN-01-01.png" alt="backBTN" class="backBTN">
<h1>主頁</h1>
<ul>
<li><a href="portfolio.html">過去作品</a></li>
<li><a href="LearningDiary.html">學習日誌</a></li>
<li><a href="viewport.html">學習資源推薦</a></li>
<li><a href="mini-games.html">迷你遊戲</a></li>
<li><a href="contact.html">聯絡</a></li>
<a href="index.html" class="home-button">
<img src="img\homepage.png" class="home-icon">
</a>
</ul>
<!-- 顯示懸浮視窗的按鈕 -->
<button id="openModalBtn" class="openModalBtn">註冊 | 登入</button>
</nav>
<!-- - 提供網站的主要導航連結
- 包含返回按鈕、標題和不同的頁面連結 -->
<main>
<section id="welcome">
<div class=" welcome-text searchable-content">
<h2 id="modal-title"></h2>
<p class="modal-text"></p>
<p>這裡是我紀錄關於近期作品、分享學習資源
<br>以及提供迷你遊戲的地方。如有任何需求或連繫，
<br>請<a href="#contact">聯繫我</a>或者參考資訊分頁
<!-- 慶祝按鈕及其特效 -->
<div class="celebrate-container searchable-content">
<div class="celebrate"></div>
<button id="celebrate-btn" class="celebrate-btn">🎉</button>
</div>
<div id="celebrate" class="celebrate"></div>
</p>
</div>
<!-- 歡迎區域 -->
<div class="welcome-image">
<img src="img/ME.jpg" alt="圓形圖片">
</div>
</section>
<section id="featured">
<!-- 精選展示區域 -->
<h2>精選展示</h2>
<div class="highlight">
<article class="searchable-content">
<h3>近期作品</h3>
<img src="img/PIC (10).png" alt="近期作品示例">
<p>最近完成的繪畫作品在這...</p>
<a href="portfolio.html">查看更多作品</a>
</article>
<article class="searchable-content">
<h3>最新學習資源</h3>
<img src="img\LearnBG.png" alt="最新資源示例">
<p>這是新發現的優質學習資源...</p>
<a href="viewport.html">探索更多資源</a>
</article>
<article class="searchable-content">
<h3>迷你遊戲</h3>
<img src="img/inasnake.png" alt="迷你遊戲截圖">
<p>這是一個我最近做的迷你遊戲...</p>
<a href="#games">玩玩看其他遊戲</a>
</article>
<article class="searchable-content">
<h3>新消息</h3>
<img src="img\MPimg.png" alt="個人日誌區">
<p>也想一起學習新技能嗎？...</p>
<a href="LearningDiary.html">查看個人日記</a>
</article>
</div>
<!-- - 顯示幾個精選項目，每個項目包含標題、圖片、描述及連結
- 用於展示網站的主要內容和更新信息 -->
</section>
<!-- 關於我 -->
<section id="about">
<div class="card-container searchable-content">
<div class="card active" id="card-1">
<div class="card-content">
<div class="card-image">
<img src="img/WaitUpdate.png" alt="Image 1">
</div>
<div class="card-text">
<h2>梁之泰</h2>
<p>出生於台中，23歲。</p>
</div>
</div>
</div>
<div class="card inactive searchable-content" id="card-2">
<div class="card-content">
<div class="card-image">
<img src="img/WaitUpdate.png" alt="Image 2">
</div>
<div class="card-text">
<h2>學歷與經歷</h2>
<p>文藻外語大學數位設計系，專注於平面設計與數位藝術。</p>
<p>曾在上捷廣告擔任數位行銷與網站編輯，負責WIX與WordPress平台的內容更新與管理。<br>過去沒有coding與相關經驗。</p>
</div>
</div>
</div>
<div class="card inactive searchable-content" id="card-3">
<div class="card-content">
<div class="card-image">
<img src="img/WaitUpdate.png" alt="Image 3">
</div>
<div class="card-text">
<h2>專業技能</h2>
<p>音訊編輯：擁有兩年Podcast製作經驗，熟悉音訊編輯與影片剪輯。</p>
<p>遊戲開發：經驗豐富於迷你遊戲的開發，掌握Unity、C#等技術，具備遊戲上架經驗。</p>
<p>網頁設計：HTML、CSS、JavaScript的基礎知識，能夠進行基礎網頁設計與開發。</p>
<p>平面設計：熟悉Adobe Photoshop與Illustrator，具備平面設計與文案撰寫能力。</p>
</div>
</div>
</div>
<div class="card inactive searchable-content" id="card-4">
<div class="card-content">
<div class="card-image">
<img src="img/WaitUpdate.png" alt="Image 4">
</div>
<div class="card-text">
<h2>額外經歷</h2>
<p>參與多次小型遊戲製作，擁有多人協作與獨立開發經驗。</p>
<p>曾經經營個人Podcast一年，參與各種活動並與台北遊戲電玩展合作。</p>
</div>
</div>
</div>
<div class="nav-buttons searchable-content">
<button class="nav-button" id="prev-button"></button>
<button class="nav-button" id="next-button"></button>
</div>
</div>
</section>
<!-- - 顯示個人卡片，每張卡片包含圖片和文本
- nav-buttons 用於切換顯示的卡片 -->
<!-- NEWS -->
<section id="news" class="searchable-content">
<h2>What's New</h2>
<p>1. 2024年8月17日學習紀錄：個人網站創立</p>
<a href="MainPage.html">查看更多</a>
<p>2. 2024年8月16日學習紀錄：JavaScript基礎教學if-else與迴圈</p>
<a href="MainPage.html">查看更多</a>
<p>教育資源推薦：w3school</p>
<a href="https://www.w3school.com.cn/">前往</a>
<p>教育資源推薦：MDN Web Docs</p>
<a href="https://developer.mozilla.org/zh-TW/">前往</a>
<p>教育資源推薦：Codecademy</p>
<a href="https://www.codecademy.com/">前往</a>
</section>
</main>
<footer class="footerBG searchable-content">
<p class="footer-text">© 2024 版權所有.</p>
</footer>
</body>
</html>