공태현 / healthcare-with-webcam

Go to a project
Toggle navigation Toggle navigation pinning
정지호
e8d0e720 1 parent 381096f7

Design main page

Inline Side-by-side
Showing 3 changed files with 134 additions and 24 deletions
@import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap');
@import url("https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap");
@font-face {
font-family: 'BMJUA';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/BMJUA.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'BMEULJIRO';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.0/BMEULJIRO.woff') format('woff');
font-weight: normal;
font-style: normal;
}
.title {
font-size : 40px;
font-family: 'BMEULJIRO';
color : aliceblue;
margin-top: 10%;
margin-bottom: 20px;
text-align: center;
}
button {
margin: 10px;
margin-bottom: 30px;
}
input {
margin-top: 0px;
width: 300px;
height: 50px;
border: 1px solid aliceblue;
border-radius: 10px;
color: white;
background-color: #353535;
font-family: 'BMJUA';
font-size: 20px;
margin-block-end: 10px;
}
.w-btn {
position: relative;
border: none;
display: inline-block;
padding: 15px 30px;
border-radius: 15px;
font-family: "BMEULJIRO", sans-serif;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
text-decoration: none;
font-weight: 600;
transition: 0.25s;
margin-bottom: 20px;
}
.w-btn-outline {
position: relative;
padding: 15px 30px;
border-radius: 15px;
font-family: "BMEULJIRO", sans-serif;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
text-decoration: none;
font-weight: 600;
transition: 0.25s;
}
.w-btn-indigo {
background-color: aliceblue;
color: #2e2f30;
}
.w-btn-indigo-outline {
border: 3px solid aliceblue;
color: #2e2f30;
}
.w-btn-indigo-outline:hover {
color: #2e2f30;
background: aliceblue;
}
.font {
margin-right: 3px;
font-size: 20px;
color:aliceblue;
font-family: "BMEULJIRO";
}
.login_sign {
margin-top: 10px;
font-family: "BMJUA";
font-size: 20px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
width: 310px;
height: 50px;
color:black;
border-radius: 10px;
background-color: wheat;
border: none;
}
.flex-container{
display:inline-flex;
}
.flex-item{
width: 350px;
height:400px;
margin: 10px;
}
\ No newline at end of file
<!DOCTYPE html>
<html lang="en">
<html lang="ko">
<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">
<title>Main Page</title>
<link rel="stylesheet" href="main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
Main Page
<body bgcolor= "#353535">
<div class="title">
🏋️‍♂️방구석 헬스 트레이너🏋️‍♀️
</div>
<center>
<div>
<input type="button" value = "squart start" id = "moveSquart" onclick="moveSquartPage()"/>
<input class="w-btn w-btn-indigo" type="button" value = "Squat Start" id = "moveSquart" onclick="moveSquartPage()"/>
</div>
<script type="text/javascript" src="./main.js"></script>
<div>
<input id = "name" type = "text" placeholder="이름">
<input id = "password" type = "text" placeholder="비밀번호">
<button type="submit" id = "button">
로그인
</button>
<div class="flex-container">
<div class="flex-item">
<div><input class="input" id = "name" value="👨‍🦲" type = "text"></div>
<div><input class="input" id = "password" value="🔑" type = "text"></div>
<div><button class="login_sign" type="submit" id = "button">로그인</button></div>
</div>
<div class="flex-item">
<div><input class="input" id = "register_name" value="👨‍🦲" type = "text"></div>
<div><input class="input" id = "register_password" value="🔑" type = "text"></div>
<div><button class="login_sign" type="submit" id = "register_button">회원가입</button></div>
</div>
<div>
<input id = "register_name" type = "text" placeholder="이름">
<input id = "register_password" type = "text" placeholder = "비밀번호">
<button type = "submit" id = "register_button">
회원가입
</button>
</div>
</center>
</body>
</html>
\ No newline at end of file
......
function moveSquartPage()
function moveSquatPage()
{
location.href = "/squart";
location.href = "/squat";
}
$(document).ready(function(){
$('#button').click(function(){
let sendName = $('#name').val();
......