From 641b5612765806039564c67b6134c0db8e56479a Mon Sep 17 00:00:00 2001
From: Prutha <pruthaa17@gmail.com>
Date: Wed, 29 May 2024 23:02:28 +0530
Subject: [PATCH] converted ngo dashboard internal css to external

---
 public/css/ngo_dashboard.css | 447 ++++++++++++++++++++++++++++++++++
 views/NGO-Dashboard.ejs      | 452 +----------------------------------
 2 files changed, 449 insertions(+), 450 deletions(-)
 create mode 100644 public/css/ngo_dashboard.css

diff --git a/public/css/ngo_dashboard.css b/public/css/ngo_dashboard.css
new file mode 100644
index 0000000..019a4b8
--- /dev/null
+++ b/public/css/ngo_dashboard.css
@@ -0,0 +1,447 @@
+body {
+  min-height: 100vh;
+  background-color: var(--primary-color);
+  transition: background-color var(--tran-03);
+  margin: 0;
+  font-family: "Poppins", sans-serif;
+}
+
+body.dark {
+  --primary-color: #3a3b3c;
+  --panel-color: #242526;
+  --text-color: #ccc;
+  --black-light-color: #ccc;
+  --border-color: #4d4c4c;
+  --toggle-color: #fff;
+  --box1-color: #3a3b3c;
+  --box2-color: #3a3b3c;
+  --box3-color: #ccc;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: "Poppins", sans-serif;
+}
+
+/* aditya start */
+
+.Donatebox {
+  display: flex;
+  width: 35rem;
+  height: 25rem;
+  background-color: darkseagreen;
+  justify-content: center;
+  align-self: center;
+  border-radius: 12%;
+}
+
+.NAME-block {
+  display: flex;
+  gap: 5px;
+  flex-direction: column;
+  align-self: center;
+  justify-content: center;
+  border-radius: 7%;
+  padding-top: 5%;
+  padding-left: 10%;
+  height: 90%;
+  width: 90%;
+  background-color: var(--panel-color);
+}
+
+.top-border {
+  border-style: double;
+  border-color: #f07070;
+}
+
+.Left-name {
+  display: inline-block;
+  position: absolute;
+  right: 3%;
+  padding-top: 3px;
+}
+
+.top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+}
+
+.Profile-sec {
+  display: flex;
+  padding: 9%;
+  justify-content: center;
+  align-content: center;
+}
+
+.dashboard {
+  display: inline-block;
+  height: 100vh;
+  width: 100%;
+}
+
+.sliding-menu {
+  height: 100%;
+  width: 0;
+  position: fixed;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  background-color: var(--panel-color);
+  overflow-x: hidden;
+  padding-top: 60px;
+  transition: 0.5s;
+  max-width: 250px;
+}
+
+.menu-icon {
+  cursor: pointer;
+  z-index: 2;
+}
+
+.dash {
+  position: fixed;
+  left: 35px;
+}
+
+/* aditya End */
+/* colors */
+:root {
+  --primary-color: wheat;
+  --panel-color: #fff;
+  --text-color: black;
+  --black-light-color: #f07070;
+  --border-color: #e6e5e5;
+  --toggle-color: #ddd;
+  --box1-color: #4da3ff;
+  --box2-color: #e7d1fc;
+  --box3-color: #fff;
+  /* transtions */
+  --tran-05: all 05s ease;
+  --tran-03: all 03s ease;
+  --tran-03: all 02s ease;
+}
+
+nav .logo-name {
+  display: flex;
+  align-items: center;
+}
+
+nav .logo-img {
+  display: flex;
+  justify-content: center;
+  min-width: 45px;
+}
+
+nav .logo-img img {
+  width: 45px;
+  object-fit: cover;
+  border-radius: 50%;
+}
+
+nav .logo-name .logo_name {
+  font-size: 22px;
+  font-weight: 600;
+  color: var(--text-color);
+  margin-left: 14px;
+}
+
+nav .menu-items {
+  margin-top: 40px;
+  height: calc(100% - 90px);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.menu-items li {
+  list-style: none;
+}
+
+.menu-items li a {
+  display: flex;
+  align-items: center;
+  height: 50px;
+  text-decoration: none;
+  position: relative;
+}
+
+.nav-links li a:hover:before {
+  content: "";
+  position: absolute;
+  height: 5px;
+  width: 5px;
+  border-radius: 50%;
+  background-color: var(--primary-color);
+  left: -7px;
+}
+
+.menu-items li {
+  list-style: none;
+}
+
+.menu-items li a i {
+  font-size: 24px;
+  min-width: 45px;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--black-light-color);
+}
+
+.menu-items li a .link-name {
+  font-size: 18px;
+  font-weight: 400;
+  color: green;
+}
+
+.nav-links li a:hover i,
+.nav-links li a:hover .link-name {
+  color: var(--primary-color);
+}
+
+.menu-items .mode {
+  display: flex;
+  align-items: center;
+}
+
+.menu-items .mode-toggle {
+  position: absolute;
+  right: 14px;
+  height: 50px;
+  min-width: 45px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.mode-toggle .switch {
+  position: relative;
+  display: inline-block;
+  height: 22px;
+  width: 40px;
+  border-radius: 25px;
+  background-color: var(--toggle-color);
+}
+
+.switch::before {
+  content: " ";
+  position: absolute;
+  left: 5px;
+  top: 50%;
+  transform: translateY(-50%);
+  height: 15px;
+  width: 15px;
+  background-color: var(--panel-color);
+  border-radius: 50%;
+  transition: var(--tran-03);
+}
+
+body.dark .switch::before {
+  left: 20px;
+}
+
+body.dark .Profile-sec {
+  background-color: #333;
+  color: #fff;
+}
+
+body.dark .top {
+  background-color: #333;
+  color: #fff;
+}
+
+button {
+  border-radius: 50%;
+  padding: 10px;
+  background-color: rgb(55, 153, 55);
+}
+
+/* CSS Styles */
+.section-title {
+  text-align: center;
+  margin-bottom: 2rem;
+  font-size: 1.5rem;
+}
+
+.donor-list {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
+.donor-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem;
+  border-bottom: 1px solid #ccc;
+}
+
+.donor-name {
+  font-weight: bold;
+}
+
+.donor-actions {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.btn-accept,
+.btn-decline {
+  padding: 0.5rem 1rem;
+  border: none;
+  border-radius: 0.25rem;
+  cursor: pointer;
+}
+
+.btn-accept {
+  background-color: rgb(88, 167, 88);
+  color: white;
+}
+
+.btn-decline {
+  background-color: red;
+  color: white;
+}
+
+.NGO-sec {
+  margin: 20px auto;
+  max-width: 800px;
+  padding: 20px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.donor-list {
+  list-style-type: none;
+  padding: 0;
+}
+
+.donor-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid #eee;
+  padding: 10px 0;
+}
+
+.donor-details {
+  flex-grow: 1;
+}
+
+.donor-actions {
+  flex-shrink: 0;
+}
+
+.btn-accept,
+.btn-decline {
+  padding: 5px 10px;
+  border: none;
+  border-radius: 3px;
+  background-color: #4caf50;
+  color: white;
+  cursor: pointer;
+  margin-right: 5px;
+}
+
+.btn-decline {
+  background-color: #f44336;
+}
+
+.Doners-sec {
+  margin: 20px auto;
+  max-width: 800px;
+  padding: 20px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.donor-list {
+  list-style-type: none;
+  padding: 0;
+}
+
+.donor-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid #eee;
+  padding: 10px 0;
+}
+
+.donor-details {
+  flex-grow: 1;
+}
+
+.donor-actions {
+  flex-shrink: 0;
+}
+
+.btn-accept,
+.btn-decline {
+  padding: 5px 10px;
+  border: none;
+  border-radius: 3px;
+  background-color: #4caf50;
+  color: white;
+  cursor: pointer;
+  margin-right: 5px;
+}
+
+.btn-decline {
+  background-color: #f44336;
+}
+
+.Complains-sec {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 2rem;
+}
+
+.donor-list {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
+.donor-item {
+  background-color: #f9f9f9;
+  border-radius: 8px;
+  padding: 1rem;
+  margin-bottom: 1rem;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.donor-details {
+  display: flex;
+  flex-direction: column;
+}
+
+.donor-name {
+  font-weight: bold;
+  margin-bottom: 0.5rem;
+}
+
+.donor-email {
+  color: #666;
+  margin-bottom: 0.5rem;
+}
+
+.donor-message {
+  margin-bottom: 0.5rem;
+}
+
+/* Optional: Hover effect */
+.donor-item:hover {
+  background-color: #f0f0f0;
+  transition: background-color 0.3s;
+}
diff --git a/views/NGO-Dashboard.ejs b/views/NGO-Dashboard.ejs
index c9dd859..918a38a 100644
--- a/views/NGO-Dashboard.ejs
+++ b/views/NGO-Dashboard.ejs
@@ -7,460 +7,11 @@
 
     <style>
         @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;500;600&display=swap');
-
-        body {
-            min-height: 100vh;
-            background-color: var(--primary-color);
-            transition: background-color var(--tran-03);
-            margin: 0;
-            font-family: 'Poppins', sans-serif;
-        }
-
-        body.dark {
-            --primary-color: #3A3B3C;
-            --panel-color: #242526;
-            --text-color: #CCC;
-            --black-light-color: #CCC;
-            --border-color: #4D4C4C;
-            --toggle-color: #FFF;
-            --box1-color: #3A3B3C;
-            --box2-color: #3A3B3C;
-            --box3-color: #CCC;
-        }
-
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-            font-family: 'Poppins', sans-serif;
-        }
-
-        /* aditya start */
-
-        .Donatebox {
-            display: flex;
-            width: 35rem;
-            height: 25rem;
-            background-color: darkseagreen;
-            justify-content: center;
-            align-self: center;
-            border-radius: 12%;
-        }
-
-        .NAME-block {
-            display: flex;
-            gap: 5px;
-            flex-direction: column;
-            align-self: center;
-            justify-content: center;
-            border-radius: 7%;
-            padding-top: 5%;
-            padding-left: 10%;
-            height: 90%;
-            width: 90%;
-            background-color: var(--panel-color);
-        }
-
-        .top-border {
-
-            border-style: double;
-            border-color: #F07070;
-        }
-
-        .Left-name {
-            display: inline-block;
-            position: absolute;
-            right: 3%;
-            padding-top: 3px;
-        }
-
-        .top {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 10px;
-        }
-
-        .Profile-sec {
-            display: flex;
-            padding: 9%;
-            justify-content: center;
-            align-content: center;
-        }
-
-        .dashboard {
-            display: inline-block;
-            height: 100vh;
-            width: 100%;
-        }
-
-        .sliding-menu {
-            height: 100%;
-            width: 0;
-            position: fixed;
-            z-index: 1;
-            top: 0;
-            left: 0;
-            background-color: var(--panel-color);
-            overflow-x: hidden;
-            padding-top: 60px;
-            transition: 0.5s;
-            max-width: 250px;
-        }
-
-        .menu-icon {
-            cursor: pointer;
-            z-index: 2;
-        }
-
-        .dash {
-            position: fixed;
-            left: 35px;
-        }
-
-
-        /* aditya End */
-        /* colors */
-        :root {
-            --primary-color: wheat;
-            --panel-color: #FFF;
-            --text-color: black;
-            --black-light-color: #F07070;
-            --border-color: #e6e5e5;
-            --toggle-color: #DDD;
-            --box1-color: #4DA3FF;
-            --box2-color: #E7D1FC;
-            --box3-color: #fff;
-            /* transtions */
-            --tran-05: all 05s ease;
-            --tran-03: all 03s ease;
-            --tran-03: all 02s ease;
-        }
-
-        nav .logo-name {
-            display: flex;
-            align-items: center;
-        }
-
-        nav .logo-img {
-            display: flex;
-            justify-content: center;
-            min-width: 45px;
-        }
-
-        nav .logo-img img {
-            width: 45px;
-            object-fit: cover;
-            border-radius: 50%;
-        }
-
-        nav .logo-name .logo_name {
-            font-size: 22px;
-            font-weight: 600;
-            color: var(--text-color);
-            margin-left: 14px;
-        }
-
-        nav .menu-items {
-            margin-top: 40px;
-            height: calc(100% - 90px);
-            display: flex;
-            flex-direction: column;
-            justify-content: space-between;
-        }
-
-        .menu-items li {
-            list-style: none;
-        }
-
-        .menu-items li a {
-            display: flex;
-            align-items: center;
-            height: 50px;
-            text-decoration: none;
-            position: relative;
-        }
-
-        .nav-links li a:hover:before {
-            content: "";
-            position: absolute;
-            height: 5px;
-            width: 5px;
-            border-radius: 50%;
-            background-color: var(--primary-color);
-            left: -7px;
-        }
-
-        .menu-items li {
-            list-style: none;
-        }
-
-        .menu-items li a i {
-            font-size: 24px;
-            min-width: 45px;
-            height: 100%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: var(--black-light-color);
-        }
-
-        .menu-items li a .link-name {
-            font-size: 18px;
-            font-weight: 400;
-            color: green;
-        }
-
-        .nav-links li a:hover i,
-        .nav-links li a:hover .link-name {
-            color: var(--primary-color);
-        }
-
-        .menu-items .mode {
-            display: flex;
-            align-items: center;
-        }
-
-        .menu-items .mode-toggle {
-            position: absolute;
-            right: 14px;
-            height: 50px;
-            min-width: 45px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            cursor: pointer;
-        }
-
-        .mode-toggle .switch {
-            position: relative;
-            display: inline-block;
-            height: 22px;
-            width: 40px;
-            border-radius: 25px;
-            background-color: var(--toggle-color);
-        }
-
-        .switch::before {
-            content: " ";
-            position: absolute;
-            left: 5px;
-            top: 50%;
-            transform: translateY(-50%);
-            height: 15px;
-            width: 15px;
-            background-color: var(--panel-color);
-            border-radius: 50%;
-            transition: var(--tran-03);
-        }
-
-        body.dark .switch::before {
-            left: 20px;
-        }
-
-        body.dark .Profile-sec {
-            background-color: #333;
-            color: #FFF;
-        }
-
-        body.dark .top {
-            background-color: #333;
-            color: #FFF;
-        }
-
-        button {
-            border-radius: 50%;
-            padding: 10px;
-            background-color: rgb(55, 153, 55);
-        }
-
-        /* CSS Styles */
-        .section-title {
-            text-align: center;
-            margin-bottom: 2rem;
-            font-size: 1.5rem;
-        }
-
-        .donor-list {
-            list-style-type: none;
-            padding: 0;
-            margin: 0;
-        }
-
-        .donor-item {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 1rem;
-            border-bottom: 1px solid #ccc;
-        }
-
-        .donor-name {
-            font-weight: bold;
-        }
-
-        .donor-actions {
-            display: flex;
-            gap: 0.5rem;
-        }
-
-        .btn-accept,
-        .btn-decline {
-            padding: 0.5rem 1rem;
-            border: none;
-            border-radius: 0.25rem;
-            cursor: pointer;
-        }
-
-        .btn-accept {
-            background-color: rgb(88, 167, 88);
-            color: white;
-        }
-
-        .btn-decline {
-            background-color: red;
-            color: white;
-        }
-
-        .NGO-sec {
-            margin: 20px auto;
-            max-width: 800px;
-            padding: 20px;
-            border: 1px solid #ccc;
-            border-radius: 5px;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-        }
-
-        .donor-list {
-            list-style-type: none;
-            padding: 0;
-        }
-
-        .donor-item {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            border-bottom: 1px solid #eee;
-            padding: 10px 0;
-        }
-
-        .donor-details {
-            flex-grow: 1;
-        }
-
-        .donor-actions {
-            flex-shrink: 0;
-        }
-
-        .btn-accept,
-        .btn-decline {
-            padding: 5px 10px;
-            border: none;
-            border-radius: 3px;
-            background-color: #4CAF50;
-            color: white;
-            cursor: pointer;
-            margin-right: 5px;
-        }
-
-        .btn-decline {
-            background-color: #f44336;
-        }
-
-        .Doners-sec {
-            margin: 20px auto;
-            max-width: 800px;
-            padding: 20px;
-            border: 1px solid #ccc;
-            border-radius: 5px;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-        }
-
-        .donor-list {
-            list-style-type: none;
-            padding: 0;
-        }
-
-        .donor-item {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            border-bottom: 1px solid #eee;
-            padding: 10px 0;
-        }
-
-        .donor-details {
-            flex-grow: 1;
-        }
-
-        .donor-actions {
-            flex-shrink: 0;
-        }
-
-        .btn-accept,
-        .btn-decline {
-            padding: 5px 10px;
-            border: none;
-            border-radius: 3px;
-            background-color: #4CAF50;
-            color: white;
-            cursor: pointer;
-            margin-right: 5px;
-        }
-
-        .btn-decline {
-            background-color: #f44336;
-        }
-
-        .Complains-sec {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            margin-top: 2rem;
-        }
-
-        .donor-list {
-            list-style-type: none;
-            padding: 0;
-            margin: 0;
-        }
-
-        .donor-item {
-            background-color: #f9f9f9;
-            border-radius: 8px;
-            padding: 1rem;
-            margin-bottom: 1rem;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-        }
-
-        .donor-details {
-            display: flex;
-            flex-direction: column;
-        }
-
-        .donor-name {
-            font-weight: bold;
-            margin-bottom: 0.5rem;
-        }
-
-        .donor-email {
-            color: #666;
-            margin-bottom: 0.5rem;
-        }
-
-        .donor-message {
-            margin-bottom: 0.5rem;
-        }
-
-        /* Optional: Hover effect */
-        .donor-item:hover {
-            background-color: #f0f0f0;
-            transition: background-color 0.3s;
-        }
     </style>
 
     <!-- //icon -->
     <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.8/css/line.css">
+    <link rel="stylesheet" href="/css/ngo_dashboard.css">
 
     <title>NGO DashBoard</title>
 </head>
@@ -648,6 +199,7 @@
         </section>
     </section>
 
+<!-- Sliding menu -->
 
     <nav class="sliding-menu">
         <div class="logo-name">