Skip to content

Commit 951c3b7

Browse files
DokyeongyunDokyeongyun
committed
UI/UX: design download page
1 parent 2434a26 commit 951c3b7

File tree

4 files changed

+173
-79
lines changed

4 files changed

+173
-79
lines changed

‎DBMonitoringDownloaderApp/src/main/java/root/handler/HomeHandler.java‎

Lines changed: 24 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,35 @@
11
package root.handler;
22

3-
import java.util.ArrayList;
4-
import java.util.List;
3+
import java.time.LocalDateTime;
4+
import java.time.ZoneId;
5+
import java.util.*;
56

67
import org.springframework.stereotype.Controller;
78
import org.springframework.ui.Model;
89
import org.springframework.web.bind.annotation.GetMapping;
10+
import root.model.ReleaseInfo;
911

1012
@Controller
1113
public class HomeHandler {
1214

13-
@GetMapping(path = "/")
14-
public String home(Model model) {
15-
16-
model.addAttribute("title", "Home");
17-
18-
List<String> downloadLinks = new ArrayList<>();
19-
downloadLinks.add("https://DBMonitoring.co.kr/download/release-1.0.0");
20-
downloadLinks.add("https://DBMonitoring.co.kr/download/release-1.0.1");
21-
downloadLinks.add("https://DBMonitoring.co.kr/download/release-1.1.0");
22-
downloadLinks.add("https://DBMonitoring.co.kr/download/release-1.1.1");
23-
model.addAttribute("downloadLinks", downloadLinks);
24-
return "index";
25-
}
15+
@GetMapping(path = "/")
16+
public String home(Model model) {
17+
18+
model.addAttribute("title", "Project DBMonitoring");
19+
20+
Calendar cal = Calendar.getInstance();
21+
cal.set(2022, Calendar.JUNE, 1);
22+
ReleaseInfo r1 = new ReleaseInfo();
23+
r1.setAppName("DBMonitoring");
24+
r1.setReleaseVersion("1.0.0");
25+
r1.setReleaseDate(LocalDateTime.ofInstant(cal.toInstant(), ZoneId.systemDefault()));
26+
r1.setDownloadLink("https://github.com/Dokyeongyun/DBMonitoring/releases/download/v1.0.0/DBMonitoring-1.0.0.zip");
27+
r1.setReleaseNoteLink("https://github.com/Dokyeongyun/DBMonitoring/releases/tag/v1.0.0");
28+
29+
List<ReleaseInfo> releaseList = new ArrayList<>();
30+
releaseList.add(r1);
31+
32+
model.addAttribute("releaseList", releaseList);
33+
return "index";
34+
}
2635
}

‎DBMonitoringDownloaderApp/src/main/java/root/model/ReleaseInfo.java‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
package root.model;
2+
3+
import lombok.Data;
4+
5+
import java.time.LocalDateTime;
6+
7+
@Data
8+
public class ReleaseInfo {
9+
private String appName;
10+
private String releaseVersion;
11+
private LocalDateTime releaseDate;
12+
private String downloadLink;
13+
private String releaseNoteLink;
14+
}

‎DBMonitoringDownloaderApp/src/main/resources/static/css/custom.css‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -504,4 +504,20 @@ body {
504504

505505
a:not([role=button]):focus {
506506
outline-offset: 2px;
507+
}
508+
509+
.text-left {
510+
text-align: left;
511+
}
512+
513+
.release-table {
514+
width:100%;
515+
}
516+
517+
.release-table thead tr {
518+
border-bottom: 1px solid #ddd;
519+
}
520+
521+
.release-table tr {
522+
height: 40px;
507523
}

‎DBMonitoringDownloaderApp/src/main/resources/templates/index.html‎

Lines changed: 119 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,129 @@
11
<!DOCTYPE html>
2-
<html xmlns:th="http://www.thymeleaf.org" lang="ko">
2+
<html xmlns:th="http://www.thymeleaf.org" lang="en">
33
<head>
4-
<meta charset="UTF-8">
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77

8-
<title th:text="${title}"></title>
8+
<title th:text="${title}"></title>
99

10-
<link rel="stylesheet"
11-
href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.4.0/simplex/bootstrap.min.css"
12-
integrity="sha512-0FG7nV64qlyGMQHtk7WOzPY1NZ6SKmjNee+PMX/7xbJu8Qx6LlHhCjSj9hRDJQ6QnlFsUrcKHKxli/9z4uhHrA=="
13-
crossorigin="anonymous" referrerpolicy="no-referrer">
14-
<link rel="stylesheet"
15-
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
16-
integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw=="
17-
crossorigin="anonymous" referrerpolicy="no-referrer">
18-
<link th:href="@{/css/home.css}" rel="stylesheet" type="text/css">
19-
20-
<script
21-
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
22-
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
23-
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
24-
<script
25-
src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/js/bootstrap.min.js"
26-
integrity="sha512-UR25UO94eTnCVwjbXozyeVd6ZqpaAE9naiEUBK/A+QDbfSTQFhPGj5lOR6d8tsgbBk84Ggb5A3EkjsOgPRPcKA=="
27-
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
28-
<script src="/js/main.js"></script>
10+
<link rel="stylesheet"
11+
href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.4.0/simplex/bootstrap.min.css"
12+
integrity="sha512-0FG7nV64qlyGMQHtk7WOzPY1NZ6SKmjNee+PMX/7xbJu8Qx6LlHhCjSj9hRDJQ6QnlFsUrcKHKxli/9z4uhHrA=="
13+
crossorigin="anonymous"
14+
referrerpolicy="no-referrer">
15+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
16+
integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
17+
crossorigin="anonymous" referrerpolicy="no-referrer"/>
18+
<link rel="stylesheet" href="/css/custom.css" type="text/css">
2919

20+
<script
21+
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
22+
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
23+
crossorigin="anonymous" referrerpolicy="no-referrer">
24+
</script>
25+
<script
26+
src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/js/bootstrap.min.js"
27+
integrity="sha512-UR25UO94eTnCVwjbXozyeVd6ZqpaAE9naiEUBK/A+QDbfSTQFhPGj5lOR6d8tsgbBk84Ggb5A3EkjsOgPRPcKA=="
28+
crossorigin="anonymous" referrerpolicy="no-referrer">
29+
</script>
3030
</head>
3131

3232
<body>
33-
<div class="navbar navbar-default navbar-fixed-top">
34-
<div class="container">
35-
<div class="navbar-header">
36-
<a href="/" class="navbar-brand" role="button">Project
37-
DBMonitoring</a>
38-
<button class="navbar-toggle" type="button" data-toggle="collapse"
39-
data-target="#navbar-main" aria-label="Open Menu">
40-
<span class="icon-bar"></span> <span class="icon-bar"></span> <span
41-
class="icon-bar"></span>
42-
</button>
43-
</div>
44-
<div class="navbar-collapse collapse" id="navbar-main">
45-
<ul class="nav navbar-nav">
46-
<li class="dropdown"><a class="dropdown-toggle pointer"
47-
data-toggle="dropdown" href="#" role="button">Community<span
48-
class="caret"></span></a>
49-
<ul class="dropdown-menu" aria-labelledby="themes">
50-
<li><a
51-
href="https://github.com/Dokyeongyun/DBMonitoring/issues">Issues</a></li>
52-
</ul></li>
53-
<li><a href="/download" role="button">Download</a></li>
54-
</ul>
55-
</div>
56-
</div>
57-
</div>
58-
<div class="container-fluid main-section" id="main-section">
59-
<table>
60-
<tbody>
61-
<tr>
62-
<th>Downloads</th>
63-
</tr>
64-
<th:block th:each="downloadLink : ${downloadLinks}">
65-
<tr>
66-
<td><a th:href="@{${downloadLink}}"><span
67-
th:text="${downloadLink}"></span></a></td>
68-
</tr>
69-
</th:block>
70-
</tbody>
71-
</table>
72-
</div>
33+
<div class="navbar navbar-default navbar-fixed-top">
34+
<div class="container">
35+
<div class="navbar-header">
36+
<a href="/" class="navbar-brand" role="button">DBMonitoring</a>
37+
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main"
38+
aria-label="Open Menu">
39+
<span class="icon-bar"></span>
40+
<span class="icon-bar"></span>
41+
<span class="icon-bar"></span>
42+
</button>
43+
</div>
44+
<div class="navbar-collapse collapse" id="navbar-main">
45+
<ul class="nav navbar-nav">
46+
<li class="dropdown">
47+
<a class="dropdown-toggle pointer" data-toggle="dropdown" href="#" role="button">
48+
Community<span class="caret"></span>
49+
</a>
50+
<ul class="dropdown-menu" aria-labelledby="themes">
51+
<li><a href="https://github.com/Dokyeongyun/DBMonitoring/issues">Issues</a></li>
52+
</ul>
53+
</li>
54+
<li><a href="/" role="button">Download</a></li>
55+
</ul>
56+
</div>
57+
</div>
58+
</div>
59+
<div class="container-fluid main-section" id="main-section">
60+
<div class="page-header">
61+
<div class="row">
62+
<h2 class="text-left">Download for Windows</h2>
63+
</div>
64+
<div class="row">
65+
<p>
66+
This DB monitoring program was developed to monitor the health of database systems operated by
67+
individuals or businesses. This program was developed as a one-man project, and although it currently
68+
offers feeble functionality, we promise to add more features continuously in the future. For Oracle DBMS
69+
monitoring, you can perform the following tasks:
70+
</p>
71+
<ul>
72+
<li>Archive usage monitoring</li>
73+
<li>Tablespace usage monitoring</li>
74+
<li>OS disk usage monitoring</li>
75+
<li>Alert log monitoring</li>
76+
</ul>
77+
<p>
78+
Please refer to <a href="https://github.com/Dokyeongyun/DBMonitoring"><span>GitHub</span></a>
79+
for detailed source code.
80+
</p>
81+
</div>
82+
<div class="row">
83+
<h2 class="text-left">Looking for a specific release?</h2>
84+
<p>DBMonitoring program releases by version number:</p>
85+
</div>
86+
<div class="row">
87+
<table class="release-table">
88+
<colgroup>
89+
<col width="25%">
90+
<col width="25%">
91+
<col width="25%">
92+
<col width="25%">
93+
</colgroup>
94+
<thead>
95+
<tr>
96+
<th>Release version</th>
97+
<th>Release date</th>
98+
<th>Download</th>
99+
<th>Click for more</th>
100+
</tr>
101+
</thead>
102+
<tbody>
103+
<th:block th:each="release : ${releaseList}">
104+
<tr>
105+
<td>
106+
<b><span th:text="${release.appName}"></span>-
107+
<span th:text="${release.releaseVersion}"></span></b>
108+
</td>
109+
<td>
110+
<span th:text="${#temporals.format(release.releaseDate,
111+
'MMM d,yyyy', new java.util.Locale('en', 'EN'))}"></span>
112+
</td>
113+
<td>
114+
<i class="fa fa-download"></i>
115+
<b><a th:href="@{${release.downloadLink}}"><span>Download</span></a></b>
116+
</td>
117+
<td>
118+
<i class="fa-solid fa-file"></i>
119+
<b><a th:href="@{${release.releaseNoteLink}}"><span>Release Notes</span></a></b>
120+
</td>
121+
</tr>
122+
</th:block>
123+
</tbody>
124+
</table>
125+
</div>
126+
</div>
127+
</div>
73128
</body>
74129
</html>

0 commit comments

Comments
 (0)