Hyper2374-Draw/index.html at main · codevenience/Hyper2374-Draw · 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
<!--
  @file
  Main web page for the web application.

  @copyright
  Copyright (c) 2025, Codevenience Organization. All rights reserved.<BR>

  SPDX-License-Identifier: BSD-3-Clause

  @par reference

-->

<!DOCTYPE html>
<html lang="en" class="h-100" data-bs-theme="auto">

<head class="h-100">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="">
  <meta name="author" content="Codevenience Organization">

  <title>抽獎系統</title>

  <!-- Bootstrap core CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-4Q6Gf2aSP4eDXB8Miphtr37CMZZQ5oXLH2yaXMJ2w8e2ZtHTl7GptT4jmndRuHDT" crossorigin="anonymous">

  <!-- Custom styles for this template -->
  <link href="./assets/css/style.css" rel="stylesheet">

</head>

<body class="d-flex flex-column h-100">

  <!-- Header -->
  <header>
    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">抽獎系統 <span class="badge rounded-pill bg-light text-dark">v1.0.0</span></a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarCollapse">
          <ul class="navbar-nav me-auto mb-2 mb-md-0">
            <li class="nav-item"><a class="nav-link active" aria-current="page" href="https://github.com/codevenience/Hyper2374-Draw">GitHub</a></li>
          </ul>
          <form class="d-flex">
            <button class="btn btn-danger" type="submit" id="draw">開始抽獎</button>
          </form>
        </div>
      </div>
    </nav>
  </header>

  <!-- Main Content -->
  <main class="flex-shrink-0">
    <div class="container">
      <div class="mb-3">
        <label class="form-label">活動標題</label>
        <input class="form-control form-control-lg" type="text" placeholder="小烈抽獎活動" aria-label="event title">
      </div>
      <div class="mt-3">
        <label class="form-label">進階設定</label>
        <div class="row mb-3">
          <div class="col">
            <div class="form-check form-switch">
              <input class="form-check-input" type="checkbox" value="" id="isRemoveElected" checked>
              <label class="form-check-label ms-2" for="isRemoveElected">移除中選人</label>
            </div>
          </div>
          <div class="col">
            <div class="form-check form-switch">
              <input class="form-check-input" type="checkbox" value="" id="isDuplicateElected">
              <label class="form-check-label ms-2" for="isRemoveElected">允許重複中獎</label>
            </div>
          </div>
          <div class="col">
            <!-- Placeholder for the column 3 -->
          </div>
          <div class="col">
            <!-- Placeholder for the column 4 -->
          </div>
        </div>
      </div>
      <div class="mt-3">
        <div class="row mb-3">
          <div class="col">
            <div class="mb-3">
              <label for="prizes" class="form-label">獎品名單（品名,數量）</label>
              <textarea class="form-control" id="prizes" rows="20"></textarea>
            </div>
          </div>
          <div class="col">
            <div class="mb-3">
              <label for="candidates" class="form-label">參加名單（一人一列）</label>
              <textarea class="form-control" id="candidates" rows="20"></textarea>
            </div>
          </div>
          <div class="col">
            <div class="mb-3">
              <label for="winners" class="form-label">中獎名單（唯讀）</label>
              <textarea class="form-control" id="winners" rows="20" readonly></textarea>
            </div>
          </div>
        </div>
      </div>
      <div class="mt-3">
        <div class="row mb-3">
          <label class="form-label">統計資訊</label>
          <div class="col">
            <h2>獎品數量 <span class="badge text-bg-primary">0</span>個</h2>
          </div>
          <div class="col">
            <h2>參加人數 <span class="badge text-bg-secondary">0</span>人</h2>
          </div>
          <div class="col">
            <h2>中獎機率 <span class="badge text-bg-success">0</span>％</h2>
          </div>
        </div>
      </div>
    </div>
  </main>

  <!-- Footer -->
  <footer class="footer mt-auto py-3 bg-body-tertiary">
    <div class="container">
      <span class="text-body-secondary">Copyright 2025 Codevenience Organization.</span>
    </div>
  </footer>

  <!-- Bootstrap core JavaScript -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-j1CDi7MgGQ12Z7Qab0qlWQ/Qqz24Gc6BM0thvEMVjHnfYGF0rmFCozFSxQBxwHKO"
    crossorigin="anonymous"></script>

  <!-- Custom JavaScript -->
  <script src="./assets/js/script.js"></script>

</body>

</html>