-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathranking.html
169 lines (151 loc) · 7.33 KB
/
ranking.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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 문서의 문자 인코딩 및 화면 크기 설정 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>RANKING</title>
<!-- Bootstrap CSS 가져오기 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>
<body>
<!-- 네비게이션 바 설정 -->
<nav class="navbar navbar-expand-lg navbar-dark" style="background-color: rgb(0,0,0);">
<div class="container-fluid">
<!-- UROP 로고 링크 -->
<a class="navbar-brand" href="index.html">UROP</a>
<!-- 네비게이션 바 버튼 설정 -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- 네비게이션 바 아이템 목록 설정 -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<!-- 개발 가이드 드롭다운 메뉴 -->
<li class="nav-item dropdown">
<a id="guide-link" class="nav-link dropdown-toggle" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
개발 가이드
</a>
<!-- 개발 가이드 하위 메뉴 -->
<ul class="dropdown-menu">
<li><a id="environment-link" class="dropdown-item">환경설정</a></li>
<li><a id="client-link" class="dropdown-item">클라이언트</a></li>
<li><a id="server-link" class="dropdown-item">서버</a></li>
<li><a id="algorithm-link" class="dropdown-item">알고리즘</a></li>
</ul>
</li>
<!-- 앱 설명 드롭다운 메뉴 -->
<li class="nav-item dropdown">
<a id="description-link" class="nav-link dropdown-toggle" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
앱 설명
</a>
<!-- 앱 설명 하위 메뉴 -->
<ul class="dropdown-menu">
<li><a id="build-link" class="dropdown-item">앱 빌드 방법</a></li>
<li><a id="app-link" class="dropdown-item">앱 구동 모습 설명</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="p-5 mb-4 bg-light rounded-3">
<div class="container-fluid py-5">
<h1 class="fw-bold">RANKING</h1>
<br>
<p class="col-md-8 fs-5">
사용자가 페이지에 접근하면 다른 사용자들이 포함된 랭킹을 확인할 수 있습니다.
<br>
서버에서 플레이 시간에 따른 랭킹 정보를 가져올 수 있는 간단한 랭킹 페이지를 생성합니다.
<br>
랭킹 페이지를 만들기 위해 아래의 개발 가이드를 따라 주세요.
</p>
<br>
<br>
<h3 class="fw-bold">🔗 RANKING 구조</h3>
<hr>
<p class="col-md-12 fs-5">
랭킹 페이지의 구조는 다음 페이지를 참고해 주세요.
<br>
다음 페이지를 통해 코드 작성 단계와 코드에 대해 전반적인 이해를 얻을 수 있습니다.
<br>
Flutter를 활용하여 Dart를 기준으로 작성된 코드 및 구현 방식을 학습하여 다른 언어 및 프레임워크로 개발이 가능합니다.
<br>
<a href="ranking/structure.html" style="color: rgb(80, 164, 191);">Structure Explanation →</a>
</p>
<br>
<br>
<h3 class="fw-bold">🔎 RANKING 주요 요소 및 기능 </h3>
<hr>
<p class="col-md-12 fs-5">
랭킹 페이지의 주요 구성 요소 및 기능은 다음 페이지를 참고해 주세요.
<br>
다음 페이지는 랭킹 페이지에 필요한 주요 기능 및 예제 코드를 포함하고 있습니다.
<br>
샘플 예제는 Flutter를 활용하여 개발된 Dart 코드입니다. 개발에 어려움을 겪고 있다면 예제 코드를 참고해 보세요.
<br>
<a href="ranking/function.html" style="color: rgb(80, 164, 191);">Main Function →</a>
</p>
</div>
</div>
<!-- 페이지 내 스타일 설정 -->
<style>
.navbar-brand {
font-size: 20px;
font-weight: bold;
margin-left: 10px;
}
.nav-item {
font-size: 20px;
font-weight: bold;
margin-left: 10px;
}
.form-control {
font-weight: bold;
font-size: 20px;
}
.form-label {
font-weight: bold;
font-size: 20px;
}
</style>
<!-- Bootstrap JavaScript 가져오기 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
crossorigin="anonymous"></script>
<!-- 페이지 로딩 시 실행될 스크립트 -->
<script>
document.addEventListener("DOMContentLoaded", function () {
// 환경설정 페이지로 이동
document.getElementById("environment-link").addEventListener("click", function () {
window.location.href = "environment.html";
});
// 클라이언트 페이지로 이동
document.getElementById("client-link").addEventListener("click", function () {
window.location.href = "client.html";
});
// 서버 페이지로 이동
document.getElementById("server-link").addEventListener("click", function () {
window.location.href = "server.html";
});
// 알고리즘 페이지로 이동
document.getElementById("algorithm-link").addEventListener("click", function () {
window.location.href = "algorithm.html";
});
// 앱 빌드 방법 페이지로 이동
document.getElementById("build-link").addEventListener("click", function () {
window.location.href = "build.html";
});
// 앱 구동 모습 설명 페이지로 이동
document.getElementById("app-link").addEventListener("click", function () {
window.location.href = "app.html";
});
});
</script>
</body>
</html>