김재현 / 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
1 +@import url("http://fonts.googleapis.com/earlyaccess/jejumyeongjo.css");
2 +@import url("http://fonts.googleapis.com/earlyaccess/hanna.css");
1 body, 3 body,
2 a { 4 a {
3 color: #808080; 5 color: #808080;
4 } 6 }
5 ul.sidenav { 7 ul.sidenav {
8 + font-family: 'Jeju Myeongjo', serif;
6 list-style-type: none; 9 list-style-type: none;
7 margin: 0; 10 margin: 0;
8 padding: 0; 11 padding: 0;
9 - width: 15%; 12 + overflow: hidden;
10 - background-color: #f1f1f1; 13 + background-color: #fff;
11 - height: 100%; 14 + border-bottom: 1px solid #ddd;
12 - position: fixed; 15 +}
13 - overflow: auto; 16 +ul.sidenav li {
17 + margin-left: 20%;
18 + float: left;
19 + color: #000;
14 } 20 }
15 ul.sidenav li a { 21 ul.sidenav li a {
16 display: block; 22 display: block;
17 color: #000; 23 color: #000;
18 - padding: 8px 16px; 24 + text-align: center;
25 + padding: 14px 16px;
19 text-decoration: none; 26 text-decoration: none;
20 } 27 }
21 -ul.sidenav li a.active { 28 +ul.sidenav li a:hover {
22 - background-color: #4caf50; 29 + background-color: #111;
23 - color: #fff;
24 -}
25 -ul.sidenav li a:hover:not(.active) {
26 - background-color: #555;
27 color: #fff; 30 color: #fff;
28 } 31 }
29 #title { 32 #title {
33 + font-family: 'Jeju Myeongjo', serif;
30 text-align: center; 34 text-align: center;
31 width: 100%; 35 width: 100%;
32 - font-size: 50px; 36 + font-size: 20px;
33 padding-bottom: 30px; 37 padding-bottom: 30px;
34 } 38 }
35 #content { 39 #content {
36 - margin-left: 25%;
37 padding: 10px 16px; 40 padding: 10px 16px;
38 height: 100%; 41 height: 100%;
42 + background-color: f5f5f5;
43 + text-align: center;
39 } 44 }
40 table { 45 table {
41 - width: 70%; 46 + font-family: 'Hanna';
42 border-collapse: collapse; 47 border-collapse: collapse;
43 text-align: center; 48 text-align: center;
44 vertical-align: middle; 49 vertical-align: middle;
50 + margin: 0 auto 0 auto;
45 } 51 }
46 td { 52 td {
47 vertical-align: middle; 53 vertical-align: middle;
48 text-align: center; 54 text-align: center;
49 border: 1px solid #ddd; 55 border: 1px solid #ddd;
50 - width: 10%; 56 + width: 200px;
51 - height: 0%; 57 + height: 200px;
52 - padding-bottom: 20%;
53 background-image: url("/images/stamp.jpg"); 58 background-image: url("/images/stamp.jpg");
54 background-repeat: no-repeat; 59 background-repeat: no-repeat;
55 background-position: center top; 60 background-position: center top;
56 } 61 }
57 .bold { 62 .bold {
58 - color: #ffc0cb; 63 + color: #000;
59 - font-size: 100%; 64 + font-size: 14pt;
60 } 65 }
61 .small { 66 .small {
62 - color: #808080; 67 + color: #f00;
63 font-size: 8pt; 68 font-size: 8pt;
64 -} 69 + font-family: 'Jeju Myeongjo', serif;
65 -#show {
66 - width: 15%;
67 - height: 55%;
68 - display: inline-block;
69 - float: left;
70 - overflow: auto;
71 - position: fixed;
72 - background-color: #000;
73 } 70 }
74 #maintitle { 71 #maintitle {
75 text-align: center; 72 text-align: center;
...@@ -77,19 +74,9 @@ td { ...@@ -77,19 +74,9 @@ td {
77 color: #fff; 74 color: #fff;
78 height: 55%; 75 height: 55%;
79 padding: 8px 16px; 76 padding: 8px 16px;
80 - margin-left: 15%;
81 -}
82 -#mynav {
83 - display: block;
84 - margin-left: -250px;
85 - transition: all 0.4s ease-in-out 0s;
86 -}
87 -#mynav.open {
88 - transition: all 0.4s ease-in-out 0s;
89 - float: left;
90 - margin-left: 0px;
91 } 77 }
92 #map { 78 #map {
93 height: 400px; 79 height: 400px;
94 - width: 100%; 80 + width: 60%;
81 + margin: 0 auto 0 auto;
95 } 82 }
......
1 -body
2 1
2 +@import url(http://fonts.googleapis.com/earlyaccess/jejumyeongjo.css);
3 +@import url(http://fonts.googleapis.com/earlyaccess/hanna.css);
4 +body
3 5
4 6
5 7
...@@ -7,74 +9,72 @@ a ...@@ -7,74 +9,72 @@ a
7 color: gray; 9 color: gray;
8 10
9 ul.sidenav 11 ul.sidenav
12 +
13 + font-family: 'Jeju Myeongjo', serif;
10 list-style-type: none; 14 list-style-type: none;
11 margin: 0; 15 margin: 0;
12 padding: 0; 16 padding: 0;
13 - width: 15%; 17 + overflow: hidden;
14 - background-color: #f1f1f1; 18 + background-color: white;
15 - height: 100%; 19 + border-bottom: 1px solid #ddd;
16 - position : fixed;s 20 +
17 - overflow : auto; 21 +ul.sidenav li
22 +
23 + margin-left : 20%;
24 + float: left;
25 + color : black;
18 26
19 ul.sidenav li a 27 ul.sidenav li a
20 display: block; 28 display: block;
21 - color: #000; 29 + color: black;
22 - padding: 8px 16px; 30 + text-align: center;
31 + padding: 14px 16px;
23 text-decoration: none; 32 text-decoration: none;
24 33
25 34
26 -ul.sidenav li a.active 35 +ul.sidenav li a:hover
27 - background-color: #4CAF50; 36 + background-color: #111;
28 - color: white; 37 + color : white;
29 -
30 38
31 -ul.sidenav li a:hover:not(.active)
32 - background-color: #555;
33 - color: white;
34 39
35 40
36 #title 41 #title
42 + font-family: 'Jeju Myeongjo', serif;
37 text-align : center; 43 text-align : center;
38 width : 100% 44 width : 100%
39 - font-size : 50px; 45 + font-size : 20px;
40 padding-bottom : 30px; 46 padding-bottom : 30px;
41 47
42 #content 48 #content
43 -
44 - margin-left: 25%;
45 padding: 10px 16px; 49 padding: 10px 16px;
46 height: 100%; 50 height: 100%;
51 + background-color : f5f5f5;
52 + text-align : center;
47 53
48 table 54 table
49 - width : 70%; 55 + font-family: 'Hanna';
50 border-collapse: collapse; 56 border-collapse: collapse;
51 text-align : center; 57 text-align : center;
52 vertical-align : middle; 58 vertical-align : middle;
59 + margin: 0 auto 0 auto;
53 td 60 td
54 vertical-align: middle; 61 vertical-align: middle;
55 text-align : center; 62 text-align : center;
56 border: 1px solid #ddd; 63 border: 1px solid #ddd;
57 - width : 10%; 64 + width : 200px;
58 - height : 0%; 65 + height : 200px;
59 - padding-bottom: 20%; 66 +
60 background-image : url("/images/stamp.jpg"); 67 background-image : url("/images/stamp.jpg");
61 background-repeat: no-repeat; 68 background-repeat: no-repeat;
62 background-position: center top; 69 background-position: center top;
63 70
64 .bold 71 .bold
65 - color : pink; 72 + color : black;
66 - font-size : 100%; 73 + font-size : 14pt;
67 .small 74 .small
68 - color : grey; 75 + color : red;
69 font-size : 8pt; 76 font-size : 8pt;
70 -#show 77 + font-family: 'Jeju Myeongjo', serif;
71 - width: 15%;
72 - height : 55%;
73 - display : inline-block;
74 - float : left;
75 - overflow : auto;
76 - position : fixed;
77 - background-color : black;
78 78
79 #maintitle 79 #maintitle
80 text-align : center; 80 text-align : center;
...@@ -82,17 +82,8 @@ td ...@@ -82,17 +82,8 @@ td
82 color : white; 82 color : white;
83 height : 55%; 83 height : 55%;
84 padding: 8px 16px; 84 padding: 8px 16px;
85 - margin-left : 15%;
86 -
87 -#mynav
88 - display: block;
89 - margin-left: -250px;
90 - transition:all 0.4s ease-in-out 0s;
91 85
92 -#mynav.open
93 - transition:all 0.4s ease-in-out 0s;
94 - float:left;
95 - margin-left : 0px;
96 #map 86 #map
97 height: 400px; 87 height: 400px;
98 - width: 100%; 88 + width: 60%;
89 + margin: 0 auto 0 auto;
......
...@@ -4,8 +4,8 @@ var router = express.Router(); ...@@ -4,8 +4,8 @@ var router = express.Router();
4 4
5 var connection = mysql.createConnection({ 5 var connection = mysql.createConnection({
6 host : 'localhost', 6 host : 'localhost',
7 - user : 'admin', 7 + user : 'root',
8 - password : 'admin', 8 + password : 'qmfkdnsl',
9 database : 'ossprojectdb' 9 database : 'ossprojectdb'
10 }); 10 });
11 11
......
...@@ -16,13 +16,6 @@ ...@@ -16,13 +16,6 @@
16 16
17 17
18 18
19 - $('#show').click(function() {
20 -
21 - //$('.sidenav').slideToggle("fast");
22 - $this = $(this);
23 - $nav = $('#mynav');
24 - $nav.toggleClass('open');
25 - });
26 }); 19 });
27 20
28 21
...@@ -31,8 +24,8 @@ ...@@ -31,8 +24,8 @@
31 24
32 25
33 26
34 - <div id ="show">clickmenu</div> 27 +
35 - <div id ="maintitle">맛집견문록</div> 28 + <div id ="maintitle"><image src ='/images/title.png' /></div>
36 29
37 <div id ="mynav"> 30 <div id ="mynav">
38 <ul class="sidenav"> 31 <ul class="sidenav">
...@@ -46,7 +39,6 @@ ...@@ -46,7 +39,6 @@
46 39
47 40
48 41
49 - <div id= "title"></div>
50 <div id ="content"> 42 <div id ="content">
51 43
52 <h1><%= title %></h1> 44 <h1><%= title %></h1>
......
...@@ -103,7 +103,7 @@ ...@@ -103,7 +103,7 @@
103 '<h1 id="firstHeading" class="firstHeading">'+place.name+'</h1>'+ 103 '<h1 id="firstHeading" class="firstHeading">'+place.name+'</h1>'+
104 '<div id="bodyContent">'+ 104 '<div id="bodyContent">'+
105 '<p>주소: '+place.vicinity+'<br/>'+ 105 '<p>주소: '+place.vicinity+'<br/>'+
106 - '<button id="'+place.id+'" name="'+place.name+'" address="'+place.vicinity+'" onclick="addShop(this)">'+ 106 + '<button id="'+place.id+'" name="'+place.name+'" address="'+place.vicinity+'" onclick="addShop(this)" >'+
107 '표시하기</a> '+ 107 '표시하기</a> '+
108 '</p>'+ 108 '</p>'+
109 '</div>'+ 109 '</div>'+
...@@ -123,10 +123,13 @@ ...@@ -123,10 +123,13 @@
123 123
124 google.maps.event.addListener(marker1, 'click', function(e) { 124 google.maps.event.addListener(marker1, 'click', function(e) {
125 125
126 + ;
127 +
126 var infowindow = new google.maps.InfoWindow({ 128 var infowindow = new google.maps.InfoWindow({
127 content: contentString, 129 content: contentString,
128 maxWidth: 300 130 maxWidth: 300
129 }); 131 });
132 + $(":button."+place.name).css("color","red")
130 infowindow.open(map, this); 133 infowindow.open(map, this);
131 134
132 }); 135 });
...@@ -170,8 +173,7 @@ ...@@ -170,8 +173,7 @@
170 </script> 173 </script>
171 174
172 175
173 - <div id ="show">clickmenu</div> 176 + <div id ="maintitle"><image src ='/images/title.png' /></div>
174 - <div id ="maintitle">맛집견문록</div>
175 177
176 <div id ="mynav"> 178 <div id ="mynav">
177 <ul class="sidenav"> 179 <ul class="sidenav">
...@@ -182,9 +184,7 @@ ...@@ -182,9 +184,7 @@
182 </div> 184 </div>
183 185
184 186
185 - <div id = "title"> </div> 187 + <div id ="content"><br/>
186 -
187 - <div id ="content">
188 <div id="map"></div> 188 <div id="map"></div>
189 <div id="popup"></div> 189 <div id="popup"></div>
190 <!-- <div id="form"> 190 <!-- <div id="form">
......
...@@ -9,15 +9,7 @@ ...@@ -9,15 +9,7 @@
9 <script> 9 <script>
10 10
11 $(document).ready(function() { 11 $(document).ready(function() {
12 - //$('.sidenav').hide();
13 12
14 - $('#show').click(function() {
15 -
16 - //$('.sidenav').slideToggle("fast");
17 - $this = $(this);
18 - $nav = $('#mynav');
19 - $nav.toggleClass('open');
20 - });
21 }); 13 });
22 14
23 15
...@@ -25,7 +17,7 @@ ...@@ -25,7 +17,7 @@
25 17
26 18
27 19
28 - <div id ="show">clickmenu</div> 20 +
29 <div id ="maintitle"><image src ='/images/title.png' /></div> 21 <div id ="maintitle"><image src ='/images/title.png' /></div>
30 22
31 <div id ="mynav"> 23 <div id ="mynav">
...@@ -38,13 +30,15 @@ ...@@ -38,13 +30,15 @@
38 </div> 30 </div>
39 31
40 32
41 - <div id = "title">
42 33
43 - ㅇㅇㅇ님의 맛집 견문록<br/>
44 34
45 - </div> 35 + <div id ="content"> <br/>
36 +
37 + <div id = "title">
38 +
39 + 당신의 견문록 스탬프는 <%=rows.length%>개 입니다<br/>
46 40
47 - <div id ="content"> 41 + </div>
48 42
49 <table border="1"> 43 <table border="1">
50 44
...@@ -57,24 +51,24 @@ ...@@ -57,24 +51,24 @@
57 <%if(i==0){ %> 51 <%if(i==0){ %>
58 52
59 <tr> 53 <tr>
60 - <td><p class="bold"><%=i%>:a <%=oneItem.title%></p> 54 + <td><p class="bold"><%=i%> <%=oneItem.title%></p>
61 <p class="small"><%=oneItem.address%></p></td> 55 <p class="small"><%=oneItem.address%></p></td>
62 56
63 <%} else if (i%3==0){%> 57 <%} else if (i%3==0){%>
64 </tr> 58 </tr>
65 <tr> 59 <tr>
66 - <td><p class="bold"><%=i%>:b <%=oneItem.title%></p> 60 + <td><p class="bold"><%=i%> <%=oneItem.title%></p>
67 <p class="small"><%=oneItem.address%></p></td> 61 <p class="small"><%=oneItem.address%></p></td>
68 62
69 63
70 <%}else if(i%3!=0 && i!=rows.length-1){%> 64 <%}else if(i%3!=0 && i!=rows.length-1){%>
71 65
72 - <td><p class="bold"><%=i%>:c <%=oneItem.title%></p> 66 + <td><p class="bold"><%=i%> <%=oneItem.title%></p>
73 <p class="small"><%=oneItem.address%></p></td> 67 <p class="small"><%=oneItem.address%></p></td>
74 68
75 <%}else{%> 69 <%}else{%>
76 70
77 - <td><p class="bold"><%=i%>:c <%=oneItem.title%></p> 71 + <td><p class="bold"><%=i%> <%=oneItem.title%></p>
78 <p class="small"><%=oneItem.address%></p></td></tr> 72 <p class="small"><%=oneItem.address%></p></td></tr>
79 73
80 <%}}%> 74 <%}}%>
......