-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathar.html
173 lines (155 loc) · 7.54 KB
/
ar.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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 문서의 문자 인코딩 및 화면 크기 설정 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>2023-2 UROP - ar</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">AR</h1>
<br>
<p class="col-md-12 fs-5">
AR을 이용한 스도쿠 게임 풀이를 개발합니다.
<br>
카메라로 읽은 스도쿠 게임을 인식하고 답을 찾는 기능을 만들고, 스도쿠 게임 보드 위에 답을 표시하도록 구현합니다.
<br>
AR 기능을 만들기 위해 아래의 개발 가이드를 따라 주세요.
</p>
<br>
<br>
<h3 class="fw-bold">🔗 AR 구조</h3>
<hr>
<p class="col-md-12 fs-5">
AR 기능의 구조는 다음 페이지를 참고해 주세요.
<br>
다음 페이지를 통해 코드 작성 단계와 코드에 대해 전반적인 이해를 얻을 수 있습니다.
<br>
python을 기준으로 작성된 코드 및 구현 방식을 학습합니다.
<br>
<a href="ar/structure.html" style="color: rgb(80, 164, 191);">Structure Explanation →</a>
</p>
<br>
<br>
<h3 class="fw-bold">🔎 AR 주요 요소 및 기능 </h3>
<hr>
<p class="col-md-12 fs-5">
AR 코드의 주요 구성 요소 및 기능은 다음 페이지를 참고해 주세요.
<br>
다음 페이지는 AR 기능 구현에 필요한 주요 기능 및 예제 코드를 포함하고 있습니다.
<br>
샘플 예제는 python으로 개발된 코드입니다. 개발에 어려움을 겪고 있다면 예제 코드를 참고해 보세요.
<br>
<a href="ar/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 () {
// Intro 페이지로 이동
document.getElementById("intro-link").addEventListener("click", function () {
window.location.href = "intro.html";
});
// 환경설정 페이지로 이동
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>