Joung Jiwon / OSS-TongGilMut

Go to a project
Toggle navigation Toggle navigation pinning
Joung Jiwon
398e614a 2 parents 3809977a 953b3707

Merge branch 'cal' into 'master' 

add calculate

학년 학기 별 계산

See merge request !5
Inline Side-by-side
Showing 1 changed file with 290 additions and 366 deletions
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html lang="en"> 2 <html lang="en">
3 - <head> 3 +
4 - <meta charset="UTF-8" /> 4 +<head>
5 - <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 5 + <meta charset="UTF-8" />
6 - <meta http-equiv="X-UA-Compatible" content="ie=edge" /> 6 + <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7 - <title>DDuBuk</title> 7 + <meta http-equiv="X-UA-Compatible" content="ie=edge" />
8 - <link rel="stylesheet" href="fontawesome-5.5/css/all.min.css" /> 8 + <title>The Town HTML CSS Template</title>
9 - <link rel="stylesheet" href="slick/slick.css"> 9 + <link rel="stylesheet" href="fontawesome-5.5/css/all.min.css" />
10 - <link rel="stylesheet" href="slick/slick-theme.css"> 10 + <link rel="stylesheet" href="slick/slick.css">
11 - <link rel="stylesheet" href="magnific-popup/magnific-popup.css"> 11 + <link rel="stylesheet" href="slick/slick-theme.css">
12 - <link rel="stylesheet" href="css/bootstrap.min.css" /> 12 + <link rel="stylesheet" href="magnific-popup/magnific-popup.css">
13 - <link rel="stylesheet" href="css/templatemo-style.css" /> 13 + <link rel="stylesheet" href="css/bootstrap.min.css" />
14 - <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/moonspam/NanumBarunGothic@1.0/nanumbarungothicsubset.css"> 14 + <link rel="stylesheet" href="css/templatemo-style.css" />
15 - 15 + <link rel="stylesheet" type="text/css"
16 - <script src="../../docs/js/jquery-1.9.1.js"></script> 16 + href="https://cdn.jsdelivr.net/gh/moonspam/NanumBarunGothic@1.0/nanumbarungothicsubset.css">
17 - <script type="text/javascript" src="../../docs/js/examples-base.js"></script> 17 +
18 - <script type="text/javascript" src="../../docs/js/highlight.min.js"></script> 18 + <!--
19 - <script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=rr4owjosjy&submodules=geocoder"></script>
20 - <link rel="stylesheet" type="text/css" href="../../docs/css/examples-base.css" />
21 - <!--
22 The Town 19 The Town
23 https://templatemo.com/tm-525-the-town 20 https://templatemo.com/tm-525-the-town
24 --> 21 -->
25 - 22 +</head>
26 - <script type= "text/css"> 23 +
27 - window.onload = function(){ 24 +<body>
28 - document.getElementById('btn').onclick = function(){ 25 + <!-- Hero section -->
29 - document.getElementById('frm').submit(); 26 + <section id="hero" class="text-white tm-font-big tm-parallax">
30 - return false; 27 + <video autoplay muted loop id="hero-video">
31 - }; 28 + <source src="img/main-video1.mp4" type="video/mp4">
32 -}; 29 + </video>
33 - 30 + <!-- Navigation -->
34 -</script> 31 + <nav class="navbar navbar-expand-md tm-navbar" id="tmNav">
35 - 32 + <div class="container">
36 - </head> 33 + <div class="tm-next">
37 - <body> 34 + <a href="#hero" class="navbar-brand">뚜벅이</a>
38 - <!-- Hero section -->
39 - <section id="hero" class="text-white tm-font-big tm-parallax">
40 - <video autoplay muted loop id ="hero-video">
41 - <source src="img/main-video1.mp4" type="video/mp4">
42 - </video>
43 - <!-- Navigation -->
44 - <nav class="navbar navbar-expand-md tm-navbar" id="tmNav">
45 - <div class="container">
46 - <div class="tm-next">
47 - <a href="#hero" class="navbar-brand">뚜벅이</a>
48 - </div>
49 - </div>
50 - </nav>
51 -
52 - <div class="text-center tm-hero-text-container">
53 - <div class="tm-hero-text-container-inner">
54 - <h2 class="tm-hero-title">통학생은 길에서 몇시간을 보냈을까?</h2>
55 - <p class="tm-hero-subtitle">
56 - 매일 학교에 통학하시나요?<br>
57 - 뚜벅이님이 지금까지 몇 시간을 길에서 보냈는지 보여드립니다.
58 - <br>-뚜벅이-
59 - </p>
60 </div> 35 </div>
61 </div> 36 </div>
62 - 37 + </nav>
63 - <div class="tm-next tm-intro-next"> 38 +
64 - <a href="#introduction" class="text-center tm-down-arrow-link"> 39 + <div class="text-center tm-hero-text-container">
65 - <i class="fas fa-3x fa-caret-down tm-down-arrow">계산하기</i> 40 + <div class="tm-hero-text-container-inner">
66 - </a> 41 + <h2 class="tm-hero-title">통학생은 길에서 몇시간을 보냈을까?</h2>
42 + <p class="tm-hero-subtitle">
43 + 매일 학교에 통학하시나요?<br>
44 + 뚜벅이님이 지금까지 몇시간을 길에서 보냈는지 보여드립니다.
45 + <br>-뚜벅이-
46 + </p>
67 </div> 47 </div>
68 - </section> 48 + </div>
49 +
50 + <div class="tm-next tm-intro-next">
51 + <a href="#introduction" class="text-center tm-down-arrow-link">
52 + <i class="fas fa-3x fa-caret-down tm-down-arrow">계산해보기</i>
53 + </a>
54 + </div>
55 + </section>
69 56
70 57
71 58
72 - <!-- Contact --> 59 + <!-- Contact -->
73 - <section id="contact" class="tm-section-pad-top tm-parallax-2"> 60 + <section id="contact" class="tm-section-pad-top tm-parallax-2">
74 <div class="container tm-container-contact"> 61 <div class="container tm-container-contact">
75 - <div class="row"> 62 + <div class="row">
76 - <div class="container question-field"> 63 + <div class="container question-field">
77 - <div class="question-text">어디에 사나요?</div> 64 + <div class="question-text">어디에 사나요?</div>
78 - <div class="question-input"> 65 + <div class="question-input">
79 - <label for="question-input-field"></label> 66 + <label for="question-input-field"></label>
80 - <input type ="text" id="start"> 67 + <input type="text" id="question-input-field">
81 - </div>
82 </div> 68 </div>
83 - <div class="container question-field"> 69 + </div>
84 - <div class="question-text">무슨 학교에 다니나요?</div> 70 + <div class="container question-field">
85 - <div class="question-input"> 71 + <div class="question-text">무슨학교에 다니나요?</div>
86 - <label for="question-input-field"></label> 72 + <div class="question-input">
87 - <input type ="text" id="end"> 73 + <label for="question-input-field"></label>
88 - </div> 74 + <input type="text" id="question-input-field">
89 - </div>
90 - <div class="container question-field">
91 - <div class="question-text">몇 학년인가요?</div>
92 - <div class="question-input">
93 - <select name="semester" id="semester">
94 - <option value="sem-1-1">1학년 1학기</option>
95 - <option value="sem-1-2">1학년 2학기</option>
96 - <option value="sem-2-1">2학년 1학기</option>
97 - <option value="sem-2-2">2학년 2학기</option>
98 - <option value="sem-3-1">3학년 1학기</option>
99 - <option value="sem-3-2">3학년 2학기</option>
100 - <option value="sem-4-1">4학년 1학기</option>
101 - <option value="sem-4-2">4학년 2학기</option>
102 - </select>
103 - </div>
104 </div> 75 </div>
105 - <div class="container button-field"> 76 + </div>
106 - <button class="button_calculate" type="button">계산하기 77 + <div class="container question-field">
107 - </button> 78 + <div class="question-text">몇학년인가요?</div>
79 + <div class="question-input">
80 + <select name="semester" id="semester">
81 + <option value="sem-1-1">1학년 1학기</option>
82 + <option value="sem-1-2">1학년 2학기</option>
83 + <option value="sem-2-1">2학년 1학기</option>
84 + <option value="sem-2-2">2학년 2학기</option>
85 + <option value="sem-3-1">3학년 1학기</option>
86 + <option value="sem-3-2">3학년 2학기</option>
87 + <option value="sem-4-1">4학년 1학기</option>
88 + <option value="sem-4-2">4학년 2학기</option>
89 + </select>
108 </div> 90 </div>
109 </div> 91 </div>
110 -<br> 92 + <div class="container button-field">
111 - 93 + <button class="button_calculate" type="button" onclick="semester();return false;">
112 - 94 + 계산해보기
113 -<div id="map" style="width:700px;height:700px;"></div> 95 + </button>
114 -<script> 96 + </div>
115 -var btn = document.querySelector('button'); 97 + </div>
116 - 98 + <div class=row id="map-answer" style="margin-top:100px">
117 -btn.addEventListener('click', updateBtn); 99 + <div style="width:30%">
118 - 100 + <iframe
119 -function updateBtn() { 101 + src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d203276.83209506533!2d126.94001771640623!3d37.24295009999998!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357b44de2c7f3ddb%3A0x4c35e852f90f5520!2z6rK97Z2s64yA7ZWZ6rWQIOq1reygnOy6oO2NvOyKpA!5e0!3m2!1sko!2skr!4v1606155147622!5m2!1sko!2skr"
120 - var start = document.getElementById('start').value; 102 + width=100% height="250" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false"
121 - var end = document.getElementById('end').value; 103 + tabindex="0" right="20%"></iframe>
122 - naver.maps.Service.geocode({ 104 + </div>
123 - address: start 105 + <div class="answer-field">
124 - 106 + 한번 갈 때마다 ...<br>
125 - }, function(status, response) { 107 + <span class="answer-highlight">n</span> 시간 <span class="answer-highlight">n</span> 분 <br>
126 - if (status !== naver.maps.Service.Status.OK) { 108 + <span class="answer-highlight">n</span> 원 <br>
127 - return alert('Something wrong!'); 109 + </div>
128 - } 110 + </div>
129 - var result = response.result, // 검색 결과의 컨테이너 111 + <div class="row">
130 - items = result.items; 112 + <div id="list-answer">
131 - var sx = result.items[0].point.x; 113 + <div class="answer-field" id="answer-how-many-hours">
132 - var sy = result.items[0].point.y; 114 + 지금까지 <span class="answer-highlight" id="since">?</span>시간을 길에서 보내셨군요<br>
133 - 115 + 졸업까지 앞으로 <span class="answer-highlight" id="until">?</span>시간은 더 길에서 보내시면 됩니다.<br>
134 - naver.maps.Service.geocode({
135 - address: end
136 -
137 - }, function(status, response) {
138 - if (status !== naver.maps.Service.Status.OK) {
139 - return alert('Something wrong!');
140 - }
141 - var result = response.result, // 검색 결과의 컨테이너
142 - items = result.items;
143 - var ex = result.items[0].point.x;
144 - var ey = result.items[0].point.y;
145 -
146 -
147 - /*var sx = 127.0739547;
148 - var sy = 37.2407701;
149 - var ex = 126.921666;
150 - var ey = 37.1308333;
151 - */
152 -
153 -
154 - var mapOptions = {
155 - center: new naver.maps.LatLng(start,end),
156 - zoom: 10
157 - };
158 -
159 - var map = new naver.maps.Map('map', mapOptions);
160 -
161 -
162 -
163 - function searchPubTransPathAJAX() {
164 - var xhr = new XMLHttpRequest();
165 - //ODsay apiKey 입력
166 - var url = "https://api.odsay.com/v1/api/searchPubTransPath?SX="+sx+"&SY="+sy+"&EX="+ex+"&EY="+ey+"&apiKey=nnsDQB1AWhpETO3HmMdDAw";
167 - xhr.open("GET", url, true);
168 - xhr.send();
169 - xhr.onreadystatechange = function() {
170 - if (xhr.readyState == 4 && xhr.status == 200) {
171 - console.log( JSON.parse(xhr.responseText) ); // <- xhr.responseText 로 결과를 가져올 수 있음
172 - //노선그래픽 데이터 호출
173 - callMapObjApiAJAX((JSON.parse(xhr.responseText))["result"]["path"][0].info.mapObj);
174 - }
175 - }
176 - }
177 -
178 - //길찾기 API 호출
179 - searchPubTransPathAJAX();
180 -
181 - function callMapObjApiAJAX(mabObj){
182 - var xhr = new XMLHttpRequest();
183 - //ODsay apiKey 입력
184 - var url = "https://api.odsay.com/v1/api/loadLane?mapObject=0:0@"+mabObj+"&apiKey=nnsDQB1AWhpETO3HmMdDAw";
185 - xhr.open("GET", url, true);
186 - xhr.send();
187 - xhr.onreadystatechange = function() {
188 - if (xhr.readyState == 4 && xhr.status == 200) {
189 - var resultJsonData = JSON.parse(xhr.responseText);
190 - drawNaverMarker(sx,sy); // 출발지 마커 표시
191 - drawNaverMarker(ex,ey); // 도착지 마커 표시
192 - drawNaverPolyLine(resultJsonData); // 노선그래픽데이터 지도위 표시
193 - // boundary 데이터가 있을경우, 해당 boundary로 지도이동
194 - if(resultJsonData.result.boundary){
195 - var boundary = new naver.maps.LatLngBounds(
196 - new naver.maps.LatLng(resultJsonData.result.boundary.top, resultJsonData.result.boundary.left),
197 - new naver.maps.LatLng(resultJsonData.result.boundary.bottom, resultJsonData.result.boundary.right)
198 - );
199 - map.panToBounds(boundary);
200 - }
201 - }
202 - }
203 - }
204 -
205 - // 지도위 마커 표시해주는 함수
206 - function drawNaverMarker(x,y){
207 - var marker = new naver.maps.Marker({
208 - position: new naver.maps.LatLng(y, x),
209 - map: map
210 - });
211 - }
212 -
213 - // 노선그래픽 데이터를 이용하여 지도위 폴리라인 그려주는 함수
214 - function drawNaverPolyLine(data){
215 - var lineArray;
216 -
217 - for(var i = 0 ; i < data.result.lane.length; i++){
218 - for(var j=0 ; j <data.result.lane[i].section.length; j++){
219 - lineArray = null;
220 - lineArray = new Array();
221 - for(var k=0 ; k < data.result.lane[i].section[j].graphPos.length; k++){
222 - lineArray.push(new naver.maps.LatLng(data.result.lane[i].section[j].graphPos[k].y, data.result.lane[i].section[j].graphPos[k].x));
223 - }
224 -
225 - //지하철결과의 경우 노선에 따른 라인색상 지정하는 부분 (1,2호선의 경우만 예로 들음)
226 - if(data.result.lane[i].type == 1){
227 - var polyline = new naver.maps.Polyline({
228 - map: map,
229 - path: lineArray,
230 - strokeWeight: 3,
231 - strokeColor: '#003499'
232 - });
233 - }else if(data.result.lane[i].type == 2){
234 - var polyline = new naver.maps.Polyline({
235 - map: map,
236 - path: lineArray,
237 - strokeWeight: 3,
238 - strokeColor: '#37b42d'
239 - });
240 - }else{
241 - var polyline = new naver.maps.Polyline({
242 - map: map,
243 - path: lineArray,
244 - strokeWeight: 3
245 - });
246 - }
247 - }
248 - }
249 - }
250 - });
251 - });
252 -}
253 -</script>
254 -
255 - <div class="row">
256 - <div id="list-answer">
257 - <div class="answer-field" id="answer-how-many-hours">
258 - 지금까지 <span class="answer-highlight">n</span> 시간을 길에서 보내셨군요!<br>
259 - 앞으로 <span class="answer-highlight">n</span> 시간은 더 길에서 보내시면 됩니다!!<br>
260 - </div>
261 </div> 116 </div>
262 </div> 117 </div>
263 - <div class="row"> 118 + </div>
264 - <div id="list-answer"> 119 + <div class="row">
265 - <div class="answer-field" id="answer-how-many-hours"> 120 + <div class="answer-detail-question">
266 - <p>이 시간에..</p> 121 + 이 시간에 알바를 했다면? <br>
267 - 알바를 했다면? <span class="answer-highlight">n</span> 원<br> 122 + 교통비로 국밥 <br>
268 - <p>이 돈이면..</p> 123 + 이 거리라면 에베레스트 등반을 <br>
269 - 국밥이 <span class="answer-highlight">n</span> 그릇<br> 124 + 지구를
270 - </div> 125 + </div>
271 - </div> 126 + <div class="answer-detail-answer">
272 - </div> 127 + <span id = "salary">?</span>원<br>
273 - <footer class="text-center small tm-footer"> 128 + <span id = "dish">?</span>그릇<br>
274 - <p class="mb-0"> 129 + <span id = "everest">?</span>번이나...<br>
275 - Copyright &copy; 2020 TongGilMut 130 + <span id = "earth">?</span>바퀴나 돌아요<br>
276 - 131 + </div>
277 - - Design: <a rel="nofollow" href="https://github.com/wjdwl001" class="tm-footer-link">Joung Jiwon</a> 132 + </div>
278 - </p> 133 + </div>
279 - </footer> 134 + <footer class="text-center small tm-footer">
280 - </section> 135 + <p class="mb-0">
281 - <script src="js/jquery-1.9.1.min.js"></script> 136 + Copyright &copy; 2020 TongGilMut
282 - <script src="slick/slick.min.js"></script> 137 +
283 - <script src="magnific-popup/jquery.magnific-popup.min.js"></script> 138 + - Design: <a rel="nofollow" href="https://github.com/wjdwl001" class="tm-footer-link">Joung Jiwon</a>
284 - <script src="js/jquery.singlePageNav.min.js"></script> 139 + </p>
285 - <script src="js/bootstrap.min.js"></script> 140 + </footer>
286 - <script> 141 + </section>
287 - $('button-calculate').click(function(){ 142 + <script src="js/jquery-1.9.1.min.js"></script>
143 + <script src="slick/slick.min.js"></script>
144 + <script src="magnific-popup/jquery.magnific-popup.min.js"></script>
145 + <script src="js/jquery.singlePageNav.min.js"></script>
146 + <script src="js/bootstrap.min.js"></script>
147 + <script>
148 + $('button-calculate').click(function () {
149 +
150 + })
151 +
152 + function semester() {
153 + var target = document.getElementById("semester").value;
154 + var input = 0
155 +
156 + var since, until, salary, dish, everest, earth
157 +
158 + // 임시값 지정
159 + var time = 2
160 + var distance = 30000
161 + var costs = 100000
162 +
163 + function sum(sem) {
164 + since = sem * time * 150
165 + until = (8 - sem) * time * 150
166 + salary = since * 8590
167 + dish = Math.floor((costs * 150) / 6000)
168 + everest = Math.floor((distance * 2) / 8846)
169 + earth = ((distance * 2) / 40075000).toFixed(3)
170 + }
288 171
289 - }) 172 + if (target == 'sem-1-1') {
173 + input = 1
174 + sum(input)
175 + }
176 + else if (target == 'sem-1-2') {
177 + input = 2
178 + sum(input)
179 + }
180 + else if (target == 'sem-2-1') {
181 + input = 3
182 + sum(input)
183 + }
184 + else if (target == 'sem-2-2') {
185 + input = 4
186 + sum(input)
187 + }
188 + else if (target == 'sem-3-1') {
189 + input = 5
190 + sum(input)
191 + }
192 + else if (target == 'sem-3-2') {
193 + input = 6
194 + sum(input)
195 + }
196 + else if (target == 'sem-4-1') {
197 + input = 7
198 + sum(input)
199 + }
200 + else if (target == 'sem-4-2') {
201 + input = 8
202 + sum(input)
203 + }
290 204
291 - function getOffSet(){ 205 + document.getElementById("since").innerHTML = since
292 - var _offset = 450; 206 + document.getElementById("until").innerHTML = until
293 - var windowHeight = window.innerHeight; 207 + document.getElementById("salary").innerHTML = salary
208 + document.getElementById("dish").innerHTML = dish
209 + document.getElementById("everest").innerHTML = everest
210 + document.getElementById("earth").innerHTML = earth
211 + }
294 212
295 - if(windowHeight > 500) {
296 - _offset = 400;
297 - }
298 - if(windowHeight > 680) {
299 - _offset = 300
300 - }
301 - if(windowHeight > 830) {
302 - _offset = 210;
303 - }
304 213
305 - return _offset; 214 + function getOffSet() {
306 - } 215 + var _offset = 450;
216 + var windowHeight = window.innerHeight;
307 217
308 - function setParallaxPosition($doc, multiplier, $object){ 218 + if (windowHeight > 500) {
309 - var offset = getOffSet(); 219 + _offset = 400;
310 - var from_top = $doc.scrollTop(), 220 + }
311 - bg_css = 'center ' +(multiplier * from_top - offset) + 'px'; 221 + if (windowHeight > 680) {
312 - $object.css({"background-position" : bg_css }); 222 + _offset = 300
223 + }
224 + if (windowHeight > 830) {
225 + _offset = 210;
313 } 226 }
314 227
315 - // Parallax function 228 + return _offset;
316 - // Adapted based on https://codepen.io/roborich/pen/wpAsm 229 + }
317 - var background_image_parallax = function($object, multiplier, forceSet){ 230 +
318 - multiplier = typeof multiplier !== 'undefined' ? multiplier : 0.5; 231 + function setParallaxPosition($doc, multiplier, $object) {
319 - multiplier = 1 - multiplier; 232 + var offset = getOffSet();
320 - var $doc = $(document); 233 + var from_top = $doc.scrollTop(),
321 - // $object.css({"background-attatchment" : "fixed"}); 234 + bg_css = 'center ' + (multiplier * from_top - offset) + 'px';
322 - 235 + $object.css({ "background-position": bg_css });
323 - if(forceSet) { 236 + }
237 +
238 + // Parallax function
239 + // Adapted based on https://codepen.io/roborich/pen/wpAsm
240 + var background_image_parallax = function ($object, multiplier, forceSet) {
241 + multiplier = typeof multiplier !== 'undefined' ? multiplier : 0.5;
242 + multiplier = 1 - multiplier;
243 + var $doc = $(document);
244 + // $object.css({"background-attatchment" : "fixed"});
245 +
246 + if (forceSet) {
247 + setParallaxPosition($doc, multiplier, $object);
248 + } else {
249 + $(window).scroll(function () {
324 setParallaxPosition($doc, multiplier, $object); 250 setParallaxPosition($doc, multiplier, $object);
325 - } else { 251 + });
326 - $(window).scroll(function(){ 252 + }
327 - setParallaxPosition($doc, multiplier, $object); 253 + };
328 - });
329 - }
330 - };
331 254
332 - var background_image_parallax_2 = function($object, multiplier){ 255 + var background_image_parallax_2 = function ($object, multiplier) {
333 - multiplier = typeof multiplier !== 'undefined' ? multiplier : 0.5; 256 + multiplier = typeof multiplier !== 'undefined' ? multiplier : 0.5;
334 - multiplier = 1 - multiplier; 257 + multiplier = 1 - multiplier;
335 - var $doc = $(document); 258 + var $doc = $(document);
336 - $object.css({"background-attachment" : "fixed"}); 259 + $object.css({ "background-attachment": "fixed" });
337 - $(window).scroll(function(){ 260 + $(window).scroll(function () {
338 - var firstTop = $object.offset().top, 261 + var firstTop = $object.offset().top,
339 - pos = $(window).scrollTop(), 262 + pos = $(window).scrollTop(),
340 - yPos = Math.round((multiplier * (firstTop - pos)) - 186); 263 + yPos = Math.round((multiplier * (firstTop - pos)) - 186);
341 264
342 - var bg_css = 'center ' + yPos + 'px'; 265 + var bg_css = 'center ' + yPos + 'px';
343 266
344 - $object.css({"background-position" : bg_css }); 267 + $object.css({ "background-position": bg_css });
345 - }); 268 + });
346 - }; 269 + };
347 - 270 +
348 - $(function(){ 271 + $(function () {
349 - // Hero Section - Background Parallax 272 + // Hero Section - Background Parallax
350 - background_image_parallax($(".tm-parallax"), 0.30, false); 273 + background_image_parallax($(".tm-parallax"), 0.30, false);
351 - background_image_parallax_2($("#contact"), 0.80); 274 + background_image_parallax_2($("#contact"), 0.80);
352 - 275 +
353 - // Handle window resize 276 + // Handle window resize
354 - window.addEventListener('resize', function(){ 277 + window.addEventListener('resize', function () {
355 - background_image_parallax($(".tm-parallax"), 0.30, true); 278 + background_image_parallax($(".tm-parallax"), 0.30, true);
356 - }, true); 279 + }, true);
357 - 280 +
358 - // Detect window scroll and update navbar 281 + // Detect window scroll and update navbar
359 - $(window).scroll(function(e){ 282 + $(window).scroll(function (e) {
360 - if($(document).scrollTop() > 120) { 283 + if ($(document).scrollTop() > 120) {
361 - $('.tm-navbar').addClass("scroll"); 284 + $('.tm-navbar').addClass("scroll");
362 - } else { 285 + } else {
363 - $('.tm-navbar').removeClass("scroll"); 286 + $('.tm-navbar').removeClass("scroll");
364 - } 287 + }
365 - }); 288 + });
366 289
367 - // Close mobile menu after click 290 + // Close mobile menu after click
368 - $('#tmNav a').on('click', function(){ 291 + $('#tmNav a').on('click', function () {
369 - $('.navbar-collapse').removeClass('show'); 292 + $('.navbar-collapse').removeClass('show');
370 - }) 293 + })
371 294
372 - // Scroll to corresponding section with animation 295 + // Scroll to corresponding section with animation
373 - $('#tmNav').singlePageNav(); 296 + $('#tmNav').singlePageNav();
374 297
375 - // Add smooth scrolling to all links 298 + // Add smooth scrolling to all links
376 - // https://www.w3schools.com/howto/howto_css_smooth_scroll.asp 299 + // https://www.w3schools.com/howto/howto_css_smooth_scroll.asp
377 - $("a").on('click', function(event) { 300 + $("a").on('click', function (event) {
378 - $('html, body').animate({ 301 + $('html, body').animate({
379 - scrollTop: $("#contact").offset().top 302 + scrollTop: $("#contact").offset().top
380 - }, 400); 303 + }, 400);
381 - }); 304 + });
382 305
383 - // Pop up 306 + // Pop up
384 - $('.tm-gallery').magnificPopup({ 307 + $('.tm-gallery').magnificPopup({
385 - delegate: 'a', 308 + delegate: 'a',
386 - type: 'image', 309 + type: 'image',
387 - gallery: { enabled: true } 310 + gallery: { enabled: true }
388 - }); 311 + });
389 312
390 - // Gallery 313 + // Gallery
391 - $('.tm-gallery').slick({ 314 + $('.tm-gallery').slick({
392 - dots: true, 315 + dots: true,
393 - infinite: false, 316 + infinite: false,
394 - slidesToShow: 5, 317 + slidesToShow: 5,
395 - slidesToScroll: 2, 318 + slidesToScroll: 2,
396 - responsive: [ 319 + responsive: [
397 { 320 {
398 breakpoint: 1199, 321 breakpoint: 1199,
399 settings: { 322 settings: {
...@@ -423,8 +346,9 @@ function updateBtn() { ...@@ -423,8 +346,9 @@ function updateBtn() {
423 } 346 }
424 } 347 }
425 ] 348 ]
426 - });
427 }); 349 });
428 - </script> 350 + });
429 - </body> 351 + </script>
430 -</html> 352 +</body>
353 +
354 +</html>
...\ No newline at end of file ...\ No newline at end of file
......