-
Notifications
You must be signed in to change notification settings - Fork 0
/
intro.html
166 lines (160 loc) · 10.4 KB
/
intro.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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WELLFARE</title>
<link rel="stylesheet" href="css/intro.css" />
<script src="/js/intro.js">
</script>
<!-- 외부 폰트를 사용하기 위한 url -->
<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=Gowun+Dodum&display=swap" rel="stylesheet">
</head>
<body>
<!-- 메인 페이지 -->
<div id = "main">
<!-- 애니메이션이 적용된 로고 이미지와 텍스트로 구현 -->
<span class = "logo_efct" id="logo" style="top: 15%; left: 35%; ">
<img src="img/logo.png" width="400", height="400">
</span>
<span class="text_efct" style="color: white; font-size: 20px; position: absolute; top: 60%; left: 39%;">
Busan Welfare Program
</span>
<span class="text_efct" style="color: white; font-size: 20px; position: absolute; top: 63%; left: 39%;">
Intergration Service
</span>
<span class="text_efct" style="color: white; font-size: 20px; position: absolute; top: 66%; left: 39%;">
by Team5
</span>
</div>
<!-- 소개 탭의 내용 -->
<div id = "introduce" style="display: none;">
<!-- 애니메이션이 적용된 로고 이미지와 텍스트 그리고 테이블로 구성 -->
<div id = "box" style="width: 50%; height: 70%; top: 15%"></div>
<div id = "box" style="width: 50%; height: 70%; left: 50%; top: 15%; background-color: white;"></div>
<span id="logo" class="logo_efct" style="top: 5%; left: 10%;">
<img src="img/logo.png" width="400", height="400">
</span>
<span class="text_efct2" id="intro_exp" style="top: 50%; left: 10%;">
"WELLFARE"는 부산시의 복지관에서 운영하는
</span>
<span class="text_efct2" id="intro_exp" style="top: 53%; left: 10%;">
복지 프로그램에 대한 정보를 제공합니다.
</span>
<span class="text_efct2" id="intro_exp" style="top: 59%; left: 10%;">
사용자는 모든 복지 프로그램에 대하여 검색 및
</span>
<span class="text_efct2" id="intro_exp" style="top: 62%; left: 10%;">
비교가 가능하고 자신에게 필요한 프로그램을
</span>
<span class="text_efct2" id="intro_exp" style="top: 65%; left: 10%;">
선택하여 참여할 수 있습니다.
</span>
<span class="text_efct2" id="intro_exp" style="top: 71%; left: 10%;">
공영 주차장 정보, 키즈카페, 노인 사고 다발 구역 등
</span>
<span class="text_efct2" id="intro_exp" style="top: 74%; left: 10%;">
사용자에게 부가적인 정보를 제공하여 복지 프로그램의
</span>
<span class="text_efct2" id="intro_exp" style="top: 77%; left: 10%;">
참여에 있어 편리하도록 서비스를 설계하였습니다.
</span>
<p id = "lst_title" style="font-size: 25px; position: absolute; top: 15%; left: 70%;">
등록된 복지관
</p>
<p style="font-size: 20px; position: absolute; top: 24%; left: 51%;">
복지관명
</p>
<p style="font-size: 20px; position: absolute; top: 24%; left: 72%;">
프로그램 수
</p>
<p style="font-size: 20px; position: absolute; top: 24%; left: 84%;">
전화번호
</p>
<!-- 테이블에는 파싱한 복지관 데이터가 표로 표현된다. -->
<div style="position: absolute; width: 50%; height: 50%; top: 30%; left: 50%; overflow:auto;">
<table id="center_lst" style="position: absolute; padding: 20px;" width = "100%">
<colgroup>
<col style="width:50%">
<col style="width:20%">
<col style="width:30%">
</colgroup>
</table>
</div>
</div>
<!-- 사용법 탭의 내용 -->
<div id = "manual" style="display: none;">
<!-- 중요 기능의 사용법을 설명 -->
<div id = "box" style="width: 40%; height: 80%; left: 5%; top: 15%; border-radius: 10px; background-color: white;"></div>
<div id = "box" style="width: 40%; height: 80%; left: 55%; top: 15%; border-radius: 10px; background-color: white;" ></div>
<span id="intro_exp" style="top: 17%; left: 22.5%; font-size: 25px;">
탐색하기
</span>
<span id="intro_exp" style="top: 25%; left: 7.5%; font-size: 17px; width: 35%;">
현재 위치 등록: 현재 위치를 등록하여 거리 확인에 사용될 수 있습니다. 프로그램을 운영하는 복지관이 현재 위치로부터 얼마나 떨어져 있는지 확인할 수 있습니다.
</span>
<span id="intro_exp" style="top: 38%; left: 7.5%; font-size: 17px; width: 35%;">
프로그램 검색: 검색을 통하여 연결된 부산시의 복지관에서 운영중인 프로그램을 확인할 수 있습니다. 현재 50군데의 복지관과 연결되어져 있습니다.
</span>
<span id="intro_exp" style="top: 48%; left: 7.5%; font-size: 17px; width: 35%;">
복지관: 복지관별 운영중인 프로그램을 확인할 수 있습니다. 해당 복지관 근처의 주차장과 키즈카페의 정보를 확인할 수 있습니다.
</span>
<span id="intro_exp" style="top: 58%; left: 7.5%; font-size: 17px; width: 35%;">
필터링: 무료 강의, 관심 목록, 거리순, 가격순등 다양한 필터를 제공합니다. 수 많은 프로그램들 중에서 필터를 통하여 사용자의 프로그램 선택을 도와드립니다.
</span>
<span id="intro_exp" style="top: 70%; left: 7.5%; font-size: 17px; width: 35%;">
부가 서비스: 근처의 주차장, 키즈카페에 관한 정보를 얻을 수 있습니다. 복지관 주차장을 이용할 수 없거나 아이를 맡길 곳이 필요한 상황에 도움을 드립니다.
</span>
<span id="intro_exp" style="top: 82%; left: 7.5%; font-size: 17px; width: 35%;">
경로 탐색: 카카오맵을 통한 경로 탐색 서비스를 연결해드립니다. 경로를 탐색하여 경로와 이동 시간을 확인할 수 있습니다.
</span>
<span id="intro_exp" style="top: 17%; left: 72.5%; font-size: 25px;">
프로그램
</span>
<span id="intro_exp" style="top: 25%; left: 57.5%; font-size: 17px; width: 35%;">
2021년 기준으로 등록된 부산시의 복지관에서 1000개가 넘는 프로그램이 운영되었습니다.
이런 수 많은 프로그램들 사이에서 어떤 프로그램을 선택하는지에 대한 어려움을 느끼는 분들도 존재하실것입니다.
그런분들을 위한 "타겟 클라우드 차트"를 준비하였습니다.
</span>
<span id="intro_exp" style="top: 42.5%; left: 57.5%; font-size: 17px; width: 35%;">
타겟 클라우드 차트는 프로그램의 타겟층을 분석하여 이를 태그화하여 클라우드 차트로 나타낸것입니다.
개설되는 프로그램은 해당 프로그램을 이용하는 타겟층을 고려하고 개설됩니다. 이러한 타겟층은 프로그램의 수 만큼 다양하게 분포됩니다.
따라서 범주화시키기에는 너무 세부적이므로 클라우드 차트를 통해서 직관적으로 보실 수 있도록 하였습니다.
</span>
<span id="intro_exp" style="top: 62.5%; left: 57.5%; font-size: 17px; width: 35%;">
클라우드 차트에는 타겟 태그가 표시됩니다. 해당되는 타겟 태그를
선택하신 후 선택한 타겟을 대상으로 개설된 프로그램들을 확인하실 수 있습니다. 또한, 지도와 바로 연결되어 복지관의 위치와 여러
정보를 함께 확인하실 수 있습니다.
</span>
</div>
<!-- 탭이 모여있는 바, 4가지 탭이 구현 -->
<div id = "menu_bar">
<span id="menu_item_fix" style="width: 200px; height: 40px; display: none;"></span>
<!-- 로고 이미지 클릭 시 main 구성의 태그를 보여준다. -->
<span id="logo" onclick="hide()">
<img src="img/logo.png" width="150" height="150" style="margin-top: -20%;">
</span>
<!-- 소개 탭 클릭 시 소개 구성의 태그를 보여준다. -->
<span id = "page_fade" class="menu_item" style="left: 400px;" onclick="pagechange1()">
소개
</span>
<!-- 사용법 탭 클릭 시 사용법 구성의 태그를 보여준다. -->
<span class="menu_item" style="left: 600px;" onclick="pagechange2()">
사용법
</span>
<!-- 탐색하기 탭 클릭 시 program_map.html로 이동한다. -->
<span class="menu_item"style="left: 800px;" onclick="location.href='program_map.html'">
탐색하기
</span>
<!-- 프로그램 탭 클릭 시 rdc_pro.html로 이동한다. -->
<span class="menu_item"style="left: 1000px;" onclick="location.href='rcd_pro.html'">
프로그램
</span>
</div>
<!-- 화면 전환 효과를 위한 태그-->
<div class = "tab_chg_effect" id = "fade_block"></div>
<!--========================================================= Java Script ========================================================-->
<script src="/js/intro_body.js"></script>
</body>
</html>