feat: update welcome file styling

yevheniiairapetian · Nov 13, 2023 · 44448c0 · 44448c0
1 parent 5c74e0a
commit 44448c0
Show file tree

Hide file tree

Showing 3 changed files with 123 additions and 9 deletions.
diff --git a/index.js b/index.js
@@ -477,7 +477,7 @@ app.delete("/users/:id", passport.authenticate('jwt', { session: false }), async
  */
 
 app.get("/", (req, res) => {
-  res.send("Welcome to R3play API! For more information please visit https://yevheniiairapetian.github.io/r3play-documentation/");
+  res.sendFile('index.html', { root: 'public' });
 });
 
 app.use((err, req, res, next) => {

diff --git a/public/css/styles.css b/public/css/styles.css
@@ -1,7 +1,15 @@
+:root{
+    --primary-link-color:#223c50;
+}
 *{
+    font-family:'Montserrat', sans-serif;
     word-break: break-word;
 }
 
+body{
+    background-color:#eeeef7;
+}
+
 table{
     margin:0 auto;
     overflow-x:auto;
@@ -47,13 +55,77 @@ td{
 
 h1, h2, h3, h4{
     text-align: center;
-    padding: 10px;
-    background-color: slategray;
-    color:white;
+    color: #529fcc;
+    font-weight:bold;
+    /* background-color: slategray; */
+    /* color:white; */
 }
 footer{
-    background-color: green;
-    padding: 10px 0;
+    position:fixed;
+    bottom:0;
+    left:0;
+    width:100%;
+    background-color: #529fcc;
+    /* padding-bottom: 16px; */
+    color: white;
+}
+
+.social-container{
+    padding-top:20px;
+    padding-bottom:20px;
+}
+
+.overview-paragraph{
+    margin-top: 60px;
+    margin-left:20px;
+    line-height: 2em;
+    font-size: 18px;
+    text-align:center;
+}
+
+.fa-code{
+    padding-right:15px;
+}
+
+.fa-code:hover, .fa-circle-info:hover{
+    color: white;
+    transition: color 0.2s ease;
+    translate: 0px -4px;
+    transition: color 0.2s ease, translate 0.3s linear;
+}
+
+.main-footer{
+    display:flex;
+    flex-direction:column;
+    align-items:center;
+    margin-top:auto;
+    background-color: #529fcc;
+    padding-bottom: 16px;
+    color: white;
+}
+
+a{
+    color:var(--primary-link-color);
+    font-size:inherit;
+    text-decoration:underline;
+}
+
+a:hover{
+    color: #529fcc;
+    font-weight: bold;
+    padding-right:2px;
+    /* padding-bottom: 4px; */
+    text-decoration:none;
+    border-bottom:3px solid #529fcc;
+    transition: padding-right 0.3s ease-out, padding-right 0.3s ease-out, border-bottom 0.3s ease-out, padding-bottom 0.3s ease-out, color 0.3s ease-out; 
+}
+
+.main-footer p, .main-footer a{
+    color: #000000;
+    text-align:center;
+    padding: 0;
+    flex-direction: column;
+    align-content: space-between;
 }
 
 .footer-links{
@@ -103,11 +175,11 @@ code{
 }
 
 p{
-    background-color:darkgray;
-    color:white;
+    /* background-color:darkgray; */
+    /* color:white; */
     padding: 15px 10px;
     font-size:16px;
-    text-align:center;
+    /* text-align:center; */
 }
 ol, li{
     background-color: lightgray;

diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>R3play API</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
+                integrity="sha512-NhSC1YmyruXifcj/KFRWoC561YpHpc5Jtzgvbuzx5VozKpWvQ+4nXhPdFgmx8xqexRcpAglTj9sIBWINXa8x5w=="
+                crossorigin="anonymous" referrerpolicy="no-referrer">
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
+        <link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Open+Sans:wght@400;700&display=swap"
+                rel="stylesheet">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
+                integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
+                crossorigin="anonymous" referrerpolicy="no-referrer" />
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
+                integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
+                crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="stylesheet" href="css/styles.css">
+</head>
+
+<body>
+    <h1 id="top">R3play API</h1>
+    <p class="overview-paragraph">Please refer for more information to the <a target="_blank"
+            href="https://github.com/yevheniiairapetian/r3play">R3play API Github repository</a> and <a target="_blank"
+            href="https://yevheniiairapetian.github.io/r3play-documentation/">R3play API Documentation</a></p>
+            <footer class="main-footer">
+        <p>R3Play API, 2023</p>
+        <p>© Yevhenii Airapetian. All rights reserved.</p>
+        <div class="social-container">
+        <a href="https://github.com/yevheniiairapetian/r3play" target="_blank" rel="noopener"><i alt="A Code icon"
+                class="fa-solid fa-code fa-xl"></i></a>
+        <a class="deployed-link" target="_self" href="https://yevheniiairapetian.github.io/r3play-documentation/"><i
+                alt="An icon showing an information symbol" class="fa-solid fa-circle-info fa-xl"></i></a>
+            </div>
+            </footer>
+</body>
+
+</html>