diff --git a/EVENT-DETAILS.html b/EVENT-DETAILS.html new file mode 100644 index 0000000..631d61a --- /dev/null +++ b/EVENT-DETAILS.html @@ -0,0 +1,294 @@ + + + + + + Event Details + + + + + + + + + + + + + +
+ + +
+ Logo + + +
+ + +
+ + +
+
+

Events

+

Browse and Manage all your events

+
+ +
+ + + + +
+
+ + +
+

Coastal Clean-Up Exercise

+ Published +
+ + +
+ Event Image + Published +
+ + +
+

Events Description

+

+ Join us for a community coastal clean-up exercise aimed at reducing plastic waste and protecting marine life along the Lekki Waterfront. This initiative brings together passionate volunteers who are committed to keeping our beaches and waterways clean. + +

+ During this event, volunteers will work in small groups to collect plastic waste, sort recyclable materials, and safely dispose of debris found along the shoreline. All necessary clean-up materials such as gloves, waste bags, and safety gear will be provided by the organizers. + +

+ +

+ Beyond the clean-up activity, the event will also include a short environmental awareness session where participants will learn about the impact of plastic pollution on marine ecosystems and how small everyday actions can contribute to a healthier environment. +

+ +

+ Whether you are passionate about environmental sustainability, looking to give back to the community, or simply want to spend a meaningful morning outdoors, this event is a great opportunity to make a positive impact while connecting with like-minded individuals. +

+

+
+ + +
+
8:00AM – 12:00 Noon
+
June 12, 2026
+
Lekki Waterfront, Lagos
+
+ + +
+

Volunteer Requirements

+
    +
  • Must be 16+
    • +
  • Wear comfortable clothes
    • +
  • Bring water bottle
    • +
+
+ + +
+
+

40

+

Total Slots

+
+ +
+

18

+

Registered

+
+ +
+

22

+

Remaining

+
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameEmailDateRegistration
John Doejohndoe@email.comMarch 10, 2026Confirmed⋯
John Smithjohnsmith@email.comJune 23, 2026Confirmed⋯
Mary Johnsonmary@email.comJune 23, 2026Confirmed⋯
Chinyere Okaforchinyere@email.comJune 23, 2026Confirmed⋯
Emeka Nwosuemeka@email.comJune 23, 2026Confirmed⋯
+
+ +
+
+ + + + + \ No newline at end of file diff --git a/Event Creation-Style.css b/Event Creation-Style.css new file mode 100644 index 0000000..4cfe179 --- /dev/null +++ b/Event Creation-Style.css @@ -0,0 +1,315 @@ +/* Reset */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Poppins', sans-serif; +} + +body { + background-color: white; +} + +/* Container */ +.container { + display: flex; + flex-wrap: nowrap; +} + +/* Sidebar */ +.side-bar { + width: 220px; + height: 100vh; + position: fixed; + top: 0; + left: 0; + background-color: #24364f; + color: white; + padding-top: 20px; +} + +.side-bar img { + display: block; + margin: 0 auto 20px; + width: 120px; + height: 120px; +} + +.side-bar ul { + list-style: none; + padding: 0; +} + +.side-bar li { + padding: 10px; + display: flex; + align-items: center; + border-radius: 5px; + margin-bottom: 10px; + cursor: pointer; + transition: 0.3s; + gap: 5px; +} + +.side-bar li:hover, .side-bar .active { + background-color: #057DF2; +} + +.side-bar li i { + margin-right: 10px; + font-size: 18px; +} + +.side-bar a { + color: white; + text-decoration: none; +} + +/* Main container */ +.main-container { + margin-left: 230px; + padding: 0px; + flex: 1; +} + +/* Navbar */ +.nav { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 30px; + background-color: #F7F8F9; + padding: 40px; +} + +.nav h3 { + color: #1F3A5F; + font-size: 32px; +} + +.nav-actions i { + margin-left: 20px; + font-size: 20px; + color: #1F3A5F; +} + +.create-btn { + background-color: #1F3A5F; + color: white; + padding: 10px 20px; + border-radius: 10px; + text-decoration: none; +} + +/* Upload Image */ +.upload-img { + display: flex; + flex-direction: column; + align-items: center; + border: 2px dashed #057DF2; + border-radius: 10px; + padding: 120px 40px; + margin-bottom: 30px; + margin-left: 30px; + margin-right: 30px; + background-color: rgba(122, 182, 241, 0.1); +} + +.upload-img i { + font-size: 40px; + color: #057DF2; + cursor: pointer; + margin-bottom: 10px; + +} + +.upload-img h3 { + font-size: 18px; + color: #1F3A5F; +} + +.upload-img input{ + /* visibility: hidden; */ + opacity: 0; + position: absolute; + top: 25%; + width: 20%; +} + +.upload-img .fa-solid{ + font-size: 80px; +} + +/* Form Fields */ + +.container2 .field { + margin-bottom: 25px; +} + +input, select, textarea { + width: 100%; + padding: 12px 15px; + border-radius: 10px; + border: 1px solid #ccc; + font-size: 16px; + height: 60px; +} + +textarea { + resize: none; + height: 120px; +} + +select { + height: 50px; +} +.field{ + padding-left: 30px; + margin-bottom: 40px; +} +.field label{ + margin-top: 20px; + font-size: 20px; +} + +/* Volunteer roles */ +.input-volunteer { + display: flex; + gap: 10px; +} + +.input-volunteer input { + flex: 1; +} + +.plus-icon { + background-color: #057DF2; + color: white; + border: none; + padding: 0 15px; + font-size: 24px; + border-radius: 5px; + cursor: pointer; +} + +#roleList { + display: flex; + flex-wrap: wrap; + gap: 5px; + margin-top: 10px; +} + +#roleList li { + background-color: #057DF2; + color: white; + padding: 5px 10px; + border-radius: 5px; +} + +/* Number of Volunteers */ +.no-of-volunteer { + display: flex; + align-items: center; + justify-content: space-between; + gap: 15px; + border: solid 1px rgb(63, 62, 62); + width: 25%; + padding: 15px; + font-size: 20px; + font-weight: 500; + border-radius: 10px; +} + +.count{ + margin-right: 50%; +} + +.field-8{ + display: flex; + gap: 30px; +} + + +.no-of-volunteer button { + border: none; + background-color: #057cf200; + font-size: 30px; + font-weight: 500; + color: #808080; +} +.field-6{ + display: flex; + justify-content: space-between; + max-width: 100%; +} + +.field-6 div{ + width: 25%; +} + +.field-6 input{ + height: 70px; +} + +.field-9{ + display: flex; + align-items: center; + gap: 10px; +} + +input[type="checkbox"]{ + width: 30px; + height: 30px; +} + + +/* Buttons */ + +.field-10{ + display: flex; + justify-content: space-between; +} +.field-10 a { + display: inline-block; + width: 40%; + text-align: center; + padding: 12px 0; + border-radius: 10px; + font-weight: bold; + font-size: 16px; + border: 2px solid #1F3A5F; + text-decoration: none; + height: 70px; +} + +.field-10 #publish { + background-color: #1F3A5F; + color: white; +} + +/* Responsive */ +@media (max-width: 768px) { + .side-bar { + width: 60px; + } + .side-bar a { + display: none; + } + .main-container { + margin-left: 60px; + } + .nav h3 { + font-size: 24px; + } +} + +@media (max-width: 480px) { + .nav { + flex-direction: column; + gap: 10px; + } + .field-6 { + flex-direction: column; + gap: 10px; + } +} \ No newline at end of file diff --git a/Event-crreation.html b/Event-crreation.html new file mode 100644 index 0000000..e9afa5f --- /dev/null +++ b/Event-crreation.html @@ -0,0 +1,175 @@ + + + + + + Create Event + + + + + + + + +
+ + +
+ Logo + +
+ + +
+ +
+

Create Event

+
+ Create Event + + +
+
+ + +
+ + +
+ + +

Upload Event Image

+
+ + +
+ + +
+ + +
+ + +
+ + +
+ +

Add one or more role

+
+ + +
+
    +
    + + +
    + + +
    + + +
    + + +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    + + +
    + + +
    + +
    + 40 + + +
    +
    + + +
    + + +
    + + +
    + Save Draft + Publish Event +
    + +
    +
    +
    + + + + + \ No newline at end of file diff --git a/Frame 501.png b/Frame 501.png new file mode 100644 index 0000000..ca676f8 Binary files /dev/null and b/Frame 501.png differ diff --git a/event detail.css b/event detail.css new file mode 100644 index 0000000..e3a0833 --- /dev/null +++ b/event detail.css @@ -0,0 +1,353 @@ +/* ================= RESET ================= */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Poppins', sans-serif; + background-color: white; +} + +/* ================= LAYOUT ================= */ +.container { + display: flex; + min-height: 100vh; +} + +/* ================= SIDEBAR ================= */ +.side-bar { + width: 220px; + height: 100vh; + position: fixed; + top: 0; + left: 0; + background-color: #24364f; + color: white; + padding-top: 20px; +} + +.side-bar img { + display: block; + margin: 0 auto 20px; + width: 120px; +} + +.side-bar ul { + list-style: none; + padding: 0 10px; +} + +.side-bar li { + display: flex; + align-items: center; + gap: 10px; + padding: 10px; + border-radius: 6px; + margin-bottom: 10px; + cursor: pointer; + transition: 0.3s; +} + +.side-bar li:hover, +.side-bar li.active { + background-color: #057DF2; +} + +.side-bar a { + color: white; + text-decoration: none; +} + +/* ================= MAIN ================= */ +.main-container { + margin-left: 220px; + padding: 30px; + width: 100%; +} + +/* ================= NAV ================= */ +.nav { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 20px; +} + +.nav h2 { + color: #1F3A5F; +} + +.nav p { + font-size: 14px; + color: gray; +} + +.nav-actions { + display: flex; + align-items: center; + gap: 15px; +} + +.nav-actions i { + font-size: 25px; + color: #1F3A5F; +} + +/* BUTTONS */ +.edit-btn { + background-color: #1F3A5F; + color: white; + border: none; + padding: 20px 25px; + border-radius: 8px; + font-size: 15px; + cursor: pointer; +} + +.cancel-btn { + background-color: #FF4D4F; + color: white; + border: none; + padding: 20px 25px; + border-radius: 8px; + cursor: pointer; + font-size: 15px; +} + +/* ================= TITLE ================= */ +.title-row { + display: flex; + justify-content: space-between; + align-items: center; + margin: 20px 0; +} + +.title-row h1 { + font-size: 35px; + color: #1F3A5F; +} + +/* STATUS */ +.status { + padding: 15px 25px; + border-radius: 6px; + font-size: 13px; + font-weight: 500; +} + +.published { + background-color: #EDF0EE; + color: #2A2A2A; +} + +/* ================= IMAGE ================= */ +.event-img { + position: relative; + margin-bottom: 25px; +} + +.event-img img { + width: 100%; + border-radius: 10px; +} + +.status-badge { + position: absolute; + top: 15px; + right: 15px; + background: green; + color: white; + padding: 15px 25px; + border-radius: 6px; + font-size: 15px; +} + +/* ================= SECTION ================= */ +.section { + margin: 25px 0; +} + +.section h3 { + margin-bottom: 10px; + color: #1F3A5F; + font-size: 30px; +} + +.section p { + font-size: 14px; + color: #444; + margin-bottom: 10px; + line-height: 1.6; +} + +.section ul { + padding-left: 20px; +} + +.section li { + margin-bottom: 5px; + font-size: 14px; +} + +/* ================= DETAILS ================= */ +.details { + display: flex; + gap: 140px; + margin: 20px 0; + font-size: 20px; + color: #333; +} + +.details i { + margin-right: 5px; + color: #057DF2; +} + +/* ================= STATS ================= */ +.stats { + display: flex; + gap: 20px; + margin: 30px 0; +} + +.card { + flex: 1; + background: #F7F8F9; + padding: 40px 20px; + border-radius: 10px; + text-align: center; + border: 1px solid #eee; +} + +.card h2 { + font-size: 28px; + color: #1F3A5F; + border-bottom: solid 1px #1F3A5F; + width: 60%; + margin-right: auto; + margin-left: auto; + margin-bottom: 10px; +} + +.card p { + font-size: 14px; + color: gray; +} + +/* MENU */ +.action-menu p { + padding: 5px 10px; + cursor: pointer; +} + +.action-menu p:hover { + background: #f1f3f5; +} + +/* ================= TABLE ================= */ +.table-container { + background: white; + padding: 15px; + border-radius: 10px; + overflow-x: auto; +} + +table { + width: 100%; + border-collapse: collapse; +} + +th { + text-align: left; + padding: 10px; + background: #f1f3f5; + font-size: 14px; +} + +td { + padding: 20px 10px; + border-bottom: 1px solid #eee; + font-size: 14px; +} + +/* STATUS TAG */ +.confirmed { + background-color: #2E7D32; + color: white; + padding: 10px 20px; + border-radius: 6px; + font-size: 15px; +} + +/* ================= RESPONSIVE ================= */ + +/* Tablet */ +@media (max-width: 1024px) { + .main-container { + padding: 20px; + } + + .details { + flex-wrap: wrap; + } +} + +/* Mobile */ +@media (max-width: 768px) { + + .side-bar { + width: 70px; + } + + .side-bar img { + width: 50px; + } + + .side-bar a { + display: none; + } + + .main-container { + margin-left: 70px; + padding: 15px; + } + + .nav { + flex-direction: column; + align-items: flex-start; + gap: 10px; + } + + .title-row { + flex-direction: column; + align-items: flex-start; + gap: 10px; + } + + .stats { + flex-direction: column; + } + + .details { + flex-direction: column; + gap: 10px; + } +} + +/* Small phones */ +@media (max-width: 480px) { + .title-row h1 { + font-size: 20px; + } + + .nav-actions { + flex-wrap: wrap; + } + + .edit-btn, + .cancel-btn { + width: 100%; + } +} \ No newline at end of file diff --git a/event-cancelation.html b/event-cancelation.html new file mode 100644 index 0000000..1e05dc1 --- /dev/null +++ b/event-cancelation.html @@ -0,0 +1,133 @@ + + + + + + Document + + + + + + + + + +
    +
    + + + +
    + + +
    +
    + + + +
    + +
    +
    + + + + + +

    + Canceling this event will notify all registered volunteers and cannot be undone +

    +
    + +

    Reason for cancellation (Please select a reason)

    + +
    +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    + + +
    +
    + +
    + + + + +
    + +
    + Cancel Event + Go Back +
    + +
    + + +
    +
    + + + + + \ No newline at end of file diff --git a/event-cancellation.css b/event-cancellation.css new file mode 100644 index 0000000..f3b3f60 --- /dev/null +++ b/event-cancellation.css @@ -0,0 +1,252 @@ +/* RESET */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Poppins', sans-serif; +} + +body { + background-color: #f7f8f9; +} + +/* LAYOUT */ +.container { + display: flex; + min-height: 100vh; +} + +/* SIDEBAR (MATCHED WITH FIRST PAGE) */ +.side-bar { + width: 220px; + height: 100vh; + position: fixed; + top: 0; + left: 0; + background-color: #24364f; + color: white; + padding-top: 20px; + padding-left: 0px; + padding-right: 0px; +} + +.side-bar img { + display: block; + margin: 0 auto 20px; + width: 120px; +} + +.side-bar ul { + list-style: none; + padding: 0 10px; +} + +.side-bar li { + display: flex; + align-items: center; + padding: 10px; + gap: 10px; + border-radius: 6px; + margin-bottom: 10px; + margin-right: 0px; + margin-left: 0px; + cursor: pointer; + transition: 0.3s; +} + +.side-bar li:hover, .side-bar .active{ + background-color: #057DF2; +} + +.side-bar a { + color: white; + text-decoration: none; +} + +/* MAIN */ +.main-container { + margin-left: 220px; + padding: 30px; + flex: 1; +} + +/* NAVBAR */ +.nav { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 30px; +} + +#nav-h3 { + font-size: 32px; + color: #1F3A5F; +} + +.nav2 { + display: flex; + align-items: center; + gap: 20px; +} + +/* CONTENT BOX */ +.container2 { + max-width: 900px; + margin: auto; +} + +/* WARNING BOX */ +.warning-box { + background: white; + padding: 40px 20px; + text-align: center; + border-radius: 10px; + margin-bottom: 50px; +} + +.icon { + width: 120px; + height: 120px; + margin-bottom: 15px; +} + +.warning-text { + font-size: 24px; + color: #333; +} + +/* HEADINGS */ +.heading-1 { + font-size: 28px; + color: #1F3A5F; + margin-bottom: 20px; + border-bottom: 1px solid #ccc; + padding-bottom: 10px; +} + +span { + font-size: 14px; + color: #868686; +} + +/* OPTIONS */ +.options { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 15px; +} + +.option { + display: flex; + align-items: center; + gap: 10px; + font-size: 15px; + cursor: pointer; +} + +/* CHECKBOX */ +input[type="checkbox"] { + width: 20px; + height: 20px; + accent-color: #057DF2; +} + +/* TEXTAREA */ +.why-box { + margin-top: 40px; +} + +textarea { + width: 100%; + height: 180px; + border-radius: 10px; + padding: 12px; + border: 1px solid #ccc; + font-size: 15px; +} + +textarea:focus { + outline: none; + border-color: #057DF2; + box-shadow: 0 0 0 2px rgba(5, 125, 242, 0.2); +} + +/* BUTTONS */ +.buttons { + display: flex; + gap: 15px; + margin-top: 40px; +} + +.cancel, .go-back { + flex: 1; + padding: 14px; + text-align: center; + border-radius: 10px; + text-decoration: none; + font-weight: 500; +} + +.cancel { + background-color: #FF4D4F; + color: white; +} + +.go-back { + background-color: #1F3A5F; + color: white; +} + +/* ================= RESPONSIVE ================= */ + +/* Tablet */ +@media (max-width: 1024px) { + .main-container { + padding: 20px; + } + + #nav-h3 { + font-size: 26px; + } +} + +/* Mobile */ +@media (max-width: 768px) { + .side-bar { + width: 70px; + } + + .side-bar img { + width: 50px; + } + + .side-bar a { + display: none; + } + + .main-container { + margin-left: 70px; + padding: 15px; + } + + .nav { + flex-direction: column; + align-items: flex-start; + gap: 10px; + } + + .buttons { + flex-direction: column; + } +} + +/* Small phones */ +@media (max-width: 480px) { + #nav-h3 { + font-size: 22px; + } + + .warning-text { + font-size: 18px; + } +} \ No newline at end of file diff --git a/event-details-table.html b/event-details-table.html new file mode 100644 index 0000000..a470fca --- /dev/null +++ b/event-details-table.html @@ -0,0 +1,246 @@ + + + + + +Events + + + + + + + + + + + +
    + + +
    + Logo + + +
    + + +
    + + +
    +
    +

    Events

    +

    Browse and Manage all your events

    +
    + +
    + + + +
    +
    + + +
    + All + Draft + Published + Cancelled +
    + + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Events NameLocationDateVolunteersStatus
    Beach Cleanup DriveLekki WaterfrontJune 15, 202515/35Upcoming⋯
    Food DistributionCoastal RoadJune 21, 202510/25Published⋯
    Food DistributionCoastal RoadJune 23, 202516/25Draft⋯
    Food DistributionCoastal RoadJune 25, 202519/35Completed⋯
    Food DistributionCoastal RoadJune 21, 202510/25Completed⋯
    Food DistributionCoastal RoadJune 23, 202516/25Completed⋯
    Food DistributionCoastal RoadJune 25, 202519/35Completed⋯
    Food DistributionCoastal RoadJune 25, 202519/35Completed⋯
    +
    + +
    +
    + + + + + + \ No newline at end of file diff --git a/event-list-table-detail.css b/event-list-table-detail.css new file mode 100644 index 0000000..65d4530 --- /dev/null +++ b/event-list-table-detail.css @@ -0,0 +1,245 @@ +/* RESET */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Poppins', sans-serif; + background: #f7f8f9; +} + +/* ACTION MENU */ +.action-menu p { + padding: 5px 10px; + margin: 0; +} + +.action-menu p:hover { + background: #f1f3f5; +} + +/* LAYOUT */ +.container { + display: flex; +} + +/* SIDEBAR */ +.side-bar { + width: 220px; + height: 100vh; + position: fixed; + top: 0; + left: 0; + background-color: #24364f; + color: white; + padding-top: 20px; +} + +.side-bar img { + display: block; + margin: 0 auto 20px; + width: 120px; + height: 120px; +} + +.side-bar ul { + list-style: none; + padding: 0; +} + +.side-bar li { + padding: 10px; + display: flex; + align-items: center; + border-radius: 5px; + margin-bottom: 10px; + cursor: pointer; + transition: 0.3s; + gap: 5px; +} + +.side-bar li:hover, .side-bar .active { + background-color: #057DF2; +} + +.side-bar li i { + margin-right: 10px; + font-size: 18px; +} + +.side-bar a { + color: white; + text-decoration: none; +} + + +/* MAIN */ +.main-container { + margin-left: 220px; + padding: 30px; + width: 100%; +} + +/* NAV */ +.nav { + display: flex; + justify-content: space-between; + align-items: center; +} + +.nav h2 { + color: #1F3A5F; +} + +.nav p { + font-size: 14px; + color: gray; +} + +.nav-actions { + display: flex; + align-items: center; + gap: 15px; +} + +.nav-actions i { + font-size: 25px; + color: #1F3A5F; +} + + +.create-btn { + background-color: #1F3A5F; + color: white; + padding: 10px 20px; + border-radius: 10px; + text-decoration: none; +} + +/* TABS */ +.tabs { + margin: 20px 0; + display: flex; + gap: 20px; +} + +.tabs span { + cursor: pointer; + color: gray; +} + +.tabs .active { + color: #057DF2; + font-weight: 500; +} + +/* TABLE */ +.table-container { + background: white; + border-radius: 10px; + padding: 15px; + overflow-x: auto; +} + +table { + width: 100%; + border-collapse: collapse; +} + +th { + text-align: left; + padding: 10px; + background: #f1f3f5; + font-size: 14px; +} + +td { + padding: 12px 10px; + border-bottom: 1px solid #eee; + font-size: 14px; +} + +/* STATUS */ +.status { + padding: 5px 10px; + border-radius: 6px; + font-size: 12px; + width: 50px; + height: 20px; + color: white; +} + +.upcoming { + background: orange; +} + +.published { + background: green; + text-align: center; + padding-left: 15px; + padding-right: 15px; +} + +.draft { + background: gray; + text-align: center; + padding-left: 30px; + padding-right: 30px; +} + +.completed { + background: #057DF2; +} + +/* ================= RESPONSIVE ================= */ + +/* Tablet */ +@media (max-width: 1024px) { + .main-container { + padding: 20px; + } +} + +/* Mobile */ +@media (max-width: 768px) { + + .side-bar img { + width: 50px; + height: 50px; + } + + .side-bar { + width: 60px; + } + .side-bar a { + display: none; + } + + .main-container { + margin-left: 70px; + } + + .nav { + flex-direction: column; + align-items: flex-start; + gap: 10px; + } + + .tabs { + flex-wrap: wrap; + } +} + +/* Small phones */ +@media (max-width: 480px) { + th, td { + font-size: 12px; + } + + .create-btn { + padding: 8px 10px; + font-size: 12px; + } +} \ No newline at end of file diff --git a/event-list-table.html b/event-list-table.html new file mode 100644 index 0000000..9366964 --- /dev/null +++ b/event-list-table.html @@ -0,0 +1,101 @@ + + + + + + Document + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Event nameLocationDateVolunteerStatus
    Beach CleanupLekkiJune 23, 202619/35Upcominig...
    Food contributionCoastal road EYCJune 23, 202619/35Published...
    Food contributionCoastal road EYCJune 23, 202619/35Draft...
    Food contributionCoastal road EYCJune 23, 202619/35Completed...
    Food contributionCoastal road EYCJune 23, 202619/35Completed...
    Food contributionCoastal road EYCJune 23, 202619/35Completed...
    Food contributionCoastal road EYCJune 23, 202619/35Completed...
    Food contributionCoastal road EYCJune 23, 202619/35Completed...
    + + \ No newline at end of file diff --git a/image 3.png b/image 3.png new file mode 100644 index 0000000..bc7dcc3 Binary files /dev/null and b/image 3.png differ diff --git a/organisation dashboard.css b/organisation dashboard.css new file mode 100644 index 0000000..8ae59a5 --- /dev/null +++ b/organisation dashboard.css @@ -0,0 +1,316 @@ +/* RESET */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Poppins', sans-serif; + background: white; +} + +/* ACTION MENU */ +.action-menu p { + padding: 5px 10px; + margin: 0; +} + +.action-menu p:hover { + background: #f1f3f5; +} + +/* LAYOUT */ +.container { + display: flex; +} + +/* SIDEBAR */ +.side-bar { + width: 220px; + height: 100vh; + position: fixed; + top: 0; + left: 0; + background-color: #24364f; + color: white; + padding-top: 20px; +} + +.side-bar img { + display: block; + margin: 0 auto 20px; + width: 120px; + height: 120px; +} + +.side-bar ul { + list-style: none; + padding: 0; +} + +.side-bar li { + padding: 10px; + display: flex; + align-items: center; + border-radius: 5px; + margin-bottom: 10px; + cursor: pointer; + transition: 0.3s; + gap: 5px; +} + +.side-bar li:hover, .side-bar .active { + background-color: #057DF2; +} + +.side-bar li i { + margin-right: 10px; + font-size: 18px; +} + +.side-bar a { + color: white; + text-decoration: none; +} + + +/* MAIN */ +.main-container { + margin-left: 220px; + padding: 0; + width: 100%; +} + +/* NAV */ +.nav { + display: flex; + justify-content: space-between; + align-items: center; + background-color: #f7f8f9; + padding: 40px 20px; +} + +.nav h2 { + color: #1F3A5F; +} + +.nav p { + font-size: 14px; + color: gray; +} + +.nav-actions { + display: flex; + align-items: center; + gap: 15px; +} + +.nav-actions i { + font-size: 25px; + color: #1F3A5F; +} + + +.create-btn { + background-color: #1F3A5F; + color: white; + padding: 10px 20px; + border-radius: 10px; + text-decoration: none; +} + + + +/* DASHBOARD */ + +.dashboard-title{ + color: #24364f; + margin-top: 50px; + padding-left: 20px; + padding-right: 20px; +} +.dashboard{ + display: flex; + justify-content: space-between; + margin-top: 30px; + border-bottom: solid 1px #24364f; + padding-bottom: 70px; + padding-left: 20px; + padding-right: 20px; +} + +.dashboard p{ + display: flex; + gap: 8px; + align-content: center; +} + +.dashboard h2{ + font-size: 30px; + width: 100%; + border-bottom: solid 1px #6B7C93; + padding: 10px; +} + +.dashboard p{ + padding: 10px; +} + +.board{ + width: 20%; + text-align: center; + background-color: #F7F8F9; + border: solid 1px #6B7C93; + border-radius: 5px; + padding: 0px; +} + +.board i{ + color: #057DF2; + font-size: 20px; +} + +/* TABLE */ +.table-container { + background: white; + border-radius: 10px; + padding: 15px; + overflow-x: auto; + margin-top: 30px; + padding-left: 20px; + padding-right: 20px; +} + +.table-container h2{ + color: #24364f; + font-size: 30px; + margin-bottom: 30px; +} + +tbody tr{ + padding: 60px auto; +} + +table { + width: 100%; + border-collapse: collapse; +} + +th { + text-align: left; + padding: 10px; + background: #f1f3f5; + font-size: 14px; +} + +td { + padding: 12px 10px; + border-bottom: 1px solid #eee; + font-size: 14px; +} + +/* STATUS */ +.status { + padding: 5px 10px; + border-radius: 6px; + font-size: 12px; + width: 50px; + height: 20px; + color: white; +} + +.upcoming { + background: orange; +} + +.published { + background: green; + text-align: center; + padding-left: 15px; + padding-right: 15px; +} + +.draft { + background: gray; + text-align: center; + padding-left: 30px; + padding-right: 30px; +} + +.completed { + background: #057DF2; +} + +/* ================= RESPONSIVE ================= */ + +/* Tablet */ +@media (max-width: 1024px) { + .main-container { + padding: 20px; + } +} + +/* Mobile */ +@media (max-width: 768px) { + + .side-bar img { + width: 50px; + height: 50px; + } + .dashboard{ + flex-direction: column; + justify-content: center; + align-items: center; + gap: 10px; + padding-bottom: 20px; + padding-left: 5px; + padding-right: 5px; + } + + .dashboard p, .dashboard i{ + font-size: 10px; + } + + .board{ + width: 50%; + } + + + + + + .side-bar { + width: 60px; + } + .side-bar a { + display: none; + } + + .main-container { + margin-left: 70px; + } + + .nav { + flex-direction: column; + align-items: center; + justify-content: center; + gap: 10px; + } + + .tabs { + flex-wrap: wrap; + } +} + +/* Small phones */ +@media (max-width: 480px) { + th, td { + font-size: 12px; + } + + .create-btn { + padding: 8px 10px; + font-size: 12px; + } +} \ No newline at end of file diff --git a/organizers dashboard.html b/organizers dashboard.html new file mode 100644 index 0000000..ee5b203 --- /dev/null +++ b/organizers dashboard.html @@ -0,0 +1,237 @@ + + + + + +Events + + + + + + + + + + + +
    + + +
    + Logo + + +
    + + +
    + + +
    +
    +

    Welcome Back

    +
    + +
    + + + +
    +
    + + +

    Dashboard

    +
    +
    +

    40

    +

    Total Event created

    +
    + +
    +

    18

    +

    Upcoming Event

    +
    + +
    +

    22

    +

    Completed Events

    +
    + +
    +

    22

    +

    Completed Events

    +
    +
    + + + +
    + +

    Recent Events

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Events NameLocationDateVolunteersStatus
    Beach Cleanup DriveLekki WaterfrontJune 15, 202515/35Upcoming⋯
    Food DistributionCoastal RoadJune 21, 202510/25Published⋯
    Food DistributionCoastal RoadJune 23, 202516/25Draft⋯
    Food DistributionCoastal RoadJune 25, 202519/35Completed⋯
    Food DistributionCoastal RoadJune 21, 202510/25Completed⋯
    +
    + +
    +
    + + + + + + \ No newline at end of file