mirror of
https://github.com/GCMatters/hermes.git
synced 2026-02-04 13:40:13 +01:00
CSS update
Made the site look closer to the mock-up
This commit is contained in:
Maksogonowy
@@ -4,37 +4,80 @@
|
|||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Nowe wydarzenie</title>
|
<title>Nowe wydarzenie</title>
|
||||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet">
|
||||||
<link rel="stylesheet" href="/css/style.css" />
|
<link rel="stylesheet" href="/css/style.css" />
|
||||||
|
<link rel="stylesheet" href="/css/panel.css" />
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<body class="bg-light">
|
<body class="bg-light">
|
||||||
<div class="container mt-5">
|
<div class="">
|
||||||
<h1 class="mb-4">Utwórz wydarzenie</h1>
|
<!-- Sidebar -->
|
||||||
|
<div class="sidebar">
|
||||||
|
<div class="text-center mb-4">
|
||||||
|
</div>
|
||||||
|
<nav class="sidebar d-flex flex-column align-items-center pt-3">
|
||||||
|
<div class="icon-box my-2">
|
||||||
|
<a href="index.html" class="nav-link text-info mb-3">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#2898BD"><path d="M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z" /></svg>
|
||||||
|
<br /><h8 class="iconText">Home</h8>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="icon-box my-2">
|
||||||
|
<a href="#" class="nav-link text-info mb-3">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#2898BD"><path d="M880-80 720-240H320q-33 0-56.5-23.5T240-320v-40h440q33 0 56.5-23.5T760-440v-280h40q33 0 56.5 23.5T880-640v560ZM160-473l47-47h393v-280H160v327ZM80-280v-520q0-33 23.5-56.5T160-880h440q33 0 56.5 23.5T680-800v280q0 33-23.5 56.5T600-440H240L80-280Zm80-240v-280 280Z" /></svg>
|
||||||
|
<br /><h8 class="iconText">Chats</h8>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="icon-box my-2">
|
||||||
|
<a href="#" class="nav-link text-info mb-3">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#2898BD"><path d="M580-240q-42 0-71-29t-29-71q0-42 29-71t71-29q42 0 71 29t29 71q0 42-29 71t-71 29ZM200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Z" /></svg>
|
||||||
|
<br /><h8 class="iconText">Calendar</h8>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="icon-box mt-auto mb-4">
|
||||||
|
<a href="#" class="nav-link text-info mb-3">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#2898BD"><path d="m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm70-80h79l14-106q31-8 57.5-23.5T639-327l99 41 39-68-86-65q5-14 7-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99 42q-22-23-48.5-38.5T533-694l-13-106h-79l-14 106q-31 8-57.5 23.5T321-633l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q22 23 48.5 38.5T427-266l13 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Zm-2-140Z" /></svg>
|
||||||
|
<br /><h8 class="iconText">Settings</h8>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<!-- Top Nav -->
|
||||||
|
<div class="topnav d-flex justify-content-between align-items-center shadow">
|
||||||
|
<a href="index.html" class="eventsText m-0 logo text-decoration-none">Lend a Hand</a>
|
||||||
|
<div>
|
||||||
|
<button class="button-join">Join now</button>
|
||||||
|
<button class="button-sign">Sign In</button>
|
||||||
|
<svg class="position-relative" xmlns="http://www.w3.org/2000/svg" height="50px" viewBox="0 -960 960 960" width="50px" fill="#2898BD"><path d="M234-276q51-39 114-61.5T480-360q69 0 132 22.5T726-276q35-41 54.5-93T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 59 19.5 111t54.5 93Zm246-164q-59 0-99.5-40.5T340-580q0-59 40.5-99.5T480-720q59 0 99.5 40.5T620-580q0 59-40.5 99.5T480-440Zm0 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q53 0 100-15.5t86-44.5q-39-29-86-44.5T480-280q-53 0-100 15.5T294-220q39 29 86 44.5T480-160Zm0-360q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm0-60Zm0 360Z" /></svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="main">
|
||||||
|
<h1 class="mb-4">Create a new event</h1>
|
||||||
|
|
||||||
<div class="form-group mb-2">
|
<div class="form-group mb-2">
|
||||||
<label for="title">Tytuł</label>
|
<label for="title">Tytuł</label>
|
||||||
<input id="title" class="form-control" />
|
<input id="title" class="form-control input-field" />
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group mb-2">
|
<div class="form-group mb-2">
|
||||||
<label for="location">Lokalizacja</label>
|
<label for="location">Lokalizacja</label>
|
||||||
<input id="location" class="form-control" />
|
<input id="location" class="form-control input-field" />
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group mb-2">
|
<div class="form-group mb-2">
|
||||||
<label for="description">Opis</label>
|
<label for="description">Opis</label>
|
||||||
<textarea id="description" class="form-control"></textarea>
|
<textarea id="description" class="form-control input-field"></textarea>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group mb-2">
|
<div class="form-group mb-2">
|
||||||
<label for="eventDate">Data</label>
|
<label for="eventDate">Data</label>
|
||||||
<input id="eventDate" type="datetime-local" class="form-control" />
|
<input id="eventDate" type="datetime-local" class="form-control input-field" />
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group mb-4">
|
<div class="form-group mb-4">
|
||||||
<label for="organisationId">ID Organizacji</label>
|
<label for="organisationId">ID Organizacji</label>
|
||||||
<input id="organisationId" type="number" class="form-control" />
|
<input id="organisationId" type="number" class="form-control input-field" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button id="saveBtn" class="button"><span>Zapisz</span><span>⮞</span></button>
|
<button id="saveBtn" class="button"><span>Save</span><span>⮞</span></button>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -1,10 +1,151 @@
|
|||||||
|
.logo {
|
||||||
|
font-family: 'Nunito', sans-serif;
|
||||||
|
font-weight: 800;
|
||||||
|
font-size: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: 'Segoe UI', sans-serif;
|
font-family: 'Segoe UI', sans-serif;
|
||||||
}
|
}
|
||||||
|
.sidebar {
|
||||||
|
width: 120px;
|
||||||
|
position: fixed;
|
||||||
|
top: 113px;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: white;
|
||||||
|
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
.sidebar .nav-link {
|
||||||
|
text-align: center;
|
||||||
|
padding: 20px 0;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
.iconText {
|
||||||
|
color: #666666;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.topnav {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 113px;
|
||||||
|
background-color: white;
|
||||||
|
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
|
||||||
|
z-index: 1050;
|
||||||
|
padding: 0 70px;
|
||||||
|
}
|
||||||
|
.button-join {
|
||||||
|
width: 150px;
|
||||||
|
height: 50px;
|
||||||
|
background-color: #2898BD;
|
||||||
|
border: none;
|
||||||
|
border-radius: 50px;
|
||||||
|
color: white;
|
||||||
|
font-weight:500;
|
||||||
|
font-size: 22px;
|
||||||
|
}
|
||||||
|
.button-join:hover {
|
||||||
|
width: 150px;
|
||||||
|
height: 50px;
|
||||||
|
background-color: #2485A6;
|
||||||
|
border: none;
|
||||||
|
border-radius: 50px;
|
||||||
|
color: white;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 22px;
|
||||||
|
}
|
||||||
|
.button-sign {
|
||||||
|
width: 150px;
|
||||||
|
height: 50px;
|
||||||
|
background-color: transparent;
|
||||||
|
border: 2px, solid, #2898BD;
|
||||||
|
border-radius: 50px;
|
||||||
|
color: #2898BD;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 22px;
|
||||||
|
}
|
||||||
|
.button-sign:hover {
|
||||||
|
width: 150px;
|
||||||
|
height: 50px;
|
||||||
|
background-color: #2898BD;
|
||||||
|
border: none;
|
||||||
|
border-radius: 50px;
|
||||||
|
color: white;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-box {
|
||||||
|
width: 90px;
|
||||||
|
height: 90px;
|
||||||
|
border-radius: 30px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 24px;
|
||||||
|
transition: box-shadow 0.2s ease;
|
||||||
|
cursor: pointer;
|
||||||
|
padding-top: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-box:hover {
|
||||||
|
box-shadow: 0 7px 10px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.main {
|
||||||
|
margin-left: 10%; /* exact width of .sidebar */
|
||||||
|
margin-top: 113px; /* exact height of .topnav */
|
||||||
|
padding: 30px;
|
||||||
|
justify-content: center;
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
.search-bar {
|
||||||
|
margin-left: 12%;
|
||||||
|
position: relative;
|
||||||
|
width: 60%;
|
||||||
|
}
|
||||||
|
.search-bar input {
|
||||||
|
height: 70px;
|
||||||
|
border: 2px solid #2898BD;
|
||||||
|
border-radius: 50px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
padding-right: 3rem; /* Make space for the icon */
|
||||||
|
}
|
||||||
|
.search-bar input:focus {
|
||||||
|
height: 70px;
|
||||||
|
border: 3px solid #2898BD;
|
||||||
|
border-radius: 50px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
padding-right: 3rem; /* Make space for the icon */
|
||||||
|
outline: none;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
.button-add {
|
||||||
|
background-color: #2898BD;
|
||||||
|
width: 70px;
|
||||||
|
height: 70px;
|
||||||
|
padding: 30px;
|
||||||
|
z-index: 50;
|
||||||
|
}
|
||||||
|
|
||||||
|
.events-card {
|
||||||
|
width: 75%; /* or whatever your design max is */
|
||||||
|
margin: 0 auto; /* center it horizontally */
|
||||||
|
background-color: white;
|
||||||
|
padding: 3rem;
|
||||||
|
border-radius: 30px;
|
||||||
|
box-shadow: 0 7px 10px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eventsText {
|
||||||
|
color: #2898BD;
|
||||||
|
}
|
||||||
|
|
||||||
#eventList .event-card {
|
#eventList .event-card {
|
||||||
background-color: white;
|
background-color: white;
|
||||||
border: 2px dashed #17a2b8;
|
border: 2px dashed #2898BD;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -17,12 +158,22 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#eventList .event-card .remove-btn {
|
#eventList .event-card .remove-btn {
|
||||||
background-color: #ff4d4d;
|
background-color: #F05234;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 50%;
|
border-radius: 30px;
|
||||||
color: white;
|
color: white;
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
width: 36px;
|
width: 99px;
|
||||||
height: 36px;
|
height: 50px;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
#eventList .event-card .remove-btn:hover {
|
||||||
|
background-color: #CD4A31;
|
||||||
|
border: none;
|
||||||
|
border-radius: 30px;
|
||||||
|
color: white;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
width: 99px;
|
||||||
|
height: 50px;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,6 +1,21 @@
|
|||||||
.button {
|
body {
|
||||||
border-radius: 4px;
|
color: #2898BD;
|
||||||
background-color: #f4511e;
|
}
|
||||||
|
.input-field {
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 10px;
|
||||||
|
border: 2px solid #2898BD;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
.input-field:focus {
|
||||||
|
outline: none;
|
||||||
|
box-shadow: none;
|
||||||
|
border: 3px solid #2898BD;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
border-radius: 30px;
|
||||||
|
background-color: #2898BD;
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 28px;
|
font-size: 28px;
|
||||||
|
|||||||
@@ -4,55 +4,92 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<title>Events Panel</title>
|
<title>Events Panel</title>
|
||||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet">
|
||||||
<link href="/css/panel.css" rel="stylesheet" />
|
<link href="/css/panel.css" rel="stylesheet" />
|
||||||
</head>
|
</head>
|
||||||
<body class="bg-light">
|
<body class="bg-light">
|
||||||
|
|
||||||
<div class="d-flex">
|
<div class="d-flex">
|
||||||
<!-- Sidebar -->
|
<!-- Sidebar -->
|
||||||
<div class="bg-white border-end p-3 vh-100" style="width: 80px;">
|
<div class="sidebar">
|
||||||
<div class="text-center mb-4">
|
<div class="text-center mb-4">
|
||||||
<img src="/img/logo.svg" alt="Logo" style="width: 40px;">
|
|
||||||
</div>
|
</div>
|
||||||
<nav class="nav flex-column text-center">
|
<nav class="sidebar d-flex flex-column align-items-center pt-3">
|
||||||
<a href="#" class="nav-link text-info mb-3">🏠</a>
|
<div class="icon-box my-2">
|
||||||
<a href="#" class="nav-link text-info mb-3">💬</a>
|
<a href="index.html" class="nav-link text-info mb-3">
|
||||||
<a href="#" class="nav-link text-info mb-3">📅</a>
|
<svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#2898BD"><path d="M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z" /></svg>
|
||||||
<a href="#" class="nav-link text-info mt-auto">⚙️</a>
|
<br /><h8 class="iconText">Home</h8>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="icon-box my-2">
|
||||||
|
<a href="#" class="nav-link text-info mb-3">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#2898BD"><path d="M880-80 720-240H320q-33 0-56.5-23.5T240-320v-40h440q33 0 56.5-23.5T760-440v-280h40q33 0 56.5 23.5T880-640v560ZM160-473l47-47h393v-280H160v327ZM80-280v-520q0-33 23.5-56.5T160-880h440q33 0 56.5 23.5T680-800v280q0 33-23.5 56.5T600-440H240L80-280Zm80-240v-280 280Z" /></svg>
|
||||||
|
<br /><h8 class="iconText">Chats</h8>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="icon-box my-2">
|
||||||
|
<a href="#" class="nav-link text-info mb-3">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#2898BD"><path d="M580-240q-42 0-71-29t-29-71q0-42 29-71t71-29q42 0 71 29t29 71q0 42-29 71t-71 29ZM200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Z" /></svg>
|
||||||
|
<br /><h8 class="iconText">Calendar</h8>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="icon-box mt-auto mb-4">
|
||||||
|
<a href="#" class="nav-link text-info mb-3">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#2898BD"><path d="m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm70-80h79l14-106q31-8 57.5-23.5T639-327l99 41 39-68-86-65q5-14 7-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99 42q-22-23-48.5-38.5T533-694l-13-106h-79l-14 106q-31 8-57.5 23.5T321-633l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q22 23 48.5 38.5T427-266l13 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Zm-2-140Z" /></svg>
|
||||||
|
<br /><h8 class="iconText">Settings</h8>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Main content -->
|
<!-- Top Nav -->
|
||||||
<div class="flex-grow-1 p-4">
|
<div class="topnav d-flex justify-content-between align-items-center shadow">
|
||||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
<a href="index.html" class="eventsText m-0 logo text-decoration-none">Lend a Hand</a>
|
||||||
<h2 class="text-primary">Events</h2>
|
|
||||||
<div>
|
<div>
|
||||||
<button class="btn btn-outline-info me-2">Join now</button>
|
<button class="button-join">Join now</button>
|
||||||
<button class="btn btn-outline-secondary">Sign In</button>
|
<button class="button-sign">Sign In</button>
|
||||||
|
<svg class="position-relative" xmlns="http://www.w3.org/2000/svg" height="50px" viewBox="0 -960 960 960" width="50px" fill="#2898BD"><path d="M234-276q51-39 114-61.5T480-360q69 0 132 22.5T726-276q35-41 54.5-93T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 59 19.5 111t54.5 93Zm246-164q-59 0-99.5-40.5T340-580q0-59 40.5-99.5T480-720q59 0 99.5 40.5T620-580q0 59-40.5 99.5T480-440Zm0 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q53 0 100-15.5t86-44.5q-39-29-86-44.5T480-280q-53 0-100 15.5T294-220q39 29 86 44.5T480-160Zm0-360q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm0-60Zm0 360Z" /></svg>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="input-group mb-4">
|
<!-- Main content -->
|
||||||
<input type="text" class="form-control rounded-start" placeholder="Search events..." />
|
<div class="main">
|
||||||
<span class="input-group-text bg-white"><i class="bi bi-search"></i></span>
|
<div class="position-relative search-bar">
|
||||||
|
<input type="text" class="form-control pe-5" placeholder="" />
|
||||||
|
<span class="position-absolute top-50 end-0 translate-middle-y me-3">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#2898BD"><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z" /></svg>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!--<a href="/create.html" class="button-add text-decoration-none">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#FFFFFF"><path d="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z" /></svg>
|
||||||
|
</a>-->
|
||||||
|
<div class="events-card bg-white p-4 rounded-4 shadow position-relative">
|
||||||
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||||
|
<h2 class="eventsText">Events</h2>
|
||||||
|
<span class="position-absolute end-0 translate-middle-y me-4" style="margin-top: 20px;">
|
||||||
|
<button class="btn btn-link" onclick="">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#2898BD"><path d="M440-120v-240h80v80h320v80H520v80h-80Zm-320-80v-80h240v80H120Zm160-160v-80H120v-80h160v-80h80v240h-80Zm160-80v-80h400v80H440Zm160-160v-240h80v80h160v80H680v80h-80Zm-480-80v-80h400v80H120Z" /></svg>
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-link" onclick=""><svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#2898BD"><path d="M320-440v-287L217-624l-57-56 200-200 200 200-57 56-103-103v287h-80ZM600-80 400-280l57-56 103 103v-287h80v287l103-103 57 56L600-80Z" /></svg></button>
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="eventList" class="d-grid gap-3">
|
<div id="eventList" class="d-grid gap-3">
|
||||||
<!-- Karty wydarzeń będą ładowane tutaj -->
|
<!-- Karty wydarzeń będą ładowane tutaj -->
|
||||||
<div class="event-card filled">
|
<div class="event-card filled">
|
||||||
<span>Event Title</span>
|
<span>Event Title</span>
|
||||||
<button class="remove-btn delete-btn" data-id="5">−</button> <!-- Przyciski usuwania z ID -->
|
<button class="remove-btn delete-btn" data-id="5"><svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#FFFFFF"><path d="M280-440h400v-80H280v80ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" /></svg></button> <!-- Przyciski usuwania z ID -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<!-- Dodaj nowe -->
|
|
||||||
<a href="/create.html" class="btn btn-success">+ Dodaj nowe</a>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script type="module" src="/js/eventList.js"></script>
|
<script type="module" src="/js/eventList.js"></script>
|
||||||
<script type="module" src="/js/eventDelete.js"></script>
|
<script type="module" src="/js/eventDelete.js"></script>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<a href="/create.html" class="button-add mt-xl-auto rounded-5 align-content-center">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#FFFFFF"><path d="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z" /></svg>
|
||||||
|
</a>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@@ -28,7 +28,7 @@ document.addEventListener("DOMContentLoaded", () => __awaiter(void 0, void 0, vo
|
|||||||
card.className = "event-card filled";
|
card.className = "event-card filled";
|
||||||
card.innerHTML = `
|
card.innerHTML = `
|
||||||
<span>${ev.title}</span>
|
<span>${ev.title}</span>
|
||||||
<button class="remove-btn delete-btn" data-id="${ev.eventId}">−</button>
|
<button class="remove-btn delete-btn" data-id="${ev.eventId}"><svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#FFFFFF"><path d="M280-440h400v-80H280v80ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg></button>
|
||||||
`;
|
`;
|
||||||
container.appendChild(card);
|
container.appendChild(card);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user