teamPARK / holiday-counter-recommend-activity

Go to a project
Toggle navigation Toggle navigation pinning
박종현
18622cfa 1 parent 5ee10c24

Update design

Inline Side-by-side
Showing 3 changed files with 41 additions and 15 deletions
...@@ -2,42 +2,66 @@ ...@@ -2,42 +2,66 @@
2 margin: 0 auto; 2 margin: 0 auto;
3 width: 500px; 3 width: 500px;
4 height: 500px; 4 height: 500px;
5 - border: 15px solid rgb(158, 111, 170); 5 + border: 15px solid rgb(163, 151, 198);
6 border-radius: 50%; 6 border-radius: 50%;
7 } 7 }
8 .dday { 8 .dday {
9 - padding: 50px 0; 9 + padding: 20px 0;
10 } 10 }
11 .wrapper { 11 .wrapper {
12 margin: 0 auto; 12 margin: 0 auto;
13 - padding: 30px; 13 + padding: 20px;
14 max-width: 1170px; 14 max-width: 1170px;
15 } 15 }
16 .dDayFont { 16 .dDayFont {
17 font-size: 650%; 17 font-size: 650%;
18 } 18 }
19 h1 { 19 h1 {
20 - font-size: 40px; 20 + font-size: 80px;
21 - color : rgb(180, 74, 102); 21 + color : rgb(241, 49, 38);
22 font-family: 'Gowun Dodum', sans-serif; 22 font-family: 'Gowun Dodum', sans-serif;
23 } 23 }
24 h2 { 24 h2 {
25 - color :rgb(2, 2, 2); 25 + color :white;
26 font-weight: lighter; 26 font-weight: lighter;
27 font-family: 'Gowun Dodum', sans-serif; 27 font-family: 'Gowun Dodum', sans-serif;
28 } 28 }
29 +
30 +h3 {
31 + font-size: 50px;
32 + color : rgb(241, 49, 38);
33 + font-family: 'Gowun Dodum', sans-serif;
34 +}
29 #title { 35 #title {
30 color: rgb(191, 185, 211); 36 color: rgb(191, 185, 211);
31 font-size: 50px; 37 font-size: 50px;
32 - font-family: 'Jeju Hallasan'; 38 + font-family: 'Tiro Devanagari Marathi', serif;
33 font-weight: 600; 39 font-weight: 600;
34 } 40 }
35 #activity { 41 #activity {
36 - width:fit-content; 42 + width:1000px;
37 height:fit-content; 43 height:fit-content;
38 - border-radius: 40px 80px / 80px 40px; 44 + border-radius: 10p 10px / 10px 10px;
39 background-color: rgba(197, 97, 201, 0.486); 45 background-color: rgba(197, 97, 201, 0.486);
40 } 46 }
41 body { 47 body {
42 - background: linear-gradient(rgb(255, 255, 255), rgb(255, 228, 250), rgb(254, 210, 255)); 48 + margin-top: 100px;
49 + margin-bottom: 100px;
50 + margin-left: 50px;
51 + margin-right: 50px;
52 + background-color: rgb(78, 76, 76);
53 +}
54 +#background{
55 + width : 80%;
56 + height : 80%;
57 + border: 15px solid rgb(229, 220, 231);
58 + border-radius : 30px 30px / 30px 30px;
59 +
60 +}
61 +.box {
62 + margin : 50px;
63 + padding : 20px;
64 + border : 1px solid rgb(248, 239, 249);
65 + border-radius : 20px;
66 + background-color: rgb(255, 255, 255);
43 } 67 }
......
...@@ -11,6 +11,7 @@ var year = "2022"; ...@@ -11,6 +11,7 @@ var year = "2022";
11 var month = "09"; 11 var month = "09";
12 var operation = "getHoliDeInfo"; 12 var operation = "getHoliDeInfo";
13 13
14 +
14 // Do not modify the values 15 // Do not modify the values
15 var SERVEICE_KEY = 16 var SERVEICE_KEY =
16 "qBtJy2Prw8CCnAiijUM7VkuaA9MZozHuiQI4FbEGYdUDPz4%2FM%2FuxegGjNBWK0aWQHvSslVHwIZQwNWh57WgRTA%3D%3D"; 17 "qBtJy2Prw8CCnAiijUM7VkuaA9MZozHuiQI4FbEGYdUDPz4%2FM%2FuxegGjNBWK0aWQHvSslVHwIZQwNWh57WgRTA%3D%3D";
...@@ -26,6 +27,7 @@ var dateName = []; ...@@ -26,6 +27,7 @@ var dateName = [];
26 var locdate = []; 27 var locdate = [];
27 var tempArr = []; 28 var tempArr = [];
28 29
30 +
29 // To run EJS engine 31 // To run EJS engine
30 app.set("views", __dirname + "/views"); 32 app.set("views", __dirname + "/views");
31 app.set("view engine", "ejs"); 33 app.set("view engine", "ejs");
......
...@@ -14,21 +14,21 @@ ...@@ -14,21 +14,21 @@
14 </head> 14 </head>
15 <center> 15 <center>
16 <body> 16 <body>
17 - <div id="title">공휴일 카운터</div> 17 + <div id="title">When Is Next Holiday?</div>
18 <br><br> 18 <br><br>
19 <div class="wrapper"> 19 <div class="wrapper">
20 <div class="circle"> 20 <div class="circle">
21 <p class="dday"> 21 <p class="dday">
22 <span> 22 <span>
23 - <h2>오늘로부터 가장 가까운 휴일은</h2> 23 + <h2>오늘로부터 가장 가까운 공휴일은</h2>
24 - <h1>[<%= data[0] %>]</h1> 24 + <h2> <%= data[1][0] %><%= data[1][1] %><%= data[1][2] %><%= data[1][3] %>/<%= data[1][4] %><%= data[1][5] %>/<%= data[1][6] %><%= data[1][7] %></h2>
25 + <h3>[<%= data[0] %>]</h3>
25 <h1>D - <%= data[2] %></h1> 26 <h1>D - <%= data[2] %></h1>
26 - <h2><%= data[0] %>의 날짜 : <%= data[1] %></h2>
27 </span> 27 </span>
28 </p> 28 </p>
29 </div> 29 </div>
30 </div> 30 </div>
31 - <h2> <%= data[0] %> 에 추천하는 활동 목록입니다.</h2> <!--recommend activity 추가파트 시작--> 31 + <h2> [<%= data[0] %>] 추천 활동</h2> <!--recommend activity 추가파트 시작-->
32 32
33 <div id="activity"> 33 <div id="activity">
34 <% if (data[1] == '20220601') { %> 34 <% if (data[1] == '20220601') { %>
......