-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
150 lines (128 loc) · 7.36 KB
/
index.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
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>選手道歉表產生器</title>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-QGT30Q251N"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-QGT30Q251N');
</script>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container mt-4">
<div class="row">
<!-- Editor Section -->
<div class="col-12 col-lg-6 editor-section p-4 mb-lg-4">
<h3 class="mb-4">選手道歉表產生器</h3>
<div class="mb-4">
<h5 for="uploadPhoto" class="form-label">上傳選手照片</h5>
<input type="file" id="uploadPhoto" class="form-control">
</div>
<div class="mb-4">
<h5 for="playerName" class="form-label">選手名字</h5>
<input type="text" id="playerName" class="form-control custom-input" placeholder="e.g. 山本由伸">
</div>
<div class="mb-4">
<h5 for="apologizer" class="form-label">道歉人</h5>
<input type="text" id="apologizer" class="form-control custom-input" placeholder="道歉人名字">
</div>
<div class="mb-4">
<h5 for="apologyDate" class="form-label">日期</h5>
<input type="date" id="apologyDate" class="form-control custom-input">
</div>
<div class="mb-4">
<h5 for="promise" class="form-label">保證</h5>
<input type="text" id="promise" class="form-control custom-input" value="未來會尊重他身為三次洋聯 MVP 的生涯成就"
placeholder="e.g. 未來會尊重他身為三次洋聯 MVP 的生涯成就">
</div>
<div class="mb-4">
<div class="d-flex justify-content-between align-items-center mb-3">
<h5 class="form-label mb-0">道歉原因</h5>
<div class="btn-group" role="group" aria-label="Layout toggle">
<input type="radio" class="btn-check" name="layoutBtn" id="oneColumnBtn" value="1">
<label class="btn btn-outline-secondary" for="oneColumnBtn" title="Single Column">
<i class="fas fa-list"></i>
</label>
<input type="radio" class="btn-check" name="layoutBtn" id="twoColumnBtn" value="2" checked>
<label class="btn btn-outline-secondary" for="twoColumnBtn" title="Two Columns">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon" fill="currentColor" >
<path d="M14 20.4V14.6C14 14.2686 14.2686 14 14.6 14H20.4C20.7314 14 21 14.2686 21 14.6V20.4C21 20.7314 20.7314 21 20.4 21H14.6C14.2686 21 14 20.7314 14 20.4Z"/>
<path d="M3 20.4V14.6C3 14.2686 3.26863 14 3.6 14H9.4C9.73137 14 10 14.2686 10 14.6V20.4C10 20.7314 9.73137 21 9.4 21H3.6C3.26863 21 3 20.7314 3 20.4Z"/>
<path d="M14 9.4V3.6C14 3.26863 14.2686 3 14.6 3H20.4C20.7314 3 21 3.26863 21 3.6V9.4C21 9.73137 20.7314 10 20.4 10H14.6C14.2686 10 14 9.73137 14 9.4Z"/>
<path d="M3 9.4V3.6C3 3.26863 3.26863 3 3.6 3H9.4C9.73137 3 10 3.26863 10 3.6V9.4C10 9.73137 9.73137 10 9.4 10H3.6C3.26863 10 3 9.73137 3 9.4Z"/>
</svg>
</label>
</div>
</div>
<button class="btn w-100" id="addCheckbox">新增選項</button>
<div id="checkboxContainer" class="checkbox-grid two-columns"></div>
</div>
</div>
<!-- Preview Section -->
<div class="col-12 col-lg-6 text-center preview-section mt-5">
<h3>預覽</h3>
<canvas id="memeCanvas" width="640" height="800"></canvas>
<div class="text-center my-4">
<button class="download-btn" id="downloadMeme">下載圖片</button>
</div>
</div>
</div>
</div>
<footer class="bg-dark text-light py-4">
<div class="container">
<div class="row">
<div class="col-12 text-center justify-content-center align-self-center">
<ul class="list-inline">
<li class="list-inline-item mx-2">
<a href="#" class="text-light" data-bs-toggle="modal" data-bs-target="#noteModal" id="noteLink">Note</a>
</li>
<li class="list-inline-item mx-2">
<a href="https://imgur.com/M2OMX6f" class="text-light" target="_blank" id="demoLink">Demo</a>
</li>
<li class="list-inline-item mx-2">
<a href="https://github.com/as10896/apology-form-generator" class="text-light" target="_blank" id="codeLink">Code</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
<div class="modal fade" id="noteModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-body position-relative">
<button type="button" class="btn-close btn-close-white position-absolute" data-bs-dismiss="modal" aria-label="Close"></button>
<p>Hi 大家～</p>
<p>我是這個產生器的作者 Charles</p>
<p>這是我為了測試 ChatGPT 的 coding 能力，純粹為了好玩而開發的一個工具。裡面的所有程式碼皆是由 ChatGPT 所生成，在開發過程當中我基本上只負責微調 layout，以及修正一些細微的 bug。</p>
<p>現階段，這個工具仍有一些 canvas layout 的問題我沒有處理（比方說 user 所輸入的文字過長時會超出 canvas，或與其它文字重疊）。</p>
<p>而由於我已經有一段時間沒有參與前端方面的開發，修正這些問題可能會花費超過我所願意投入的時間，所以我也並不打算將這些問題修正，這點還請大家見諒。</p>
<p>如果你也是開發者，且有興趣改進這份 code，歡迎到<a href="https://github.com/as10896/apology-form-generator" target="_blank" id="githubNoteLink">我的 repo</a> 裡提交 PR！</p>
<p>---</p>
<p>最後，其實上面講的都是表面原因啦！之所以會開發這個東西，我有發一篇 <a href="https://www.ptt.cc/bbs/BaseballXXXX/M.1728961890.A.1CE.html" target="_blank" id="pttNoteLink">PTT 文章</a>，想知道的話可以去看一下XD</p>
</div>
<div>
<p class="text-end">2024.10.16</p>
</div>
</div>
</div>
</div>
<!-- Bootstrap JS and dependencies -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<!-- Sortable.js for drag-and-drop -->
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.14.0/Sortable.min.js"></script>
<!-- Custom Script -->
<script src="script.js"></script>
</body>
</html>