-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathnotice.html
75 lines (54 loc) · 4.21 KB
/
notice.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Notice</title>
<script type="text/javascript" charset="utf-8" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body style="background-color: #fafbfc">
<div style="background-color: #225ae9;">
<a class="container position-absolute top-0 start-50 translate-middle-x mt-2" style="text-decoration: none; color: white;font-size: 25px;" href="index.html">←</a><br>
<div class="continaer position-absolute top-0 start-50 translate-middle-x mt-3 col-9">
<div class="container " style="float:right; width: 150px;">
<div class="" style="background-color: #1a1a1a; position:relative; top: -5px;">
<div class="rounded-circle" id="t-light" style="margin-left: 15px; float:left; width: 20px; height: 20px;"></div>
<h6 class="fw-bold" id="cng" style="margin-bottom: 0; margin-left: 40px; color:white;"></h6>
</div>
</div>
<h2 class="container fw-bold" id="beach_name" style="color: white; padding-bottom: 100px; padding-top: 30px;">서비스 이용 가이드</h2>
</div>
<h2 class="container fw-bold" id="beach_name" style="color: white; padding-bottom: 100px; padding-top: 30px;"></h2>
</div>
<section id="about" class="about">
<div class="container">
<div class="section-title">
<h2>What?</h2>
<p>저희 해수욕장 서비스는 해수욕장 이용자들의 편리성을 위해 만들어졌으며, 해수욕장과 주변 바다의 기상상황과 현재 이용자 수, 실제 이용자들의 후기를 만나볼 수 있습니다.</p>
<p>또한 이안류, 파고 등 안전에 위협이 되는 다양한 위험정보를 한곳에서 확인 가능하여
이용자들의 안전을 지킬수 있습니다. 또한 해수욕장 서비스로써 여름에만 사용이 가능한것이
아닌 4계절 내내 해수욕장 방문의 목적 뿐 아닌 낚시, 스포츠. 관광 등 다양한 목적에 사용이 가능한
서비스 입니다.</p>
</div>
<div class="section-title">
<h2>이안류?</h2>
<p>이안류란 해안에서 바다 방향으로 흐르는 해류로, 역파도, 역물살이라고도 합니다. 폭이 좁고, 물살이 매우 빠릅니다. 이러한 이안류는 해변에서 파도로 인해 멀어져 조난당 사고의 원인이 될수 있으므로, 이안류 경보가 내려진 바다는 피하시는것이 좋습니다.</p>
<p>저희 서비스는 이러한 위험 요소들을 미리 경보를 띄움으로써 이용자들이 더욱 안전한 해양 활동을
할 수 있도록 장려합니다.</p>
</div>
<div class="section-title">
<h2>혼잡도?</h2>
<p>저희 서비스는 해수욕장 이용자수를 신호등 형태로 나타내어 표시합니다.</p>
<p>아래와 같이 사회적 거리두기를 기준으로 하여 이용자들간의 거리두기가 가능한지에 따라
신호등의 색깔이 변경됩니다.</p>
<div class="row">
<div class="col-lg-6">
<ul>
<li><i class="bi bi-chevron-right"></i> <strong>빨간불:</strong> <span>사회적 거리두기 1m이상 불가능</span></li>
<li><i class="bi bi-chevron-right"></i> <strong>주황불:</strong> <span>사회적 거리두기 1m이상 가능</span></li>
<li><i class="bi bi-chevron-right"></i> </color><strong>초록불:</strong> <span>사회적 거리두기 2m이상 가능</span></li>
</ul>
</div>