<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/css/vendor/bs5/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css">
<title>agree</title>
<style>
.a {border: 1px solid red; /* width: 1000px; margin: 0 auto; */ } /*가운데 정렬*/
</style>
</head>
<body>
<div class="container a"> <!--container로 중앙정렬, 너비 확인가능 -->
<header class="d-flex justify-content-between">
<h1><a href="/">Lorem ipsum</a></h1>
<h1>
<button type="button" class="btn btn-danger" data-bs-toggle="modal"
data-bs-target="#loginmodal"> 로그인</button>
<button type="button" class="btn btn-primary">회원가입</button>
</h1>
</header> <!-- // header -->
<nav class="nav navbar-expand navbar-dark bg-dark py-2 fw-bold ">
<ul class="navbar-nav nav-fill w-100 ">
<li class="nav-item ">
<a class="nav-link " href="/intro.html">프로젝트 소개</a></li>
<li class="nav-item"> <!--active 하이라이트기능 -->
<a class="nav-link active" href="/join/agree.html">회원가입</a></li>
<li class="nav-item">
<a class="nav-link" href="/board/list.html">게시판</a></li>
<li class="nav-item">
<a class="nav-link" href="/pds/list.html">자료실</a></li>
<li class="nav-item">
<a class="nav-link" href="/gallery/list.html">갤러리</a></li>
<li class="nav-item">
<a class="nav-link " href="/admin.html">관리자</a></li>
</ul>
</nav>
<div id="main">
<div class="mt-5 ">
<div class="d-flex justify-content-between">
<h2><i class="bi bi-people-fill"></i> 회원가입</h2>
<nav>
<ol class="breadcrumb ">
<li class="breadcrumb-item ">
<span class="badge bg-success p-2">이용약관</span></li>
<li class="breadcrumb-item">
<span class="badge bg-light p-2 text-secondary">본인확인</span></li>
<li class="breadcrumb-item">
<span class="badge bg-light p-2 text-secondary">정보입력</span></li>
<li class="breadcrumb-item">
<span class="badge bg-light p-2 text-secondary">가입완료</span></li>
</ol>
</nav>
</div>
<hr>
</div> <!-- page header -->
<div class="px-5">
<h3><i class="bi bi-file-text"></i>사이트 이용약관</h3>
<small class="text-muted">회원가입을 위해서 아래 사이트 이용약관, 개인정보 확인</small></h3>
<hr>
</div> <!-- sub title -->
<div class="card card-body bg-light mx-5">
<form>
<h4>사이트 이용약관</h4>
<div>
<textarea rows="10" class="form-control">
제 1 장 환영합니다!
제 1 조 (목적)
All rights reserved.
</textarea>
</div>
<div class="text-end p-3">
<input type="checkbox" name="autolgn" class="form-check-input border-primary" >
<label class="form-check-label text-primary fw-bold" >이용약관에 동의합니다.</label>
</div>
</form>
</div> <!-- // agree -->
<div class="card card-body bg-light mx-5">
<form>
<h4>개인정보 수집 및 이용에 대한 안내</h4>
<div>
<textarea rows="10" class="form-control">
1. 개인정보처리방침이란?
공고일자: 2021년 11월 30일
시행일자: 2021년 12월 07일
</textarea>
</div>
<div class="text-end p-3">
<input type="checkbox" name="autolgn" class="form-check-input border-primary" >
<label class="form-check-label text-primary fw-bold" >개인정보 수집 및 이용에 동의합니다.</label>
</div>
</form>
</div> <!-- // person info -->
<div class="text-center m-3 ">
<button type="button" id="okagree" class="btn btn-success">
<i class="bi bi-check"></i>모두 동의합니다</button>
<button type="button" id="noagree" class="btn btn-danger">
<i class="bi bi-x"></i>모두 동의하지 않습니다</button>
</div> <!-- // buttons -->
</div> <!-- //main -->
<footer>
<h6 class="bg-secondary bg-gradient text-white text-end p-2">Copylight © Lorem Ipsum 2022.
All rights reserved. powerd bt Bootstrap5</h6>
</footer>
</div> <!-- //container -->
<!-- 로그인 모달 -->
<div id="loginmodal" class="fade modal" data-bs-backdrop="static" >
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">로그인</h5>
<button type="button" class="btn btn-light" data-bs-dismiss="modal">닫기</button>
</div>
<div class="modal-body text-danger fw-bold text-center">
<form id="loginfrm" name="loginfrm" method="post">
<div class="row mb-3">
<label for="userid" class="col-form-label col-3 text-end">아이디</label>
<div class="col-8"><input type="text" name="userid" id="userid" class="form-control border-danger"></div>
</div>
<div class="row mb-3">
<label for="passwd" class="col-form-label col-3 text-end">비밀번호</label>
<div class="col-8"><input type="text" name="passwd" id="passwd" class="form-control border-danger"></div>
</div>
<div class="row">
<label class="col-3"></label>
<div class="col-8">
<input type="checkbox" name="autolgn" class="form-check-input">
<label class="form-check-label text-warning">로그인 상태유지</label>
</div>
</div>
</form>
</div>
<div class="modal-footer justify-content-center">
<button type="button" class="btn btn-danger" >로그인</button>
<button type="button" class="btn btn-warning text-white" >아이디/비밀번호 찾기</button>
</div>
</div>
</div>
</div> <!-- loginmodal -->
<script src="/js/vendor/bs5/bootstrap.bundle.min.js"></script>
<script>
let noagree = document.querySelector('#noagree');
noagree.addEventListener('click', () => {
if (confirm('정말로 동의하지 않으시겠습니다까?')) {
location.href='/';
}
});
</script>
</body>
</html>