SH

calculate rewrite

...@@ -190,7 +190,7 @@ a:focus { ...@@ -190,7 +190,7 @@ a:focus {
190 } 190 }
191 191
192 .tm-hero-title { 192 .tm-hero-title {
193 - font-size: 2rem; 193 + font-size: 40px;
194 text-shadow: 2px 2px 2px #333; 194 text-shadow: 2px 2px 2px #333;
195 } 195 }
196 196
...@@ -384,42 +384,6 @@ select::-ms-expand { ...@@ -384,42 +384,6 @@ select::-ms-expand {
384 input{ 384 input{
385 border-radius:5px; 385 border-radius:5px;
386 } 386 }
387 -
388 -#map-answer{
389 - display:flex;
390 - justify-content: center;
391 - border-top:2px solid white;
392 - padding-top:50px;
393 -}
394 -.answer-field{
395 - width:30%;
396 - font-size :30px;
397 - line-height:80px;
398 -}
399 -#answer-how-many-hours{
400 - width:100%;
401 - margin-bottom:100px;
402 -}
403 -.row{
404 - display:flex;
405 - justify-content: center;
406 -}
407 -#answer-detail{
408 - display:flex;
409 - justify-content: center;
410 -}
411 -.answer-detail-question,
412 -.answer-detail-answer{
413 - width:49%;
414 -}
415 -.answer-detail-question{
416 - text-align: right;
417 - margin-right:10px;
418 -}
419 -.answer-highlight{
420 - font-size:35px;
421 - color:darkseagreen;
422 -}
423 .tm-underline { 387 .tm-underline {
424 border-top: 2px solid white; 388 border-top: 2px solid white;
425 height: 8px; 389 height: 8px;
...@@ -494,7 +458,70 @@ iframe{ ...@@ -494,7 +458,70 @@ iframe{
494 min-height: 750px; 458 min-height: 750px;
495 position: relative; 459 position: relative;
496 padding-bottom: 50px; 460 padding-bottom: 50px;
497 - padding-top: 160px; 461 + padding-top: 20px;
462 +}
463 +
464 +.answer-grid-container {
465 + display: grid;
466 + margin:30px 30px;
467 + grid-template-columns: 1fr 1fr 1fr 1fr;
468 + grid-template-rows: 1fr 0.5fr 0.5fr 0.5fr;
469 + gap: 10px 20px;
470 + grid-template-areas:
471 + ". map answer-field ."
472 + "list-answer-field list-answer-field list-answer-field list-answer-field"
473 + "detail-answer-field detail-answer-field detail-answer-field detail-answer-field"
474 + "detail-answer-field detail-answer-field detail-answer-field detail-answer-field";
475 +}
476 +
477 +.map { grid-area: map; }
478 +
479 +.answer-field {
480 + grid-area: answer-field;
481 + font-size:30px;
482 + text-shadow: 2px 2px 2px #333;
483 +}
484 +
485 +.list-answer-field {
486 + grid-area: list-answer-field;
487 + font-size:30px;
488 + text-shadow: 2px 2px 2px #333;
489 + text-align : center;
490 +}
491 +
492 +.detail-answer-field {
493 + display: grid;
494 + grid-template-columns: 1fr 1fr 1fr 1fr;
495 + gap: 20px 20px;
496 + grid-template-areas:
497 + "salary-field dish-field everest-field earth-field";
498 + grid-area: detail-answer-field;
499 + height : 200px;
500 +}
501 +.detail-answer-box{
502 + margin-top:10px;
503 + display:table-cell;
504 + background-color : darkgrey;
505 + border-radius:6px;
506 + font-size:20px;
507 + padding : 10px 10px;
508 + height:150px;
509 +}
510 +.detail-answer-small-box{
511 + font-size:30px;
512 + margin-top:20px;
513 +}
514 +.salary-field { grid-area: salary-field; }
515 +
516 +.dish-field { grid-area: dish-field; }
517 +
518 +.everest-field { grid-area: everest-field; }
519 +
520 +.earth-field { grid-area: earth-field; }
521 +
522 +.detail-answer-small-box{
523 + transform:translateX(2.5%);
524 + width : 95%;
498 } 525 }
499 526
500 527
......
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
5 <meta charset="UTF-8" /> 5 <meta charset="UTF-8" />
6 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7 <meta http-equiv="X-UA-Compatible" content="ie=edge" /> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge" />
8 - <title>The Town HTML CSS Template</title> 8 + <title>TongGilMut</title>
9 <link rel="stylesheet" href="fontawesome-5.5/css/all.min.css" /> 9 <link rel="stylesheet" href="fontawesome-5.5/css/all.min.css" />
10 <link rel="stylesheet" href="slick/slick.css"> 10 <link rel="stylesheet" href="slick/slick.css">
11 <link rel="stylesheet" href="slick/slick-theme.css"> 11 <link rel="stylesheet" href="slick/slick-theme.css">
...@@ -18,8 +18,12 @@ ...@@ -18,8 +18,12 @@
18 <script src="../../docs/js/jquery-1.9.1.js"></script> 18 <script src="../../docs/js/jquery-1.9.1.js"></script>
19 <script type="text/javascript" src="../../docs/js/examples-base.js"></script> 19 <script type="text/javascript" src="../../docs/js/examples-base.js"></script>
20 <script type="text/javascript" src="../../docs/js/highlight.min.js"></script> 20 <script type="text/javascript" src="../../docs/js/highlight.min.js"></script>
21 +<<<<<<< HEAD
21 <script type="text/javascript" 22 <script type="text/javascript"
22 src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=rr4owjosjy&submodules=geocoder"></script> 23 src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=rr4owjosjy&submodules=geocoder"></script>
24 +=======
25 + <script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=rr4owjosjy&submodules=geocoder"></script>
26 +>>>>>>> 4c7fe1b45bf1746088a811e7fc1b8a9c7172f7cd
23 <link rel="stylesheet" type="text/css" href="../../docs/css/examples-base.css" /> 27 <link rel="stylesheet" type="text/css" href="../../docs/css/examples-base.css" />
24 28
25 <!-- 29 <!--
...@@ -68,7 +72,7 @@ ...@@ -68,7 +72,7 @@
68 </div> 72 </div>
69 73
70 <div class="tm-next tm-intro-next"> 74 <div class="tm-next tm-intro-next">
71 - <a href="#contact" class="text-center tm-down-arrow-link"> 75 + <a href="#contact" class="button1 text-center tm-down-arrow-link">
72 <i class="fas fa-3x fa-caret-down tm-down-arrow">계산해보기</i> 76 <i class="fas fa-3x fa-caret-down tm-down-arrow">계산해보기</i>
73 </a> 77 </a>
74 </div> 78 </div>
...@@ -90,6 +94,7 @@ ...@@ -90,6 +94,7 @@
90 <input type="text" id="end"> 94 <input type="text" id="end">
91 </div> 95 </div>
92 <div class="question-field question-grade">몇학년인가요?</div> 96 <div class="question-field question-grade">몇학년인가요?</div>
97 +<<<<<<< HEAD
93 <div class="input-grade"> 98 <div class="input-grade">
94 <div class="custom-select" style="width:208px; margin-right:40px"> 99 <div class="custom-select" style="width:208px; margin-right:40px">
95 <select id="semester"> 100 <select id="semester">
...@@ -124,6 +129,60 @@ ...@@ -124,6 +129,60 @@
124 <div class="answer-field" id="answer-how-many-hours"> 129 <div class="answer-field" id="answer-how-many-hours">
125 지금까지 <span class="answer-highlight" id="since">?</span>시간을 길에서 보내셨군요<br> 130 지금까지 <span class="answer-highlight" id="since">?</span>시간을 길에서 보내셨군요<br>
126 졸업까지 앞으로 <span class="answer-highlight" id="until">?</span>시간은 더 길에서 보내시면 됩니다.<br> 131 졸업까지 앞으로 <span class="answer-highlight" id="until">?</span>시간은 더 길에서 보내시면 됩니다.<br>
132 +=======
133 + <div class="input-grade"><div class="custom-select" style="width:208px; margin-right:40px">
134 + <select>
135 + <option value="0">1학년 1학기</option>
136 + <option value="sem-1-1">1학년 1학기</option>
137 + <option value="sem-1-2">1학년 2학기</option>
138 + <option value="sem-2-1">2학년 1학기</option>
139 + <option value="sem-2-2">2학년 2학기</option>
140 + <option value="sem-3-1">3학년 1학기</option>
141 + <option value="sem-3-2">3학년 2학기</option>
142 + <option value="sem-4-1">4학년 1학기</option>
143 + <option value="sem-4-2">4학년 2학기</option>
144 + </select>
145 + </div></div>
146 + </div>
147 + <a href="#result" class="button2 text-center tm-down-arrow-link">
148 + <button style= "color:black" class="fas fa-3x fa-caret-down tm-down-arrow" type="button" onclick="semester();return false;">계산하기
149 + </button>
150 + </a>
151 + </div>
152 + </section>
153 +
154 +
155 + <section id="result">
156 + <div class="answer-grid-container">
157 + <div class="map" id="map" style="width:500px;height:300px;""></div>
158 + <div class="answer-field" style="width:300px;"><br><br>한번 갈 때마다 ...<br>
159 + <span class="answer-highlight" id="hour">?</span> 시간
160 + <span class="answer-highlight" id="min">?</span><br>
161 + <span class="answer-highlight" id="dist">?</span> km <br>
162 + </div>
163 +
164 + <div class="list-answer-field">
165 + 지금까지 <span class="answer-highlight" id="since">?</span>시간을 길에서 보내셨군요<br>
166 + 졸업까지 앞으로 <span class="answer-highlight" id="until">?</span>시간은 더 길에서 보내시면 됩니다.<br>
167 + </div>
168 + <div class="detail-answer-field">
169 + <div class="detail-answer-box salary-field">이 시간에 알바를 했다면?<br>
170 + <div class="detail-answer-small-box">
171 + <span id = "salary">?</span><br></div></div>
172 + <div class="detail-answer-box dish-field">교통비로 국밥<br>
173 + <div class="detail-answer-small-box">
174 + <span id = "dish">?</span>그릇<br></div>
175 + </div>
176 + <div class="detail-answer-box everest-field">이 거리라면 에베레스트 등반을<br>
177 + <div class="detail-answer-small-box">
178 + <span id = "everest">?</span>번이나...<br></div>
179 + </div>
180 + <div class="detail-answer-box earth-field">지구를<br>
181 + <div class="detail-answer-small-box">
182 + <span id = "earth">?</span>바퀴나 돌아요<br><br><br>
183 + </div>
184 + </div>
185 +>>>>>>> 4c7fe1b45bf1746088a811e7fc1b8a9c7172f7cd
127 </div> 186 </div>
128 </div> 187 </div>
129 </div> 188 </div>
...@@ -397,9 +456,9 @@ ...@@ -397,9 +456,9 @@
397 since = sem * time * 150 456 since = sem * time * 150
398 until = (8 - sem) * time * 150 457 until = (8 - sem) * time * 150
399 salary = since * 8590 458 salary = since * 8590
400 - dish = Math.floor((pay * 150) / 6000) 459 + dish = Math.floor((sem * pay * 150) / 6000)
401 - everest = Math.floor((distance * 2) / 8846) 460 + everest = Math.floor((sem * distance * 2) / 8846)
402 - earth = ((distance * 2) / 40075000).toFixed(3) 461 + earth = ((sem * distance * 2) / 40075000).toFixed(3)
403 } 462 }
404 463
405 if (target == 'sem-1-1') { 464 if (target == 'sem-1-1') {
...@@ -504,7 +563,7 @@ ...@@ -504,7 +563,7 @@
504 $(function () { 563 $(function () {
505 // Hero Section - Background Parallax 564 // Hero Section - Background Parallax
506 background_image_parallax($(".tm-parallax"), 0.30, false); 565 background_image_parallax($(".tm-parallax"), 0.30, false);
507 - background_image_parallax_2($("#contact"), 0.80); 566 + background_image_parallax_2($("#contact"), 0.80)
508 567
509 // Handle window resize 568 // Handle window resize
510 window.addEventListener('resize', function () { 569 window.addEventListener('resize', function () {
...@@ -530,12 +589,18 @@ ...@@ -530,12 +589,18 @@
530 589
531 // Add smooth scrolling to all links 590 // Add smooth scrolling to all links
532 // https://www.w3schools.com/howto/howto_css_smooth_scroll.asp 591 // https://www.w3schools.com/howto/howto_css_smooth_scroll.asp
533 - $("a").on('click', function (event) { 592 + $(".button1").on('click', function (event) {
534 $('html, body').animate({ 593 $('html, body').animate({
535 scrollTop: $("#contact").offset().top 594 scrollTop: $("#contact").offset().top
536 }, 400); 595 }, 400);
537 }); 596 });
538 597
598 + $(".button2").on('click', function (event) {
599 + $('html, body').animate({
600 + scrollTop: $("#result").offset().top-10
601 + }, 400);
602 + });
603 +
539 // Pop up 604 // Pop up
540 $('.tm-gallery').magnificPopup({ 605 $('.tm-gallery').magnificPopup({
541 delegate: 'a', 606 delegate: 'a',
......