한서흔 / OSS-TongGilMut

Go to a project
Toggle navigation Toggle navigation pinning
SH
b3eb4cfa 2 parents 1628522e 4c7fe1b4

calculate rewrite

Inline Side-by-side
Showing 2 changed files with 137 additions and 45 deletions
......@@ -190,7 +190,7 @@ a:focus {
}
.tm-hero-title {
font-size: 2rem;
font-size: 40px;
text-shadow: 2px 2px 2px #333;
}
......@@ -384,42 +384,6 @@ select::-ms-expand {
input{
border-radius:5px;
}
#map-answer{
display:flex;
justify-content: center;
border-top:2px solid white;
padding-top:50px;
}
.answer-field{
width:30%;
font-size :30px;
line-height:80px;
}
#answer-how-many-hours{
width:100%;
margin-bottom:100px;
}
.row{
display:flex;
justify-content: center;
}
#answer-detail{
display:flex;
justify-content: center;
}
.answer-detail-question,
.answer-detail-answer{
width:49%;
}
.answer-detail-question{
text-align: right;
margin-right:10px;
}
.answer-highlight{
font-size:35px;
color:darkseagreen;
}
.tm-underline {
border-top: 2px solid white;
height: 8px;
......@@ -494,7 +458,70 @@ iframe{
min-height: 750px;
position: relative;
padding-bottom: 50px;
padding-top: 160px;
padding-top: 20px;
}
.answer-grid-container {
display: grid;
margin:30px 30px;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 0.5fr 0.5fr 0.5fr;
gap: 10px 20px;
grid-template-areas:
". map answer-field ."
"list-answer-field list-answer-field list-answer-field list-answer-field"
"detail-answer-field detail-answer-field detail-answer-field detail-answer-field"
"detail-answer-field detail-answer-field detail-answer-field detail-answer-field";
}
.map { grid-area: map; }
.answer-field {
grid-area: answer-field;
font-size:30px;
text-shadow: 2px 2px 2px #333;
}
.list-answer-field {
grid-area: list-answer-field;
font-size:30px;
text-shadow: 2px 2px 2px #333;
text-align : center;
}
.detail-answer-field {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 20px 20px;
grid-template-areas:
"salary-field dish-field everest-field earth-field";
grid-area: detail-answer-field;
height : 200px;
}
.detail-answer-box{
margin-top:10px;
display:table-cell;
background-color : darkgrey;
border-radius:6px;
font-size:20px;
padding : 10px 10px;
height:150px;
}
.detail-answer-small-box{
font-size:30px;
margin-top:20px;
}
.salary-field { grid-area: salary-field; }
.dish-field { grid-area: dish-field; }
.everest-field { grid-area: everest-field; }
.earth-field { grid-area: earth-field; }
.detail-answer-small-box{
transform:translateX(2.5%);
width : 95%;
}
......
......@@ -5,7 +5,7 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>The Town HTML CSS Template</title>
<title>TongGilMut</title>
<link rel="stylesheet" href="fontawesome-5.5/css/all.min.css" />
<link rel="stylesheet" href="slick/slick.css">
<link rel="stylesheet" href="slick/slick-theme.css">
......@@ -18,8 +18,12 @@
<script src="../../docs/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="../../docs/js/examples-base.js"></script>
<script type="text/javascript" src="../../docs/js/highlight.min.js"></script>
<<<<<<< HEAD
<script type="text/javascript"
src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=rr4owjosjy&submodules=geocoder"></script>
=======
<script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=rr4owjosjy&submodules=geocoder"></script>
>>>>>>> 4c7fe1b45bf1746088a811e7fc1b8a9c7172f7cd
<link rel="stylesheet" type="text/css" href="../../docs/css/examples-base.css" />
<!--
......@@ -68,7 +72,7 @@
</div>
<div class="tm-next tm-intro-next">
<a href="#contact" class="text-center tm-down-arrow-link">
<a href="#contact" class="button1 text-center tm-down-arrow-link">
<i class="fas fa-3x fa-caret-down tm-down-arrow">계산해보기</i>
</a>
</div>
......@@ -90,6 +94,7 @@
<input type="text" id="end">
</div>
<div class="question-field question-grade">몇학년인가요?</div>
<<<<<<< HEAD
<div class="input-grade">
<div class="custom-select" style="width:208px; margin-right:40px">
<select id="semester">
......@@ -124,6 +129,60 @@
<div class="answer-field" id="answer-how-many-hours">
지금까지 <span class="answer-highlight" id="since">?</span>시간을 길에서 보내셨군요<br>
졸업까지 앞으로 <span class="answer-highlight" id="until">?</span>시간은 더 길에서 보내시면 됩니다.<br>
=======
<div class="input-grade"><div class="custom-select" style="width:208px; margin-right:40px">
<select>
<option value="0">1학년 1학기</option>
<option value="sem-1-1">1학년 1학기</option>
<option value="sem-1-2">1학년 2학기</option>
<option value="sem-2-1">2학년 1학기</option>
<option value="sem-2-2">2학년 2학기</option>
<option value="sem-3-1">3학년 1학기</option>
<option value="sem-3-2">3학년 2학기</option>
<option value="sem-4-1">4학년 1학기</option>
<option value="sem-4-2">4학년 2학기</option>
</select>
</div></div>
</div>
<a href="#result" class="button2 text-center tm-down-arrow-link">
<button style= "color:black" class="fas fa-3x fa-caret-down tm-down-arrow" type="button" onclick="semester();return false;">계산하기
</button>
</a>
</div>
</section>
<section id="result">
<div class="answer-grid-container">
<div class="map" id="map" style="width:500px;height:300px;""></div>
<div class="answer-field" style="width:300px;"><br><br>한번 갈 때마다 ...<br>
<span class="answer-highlight" id="hour">?</span> 시간
<span class="answer-highlight" id="min">?</span> 분 <br>
<span class="answer-highlight" id="dist">?</span> km <br>
</div>
<div class="list-answer-field">
지금까지 <span class="answer-highlight" id="since">?</span>시간을 길에서 보내셨군요<br>
졸업까지 앞으로 <span class="answer-highlight" id="until">?</span>시간은 더 길에서 보내시면 됩니다.<br>
</div>
<div class="detail-answer-field">
<div class="detail-answer-box salary-field">이 시간에 알바를 했다면?<br>
<div class="detail-answer-small-box">
<span id = "salary">?</span>원<br></div></div>
<div class="detail-answer-box dish-field">교통비로 국밥<br>
<div class="detail-answer-small-box">
<span id = "dish">?</span>그릇<br></div>
</div>
<div class="detail-answer-box everest-field">이 거리라면 에베레스트 등반을<br>
<div class="detail-answer-small-box">
<span id = "everest">?</span>번이나...<br></div>
</div>
<div class="detail-answer-box earth-field">지구를<br>
<div class="detail-answer-small-box">
<span id = "earth">?</span>바퀴나 돌아요<br><br><br>
</div>
</div>
>>>>>>> 4c7fe1b45bf1746088a811e7fc1b8a9c7172f7cd
</div>
</div>
</div>
......@@ -397,9 +456,9 @@
since = sem * time * 150
until = (8 - sem) * time * 150
salary = since * 8590
dish = Math.floor((pay * 150) / 6000)
everest = Math.floor((distance * 2) / 8846)
earth = ((distance * 2) / 40075000).toFixed(3)
dish = Math.floor((sem * pay * 150) / 6000)
everest = Math.floor((sem * distance * 2) / 8846)
earth = ((sem * distance * 2) / 40075000).toFixed(3)
}
if (target == 'sem-1-1') {
......@@ -504,7 +563,7 @@
$(function () {
// Hero Section - Background Parallax
background_image_parallax($(".tm-parallax"), 0.30, false);
background_image_parallax_2($("#contact"), 0.80);
background_image_parallax_2($("#contact"), 0.80)
// Handle window resize
window.addEventListener('resize', function () {
......@@ -530,12 +589,18 @@
// Add smooth scrolling to all links
// https://www.w3schools.com/howto/howto_css_smooth_scroll.asp
$("a").on('click', function (event) {
$(".button1").on('click', function (event) {
$('html, body').animate({
scrollTop: $("#contact").offset().top
}, 400);
});
$(".button2").on('click', function (event) {
$('html, body').animate({
scrollTop: $("#result").offset().top-10
}, 400);
});
// Pop up
$('.tm-gallery').magnificPopup({
delegate: 'a',
......