김재현 / open-source-project-2017-02

Go to a project
Toggle navigation Toggle navigation pinning
김정은
0d56d94e 1 parent 803b33aa

visualizing our project

Inline Side-by-side
Showing 7 changed files with 85 additions and 121 deletions

36.1 KB | W: | H:

38.9 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
@import url("http://fonts.googleapis.com/earlyaccess/jejumyeongjo.css");
@import url("http://fonts.googleapis.com/earlyaccess/hanna.css");
body,
a {
color: #808080;
}
ul.sidenav {
font-family: 'Jeju Myeongjo', serif;
list-style-type: none;
margin: 0;
padding: 0;
width: 15%;
background-color: #f1f1f1;
height: 100%;
position: fixed;
overflow: auto;
overflow: hidden;
background-color: #fff;
border-bottom: 1px solid #ddd;
}
ul.sidenav li {
margin-left: 20%;
float: left;
color: #000;
}
ul.sidenav li a {
display: block;
color: #000;
padding: 8px 16px;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul.sidenav li a.active {
background-color: #4caf50;
color: #fff;
}
ul.sidenav li a:hover:not(.active) {
background-color: #555;
ul.sidenav li a:hover {
background-color: #111;
color: #fff;
}
#title {
font-family: 'Jeju Myeongjo', serif;
text-align: center;
width: 100%;
font-size: 50px;
font-size: 20px;
padding-bottom: 30px;
}
#content {
margin-left: 25%;
padding: 10px 16px;
height: 100%;
background-color: f5f5f5;
text-align: center;
}
table {
width: 70%;
font-family: 'Hanna';
border-collapse: collapse;
text-align: center;
vertical-align: middle;
margin: 0 auto 0 auto;
}
td {
vertical-align: middle;
text-align: center;
border: 1px solid #ddd;
width: 10%;
height: 0%;
padding-bottom: 20%;
width: 200px;
height: 200px;
background-image: url("/images/stamp.jpg");
background-repeat: no-repeat;
background-position: center top;
}
.bold {
color: #ffc0cb;
font-size: 100%;
color: #000;
font-size: 14pt;
}
.small {
color: #808080;
color: #f00;
font-size: 8pt;
}
#show {
width: 15%;
height: 55%;
display: inline-block;
float: left;
overflow: auto;
position: fixed;
background-color: #000;
font-family: 'Jeju Myeongjo', serif;
}
#maintitle {
text-align: center;
......@@ -77,19 +74,9 @@ td {
color: #fff;
height: 55%;
padding: 8px 16px;
margin-left: 15%;
}
#mynav {
display: block;
margin-left: -250px;
transition: all 0.4s ease-in-out 0s;
}
#mynav.open {
transition: all 0.4s ease-in-out 0s;
float: left;
margin-left: 0px;
}
#map {
height: 400px;
width: 100%;
width: 60%;
margin: 0 auto 0 auto;
}
......
body
@import url(http://fonts.googleapis.com/earlyaccess/jejumyeongjo.css);
@import url(http://fonts.googleapis.com/earlyaccess/hanna.css);
body
......@@ -7,74 +9,72 @@ a
color: gray;
ul.sidenav
font-family: 'Jeju Myeongjo', serif;
list-style-type: none;
margin: 0;
padding: 0;
width: 15%;
background-color: #f1f1f1;
height: 100%;
position : fixed;s
overflow : auto;
overflow: hidden;
background-color: white;
border-bottom: 1px solid #ddd;
ul.sidenav li
margin-left : 20%;
float: left;
color : black;
ul.sidenav li a
display: block;
color: #000;
padding: 8px 16px;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
ul.sidenav li a.active
background-color: #4CAF50;
color: white;
ul.sidenav li a:hover
background-color: #111;
color : white;
ul.sidenav li a:hover:not(.active)
background-color: #555;
color: white;
#title
font-family: 'Jeju Myeongjo', serif;
text-align : center;
width : 100%
font-size : 50px;
font-size : 20px;
padding-bottom : 30px;
#content
margin-left: 25%;
padding: 10px 16px;
height: 100%;
background-color : f5f5f5;
text-align : center;
table
width : 70%;
font-family: 'Hanna';
border-collapse: collapse;
text-align : center;
vertical-align : middle;
margin: 0 auto 0 auto;
td
vertical-align: middle;
text-align : center;
border: 1px solid #ddd;
width : 10%;
height : 0%;
padding-bottom: 20%;
width : 200px;
height : 200px;
background-image : url("/images/stamp.jpg");
background-repeat: no-repeat;
background-position: center top;
.bold
color : pink;
font-size : 100%;
color : black;
font-size : 14pt;
.small
color : grey;
color : red;
font-size : 8pt;
#show
width: 15%;
height : 55%;
display : inline-block;
float : left;
overflow : auto;
position : fixed;
background-color : black;
font-family: 'Jeju Myeongjo', serif;
#maintitle
text-align : center;
......@@ -82,17 +82,8 @@ td
color : white;
height : 55%;
padding: 8px 16px;
margin-left : 15%;
#mynav
display: block;
margin-left: -250px;
transition:all 0.4s ease-in-out 0s;
#mynav.open
transition:all 0.4s ease-in-out 0s;
float:left;
margin-left : 0px;
#map
height: 400px;
width: 100%;
width: 60%;
margin: 0 auto 0 auto;
......
......@@ -4,8 +4,8 @@ var router = express.Router();
var connection = mysql.createConnection({
host : 'localhost',
user : 'admin',
password : 'admin',
user : 'root',
password : 'qmfkdnsl',
database : 'ossprojectdb'
});
......
......@@ -16,13 +16,6 @@
$('#show').click(function() {
//$('.sidenav').slideToggle("fast");
$this = $(this);
$nav = $('#mynav');
$nav.toggleClass('open');
});
});
......@@ -31,8 +24,8 @@
<div id ="show">clickmenu</div>
<div id ="maintitle">맛집견문록</div>
<div id ="maintitle"><image src ='/images/title.png' /></div>
<div id ="mynav">
<ul class="sidenav">
......@@ -46,7 +39,6 @@
<div id= "title"></div>
<div id ="content">
<h1><%= title %></h1>
......
......@@ -103,7 +103,7 @@
'<h1 id="firstHeading" class="firstHeading">'+place.name+'</h1>'+
'<div id="bodyContent">'+
'<p>주소: '+place.vicinity+'<br/>'+
'<button id="'+place.id+'" name="'+place.name+'" address="'+place.vicinity+'" onclick="addShop(this)">'+
'<button id="'+place.id+'" name="'+place.name+'" address="'+place.vicinity+'" onclick="addShop(this)" >'+
'표시하기</a> '+
'</p>'+
'</div>'+
......@@ -123,10 +123,13 @@
google.maps.event.addListener(marker1, 'click', function(e) {
;
var infowindow = new google.maps.InfoWindow({
content: contentString,
maxWidth: 300
});
$(":button."+place.name).css("color","red")
infowindow.open(map, this);
});
......@@ -170,8 +173,7 @@
</script>
<div id ="show">clickmenu</div>
<div id ="maintitle">맛집견문록</div>
<div id ="maintitle"><image src ='/images/title.png' /></div>
<div id ="mynav">
<ul class="sidenav">
......@@ -182,9 +184,7 @@
</div>
<div id = "title"> </div>
<div id ="content">
<div id ="content"><br/>
<div id="map"></div>
<div id="popup"></div>
<!-- <div id="form">
......
......@@ -9,15 +9,7 @@
<script>
$(document).ready(function() {
//$('.sidenav').hide();
$('#show').click(function() {
//$('.sidenav').slideToggle("fast");
$this = $(this);
$nav = $('#mynav');
$nav.toggleClass('open');
});
});
......@@ -25,7 +17,7 @@
<div id ="show">clickmenu</div>
<div id ="maintitle"><image src ='/images/title.png' /></div>
<div id ="mynav">
......@@ -38,13 +30,15 @@
</div>
<div id = "title">
ㅇㅇㅇ님의 맛집 견문록<br/>
</div>
<div id ="content"> <br/>
<div id = "title">
당신의 견문록 스탬프는 <%=rows.length%>개 입니다<br/>
<div id ="content">
</div>
<table border="1">
......@@ -57,24 +51,24 @@
<%if(i==0){ %>
<tr>
<td><p class="bold"><%=i%>:a <%=oneItem.title%></p>
<td><p class="bold"><%=i%> <%=oneItem.title%></p>
<p class="small"><%=oneItem.address%></p></td>
<%} else if (i%3==0){%>
</tr>
<tr>
<td><p class="bold"><%=i%>:b <%=oneItem.title%></p>
<td><p class="bold"><%=i%> <%=oneItem.title%></p>
<p class="small"><%=oneItem.address%></p></td>
<%}else if(i%3!=0 && i!=rows.length-1){%>
<td><p class="bold"><%=i%>:c <%=oneItem.title%></p>
<td><p class="bold"><%=i%> <%=oneItem.title%></p>
<p class="small"><%=oneItem.address%></p></td>
<%}else{%>
<td><p class="bold"><%=i%>:c <%=oneItem.title%></p>
<td><p class="bold"><%=i%> <%=oneItem.title%></p>
<p class="small"><%=oneItem.address%></p></td></tr>
<%}}%>
......