-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
72 lines (64 loc) · 3.77 KB
/
index.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
<!DOCTYPE html>
<html lang="kr">
<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">
<!-- !!GTM 코드는 모든 페이지에 삽입해야 함!! -->
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-PHZ6TN6R');</script>
<!-- End Google Tag Manager -->
<!-- 오픈그래프 시작 -->
<meta property="og:type" content="website">
<meta property="og:site_name" content="꿋꿋 :: 최적의 의자 높이는?">
<meta property="og:description" content="체형에 맞는 의자 높이를 알아보세요.">
<!-- <meta property="og:image" content="img url"> -->
<!-- <meta property="og:url" content="url"> -->
<!-- 오픈그래프 끝 -->
<!-- CSS / JS 시작 -->
<link rel="icon" type="" href="./favicon.ico">
<link rel="stylesheet" href="style.css">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function() {
$("#result-btn").on("click", function() {
// id가 "divBox"인 요소를 0.5초에 걸쳐 사라지게 하고
// 5초의 지연시간 뒤에 다시 2초에 걸쳐 나타나게 함.
$("#result").fadeOut(0).delay(0).fadeIn(2000);
});
});
</script>
<script defer src="main.js"></script>
<!-- CSS / JS 끝 -->
<!-- 타이틀 부분 -->
<title>꿋꿋 :: 최적의 의자 높이는?</title>
</head>
<body>
<!-- !!GTM 코드는 모든 페이지에 삽입해야 함!! -->
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PHZ6TN6R"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<p id="h1-sub">바른 자세 거북이 '핀'과 함께</p>
<h1 class="fade-in">내게 딱 맞는 의자 높이 찾기 🔍</h1>
<div class="container">
<img src="./Fynn.png" id="Fynn-main" alt="거북이 요정 핀의 이미지">
<p id = "description">건강한 자세로 허리 수술비 아껴볼까요?<br>저는 당신의 <b>바른 자세</b>를 도와줄 거북이 요정 '핀'이에요. <br><br>현대인의 고질병 거북목! 바른 자세를 유지하기 위해서<br>의자 높이를 적절하게 맞추고, 적어도 한 시간에 한 번 일어나 꾸준히 스트레칭을 하는 것이 좋아요.<br><br>아래에 키를 적어주시면 <b>당신에게 딱 맞는 의자 높이</b>로 건강한 업무환경을 만들 수 있도록 도와드릴게요! 🐢💨</p>
<div id="inputs">
<label for="input">당신의 키를 알려주세요!</label><br>
<input type="text" name="" inputmode="numeric" id="height" placeholder="숫자만 입력해주시면 돼요. 예) 155" onfocus="this.placeholder =''" onblur="this.placeholder = '이곳에 키를 입력해주세요. 예) 155'" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" maxlength="3"><br>
<input type="button" id="result-btn" value="최적의 의자 높이 확인하기 →"><br>
<div id="result"></div>
</div>
<footer class="footer">
<hr id=hr1 class="fade-in">
<p class="ft" style="font-size: 18px;">자꾸만 거북목이 되는 당신!<br>바른자세 루틴이 필요하다면?</p>
<a href="https://apps.apple.com/kr/app/%EA%BF%8B%EA%BF%8B/id6462799144" class="ft2"><img src="./Download_on_the_App_Store_Badge_KR_RGB_blk_100317.svg" alt="거북이 요정 핀의 이미지"></a><br><br>
</footer>
</div>
</body>
</html>