add image pop-up modal

1 files changed, 67 insertions, 1 deletions

diff --git a/static/styles.css b/static/styles.css
index a0cfef2..6f2d5f3 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -242,4 +242,70 @@ img.draggable.dragged, .button:active {
 	font-size: small;
 	color: #ccc;
 	padding: 0px 10px;
-}
\ No newline at end of file
+}
+
+.modal {
+	position: fixed;
+	z-index: 1000;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	background-color: rgba(0, 0, 0, 0.6);
+	display: none;
+	align-items: center;
+	justify-content: center;
+}
+
+.modal-content {
+	background-color: white;
+	padding: 30px;
+	border-radius: 10px;
+	box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
+	width: 90%;
+	max-width: 800px;
+	text-align: center;
+}
+
+.close {
+	color: #aaa;
+	float: right;
+	font-size: 28px;
+	font-weight: bold;
+	cursor: pointer;
+}
+
+.close:hover {
+	color: black;
+}
+
+#modal-img {
+	max-width: 100%;
+	max-height: 40vh;
+	border-radius: 5px;
+	margin-bottom: 10px;
+}
+
+#modal-description {
+	width: 100%;
+	height: 25vh;
+	padding: 10px;
+	margin-top: 10px;
+	border: 1px solid #ccc;
+	border-radius: 5px;
+	font-size: 14px;
+}
+
+#modal-save {
+	background: #4CAF50;
+	color: white;
+	border: none;
+	padding: 10px 20px;
+	cursor: pointer;
+	margin-top: 10px;
+	border-radius: 5px;
+}
+
+#modal-save:hover {
+	background: #45a049;
+}