";
+ initial-value: 132deg;
+ inherits: false;
+}
+
+@keyframes spin {
+ 0% {
+ --rotate: 0deg;
+ }
+ 100% {
+ --rotate: 360deg;
+ }
+}
+
+.content {
+ font-size: 1.2rem; /* Default font size */
+ max-height: 100%;
+ overflow-y: auto;
+ margin: 0;
+ padding: 10px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+}
+
+.content.auto-size {
+ font-size: calc(1rem + 1vw);
+}
+
+a {
+ color: #212534;
+ text-decoration: none;
+ font-family: sans-serif;
+ font-weight: bold;
+ margin-top: 2rem;
+}
+
+.instruction {
+ color: #0d6efd;
+ font-size: 24px;
+ font-family: "Titan One", cursive;
+
+}
+
+.instruction:hover{
+ color:#0a58ca
+}
+
+#selection-container{
+ padding-bottom: 0;
+}
+
+.spacer {
+ margin-left: 30px; /* Adjust this value to control the space */
+}
+
+.joke-info {
+ color: #f5ba13;
+ font-size: 18px;
+ font-family: "Titan One", cursive;
+
+}
\ No newline at end of file
diff --git a/views/index.ejs b/views/index.ejs
new file mode 100644
index 0000000..450e570
--- /dev/null
+++ b/views/index.ejs
@@ -0,0 +1,60 @@
+
+
+
+
+ Random Joke
+
+
+
+
+
+
+
+ Sharing a joke a day keeps the gloom away.
+
+
+
+ <% if (locals.type){ %>
+ Selected type: <%=type%> Language: <%=language%>
+ <% } else { %>
+ Selected type: Random type Language: English
+ <% } %>
+
+
+
+ <%= joke %>
+
+ <%if (locals.error){%>
+ <%= error %>
+ <% } %>
+
+
+
+
+ Hover on the picture to reveal a random joke.
+
+
+ <%- include ('partials/footer') %>
+
+
+
\ No newline at end of file
diff --git a/views/partials/footer.ejs b/views/partials/footer.ejs
new file mode 100644
index 0000000..7c28995
--- /dev/null
+++ b/views/partials/footer.ejs
@@ -0,0 +1,7 @@
+
+
+ <% let date = new Date(); %>
+ <% year = date.getFullYear() %>
+ © <%= year %>, WUN LIM ZHE
+ App created with Joke API (v2.3.2)
+
\ No newline at end of file