이승윤 / OpenSource-MyCookBook

Go to a project
Toggle navigation Toggle navigation pinning
이승윤
de34a2e1 2 parents 6349bb24 79cc4358

Merge branch 'style/home' into 'develop' 

Style/home



See merge request !13
Inline Side-by-side
Showing 5 changed files with 68 additions and 48 deletions
1 <% include ../includes/header.ejs %> 1 <% include ../includes/header.ejs %>
2 -<div class="row"> 2 +<div class="w-25 border border-info border-3" style="position: absolute; left: 37%; top: 17%;">
3 - <div class="col-md-4 col-md-offset-4"> 3 + <div>
4 - <div class="login-panel panel panel-default"> 4 + <div>
5 - <div class="panel-heading"> 5 + <div style="padding-top: 5%; padding-left: 5%;">
6 <h3 class="panel-title">회원가입</h3> 6 <h3 class="panel-title">회원가입</h3>
7 </div> 7 </div>
8 <div class="panel-body"> 8 <div class="panel-body">
9 <form role="form" action="" id="join_form" method="post"> 9 <form role="form" action="" id="join_form" method="post">
10 <fieldset> 10 <fieldset>
11 - <div class="form-group"> 11 + <div class="w-100" style="padding-left: 5%; padding-right: 5%;">
12 <input class="form-control" placeholder="ID" name="username" type="text" autofocus="" required=""> 12 <input class="form-control" placeholder="ID" name="username" type="text" autofocus="" required="">
13 </div> 13 </div>
14 - <div class="form-group"> 14 + <div class="w-100" style="padding-left: 5%; padding-right: 5%;padding-top: 3%">
15 <input class="form-control" placeholder="Password" name="password" type="password" value="" required=""> 15 <input class="form-control" placeholder="Password" name="password" type="password" value="" required="">
16 </div> 16 </div>
17 - <div class="form-group"> 17 + <div class="w-100" style="padding-left: 5%; padding-right: 5%;padding-top: 3%">
18 <input class="form-control" placeholder="Password 확인" name="password2" type="password" value="" required=""> 18 <input class="form-control" placeholder="Password 확인" name="password2" type="password" value="" required="">
19 </div> 19 </div>
20 - <div class="form-group"> 20 + <div class="w-100" style="padding-left: 5%; padding-right: 5%;padding-top: 3%">
21 <input class="form-control" placeholder="이름" name="displayname" type="text" value="" required=""> 21 <input class="form-control" placeholder="이름" name="displayname" type="text" value="" required="">
22 </div> 22 </div>
23 <!-- Change this to a button or input when using this as a form --> 23 <!-- Change this to a button or input when using this as a form -->
24 + <div class="d-grid gap-2 col-11 mx-auto p-2">
24 <input type="submit" class="btn btn-lg btn-success btn-block" value="가입하기"> 25 <input type="submit" class="btn btn-lg btn-success btn-block" value="가입하기">
25 - <div style="margin-top: 10px">
26 <a href="/auth/facebook" class="btn btn-lg btn-primary btn-block"> 26 <a href="/auth/facebook" class="btn btn-lg btn-primary btn-block">
27 <i class="fa fa-facebook" aria-hidden="true"></i> 페이스북 회원가입 27 <i class="fa fa-facebook" aria-hidden="true"></i> 페이스북 회원가입
28 </a> 28 </a>
......
1 <% include ../includes/header.ejs %> 1 <% include ../includes/header.ejs %>
2 -<div class="row"> 2 +<div class="w-25 border border-info border-3" style="position: absolute; left: 37%; top: 17%;">
3 - <div class="col-md-4 col-md-offset-4"> 3 + <div>
4 <%if(typeof flashMessage !=='undefined') {%> 4 <%if(typeof flashMessage !=='undefined') {%>
5 <div class="alert alert-danger" role="alert"><%=flashMessage%></div> 5 <div class="alert alert-danger" role="alert"><%=flashMessage%></div>
6 <%}%> 6 <%}%>
7 - <div class="login-panel panel panel-default"> 7 + <div>
8 - <div class="panel-heading"> 8 + <div style="padding-top: 5%; padding-left: 5%;">
9 <h3 class="panel-title">로그인</h3> 9 <h3 class="panel-title">로그인</h3>
10 </div> 10 </div>
11 <div class="panel-body"> 11 <div class="panel-body">
12 <form role="form" action="" id="login_form" method="post"> 12 <form role="form" action="" id="login_form" method="post">
13 <fieldset> 13 <fieldset>
14 - <div class="form-group"> 14 + <div class="w-100" style="padding-left: 5%; padding-right: 5%;">
15 + <label for="login" class="form-label">ID</label>
15 <input class="form-control" placeholder="ID" name="username" type="text" autofocus="" required=""> 16 <input class="form-control" placeholder="ID" name="username" type="text" autofocus="" required="">
16 </div> 17 </div>
17 - <div class="form-group"> 18 + <div class="w-100 p-3">
19 + <label for="password" class="form-label">Password</label>
18 <input class="form-control" placeholder="Password" name="password" type="password" value="" required=""> 20 <input class="form-control" placeholder="Password" name="password" type="password" value="" required="">
19 </div> 21 </div>
20 <!-- Change this to a button or input when using this as a form --> 22 <!-- Change this to a button or input when using this as a form -->
23 + <div class="d-grid gap-2 col-11 mx-auto p-2">
21 <input type="submit" class="btn btn-lg btn-success btn-block" value="로그인"> 24 <input type="submit" class="btn btn-lg btn-success btn-block" value="로그인">
22 - <div style="margin-top: 10px">
23 <a href="/auth/facebook" class="btn btn-lg btn-primary btn-block"> 25 <a href="/auth/facebook" class="btn btn-lg btn-primary btn-block">
24 <i class="fa fa-facebook" aria-hidden="true"></i> 페이스북 로그인 26 <i class="fa fa-facebook" aria-hidden="true"></i> 페이스북 로그인
25 </a> 27 </a>
......
1 <% include ../includes/header.ejs %> 1 <% include ../includes/header.ejs %>
2 <table class="table table-bordered table-hover"> 2 <table class="table table-bordered table-hover">
3 - <tr> 3 + <tr class="table-info">
4 <th width="80px" style="text-align: center;">카테고리명</th> 4 <th width="80px" style="text-align: center;">카테고리명</th>
5 <th width="50px" style="text-align: center;">개설 날짜</th> 5 <th width="50px" style="text-align: center;">개설 날짜</th>
6 - <th width="350px" style="text-align: center;">내용</th> 6 + <th width="550px" style="text-align: center;">내용</th>
7 - <th width="30px" style="text-align: center;">사용자명</th> 7 + <th width="50px" style="text-align: center;">사용자명</th>
8 <th width="30px" style="text-align: center;">삭제</th> 8 <th width="30px" style="text-align: center;">삭제</th>
9 </tr> 9 </tr>
10 <%categories.forEach(function(product){%> 10 <%categories.forEach(function(product){%>
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
17 <%=product.getDate.month%> - 17 <%=product.getDate.month%> -
18 <%=product.getDate.day%> 18 <%=product.getDate.day%>
19 </td> 19 </td>
20 - <td style="text-align: center;"> 20 + <td>
21 <%=product.description%> 21 <%=product.description%>
22 </td> 22 </td>
23 <td style="text-align: center;"> 23 <td style="text-align: center;">
...@@ -30,6 +30,6 @@ ...@@ -30,6 +30,6 @@
30 <% }); %> 30 <% }); %>
31 </table> 31 </table>
32 32
33 - <a href="categories/write" class="btn btn-default">작성하기</a> 33 + <a href="categories/write" class="btn btn-primary">작성하기</a>
34 34
35 <% include ../includes/footer.ejs %> 35 <% include ../includes/footer.ejs %>
...\ No newline at end of file ...\ No newline at end of file
......
1 <% include ./includes/header.ejs %> 1 <% include ./includes/header.ejs %>
2 - <div style="background-color:lavenderblush"> 2 + <div style="background-color:lavenderblush;">
3 <% var count = 0; %> 3 <% var count = 0; %>
4 <center> 4 <center>
5 <% for (var i in video) { %> 5 <% for (var i in video) { %>
6 - <div style ="color:gray; font-weight:bold; font-size:2.0em;"> 6 + <div style ="color:gray; font-weight:bold; font-size:2.0em; margin-left: 30px; padding-top: 30px">
7 + <div style="width: 100%;
8 + max-width: 7rem;
9 + height: 0.25rem;
10 + background-color: #2c3e50;
11 + border-radius: 1rem;
12 + border-color: #2c3e50 !important;"></div>
7 <%=video[i].category.title%> 13 <%=video[i].category.title%>
14 + <div style="width: 100%;
15 + max-width: 7rem;
16 + height: 0.25rem;
17 + background-color: #2c3e50;
18 + border-radius: 1rem;
19 + border-color: #2c3e50 !important;"></div>
8 </div> 20 </div>
9 <% for (var j in video[i].videos) { %> 21 <% for (var j in video[i].videos) { %>
10 - <div id="<%=count%>" vid="<%=video[i].videos[j].video_id%>"> 22 + <div class="card" style="width: 55rem; margin-bottom: 15px; margin-top: 15px;">
23 + <div class="card-top" id="<%=count%>" vid="<%=video[i].videos[j].video_id%>" style="margin: 30px;">
11 </div> 24 </div>
12 - <%count++;};};%> 25 + <div class="card-body">
26 + <h5 class="card-title"><%=video[i].videos[j].title%></h5>
27 + <p class="card-text">해당 영상에 대한 메모를 여기에 출력.
28 + </p>
29 + </div>
30 + </div>
31 + <%count++;}; %>
32 + <%};%>
13 </center> 33 </center>
14 </div> 34 </div>
15 35
...@@ -47,8 +67,8 @@ ...@@ -47,8 +67,8 @@
47 function onYouTubeIframeAPIReady() { 67 function onYouTubeIframeAPIReady() {
48 for (var i = 0; i < videoIds.length; i++) { 68 for (var i = 0; i < videoIds.length; i++) {
49 player = new YT.Player(players[i], { 69 player = new YT.Player(players[i], {
50 - height: '360', 70 + height: '450',
51 - width: '640', 71 + width: '800',
52 videoId: videoIds[i], 72 videoId: videoIds[i],
53 }); 73 });
54 } 74 }
......
...@@ -9,38 +9,36 @@ ...@@ -9,38 +9,36 @@
9 src="https://code.jquery.com/jquery-3.2.1.min.js" 9 src="https://code.jquery.com/jquery-3.2.1.min.js"
10 integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 10 integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
11 crossorigin="anonymous"></script> 11 crossorigin="anonymous"></script>
12 - <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
13 <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 12 <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
14 <!--bootstrap js 추가 --> 13 <!--bootstrap js 추가 -->
15 - <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 14 + <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
15 + integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
16 + <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"
17 + integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4"
18 + crossorigin="anonymous"></script>
16 </head> 19 </head>
17 <body> 20 <body>
18 - <div class="container" style="margin-top: 15px;"> 21 + <div class="container-fluid" style="margin-top: 15px;">
22 + <nav class="navbar navbar-light" style="background-color: #e3f2fd;">
19 <div> 23 <div>
20 - <div class="navbar-header"> 24 + <div class="navbar-brand" style="float: left;">
21 - <!-- 오른쪽 메뉴바 --> 25 + <a href="/" class="nav-link">MyCookBook</a>
22 - <button type="button" class="collapsed navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-9" aria-expanded="false">
23 - <span class="sr-only">Toggle navigation</span>
24 - <span class="icon-bar"></span>
25 - <span class="icon-bar"></span>
26 - <span class="icon-bar"></span>
27 - </button>
28 - <a href="/" class="navbar-brand">MyCookBook</a>
29 </div> 26 </div>
30 - <div class="collapse navbar-collapse"> 27 + <div class="navbar">
31 - <ul class="nav navbar-nav"> 28 + <ul class="nav">
32 - <li > 29 + <li class="nav-item">
33 - <a href="/">Home</a> 30 + <a class="nav-link" href="/">Home</a>
34 </li> 31 </li>
35 - <li><a href="/categori/products">Categori</a></li> 32 + <li class="nav-item"><a class="nav-link" href="/categori/products">Categori</a></li>
36 <% if(isLogin){%> 33 <% if(isLogin){%>
37 - <li><a href="/accounts/logout" onclick="return confirm('로그아웃 하시겠습니까?')">LOGOUT</a></li> 34 + <li class="nav-item"><a class="nav-link" href="/accounts/logout" onclick="return confirm('로그아웃 하시겠습니까?')">LOGOUT</a></li>
38 <%}else{%> 35 <%}else{%>
39 - <li><a href="/accounts/join">SignUp</a></li> 36 + <li class="nav-item"><a class="nav-link" href="/accounts/join">SignUp</a></li>
40 - <li><a href="/accounts/login">LOGIN</a></li> 37 + <li class="nav-item"><a class="nav-link" href="/accounts/login">LOGIN</a></li>
41 <%}%> 38 <%}%>
42 </ul> 39 </ul>
43 </div> 40 </div>
44 </div> 41 </div>
45 - <hr style=" border: 2px solid #4dabf7" /> 42 + </nav>
43 + <hr style=" border: 2px solid #4263eb" />
46 44
......