From a5b5f1b571b875210993355df589351b5e2b9870 Mon Sep 17 00:00:00 2001
From: dipak2005 <d74252835@gmail.com>
Date: Sun, 13 Oct 2024 21:57:43 +0530
Subject: [PATCH] improve event page

---
 assets/css/event.css             | 248 +++++++++++++++++++++++++++++++
 assets/event.css                 | 204 +++++++++++++++++++++++++
 assets/html/assets/css/event.css |   0
 assets/html/event.html           | 214 ++------------------------
 assets/html/read.html            | 126 +---------------
 5 files changed, 463 insertions(+), 329 deletions(-)
 create mode 100644 assets/css/event.css
 create mode 100644 assets/event.css
 create mode 100644 assets/html/assets/css/event.css

diff --git a/assets/css/event.css b/assets/css/event.css
new file mode 100644
index 000000000..892030104
--- /dev/null
+++ b/assets/css/event.css
@@ -0,0 +1,248 @@
+* {
+    margin: 0;
+    padding: 0;
+    font-family: Arial, sans-serif;
+  
+}
+h1 {
+   margin-left: 20px;
+    color:crimson;
+    padding: 10px;
+}
+body {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: linear-gradient(to right, #ff9a9e, #fad0c4, #fad0c4);
+
+}
+
+header {
+
+    height: 100px;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 10px;
+   box-shadow: 10px 10px 15px 11px  rgba(0.2, 0.2, 0, 0.5);
+   
+    padding: 1em ;
+    text-align: center;
+}
+
+nav {
+   
+}
+nav ul {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+}
+
+nav ul li {
+
+    display: inline;
+    margin: 0 1em;
+}
+nav ul li a {
+    color: crimson;
+    text-decoration: none;
+}
+nav ul li a:hover {
+
+    color:   rgb(207, 79, 158);
+    padding: 10px;
+    border: none;
+    border-radius: 5px;
+    transform: anim;
+    transition: all 0.1s linear;
+    background-color: white;
+    text-decoration: none;
+}
+@keyframes anim {
+  from {
+    transform: scale(0.2,0.4);
+  }   
+    to {
+        transform: scale(0.7,0.9);
+    }
+}
+
+main {
+
+    padding: 1em;
+    width: 100%;
+    max-width: 800px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+section {
+    margin-bottom: 2em;
+    width: 100%;
+}
+
+h2 {
+    color: #450105;
+}
+
+
+
+.close-button {
+    color: #aaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+}
+
+.close-button:hover,
+.close-button:focus {
+    color: black;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.ul {
+    text-decoration: black;
+}
+
+#event-calendar {
+    width: 100%;
+    max-width: 800px;
+    background: linear-gradient(to right, #ff9a9e, #fad0c4, #fad0c4);
+    padding: 2em;
+    border-radius: 10px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+}
+
+.calendar-header {
+
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.calendar-header button {
+    /* background:     #fad0c4; */
+   background:  #450105;
+   box-sizing: border-box;
+   
+    color: #fff;
+    border: none;
+    padding: 0.5em 1em;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+.calendar-header h3 {
+    margin: 0;
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-top: 1em;
+}
+
+thead th {
+    background:  #450105;
+    color: #fff;
+    padding: 0.5em 0;
+}
+
+tbody td {
+    padding: 1em;
+    text-align: center;
+    cursor: pointer;
+    transition: background 0.3s;
+}
+
+tbody td:hover {
+    
+    background: #f4f4f9;
+    border-radius: 4px;
+}
+
+.event {
+    background: #f39c12;
+    color: #fff;
+    border-radius: 50%;
+    padding: 0.3em;
+}
+
+#event-details {
+    margin-top: 2em;
+    width: 100%;
+}
+
+#event-list {
+    list-style: none;
+    padding: 0;
+}
+
+#event-list li {
+    background: #f39c12;
+    color: #fff;
+    margin: 0.5em 0;
+    padding: 1em;
+    border-radius: 5px;
+}
+.footer{
+position: absolute;
+left: 0%;
+background-color: #FF9B9B;
+width: 100%;
+
+padding:30px 0px;
+font-family: 'Play', sans-serif;
+text-align:center;
+}
+
+.footer .row{
+width:100%;
+margin:1% 0%;
+padding:0.6% 0%;
+color:white;
+font-size:0.8em;
+}
+
+.footer .row a{
+text-decoration:none;
+color:white;
+transition:0.5s;
+}
+
+.footer .row a:hover{
+color:#450105;
+}
+
+.footer .row ul{
+width:100%;
+}
+
+.footer .row ul li{
+display:inline-block;
+margin:0px 30px;
+}
+
+.footer .row a i{
+font-size:2em;
+margin:0% 1%;
+}
+
+@media (max-width:720px){
+.footer{
+text-align:left;
+padding:5%;
+}
+.footer .row ul li{
+display:block;
+margin:10px 0px;
+text-align:left;
+}
+.footer .row a i{
+margin:0% 3%;
+}
+}
\ No newline at end of file
diff --git a/assets/event.css b/assets/event.css
new file mode 100644
index 000000000..6ac9a3f3c
--- /dev/null
+++ b/assets/event.css
@@ -0,0 +1,204 @@
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    background-color: #f4f4f9;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+header {
+    width: 100%;
+    background-color: #f06d87;
+    color: white;
+    padding: 1em 0;
+    text-align: center;
+}
+
+nav ul {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+}
+
+nav ul li {
+    display: inline;
+    margin: 0 1em;
+}
+
+nav ul li a {
+    color: white;
+    text-decoration: none;
+}
+
+main {
+    padding: 1em;
+    width: 100%;
+    max-width: 800px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+section {
+    margin-bottom: 2em;
+    width: 100%;
+}
+
+h2 {
+    color: #450105;
+}
+
+
+
+.close-button {
+    color: #aaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+}
+
+.close-button:hover,
+.close-button:focus {
+    color: black;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.ul {
+    text-decoration: black;
+}
+
+#event-calendar {
+    width: 100%;
+    max-width: 800px;
+    background: #fff;
+    padding: 2em;
+    border-radius: 10px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+}
+
+.calendar-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.calendar-header button {
+    background: #2980b9;
+    color: #fff;
+    border: none;
+    padding: 0.5em 1em;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+.calendar-header h3 {
+    margin: 0;
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-top: 1em;
+}
+
+thead th {
+    background: #2980b9;
+    color: #fff;
+    padding: 0.5em 0;
+}
+
+tbody td {
+    padding: 1em;
+    text-align: center;
+    cursor: pointer;
+    transition: background 0.3s;
+}
+
+tbody td:hover {
+    background: #f4f4f9;
+}
+
+.event {
+    background: #f39c12;
+    color: #fff;
+    border-radius: 50%;
+    padding: 0.3em;
+}
+
+#event-details {
+    margin-top: 2em;
+    width: 100%;
+}
+
+#event-list {
+    list-style: none;
+    padding: 0;
+}
+
+#event-list li {
+    background: #f39c12;
+    color: #fff;
+    margin: 0.5em 0;
+    padding: 1em;
+    border-radius: 5px;
+}
+.footer{
+position: absolute;
+left: 0%;
+
+width: 100%;
+background: pink;
+padding:30px 0px;
+font-family: 'Play', sans-serif;
+text-align:center;
+}
+
+.footer .row{
+width:100%;
+margin:1% 0%;
+padding:0.6% 0%;
+color:gray;
+font-size:0.8em;
+}
+
+.footer .row a{
+text-decoration:none;
+color:gray;
+transition:0.5s;
+}
+
+.footer .row a:hover{
+color:#fff;
+}
+
+.footer .row ul{
+width:100%;
+}
+
+.footer .row ul li{
+display:inline-block;
+margin:0px 30px;
+}
+
+.footer .row a i{
+font-size:2em;
+margin:0% 1%;
+}
+
+@media (max-width:720px){
+.footer{
+text-align:left;
+padding:5%;
+}
+.footer .row ul li{
+display:block;
+margin:10px 0px;
+text-align:left;
+}
+.footer .row a i{
+margin:0% 3%;
+}
+}
\ No newline at end of file
diff --git a/assets/html/assets/css/event.css b/assets/html/assets/css/event.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/assets/html/event.html b/assets/html/event.html
index 181a1542f..62d9cd8e3 100644
--- a/assets/html/event.html
+++ b/assets/html/event.html
@@ -3,220 +3,24 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="../css/event.css">
+
+    <link rel="icon" type="image/png" sizes="16x16" href="./assets/favicon_package_v0.16/favicon-16x16.png">
+   
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="preconnect" href="https://fonts.gstatic.com">
 <link href="https://fonts.googleapis.com/css2?family=Fredoka+One&family=Play&display=swap" rel="stylesheet">
-    <title>Reading Events</title>
-    <style>
-        body {
-            font-family: Arial, sans-serif;
-            margin: 0;
-            padding: 0;
-            background-color: #f4f4f9;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-        }
-
-        header {
-            width: 100%;
-            background-color: #f06d87;
-            color: white;
-            padding: 1em 0;
-            text-align: center;
-        }
-
-        nav ul {
-            list-style-type: none;
-            padding: 0;
-            margin: 0;
-        }
-
-        nav ul li {
-            display: inline;
-            margin: 0 1em;
-        }
-
-        nav ul li a {
-            color: white;
-            text-decoration: none;
-        }
-
-        main {
-            padding: 1em;
-            width: 100%;
-            max-width: 800px;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-        }
-
-        section {
-            margin-bottom: 2em;
-            width: 100%;
-        }
-
-        h2 {
-            color: #450105;
-        }
-
-       
-
-        .close-button {
-            color: #aaa;
-            float: right;
-            font-size: 28px;
-            font-weight: bold;
-        }
-
-        .close-button:hover,
-        .close-button:focus {
-            color: black;
-            text-decoration: none;
-            cursor: pointer;
-        }
-
-        .ul {
-            text-decoration: black;
-        }
-
-        #event-calendar {
-            width: 100%;
-            max-width: 800px;
-            background: #fff;
-            padding: 2em;
-            border-radius: 10px;
-            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
-        }
-
-        .calendar-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-
-        .calendar-header button {
-            background: #2980b9;
-            color: #fff;
-            border: none;
-            padding: 0.5em 1em;
-            border-radius: 5px;
-            cursor: pointer;
-        }
-
-        .calendar-header h3 {
-            margin: 0;
-        }
-
-        table {
-            width: 100%;
-            border-collapse: collapse;
-            margin-top: 1em;
-        }
-
-        thead th {
-            background: #2980b9;
-            color: #fff;
-            padding: 0.5em 0;
-        }
-
-        tbody td {
-            padding: 1em;
-            text-align: center;
-            cursor: pointer;
-            transition: background 0.3s;
-        }
-
-        tbody td:hover {
-            background: #f4f4f9;
-        }
-
-        .event {
-            background: #f39c12;
-            color: #fff;
-            border-radius: 50%;
-            padding: 0.3em;
-        }
-
-        #event-details {
-            margin-top: 2em;
-            width: 100%;
-        }
-
-        #event-list {
-            list-style: none;
-            padding: 0;
-        }
-
-        #event-list li {
-            background: #f39c12;
-            color: #fff;
-            margin: 0.5em 0;
-            padding: 1em;
-            border-radius: 5px;
-        }
-.footer{
-    position: absolute;
-    left: 0%;
     
-    width: 100%;
-background: pink;
-padding:30px 0px;
-font-family: 'Play', sans-serif;
-text-align:center;
-}
-
-.footer .row{
-width:100%;
-margin:1% 0%;
-padding:0.6% 0%;
-color:gray;
-font-size:0.8em;
-}
-
-.footer .row a{
-text-decoration:none;
-color:gray;
-transition:0.5s;
-}
-
-.footer .row a:hover{
-color:#fff;
-}
-
-.footer .row ul{
-width:100%;
-}
-
-.footer .row ul li{
-display:inline-block;
-margin:0px 30px;
-}
 
-.footer .row a i{
-font-size:2em;
-margin:0% 1%;
-}
+<title>Reading Events</title>
 
-@media (max-width:720px){
-.footer{
-text-align:left;
-padding:5%;
-}
-.footer .row ul li{
-display:block;
-margin:10px 0px;
-text-align:left;
-}
-.footer .row a i{
-margin:0% 3%;
-}
-}
-    </style>
+<style>
+  
+</style>
 </head>
 <body>
     <header>
-        <h1 style="color: black;">SwapReads</h1>
+        <h1>SwapReads</h1>
         <nav>
             <ul>
                 <li><a href="../../index.html">Home</a></li>
diff --git a/assets/html/read.html b/assets/html/read.html
index b21d0d3b8..00b07a2f7 100644
--- a/assets/html/read.html
+++ b/assets/html/read.html
@@ -4,130 +4,8 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>SwapReads - Authors</title>
-    <style>
-        body {
-            font-family: Arial, sans-serif;
-            margin: 0;
-            padding: 0;
-            background-color: #f9f9f9;
-        }
-
-        header {
-            background-color: #f5c7c8;
-            color: white;
-            padding: 1em;
-            text-align: center;
-            
-        }
-
-        nav ul {
-            list-style-type: none;
-            padding: 0;
-        }
-
-        nav ul li {
-            display: inline;
-            margin: 0 1em;
-        }
-
-        nav ul li a {
-            color: white;
-            text-decoration: none;
-        }
-
-        main {
-            padding: 1em;
-        }
-
-        section {
-            margin-bottom: 2em;
-        }
-
-        h2 {
-            color: #450105;
-        }
-
-        .author {
-            background-color: #f4f6cc;
-            border: 1px solid #ddd;
-            border-radius: 5px;
-            padding: 1em;
-            margin-bottom: 1em;
-            display: flex;
-            align-items: center;
-        }
-
-        .author-photo {
-            border-radius: 50%;
-            margin-right: 1em;
-            width: 100px;
-            height: 100px;
-            object-fit: cover;
-        }
-
-        .author button {
-            background-color: #850720;
-            color: white;
-            border: none;
-            padding: 0.5em 1em;
-            border-radius: 5px;
-            cursor: pointer;
-            margin-right: 0.5em;
-        }
-
-        .author button:hover {
-            background-color: #830535;
-        }
-
-        footer {
-            background-color: #f5cbd7;
-            color: white;
-            text-align: center;
-            padding: 1em;
-            position: fixed;
-            width: 100%;
-            bottom: 0;
-        }
-
-        /* Modal Styles */
-        #content-modal {
-            display: none;
-            position: fixed;
-            z-index: 1;
-            left: 0;
-            top: 0;
-            width: 100%;
-            height: 100%;
-            overflow: auto;
-            background-color: rgb(0,0,0);
-            background-color: rgba(0,0,0,0.4);
-        }
-
-        .modal-content {
-            background-color: #fefefe;
-            margin: 15% auto;
-            padding: 20px;
-            border: 1px solid #888;
-            width: 80%;
-        }
-
-        .close-button {
-            color: #aaa;
-            float: right;
-            font-size: 28px;
-            font-weight: bold;
-        }
-
-        .close-button:hover,
-        .close-button:focus {
-            color: black;
-            text-decoration: none;
-            cursor: pointer;
-        }
-        .ul{
-            text-decoration: black;
-        }
-    </style>
+   
+   
 </head>
 <body>
     <header>