Skip to content

Commit

Permalink
all components uses custom pallete
Browse files Browse the repository at this point in the history
  • Loading branch information
@Jss-on
Jss-on committed Jan 6, 2025
1 parent 9f6db61 commit ce3c788
Show file tree
Hide file tree
Showing 3 changed files with 179 additions and 67 deletions.
65 changes: 38 additions & 27 deletions web-frontend/src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,56 +6,67 @@
<meta name="theme-color" content="#ffffff">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<title>Klima Mapa</title>
<title>Mapa dow Panahon</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v7.4.0/ol.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol-layerswitcher@4.1.1/dist/ol-layerswitcher.css">
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<div id="map" class="map h-screen w-full"></div>
<button id="gps-button" class="gps-button absolute top-4 left-4 bg-gray-200 hover:bg-gray-300 rounded-full p-2" title="Your location">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm8.94 3A8.994 8.994 0 0 0 13 3.06V1h-2v2.06A8.994 8.994 0 0 0 3.06 11H1v2h2.06A8.994 8.994 0 0 0 11 20.94V23h2v-2.06A8.994 8.994 0 0 0 20.94 13H23v-2h-2.06zM12 19c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z'/%3E%3C/svg%3E" alt="GPS">
</button>
<div class="weather-controls flex flex-wrap justify-center items-center gap-4 mt-4">
<div class="toggle-container flex items-center gap-2">
<input type="checkbox" id="temperature-toggle" class="weather-toggle">
<label for="temperature-toggle" class="weather-label text-sm">Temperature</label>
<body class="font-poppins">
<div id="map" class="map">
<div class="ol-control ol-unselectable ol-zoom">
<button class="ol-zoom-in" title="Zoom in">+</button>
<button class="ol-zoom-out" title="Zoom out">−</button>
</div>

<div class="ol-control ol-unselectable ol-scale-line">
<div class="ol-scale-line-inner"></div>
</div>
<div class="toggle-container flex items-center gap-2">
<input type="checkbox" id="rainfall-toggle" class="weather-toggle">
<label for="rainfall-toggle" class="weather-label text-sm">Rainfall</label>

<div class="ol-control ol-unselectable ol-full-screen">
<button class="ol-full-screen-false" title="Toggle full-screen">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" />
</svg>
</button>
</div>
<div class="toggle-container flex items-center gap-2">
<input type="checkbox" id="humidity-toggle" class="weather-toggle">
<label for="humidity-toggle" class="weather-label text-sm">Humidity</label>

<div class="ol-control ol-unselectable ol-zoomslider">
<button class="ol-zoomslider-thumb" title="Drag to zoom"></button>
</div>
</div>
<div class="weather-info mt-4 p-4 bg-gray-100 rounded-lg shadow-md">
<div class="weather-header-container flex justify-between items-center mb-4">
<h3 class="text-lg font-bold">Weather Information</h3>
<div class="toggle-container flex items-center gap-2">
<input type="checkbox" id="forecast-toggle" class="weather-toggle">
<label for="forecast-toggle" class="weather-label text-sm">Forecast</label>

<button id="gps-button" class="gps-button" title="Your location">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm8.94 3A8.994 8.994 0 0 0 13 3.06V1h-2v2.06A8.994 8.994 0 0 0 3.06 11H1v2h2.06A8.994 8.994 0 0 0 11 20.94V23h2v-2.06A8.994 8.994 0 0 0 20.94 13H23v-2h-2.06zM12 19c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z'/%3E%3C/svg%3E" alt="GPS">
</button>

<div class="weather-info fixed bottom-4 left-4 p-4 bg-white/90 backdrop-blur-sm rounded-2xl shadow-lg max-w-sm">
<h3 class="text-lg font-semibold text-[#FF3D9A]">Weather Information</h3>
<div class="flex justify-between items-center mb-4">
<div class="weather-data-item">
<label class="flex items-center gap-2">
<input type="checkbox" id="forecast-toggle" class="weather-toggle">
<span class="weather-label">Forecast</span>
</label>
</div>
</div>
<div id="weather-data" class="text-sm">
<div id="weather-data" class="text-sm text-gray-700">
Click anywhere on the map to see weather information
</div>
</div>

<script type="importmap">
{
"imports": {
"imports": {
"vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
}
}
}
</script>
<script src="https://cdn.jsdelivr.net/npm/ol@v7.4.0/dist/ol.js"></script>
<script src="https://cdn.jsdelivr.net/npm/ol-layerswitcher@4.1.1/dist/ol-layerswitcher.js"></script>
<script type="module" src="map.js"></script>
</body>
</html>
</html>
131 changes: 116 additions & 15 deletions web-frontend/src/input.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,35 +4,136 @@

@layer components {
.map {
@apply w-full h-screen;
@apply w-full h-screen relative;
}

.gps-button {
@apply fixed bottom-4 right-4 bg-white rounded-full p-2 shadow-lg cursor-pointer hover:bg-gray-100 focus:outline-none;
@apply fixed bottom-[calc(50vh+30px)] right-4 w-11 h-11 bg-white/90 backdrop-blur-sm rounded-xl p-2 shadow-lg cursor-pointer hover:bg-[#FF3D9A] hover:text-white focus:outline-none transition-all duration-300;
}

.weather-controls {
@apply flex flex-wrap justify-center items-center gap-4 m-2.5;
.gps-button img {
@apply transition-colors duration-300;
}

.toggle-container {
@apply flex items-center gap-2 cursor-pointer;
.gps-button:hover img {
@apply filter brightness-0 invert;
}

.weather-toggle {
@apply appearance-none w-10 h-6 bg-gray-300 rounded-full relative cursor-pointer transition-colors duration-200 ease-in-out checked:bg-blue-500;
/* Override OpenLayers default styles */
:global(.ol-control) {
@apply !bg-transparent !p-0 !rounded-none;
}

.weather-toggle::before {
@apply content-[''] absolute w-4 h-4 bg-white rounded-full left-1 top-1 transition-transform duration-200 ease-in-out transform;
content: '';
:global(.ol-control button) {
@apply !bg-white/90 !text-[#FF3D9A] hover:!bg-[#FF3D9A] hover:!text-white !border-[#FF3D9A] !border;
}

.weather-toggle:checked::before {
@apply translate-x-4;
:global(.ol-zoom) {
@apply !bg-transparent;
}

.weather-label {
@apply text-sm font-poppins;
:global(.ol-zoom-in),
:global(.ol-zoom-out) {
@apply !w-8 !h-8 !leading-8 !text-lg !font-medium !rounded-lg !m-1;
}

:global(.ol-zoom-in) {
@apply !mb-1;
}

:global(.ol-zoom-out) {
@apply !mt-1;
}

:global(.ol-scale-line) {
@apply !bg-[#FF3D9A]/50 !backdrop-blur-sm !rounded-lg !border-none;
}

:global(.ol-scale-line-inner) {
@apply !border-t-0 !border-white !text-white !text-xs !leading-4 !text-center !whitespace-nowrap !px-2;
}

:global(.ol-attribution) {
@apply !hidden;
}

/* Weather Info Styles */
.weather-info {
@apply fixed top-20 left-4 p-6 bg-white rounded-2xl shadow-lg w-80;
}

.weather-info h3 {
@apply text-[#937AFF] text-xl font-semibold mb-4;
}

.weather-data-item {
@apply flex flex-col gap-1 mb-4;
}

.weather-data-label {
@apply text-sm text-[#5627FF] font-medium;
}

.weather-data-value {
@apply text-base text-[#937AFF];
}

/* OpenLayers Controls */
.ol-control {
@apply absolute bg-white/90 backdrop-blur-sm rounded-xl shadow-lg p-1.5 transition-all duration-300;
}

.ol-unselectable {
@apply select-none;
}

.ol-zoom {
@apply top-4 right-4 flex flex-col gap-1;
}

.ol-zoom-in,
.ol-zoom-out {
@apply w-8 h-8 m-0 p-0 text-center text-[#FF3D9A] bg-white border-none rounded-lg cursor-pointer hover:bg-[#FF3D9A] hover:text-white transition-all duration-300 font-medium text-lg focus:outline-none;
}

.ol-scale-line {
@apply bottom-20 left-4 p-1 bg-[#FF3D9A]/50 backdrop-blur-sm rounded-lg;
}

.ol-scale-line-inner {
@apply border border-white border-t-0 text-white text-xs leading-4 text-center whitespace-nowrap px-2;
}

.ol-full-screen {
@apply top-4 left-4;
}

.ol-full-screen button {
@apply w-8 h-8 m-0 p-0 text-center text-[#FF3D9A] bg-white border-none rounded-lg cursor-pointer hover:bg-[#FF3D9A] hover:text-white transition-all duration-300 flex items-center justify-center focus:outline-none;
}





/* Weather Icons */
.weather-icon {
@apply w-5 h-5 text-[#937AFF];
}

.coordinates-icon::before {
content: "📍";
}

.elevation-icon::before {
content: "🏔";
}

.temperature-icon::before {
content: "🌡";
}

.feels-like-icon::before {
content: "🌡";
}
}
50 changes: 25 additions & 25 deletions web-frontend/src/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -342,7 +342,22 @@ body {
opacity: 1;
}
}

.ol-zoomslider {
position: absolute !important;
right: 25px !important;
bottom: 140px !important;
left: unset !important;
top: unset !important;
background-color: white !important;
border: 2px solid #FF3D9A !important;
height: 150px !important;
width: 25px !important;
border-radius: 4px;
display: flex;
flex-direction: column;
align-items: center;
padding: 0px 4px;
}
.gps-button {
position: absolute;
bottom: 20px;
Expand All @@ -351,7 +366,7 @@ body {
height: 40px;
border-radius: 50%;
background-color: white;
border: 2px solid #4CAF50;
border: 2px solid #FF3D9A;
cursor: pointer;
display: flex;
align-items: center;
Expand All @@ -362,7 +377,7 @@ body {
}

.gps-button:hover {
background-color: #4CAF50;
background-color: #FF3D9A;
transform: translateY(-2px);
}

Expand All @@ -377,7 +392,7 @@ body {
}

.gps-button.active {
background-color: #4CAF50;
background-color: #FF3D9A;
}

.gps-button.active img {
Expand All @@ -397,39 +412,24 @@ body {
.ol-zoom .ol-zoom-in,
.ol-zoom .ol-zoom-out {
background-color: white !important;
border: 2px solid #4CAF50 !important;
color: #4CAF50 !important;
border: 2px solid #FF3D9A !important;
color: #FF3D9A !important;
margin: 1px !important;
transition: all 0.3s ease !important;
width: 25px !important;
}

.ol-zoom .ol-zoom-in:hover,
.ol-zoom .ol-zoom-out:hover {
background-color: #4CAF50 !important;
background-color: #FF3D9A !important;
color: white !important;
transform: translateY(-1px);
}

.ol-zoomslider {
position: absolute !important;
right: 25px !important;
bottom: 140px !important;
left: unset !important;
top: unset !important;
background-color: white !important;
border: 2px solid #4CAF50 !important;
height: 150px !important;
width: 25px !important;
border-radius: 4px;
display: flex;
flex-direction: column;
align-items: center;
padding: 0px 4px;
}


.ol-zoomslider button {
background-color: #4CAF50 !important;
background-color: #FF3D9A !important;
width: 19px !important;
height: 10px !important;
border-radius: 2px;
Expand All @@ -438,7 +438,7 @@ body {
}

.ol-zoomslider button:hover {
background-color: #45a049 !important;
background-color: #FF3D9A !important;
transform: scale(1.1);
}

Expand Down

0 comments on commit ce3c788

Please sign in to comment.