add profile and page navigation

zhamic7 · Jun 28, 2024 · 56a32d5 · 56a32d5
1 parent d808f14
commit 56a32d5
Show file tree

Hide file tree

Showing 5 changed files with 221 additions and 19 deletions.
diff --git a/week1/index.html b/week1/index.html
@@ -19,32 +19,57 @@
 <body>
 
     <header>
-        <h1>TITLE</h1>
+        <h1>Places I've Been To!</h1>
     </header>
 
     <main>
 
         <!-- hint: majority of your lab assignment can go here -->
-        <div class="portfolio">
-            <h3>profile</h3>
+        <div class="col1">
             <!-- Portfolio content goes here -->
-            <img src="images/avatar.jpg" alt="A photo of the site creator">
-            <p></p>
+            <img id="avatar" src="images/avatar.jpg" alt="A photo of the site creator">
+            <div id="description">
+                <p>Navigation:</p>
+                <ul>
+                    <li><a href="./index.html">Map of Seattle</a></li>
+                    <li><a href="./page.html">Map of Shanghai</a></li>
+                </ul>
+                <br>
+                <p> Hi! My name is Michelle, and I'm currently a junior at UCLA majoring in 
+                    Computer Science as well as double minoring in Digital Humanities and Philosophy.
+                    I hope that in the near future, I become a critical digital map maker capable of 
+                    developing software and creating digital maps from ethically collected data   
+                    for the purpose of better understanding and communicating spatial information 
+                    regarding the current state of critical infrastructure.
+                </p>
+                <br>
+                <p>On this website, I've added a few maps marking some places I've visited in the past!</p>
+                <br>
+
+            </div>
         </div>
 
-        <h3>maps</h3>
-        <div id="map">
-
-            <!-- Map will be inserted here -->
+        <div class="col2">
+            <div class="title"><h2>Map of Seattle</h2></div>
+            <div id="map">
+                <!-- Map will be inserted here -->
+            </div>
+            <div class="caption">
+                <p>lorem</p>
+                <ol>
+                    <li>item</li>
+                </ol>
+            </div>
         </div>
+
 
     </main>
 
     <div id="footer">
-        Copyright(2024)
+        <p>Copyright (2024)</p>
     </div>
 
-    <script src="js/init.js"></script>
+    <script src="js/map1.js"></script>
 
 </body>
 

diff --git a/week1/js/map1.js b/week1/js/map1.js
@@ -0,0 +1,13 @@
+const map = new maplibregl.Map({
+    container: 'map', // container ID
+    style: 'https://api.maptiler.com/maps/streets/style.json?key=Oo1CDYXThbnZ95OKpxHl', // Your style URL
+    center: [-121.9622, 37.5489], // Starting position [lng, lat]
+    zoom: 15 // Starting zoom level
+});
+
+// Add a marker to the map
+new maplibregl.Marker()
+    .setLngLat([-121.9622, 37.5489])
+    .setPopup(new maplibregl.Popup({ offset: 25 }) // Add popups
+        .setHTML('Lake Elizabeth -- the local lake + city park!'))
+    .addTo(map);
diff --git a/week1/js/init.js → week1/js/map2.js b/week1/js/init.js → week1/js/map2.js
diff --git a/week1/page.html b/week1/page.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+
+    <title>Hello World with MapLibreGL</title>
+
+    <meta charset="utf-8" />
+    <link rel="shortcut icon" href="#">
+    <link rel="stylesheet" href="styles/style.css">
+
+    <!-- MapLibreGL's css-->
+    <link rel="stylesheet" href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" />
+
+    <!-- MapLibreGL's JavaScript-->
+    <script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
+</head>
+
+<body>
+
+    <header>
+        <h1>Places I've Been To!</h1>
+    </header>
+
+    <main>
+         <!-- hint: majority of your lab assignment can go here -->
+         <div class="col1">
+            <!-- Portfolio content goes here -->
+            <img id="avatar" src="images/avatar.jpg" alt="A photo of the site creator">
+            <div id="description">
+                <p>Hi! My name is Michelle, and I'm currently a junior at UCLA majoring in 
+                    Computer Science as well as double minoring in Digital Humanities and Philosophy.
+                    As a critical digital map maker, 
+                </p>
+                <br>
+                <p>On this website, I've added a few maps marking some places I've visited!</p>
+                <br>
+                <p>Navigation:</p>
+                <ul>
+                    <li><a href="./index.html">Map of Seattle</a></li>
+                    <li><a href="./page.html">Map of Shanghai</a></li>
+                </ul>
+            </div>
+        </div>
+
+        <div class="col2">
+            <div class="title"><h2>Map of Shanghai</h2></div>
+            <div id="map">
+                <!-- Map will be inserted here -->
+            </div>
+            <div class="caption">
+                <p>ipsum</p>
+                <ol>
+                    <li>item</li>
+                </ol>
+            </div>
+        </div>
+    </main>
+
+    <div id="footer">
+        Copyright (2024)
+    </div>
+
+    <script src="js/map2.js"></script>
+
+</body>
+
+</html>
diff --git a/week1/styles/style.css b/week1/styles/style.css
@@ -1,19 +1,19 @@
 /* The * selects everything and acts as a global reset to ensure consistency across browsers */
 * {
-    font-family: 'Courier New', monospace;
+    font-family: 'Times New Roman', serif;
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }
 
 /* Sets the overall background and ensures the content fits the screen height */
 html {
-    background-color: #ffcbcd;
+    background-color: #ffe0e1;
 }
 
 html,
 body {
-    height: 80vh;
+    height: 125vh;
     padding: 1rem;
 }
 
@@ -30,7 +30,7 @@ body {
 
 main {
     display: grid;
-    grid-template-areas: "portfolio map";
+    grid-template-areas: "col1 col2";
     grid-template-columns: 1fr 1fr;
 }
 
@@ -39,22 +39,118 @@ header {
     grid-area: header;
 }
 
+h1 {
+    padding: 10px;
+}
+
+.go-home:link {
+    color:#ec3c63;
+    text-decoration: none;
+}
+.go-home:visited {
+    color:#ec3c63;
+    text-decoration: none;
+}
+.go-home:hover {
+    color:#ec3c63;
+    text-decoration: underline;
+}
+.go-home:active {
+    color:#ec3c63;
+    text-decoration: underline;
+}
+
 main {
     grid-area: main;
 }
 
-.portfolio {
-    grid-area: portfolio;
+p {
+    font-size: 2.3vh;
+    line-height: 1.15;
+}
+
+.col1 {
+    grid-area: col1;
+    padding-right:10px;
+    display: flex;
+    flex-flow: column;
+    padding-bottom: 10px;
+}
+
+#avatar {
+    border:solid;
+    border-bottom: none;
+    border-width: 2ch;
+    border-color: #f5c7c8;
 }
 
 img {
-    width: 300px;
+    width: 400px;
     height: auto;
 }
 
+#description {
+    border:solid;
+    border-top: none;
+    border-width: 2ch;
+    border-color: #f5c7c8;
+
+    margin-right:10px;
+    padding: 15px; 
+    background-color: #f5c7c8;
+    flex: 1 1 auto;
+    width:400px;
+}
+
+ul {
+    padding-left: 30px;
+}
+
+ol {
+    padding-left: 30px;
+}
+
+li {
+    font-size: 2.3vh;
+}
+
+.col2 {
+    grid-area: col2;
+    padding-right:10px;
+    display: flex;
+    flex-flow: column;
+    padding-bottom: 10px;
+}
+
+.title {
+    margin-bottom: 10px;
+}
+
 #map {
-    grid-area: map;
     height: 90vh;
+    border-style: solid;
+    border-width: 0.25ch;
+}
+
+.caption {
+    margin-top: 10px;
+    padding: 15px; 
+    background-color: white;
+    width:736px;
+    flex: 1 1 auto;
+}
+
+a:link {
+    color:#0090ce;
+}
+a:visited {
+    color:#0090ce;
+}
+a:hover {
+    color:white;
+}
+a:active {
+    color:white;
 }
 
 footer {