style map

This commit is contained in:
='fauz 2025-07-02 14:01:26 +07:00
parent 6d712685d5
commit 6208e1a655
2 changed files with 24 additions and 23 deletions

View File

@ -34,7 +34,7 @@ header {
background-color: var(--background-color1); background-color: var(--background-color1);
position: fixed; position: fixed;
z-index: 100; z-index: 100;
box-shadow: 1px 1px 15px rgba(161, 182, 253, 0.825); box-shadow: 1px 1px 15px rgba(18, 54, 170, 0.825);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@ -123,7 +123,7 @@ header {
display: flex; display: flex;
width: 100vw; width: 100vw;
position: relative; position: relative;
top: 70px; top: 10px;
z-index: 1; z-index: 1;
} }
@ -132,11 +132,11 @@ header {
} }
.main { .main {
height: calc(100vh - 70px); height: calc(100vh - 20px);
width: 100%; width: 100%;
overflow-y: scroll; overflow-y: scroll;
overflow-x: hidden; overflow-x: hidden;
padding: 40px 30px 30px 30px; /* padding: 40px 30px 30px 30px; */
} }
.main::-webkit-scrollbar-thumb { .main::-webkit-scrollbar-thumb {
@ -232,11 +232,11 @@ header {
} }
.box { .box {
height: 130px; height: 80px;
width: 430px; width: 330px;
border-radius: 20px; border-radius: 20px;
box-shadow: 3px 3px 10px rgba(0, 30, 87, 0.751); box-shadow: 3px 3px 10px rgba(0, 30, 87, 0.751);
padding: 20px; padding: 10px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-around; justify-content: space-around;
@ -279,18 +279,18 @@ header {
} }
.topic-heading { .topic-heading {
font-size: 30px; font-size: 24px;
letter-spacing: 3px; letter-spacing: 3px;
} }
.report-container { .report-container {
min-height: 90vh; min-height: 97vh;
/*max-width: 1200px; */ /*max-width: 1200px; */
margin: 10px auto 0px auto; margin: 10px auto 0px auto;
background-color:rgb(188, 188, 188); background-color:rgb(188, 188, 188);
border-radius: 30px; border-radius: 30px;
box-shadow: 3px 3px 10px rgb(188, 188, 188); box-shadow: 3px 3px 10px rgb(188, 188, 188);
padding: 0px 20px 20px 20px; padding: 0px 20px 10px 0px;
} }
#map { #map {
@ -299,7 +299,7 @@ header {
} }
.report-header { .report-header {
height: 130px; height: 100px;
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
@ -327,6 +327,7 @@ header {
padding: 20px; padding: 20px;
align-items: center; align-items: center;
justify-content: left; justify-content: left;
max-width: 400;
} }
.recent-Articles { .recent-Articles {
@ -354,14 +355,14 @@ header {
.report-topic-heading, .report-topic-heading,
.item1 { .item1 {
width: 1120px; width: 1020px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
.t-op { .t-op {
font-size: 18px; font-size: 16px;
letter-spacing: 0px; letter-spacing: 0px;
} }

View File

@ -101,7 +101,7 @@
alt="comments" /> alt="comments" />
</div> </div>
<div class="box box4"> <!-- <div class="box box4">
<div class="text"> <div class="text">
<h2 class="topic-heading">70</h2> <h2 class="topic-heading">70</h2>
<h2 class="topic">Published</h2> <h2 class="topic">Published</h2>
@ -109,7 +109,7 @@
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20221210185029/13.png" <img src="https://media.geeksforgeeks.org/wp-content/uploads/20221210185029/13.png"
alt="published" /> alt="published" />
</div> </div> -->
</div> </div>
</div> </div>
@ -168,10 +168,10 @@
</div> </div>
</div> </div>
</div> </div>
<div class="row"> <!-- <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<canvas id="canvas" style="width=100%"></canvas> <canvas id="canvas" style="width=100%"></canvas>
</div> </div> -->
</div> </div>
<!-- <canvas id="myChart" style="width:80%;max-width:400px; margin-left: 20px;"></canvas> --> <!-- <canvas id="myChart" style="width:80%;max-width:400px; margin-left: 20px;"></canvas> -->
</div> </div>
@ -888,12 +888,12 @@
] ]
} }
var chart = document.getElementById("canvas").getContext("2d"); //var chart = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(chart, { //window.myBar = new Chart(chart, {
type: "bar", // <- gunakan type di sini, bukan .Bar() // type: "bar", // <- gunakan type di sini, bukan .Bar()
data: chartData, // data: chartData,
options: chartOptions // options: chartOptions
}); //});
} }
</script> </script>