YuanJi-Dashboard

README.md

@@ -1,5 +1,7 @@
 Dashboards are the bread and butter of spatial data displays. They are highly interactive websites, usually with real-time updates that show data in an accessible way.
 
+**Complete by October 23**
+
 
 ## Examples
 
@@ -11,13 +13,9 @@ Dashboards are the bread and butter of spatial data displays. They are highly in
 
 ### Step 1: Choose a topic
 
-Choose a topic that is fruitfully explained with some combination of narrative and geographic elements. Think about what data you want to tell a story about, and what kind of decisions you want to support through the use of your dashboard. Evaluate any dataset or interactive element you add to your dashboard on whether it makes it actually supports making those decisions.
-
-Whatever data you use, **be sure to include citations somewhere in your app interface**. You can choose a dataset from any of a number of sources, for example:
+Choose a topic that is fruitfully explained with some combination of narrative and geographic elements. Stick with the data domain that you chose for your story map if you can. Think about what kind of decisions you want to support through the use of your dashboard. Evaluate any dataset or interactive element you add to your dashboard on whether it makes it actually supports making those decisions.
 
-* Use data you've been working with for another class
-* Create your own dataset (check out [geojson.io](https://geojson.io))
-* Find data from an open data repository...
+Whatever data you use, **be sure to include citations somewhere in your app interface**.
 
 ### Step 2: Create a map on your browser
 

css/map.css

@@ -0,0 +1,157 @@
+body {
+    margin: 0;
+    font-family: Futura, sans-serif;
+    overflow-y: hidden;
+    overflow-x: hidden;
+}
+
+.main-title {
+    width: 100%;
+    padding: 35px;
+    margin: 0;
+    text-align: left;
+    font-size: 48px;
+    position: relative;
+}
+
+.main-title .bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0.3;
+    object-fit: cover;
+    z-index: -1;
+}
+
+h1 {
+    font-size: 16px;
+    padding: 10px;
+    border-radius: 15px;
+    color: rgb(85, 100, 143);
+    font-weight: bold;
+}
+
+.container {
+    display: flex;
+    height: 100vh;
+}
+
+.sidebar {
+    width: 400px;
+    padding: 20px;
+    background: linear-gradient(to bottom, #fff 40%, #d0d0d0);
+    overflow-y: auto;
+}
+
+#map {
+    flex-grow: 1;
+    height: 100vh;
+    width: auto;
+}
+
+h3 {
+    font-size: 20px;
+    background-color: #f0f0f0;
+    padding: 10px;
+    border-radius: 5px;
+    color: rgb(85, 100, 143);
+}
+
+.searchbox {
+    width: 60%;
+    height: 35px;
+    padding: 10px;
+    border: 2px solid #9da7a1;
+    border-radius: 10px;
+    font-size: 14px;
+    box-sizing: border-box;
+}
+
+
+.filterbutton {
+    padding: 8px 12px;
+    font-size: 14px;
+    background-color: rgb(85, 100, 143);
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+.filterbutton:hover {
+    background-color: rgb(111, 125, 163);
+}
+
+.filterbutton-reset{
+    padding: 8px 12px;
+    font-size: 14px;
+    border: none;
+    background-color: #e0e0e0;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+.filterbutton-reset:hover{
+    background-color: #afafaf;
+}
+
+input[type="checkbox"] {
+    transform: scale(1.5);
+    margin-right: 10px;
+    border-radius: 10px;
+    cursor: pointer;
+}
+
+.reset-button {
+    padding: 8px 12px;
+    font-size: 14px;
+    background-color: rgb(85, 100, 143);
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+.reset-button:hover {
+    background-color: rgb(111, 125, 163);
+}
+
+.category label {
+    display: block;
+    margin-bottom: 5px;
+}
+
+.status label {
+    display: block;
+    margin-bottom: 5px;
+}
+
+.projects {
+    font-family: Itim, cursive;
+    margin-top: 20px;
+}
+
+.site-item {
+    margin-bottom: 5px;
+    padding: 5px;
+    border-radius: 8px;
+    background-color: #f0f4f8;
+    transition: background-color 0.3s;
+}
+
+.site-item:hover {
+    background-color: #cddbeb;
+}
+
+.site-name {
+    font-size: 18px;
+    font-weight: bold;
+    color: #000;
+}
+
+.site-address {
+    font-size: 14px;
+    color: #888;
+}