mirror of
https://github.com/mudabbir-ahmad/peworkshop.git
synced 2026-10-07 19:50:20 +00:00
fixing map timing errors and still trying to make leaderboard and clues pages.
Grey = cant click Red = current Green = complete blue = skipped? Need to add Clue page Need to fix Leaderboard.
This commit is contained in:
1 parent
16319f1333
commit
30d88407a0
8 files changed
+597
-169
No files matched your search
@@ -64,14 +64,18 @@
|
||||
height: 100%;
|
||||
background-color: #69b5a8; /* Background color */
|
||||
overflow: auto; /* Enable scrolling */
|
||||
display: flex; /* Add flexbox to center content */
|
||||
justify-content: center; /* Center horizontally */
|
||||
align-items: center; /* Center vertically */
|
||||
}
|
||||
|
||||
.treasure-map {
|
||||
position: relative; /* Changed from absolute to relative */
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 100%;
|
||||
min-height: 100%;
|
||||
display: flex; /* Add flexbox for centering */
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* SVG container for better scrolling and zooming */
|
||||
@@ -82,16 +86,16 @@
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: auto;
|
||||
overflow: visible; /* Change from auto to visible */
|
||||
}
|
||||
|
||||
.svg-container svg {
|
||||
min-width: 100%;
|
||||
min-height: 100%;
|
||||
max-width: 100%;
|
||||
max-height: 90vh; /* Limit height to 90% of viewport height */
|
||||
width: auto;
|
||||
height: auto;
|
||||
display: block;
|
||||
transform-origin: center center;
|
||||
object-fit: contain; /* Ensure the entire SVG is visible */
|
||||
}
|
||||
|
||||
/* Map background - display as full-page map */
|
||||
@@ -101,10 +105,8 @@
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 100%;
|
||||
min-height: 100%;
|
||||
background-image: url("/images/map.svg");
|
||||
background-size: contain; /* Change back to contain for proper aspect ratio */
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
z-index: 5;
|
||||
@@ -113,12 +115,11 @@
|
||||
/* Circle elements in the SVG map - attach to a container class */
|
||||
.svg-container circle {
|
||||
cursor: pointer;
|
||||
transition: fill 0.3s ease, transform 0.3s ease;
|
||||
transition: fill 0.3s ease; /* Only transition the fill color, not size */
|
||||
}
|
||||
|
||||
.svg-container circle:hover {
|
||||
fill: #ffb74d !important;
|
||||
transform: scale(1.1);
|
||||
fill: #ffb74d !important; /* Only change color on hover, no movement */
|
||||
}
|
||||
|
||||
/* Remaining styles unchanged */
|
||||
|
||||
Reference in new issue
Block a user