add styling for event form and notes service button; implement color input background change

This commit is contained in:
Max Młynarczyk 2025-05-09 22:50:35 +02:00
parent 765414b6a7
commit 127fbed2ca
3 changed files with 33 additions and 2 deletions

View file

@ -10,6 +10,21 @@
<link rel="stylesheet" href="{% static 'register-style.css' %}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.17/index.global.min.js'></script>
<style>
#event-form input, #event-form button {
border: 1px solid #ccc;
padding: 8px;
margin: 5px;
border-radius: 4px;
}
#event-form input:focus {
border-color: #888;
outline: none;
}
</style>
</head>
<body>
<div class="header">
@ -166,7 +181,11 @@
}
</script>
<script>
document.getElementById('color').addEventListener('input', function (e) {
e.target.style.backgroundColor = e.target.value;
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function () {
@ -266,4 +285,4 @@
});
</script>
</html>
</html>

View file

@ -130,6 +130,10 @@ background-color: #4caf50;
background-color: #03a9f4;
}
.notes {
background-color: #ffd018;
}
.service-button i {
font-size: 70px;
margin-bottom: 5px;

View file

@ -62,6 +62,14 @@
<i class="fas fa-cloud"></i>
cloud
</div></a>
<a href="/notes" style="text-decoration: none;"><div class="service-button notes">
<i class="fa-solid fa-clipboard"></i>
notes
</div>
</a>
</div>