김대철 / CafeRecommend

Go to a project
Toggle navigation Toggle navigation pinning
최정민
8dc87a62 1 parent c16e4e39

FEAT : 부트스트랩을 통한 디자인 로직 추가 

-
Expand all
Inline Side-by-side
Showing 24 changed files with 564 additions and 29 deletions
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff is collapsed. Click to expand it.
/*!
* Bootstrap Reboot v5.0.0-alpha1 (https://getbootstrap.com/)
* Copyright 2011-2020 The Bootstrap Authors
* Copyright 2011-2020 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
* Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
*/
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
background-color: #fff;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
[tabindex="-1"]:focus:not(:focus-visible) {
outline: 0 !important;
}
hr {
margin: 1rem 0;
color: inherit;
background-color: currentColor;
border: 0;
opacity: 0.25;
}
hr:not([size]) {
height: 1px;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
margin-bottom: 0.5rem;
font-weight: 500;
line-height: 1.2;
}
h1 {
font-size: calc(1.375rem + 1.5vw);
}
@media (min-width: 1200px) {
h1 {
font-size: 2.5rem;
}
}
h2 {
font-size: calc(1.325rem + 0.9vw);
}
@media (min-width: 1200px) {
h2 {
font-size: 2rem;
}
}
h3 {
font-size: calc(1.3rem + 0.6vw);
}
@media (min-width: 1200px) {
h3 {
font-size: 1.75rem;
}
}
h4 {
font-size: calc(1.275rem + 0.3vw);
}
@media (min-width: 1200px) {
h4 {
font-size: 1.5rem;
}
}
h5 {
font-size: 1.25rem;
}
h6 {
font-size: 1rem;
}
p {
margin-top: 0;
margin-bottom: 1rem;
}
abbr[title],
abbr[data-original-title] {
text-decoration: underline;
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
cursor: help;
-webkit-text-decoration-skip-ink: none;
text-decoration-skip-ink: none;
}
address {
margin-bottom: 1rem;
font-style: normal;
line-height: inherit;
}
ol,
ul {
padding-left: 2rem;
}
ol,
ul,
dl {
margin-top: 0;
margin-bottom: 1rem;
}
ol ol,
ul ul,
ol ul,
ul ol {
margin-bottom: 0;
}
dt {
font-weight: 700;
}
dd {
margin-bottom: .5rem;
margin-left: 0;
}
blockquote {
margin: 0 0 1rem;
}
b,
strong {
font-weight: bolder;
}
small {
font-size: 0.875em;
}
mark {
padding: 0.2em;
background-color: #fcf8e3;
}
sub,
sup {
position: relative;
font-size: 0.75em;
line-height: 0;
vertical-align: baseline;
}
sub {
bottom: -.25em;
}
sup {
top: -.5em;
}
a {
color: #0d6efd;
text-decoration: underline;
}
a:hover {
color: #024dbc;
}
a:not([href]):not([class]), a:not([href]):not([class]):hover {
color: inherit;
text-decoration: none;
}
pre,
code,
kbd,
samp {
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 1em;
}
pre {
display: block;
margin-top: 0;
margin-bottom: 1rem;
overflow: auto;
font-size: 0.875em;
-ms-overflow-style: scrollbar;
}
pre code {
font-size: inherit;
color: inherit;
word-break: normal;
}
code {
font-size: 0.875em;
color: #d63384;
word-wrap: break-word;
}
a > code {
color: inherit;
}
kbd {
padding: 0.2rem 0.4rem;
font-size: 0.875em;
color: #fff;
background-color: #212529;
border-radius: 0.2rem;
}
kbd kbd {
padding: 0;
font-size: 1em;
font-weight: 700;
}
figure {
margin: 0 0 1rem;
}
img,
svg {
vertical-align: middle;
}
table {
caption-side: bottom;
border-collapse: collapse;
}
caption {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
color: #6c757d;
text-align: left;
}
th {
text-align: inherit;
text-align: -webkit-match-parent;
}
thead,
tbody,
tfoot,
tr,
td,
th {
border-color: inherit;
border-style: solid;
border-width: 0;
}
label {
display: inline-block;
}
button {
border-radius: 0;
}
button:focus {
outline: 1px dotted;
outline: 5px auto -webkit-focus-ring-color;
}
input,
button,
select,
optgroup,
textarea {
margin: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
button,
input {
overflow: visible;
}
button,
select {
text-transform: none;
}
[role="button"] {
cursor: pointer;
}
select {
word-wrap: normal;
}
[list]::-webkit-calendar-picker-indicator {
display: none;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
button:not(:disabled),
[type="button"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="submit"]:not(:disabled) {
cursor: pointer;
}
::-moz-focus-inner {
padding: 0;
border-style: none;
}
textarea {
resize: vertical;
}
fieldset {
min-width: 0;
padding: 0;
margin: 0;
border: 0;
}
legend {
float: left;
width: 100%;
padding: 0;
margin-bottom: 0.5rem;
font-size: calc(1.275rem + 0.3vw);
line-height: inherit;
white-space: normal;
}
@media (min-width: 1200px) {
legend {
font-size: 1.5rem;
}
}
legend + * {
clear: left;
}
::-webkit-datetime-edit-fields-wrapper,
::-webkit-datetime-edit-text,
::-webkit-datetime-edit-minute,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-year-field {
padding: 0;
}
::-webkit-inner-spin-button {
height: auto;
}
[type="search"] {
outline-offset: -2px;
-webkit-appearance: textfield;
}
::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-color-swatch-wrapper {
padding: 0;
}
::-webkit-file-upload-button {
font: inherit;
-webkit-appearance: button;
}
output {
display: inline-block;
}
iframe {
border: 0;
}
summary {
display: list-item;
cursor: pointer;
}
progress {
vertical-align: baseline;
}
[hidden] {
display: none !important;
}
/*# sourceMappingURL=bootstrap-reboot.css.map */
\ No newline at end of file
This diff is collapsed. Click to expand it.
This diff could not be displayed because it is too large.
var express = require("express");
var router = express.Router();
//var request = require("request");
var request = require("request");
var bodyParser = require("body-parser");
var { OAuth2Client } = require("google-auth-library");
//var querystring = require("querystring");
var querystring = require("querystring");
var CLIENT_ID =
"94679084723-s5f0686p2porp9mkakrp1p89a48n24nj.apps.googleusercontent.com";
......
{"cookie":{"originalMaxAge":null,"expires":null,"httpOnly":true,"path":"/"},"__lastAccess":1621433406098}
\ No newline at end of file
{"cookie":{"originalMaxAge":null,"expires":null,"httpOnly":true,"path":"/"},"__lastAccess":1621704357295,"user":{"name":"‍최정민[학생](소프트웨어융합대학 컴퓨터공학과)","email":"cjm2021401@khu.ac.kr","nickname":"cjm","age":"24","gender":"male"}}
\ No newline at end of file
{"cookie":{"originalMaxAge":null,"expires":null,"httpOnly":true,"path":"/"},"__lastAccess":1621187236305}
\ No newline at end of file
{"cookie":{"originalMaxAge":null,"expires":null,"httpOnly":true,"path":"/"},"__lastAccess":1621534089028,"user":{"name":"‍최정민[학생](소프트웨어융합대학 컴퓨터공학과)","email":"cjm2021401@khu.ac.kr"}}
\ No newline at end of file
{"cookie":{"originalMaxAge":null,"expires":null,"httpOnly":true,"path":"/"},"__lastAccess":1621408098038}
\ No newline at end of file
{"cookie":{"originalMaxAge":null,"expires":null,"httpOnly":true,"path":"/"},"__lastAccess":1621338937349}
\ No newline at end of file
{"cookie":{"originalMaxAge":null,"expires":null,"httpOnly":true,"path":"/"},"__lastAccess":1621186188104}
\ No newline at end of file
{"cookie":{"originalMaxAge":null,"expires":null,"httpOnly":true,"path":"/"},"__lastAccess":1621592914035,"user":{"name":"‍최정민[학생](소프트웨어융합대학 컴퓨터공학과)","email":"cjm2021401@khu.ac.kr","nickname":"MickeyMouse","age":"19","gender":"male"}}
\ No newline at end of file
{"cookie":{"originalMaxAge":null,"expires":null,"httpOnly":true,"path":"/"},"__lastAccess":1621191395860,"user":{"name":"‍최정민[학생](소프트웨어융합대학 컴퓨터공학과)","email":"cjm2021401@khu.ac.kr","nickname":"Mayf","age":"25","gender":"male"},"gender":"male"}
\ No newline at end of file
{"cookie":{"originalMaxAge":null,"expires":null,"httpOnly":true,"path":"/"},"__lastAccess":1621338737470}
\ No newline at end of file
{"cookie":{"originalMaxAge":null,"expires":null,"httpOnly":true,"path":"/"},"__lastAccess":1621216159014}
\ No newline at end of file
{"cookie":{"originalMaxAge":null,"expires":null,"httpOnly":true,"path":"/"},"__lastAccess":1621337475210}
\ No newline at end of file
......@@ -6,13 +6,63 @@
<meta name="google-signin-client_id" content="94679084723-s5f0686p2porp9mkakrp1p89a48n24nj.apps.googleusercontent.com">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>first</title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<link rel="stylesheet" href="stylesheets/bootstrap.css">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@700&display=swap" rel="stylesheet">
<style>
img{
max-width: 100%;
height: 100% !important;
}
h1{font-family: 'Noto Sans KR', sans-serif;}
h4{font-family: 'Noto Sans KR', sans-serif;}
h2{font-family: 'Noto Sans KR', sans-serif;}
h3{font-family: 'Noto Sans KR', sans-serif;}
h5{font-family: 'Noto Sans KR', sans-serif;}
.middle{
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<h1>Login</h1>
<div class="g-signin2" data-onsuccess="onSignIn"></div>
<a href="#" onclick="signOut();">Sign out</a>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="/"><img src="images/home.png" width="40" height="40" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<a class="navbar-brand" href="/" ><strong>Home</strong></a>
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" style="color:#ffffff" href="/" onclick="signOut();">Logout<span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</nav>
<div class="pricing-header px-3 py-1 pt-md-3 pb-md-1 mx-auto text-center">
<h3 class="display-6 font-weight-bold" >Login</h3>
</div>
<section id="carousel-3" class="text-center">
<div class="row">
<div class="col-4"></div>
<div class="col-4"><div class="g-signin2" class="text-center" data-onsuccess="onSignIn"></div></div>
<a href="#" onclick="signOut();">Sign out</a>
</div>
</div>
</section>
</body>
......@@ -40,4 +90,5 @@
});
}
</script>
<script src="javascripts/bootstrap.js"></script>
</html>
......
......@@ -5,23 +5,84 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>logined</title>
<link rel="stylesheet" href="stylesheets/bootstrap.css">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@700&display=swap" rel="stylesheet">
<style>
img{
max-width: 100%;
height: 100% !important;
}
h1{font-family: 'Noto Sans KR', sans-serif;}
h4{font-family: 'Noto Sans KR', sans-serif;}
h2{font-family: 'Noto Sans KR', sans-serif;}
h3{font-family: 'Noto Sans KR', sans-serif;}
h5{font-family: 'Noto Sans KR', sans-serif;}
.middle{
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="/"><img src="images/home.png" width="40" height="40" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<a class="navbar-brand" href="/" ><strong>Home</strong></a>
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" style="color:#ffffff" href="/" onclick="signOut();">Logout<span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</nav>
<div class="pricing-header px-3 py-1 pt-md-3 pb-md-1 mx-auto text-center">
<h3 class="display-6 font-weight-bold" >Signup</h3>
</div>
<hr class="my-2" >
<section id="carousel-1">
<div class="row">
<div class="col-2"></div>
<div class="col-8">
<hr class="my-4" style="background-color: white">
<form method="post">
<div class="form-group ">
<label for="id_input">닉네임을 입력하세요</label>
<input type="text" class="form-control form-control-lg" name="nickname" aria-describedby="idHelp" placeholder="ID">
<small id="idHelp" class="form-text text-muted">중복이 허용되지 않습니다.</small>
</div>
<hr class="my-3" style="background-color: white">
<div class="form-group">
<label for="age_input">나이를 입력하세요</label>
<input class="form-control form-control-lg" type="number" name="age"placeholder="Age">
</div>
<hr class="my-3" style="background-color: white">
<label for="gender" class="form-label ">성별을 입력하세요</label>
<select class="form-select form-select-lg" id="gender" name="gender" required>
<option selected disabled value="">Choose...</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
<h1>Hi <%= user.name %></h1>
<form method="post">
NickName:<br>
<input type="text" name="nickname" value="MickeyMouse"><br>
Age:<br>
<input type="text" name="age" value="19"><br><br>
<hr class="my-4" style="background-color: white">
<button type="submit" style="float:right" class="btn btn-primary btn-lg" id="please">Submit</button>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
</form>
</div>
<div class="col-2"></div>
</div>
</section>
<input type="submit" value="Submit">
</form>
<a href="/logout" onclick="signOut();">Sign Out</a>
<%if (message=='same nickname'){%>
<script type="text/javascript">
......@@ -40,5 +101,12 @@
console.log('User signed out.');
});
}
function signOut() {
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(function () {
console.log('User signed out.');
});
}
</script>
<script src="javascripts/bootstrap.js"></script>
</html>
\ No newline at end of file
......
This diff is collapsed. Click to expand it.