Commit dd1f43c6 authored by Justin Chong's avatar Justin Chong
Browse files

Added background colour carried to result page, reformat result page

parent 45a50fda
Pipeline #65703 failed with stages
in 25 seconds
......@@ -32,6 +32,7 @@ public class WebServer {
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws IOException {
String query = req.getParameter("q");
String format = req.getParameter("format");
String bg_colour = req.getParameter("background_colour");
Page page;
if (query == null) {
......@@ -50,6 +51,9 @@ public class WebServer {
default:
page = new HTMLResultPage(query, answer);
if (!bg_colour.equals("")) {
((HTMLResultPage) page).setBackgroundColour(bg_colour);
}
break;
}
}
......
......@@ -8,12 +8,17 @@ public class HTMLResultPage implements Page {
private final String query;
private final String answer;
private final String background_colour;
public HTMLResultPage(String query, String answer) {
this.query = query;
this.answer = answer;
}
public void setBackgroundColour(String colour) {
background_colour = colour;
}
public void writeTo(HttpServletResponse resp) throws IOException {
resp.setContentType("text/html");
PrintWriter writer = resp.getWriter();
......@@ -24,7 +29,12 @@ public class HTMLResultPage implements Page {
writer.println("<link href=\"/static/result-style.css\" rel=\"stylesheet\">");
writer.println("<title>" + query + "</title>");
writer.println("</head>");
writer.println("<body>");
if (background_colour) {
writer.println("<body style=\"background: radial-gradient(circle,#CCCCCC, " + background_colour +");\">");
} else {
writer.println("<body style=\"background: radial-gradient(circle,#EEEEEE, #AFAFAF);\">");
}
// Content
if (answer == null || answer.isEmpty()) {
......
......@@ -30,6 +30,7 @@
</button>
<input type="search" value="" placeholder="Search" class="search-input" name="q" autocomplete="off">
<input type="hidden" name="background_colour" value="">
<div class="search-option">
<div>
......@@ -75,8 +76,11 @@
const query = document.getElementsByName(query_name)[0];
const body = document.getElementsByTagName('body')[0];
const default_bg_clr = body.getAttribute('background');
const bg_param = document.getElementsByName("background_colour")[0];
const timeout_milis = 100;
let timeout = false; // Flag to prevent rapid bg colour changing
bg_param.setAttribute("value", default_bg_clr);
/* Listens for changes in search field */
query.addEventListener('input', function(event) {
......@@ -93,6 +97,7 @@
}
body.style.background = bg_clr;
bg_param.setAttribute("value", bg_clr);
setTimeout(reset_timeout, timeout_milis);
}
});
......
......@@ -5,22 +5,32 @@
body {
display: flex;
align-items: flex-start;
font-family: sans-serif;
font-size: 18px;
line-height: 1.2em;
width: 80%;
margin: 5em auto 0;
background: rgb(222, 222, 222);
flex-direction: column;
align-content: center;
align-items: center;
justify-content: center;
font-family: 'Times New Roman', sans-serif;
width: 95vw;
height: 90vh;
margin: auto;
}
h1 {
font-size: 6vw;
margin-bottom: 5px;
text-transform: capitalize;
font-variant: small-caps;
margin-right: 1em;
color: #222222;
}
p {
text-align: justify;
color: rgb(90, 102, 116);
text-align: center;
font-size: 1.5em;
color: #121212;
}
@media (max-width: 1700px) {
h1 {
font-size: 6.5em;
}
}
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment