김대철 / 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 609 additions and 67 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">
<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>
<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>
<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>
<hr class="my-4" style="background-color: white">
<button type="submit" style="float:right" class="btn btn-primary btn-lg" id="please">Submit</button>
</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
......
<!DOCTYPE html>
<html>
<head>
<head>
<link rel="stylesheet" href="stylesheets/bootstrap.css">
<title>Cafe Map</title>
<style>
.navbar{
background-color: #1d2124 !important;
}
.btn-primary{
color : white !important;
}
p{font-family: 'Noto Sans KR', sans-serif;}
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;}
.placeinfo_wrap {
position: absolute;
bottom: 28px;
......@@ -70,43 +83,54 @@
margin-top: 0;
}
</style>
</head>
<body>
<div id="map" style="width: 100%; height: 575px"></div>
<script
</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" >Map</h3>
</div>
<div id="map" style="width: 100%; height: 575px"></div>
<script
type="text/javascript"
src="//dapi.kakao.com/v2/maps/sdk.js?appkey=68cbccbcd6f0fef0a213e62ad37393ee&libraries=services"
></script>
<script>
></script>
<script>
var lat = "";
var lon = "";
var placeOverlay = new kakao.maps.CustomOverlay({ zIndex: 1 });
var contentNode = document.createElement("div");
var markers = [];
var currCategory = "CE7"; // 카테고리코드: 카페
var order = 1;
var mapContainer = document.getElementById("map"),
mapOption = {
center: new kakao.maps.LatLng(36.2477502, 127.078164),
level: 3,
};
var map = new kakao.maps.Map(mapContainer, mapOption);
var ps = new kakao.maps.services.Places(map);
kakao.maps.event.addListener(map, "idle", searchPlaces);
contentNode.className = "placeinfo_wrap";
addEventHandle(contentNode, "mousedown", kakao.maps.event.preventMap);
addEventHandle(contentNode, "touchstart", kakao.maps.event.preventMap);
placeOverlay.setContent(contentNode);
function addEventHandle(target, type, callback) {
if (target.addEventListener) {
target.addEventListener(type, callback);
......@@ -114,51 +138,40 @@
target.attachEvent("on" + type, callback);
}
}
placeOverlay.setContent(contentNode);
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
lat = position.coords.latitude;
lon = position.coords.longitude;
var locPosition = new kakao.maps.LatLng(lat, lon);
displayCurrentPosition(locPosition);
});
} else {
var locPosition = new kakao.maps.LatLng(36.2477502, 127.078164);
displayCurrentPosition(locPosition);
}
function displayCurrentPosition(locPosition) {
map.setCenter(locPosition);
}
kakao.maps.event.addListener(map, "idle", searchPlaces);
function searchPlaces() {
if (!currCategory) {
return;
}
placeOverlay.setMap(null);
ps.categorySearch(currCategory, placesSearchCB, { usemapBounds: true });
}
function placesSearchCB(data, status, pagination) {
if (status === kakao.maps.services.Status.OK) {
displayPlaces(data);
}
}
function displayPlaces(places) {
for (var i = 0; i < places.length; i++) {
var marker = addMarker(
new kakao.maps.LatLng(places[i].y, places[i].x),
order
);
(function (marker, place) {
kakao.maps.event.addListener(marker, "click", function () {
displayPlaceInfo(place);
......@@ -166,7 +179,6 @@
})(marker, places[i]);
}
}
function addMarker(position, order) {
var imageSrc =
"https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/places_category.png";
......@@ -181,18 +193,14 @@
imageSize,
imgOptions
);
var marker = new kakao.maps.Marker({
position: position,
image: markerImage,
});
marker.setMap(map);
markers.push(marker);
return marker;
}
function displayPlaceInfo(place) {
var content =
'<div class="placeinfo">' +
......@@ -203,7 +211,6 @@
'">' +
place.place_name +
"</a>";
if (place.road_address_name) {
content +=
' <span title="' +
......@@ -224,18 +231,18 @@
place.address_name +
"</span>";
}
content +=
' <span class="tel">' +
place.phone +
"</span>" +
"</div>" +
'<div class="after"></div>';
contentNode.innerHTML = content;
placeOverlay.setPosition(new kakao.maps.LatLng(place.y, place.x));
placeOverlay.setMap(map);
}
</script>
</body>
</script>
<script src="javascripts/bootstrap.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</body>
</html>
......