-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathrules.html
More file actions
150 lines (135 loc) · 6.37 KB
/
Copy pathrules.html
File metadata and controls
150 lines (135 loc) · 6.37 KB
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="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://cdnjs.cloudflare.com; style-src 'self' https://fonts.googleapis.com 'unsafe-inline'; font-src https://fonts.gstatic.com; img-src 'self' https://*.googleusercontent.com; connect-src 'self' https://docs.google.com https://script.google.com https://*.googleusercontent.com; frame-src https://drive.google.com https://www.youtube.com; object-src 'none'; base-uri 'self'; form-action 'self'" />
<link rel="icon" href="assets/images/favicon.svg" type="image/svg+xml" />
<title>Rules — Soul of Voice Club</title>
<meta name="description" content="Club rules and guidelines for Soul of Voice Club members." />
<!-- Open Graph -->
<meta property="og:title" content="Rules — Soul of Voice Club" />
<meta property="og:description" content="Club rules and guidelines for Soul of Voice Club members." />
<meta property="og:type" content="website" />
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,700;1,9..144,400&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&display=swap" rel="stylesheet" />
<!-- Styles -->
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/tokens.css" />
<link rel="stylesheet" href="css/main.css" />
<style>
.rules-list {
list-style: none;
display: flex;
flex-direction: column;
gap: var(--space-4);
max-width: 680px;
margin: 0 auto;
}
.rules-item {
display: flex;
align-items: flex-start;
gap: var(--space-5);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-card);
padding: var(--space-5) var(--space-6);
transition: transform 0.18s, box-shadow 0.18s;
}
.rules-item:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-hover);
}
.rules-num {
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 700;
color: var(--color-primary);
min-width: 2rem;
line-height: 1;
flex-shrink: 0;
}
.rules-text {
font-size: 1.05rem;
color: var(--color-text);
line-height: 1.55;
padding-top: 2px;
}
@media (prefers-reduced-motion: reduce) {
.rules-item:hover { transform: none; }
}
</style>
</head>
<body>
<noscript>
<div class="noscript-msg">This website requires JavaScript to load content from Google Sheets. Please enable JavaScript in your browser.</div>
</noscript>
<!-- Navigation -->
<nav class="nav">
<div class="container nav__inner">
<a href="index.html" class="nav__logo">🎙 <span>Soul of</span> Voice Club</a>
<div class="nav__links">
<a href="index.html" data-vi="Trang chủ" data-en="Home">Trang chủ</a>
<a href="members.html" data-vi="Thành viên" data-en="Members">Thành viên</a>
<a href="board.html" data-vi="Bảng thành tích" data-en="Progress Board">Bảng thành tích</a>
<a href="schedule.html" data-vi="Lịch hoạt động" data-en="Schedule">Lịch hoạt động</a>
<a href="finance.html" data-vi="Tài chính" data-en="Finance">Tài chính</a>
<a href="rules.html" class="active" data-vi="Nội quy" data-en="Rules">Nội quy</a>
<a href="practice.html" data-vi="Luyện tập" data-en="Practice">Luyện tập</a>
<a href="photos.html" data-vi="Ảnh & Video" data-en="Photos & Videos">Ảnh & Video</a>
</div>
<button class="lang-toggle" aria-label="Switch language" title="Switch to English">EN</button>
<button class="nav__hamburger" aria-label="Open navigation menu" aria-expanded="false" id="hamburger">
<span></span><span></span><span></span>
</button>
</div>
<div class="nav__mobile" id="mobile-menu" role="navigation" aria-label="Mobile navigation">
<a href="index.html" data-vi="Trang chủ" data-en="Home">Trang chủ</a>
<a href="members.html" data-vi="Thành viên" data-en="Members">Thành viên</a>
<a href="board.html" data-vi="Bảng thành tích" data-en="Progress Board">Bảng thành tích</a>
<a href="schedule.html" data-vi="Lịch hoạt động" data-en="Schedule">Lịch hoạt động</a>
<a href="finance.html" data-vi="Tài chính" data-en="Finance">Tài chính</a>
<a href="rules.html" class="active" data-vi="Nội quy" data-en="Rules">Nội quy</a>
<a href="practice.html" data-vi="Luyện tập" data-en="Practice">Luyện tập</a>
<a href="photos.html" data-vi="Ảnh & Video" data-en="Photos & Videos">Ảnh & Video</a>
</div>
</nav>
<main>
<div class="container">
<header class="page-header">
<h1 data-vi="Nội Quy" data-en="Club Rules">Nội Quy</h1>
<p data-vi="Những quy định giúp CLB hoạt động tốt." data-en="Rules that help the club thrive.">Những quy định giúp CLB hoạt động tốt.</p>
</header>
<div id="rules-root" role="status" aria-live="polite" aria-label="Club rules"></div>
</div>
</main>
<!-- Footer -->
<footer class="footer">
<div class="container">
<p class="footer__name">🎙 Soul of Voice Club</p>
<p data-vi="Từ Tâm hồn đến Câu chuyện — qua từng hơi thở." data-en="From Soul to Story — through every breath.">Từ Tâm hồn đến Câu chuyện — qua từng hơi thở.</p>
<div class="footer__links">
<a href="index.html">Home</a>
<a href="members.html">Members</a>
<a href="board.html">Progress Board</a>
<a href="schedule.html">Schedule</a>
<a href="finance.html">Finance</a>
<a href="rules.html">Rules</a>
<a href="practice.html">Practice</a>
<a href="photos.html">Photos & Videos</a>
</div>
<p class="footer__copy">© 2026 Soul of Voice Club</p>
</div>
</footer>
<!-- Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.4.1/papaparse.min.js"></script>
<script src="js/config.js"></script>
<script src="js/utils.js"></script>
<script src="js/rules.js"></script>
<script src="js/i18n.js"></script>
<script src="js/nav.js"></script>
</body>
</html>