week2

zhamic7 · Jul 10, 2024 · b1b71ab · b1b71ab
1 parent 3b951b7
commit b1b71ab
Show file tree

Hide file tree

Showing 8 changed files with 390 additions and 0 deletions.
diff --git a/index.md b/index.md
@@ -1,2 +1,3 @@
 directory
 - [week 1](https://zhamic7.github.io/aa191a-labs/week1)
+- [week 2](https://zhamic7.github.io/aa191a-labs/week2)
diff --git a/week2/images/avatar.jpg b/week2/images/avatar.jpg
diff --git a/week2/images/my-button-hover.png b/week2/images/my-button-hover.png
diff --git a/week2/images/my-button.png b/week2/images/my-button.png
diff --git a/week2/images/my-icon.png b/week2/images/my-icon.png
diff --git a/week2/index.html b/week2/index.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>AA191A Functional Events Lab</title>
+
+    <meta charset="utf-8" />
+    <link rel="shortcut icon" href="#">
+    <link rel="stylesheet" href="styles/style.css">
+    <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=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
+
+
+    <!-- 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>ABOUT ME! ^_< ☆</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.
+                    One of my goals is to become capable of creating ethical software 
+                    that can be used to improve critical infrastructure in society,
+                    and I am looking forward to how the content covered in class as well as the course project
+                    will better inform me in achieving this!
+                </p>
+                <br>
+                <p> In my free time, I like to draw and watch anime. My favorite artists are: 
+                    <ul>
+                        <li><a href="https://x.com/3c5u3r5r3y5/media">Harukawa Sango</a> (manga artist)</li>
+                        <li><a href="https://x.com/sotonami/media">Ishida Sui</a> (manga artist)</li>
+                        <li><a href="https://butdoesitfloat.com/Since-the-world-drifts-into-delirium-we-must-adopt-a-delirious-point">Jean Giraud</a>, a.k.a. Moebius (bande dessinée artist)</li>
+                    </ul>
+                </p>
+            </div>
+        </div>
+
+        <div class="col2">
+            <div class="title"><h2>WHERE I WENT!</h2></div>
+            <div id="map">
+                <!-- Map will be inserted here -->
+            </div>
+
+        </div>
+
+        <div class="col3">
+            <div class="title" style="visibility: hidden;"><h2>null</h2></div>
+            <div id="buttons"></div> 
+        </div>
+
+    </main>
+
+    <div id="footer">
+        <p>COPYRIGHT 2024</p>
+    </div>
+
+    <script src="js/init.js"></script>
+
+</body>
+
+</html>
diff --git a/week2/js/init.js b/week2/js/init.js
@@ -0,0 +1,97 @@
+function createButtons(label, lat, lon, zoom){
+    const newButton = document.createElement("button"); 
+    newButton.className = "zoom";
+    //newButton.id = "button" + label; 
+    newButton.innerHTML = `<p class="zoom-label">${label.toUpperCase()}</p>`; 
+    newButton.setAttribute("lat", lat); 
+    newButton.setAttribute("lon", lon); 
+    newButton.addEventListener('click', function(){
+        map.flyTo({
+            center: [lon, lat], 
+            zoom: zoom,
+        });
+    });
+    document.getElementById("buttons").appendChild(newButton); 
+}
+
+function createCustomIcon (caption, latlng) {
+    // Create a DOM element for the marker
+    const el = document.createElement('div');
+    el.style.backgroundImage = 'url(images/my-icon.png)';
+    el.style.backgroundSize = '50px';
+    el.style.width = '50px'; // iconSize width
+    el.style.height = '50px'; // iconSize height
+    el.style.display = 'block';
+    el.style.borderRadius = '50%'; // Optional: makes the icon circular
+    el.style.border = "2px solid #ec3c63";
+    //el.style.boxShadow = '0px 0px 20px rgba(0, 0, 0, 0.5)'; // Optional: adds shadow effect
+
+    return new maplibregl.Marker({element: el})
+        .setLngLat(latlng)
+        .setPopup(new maplibregl.Popup({ offset: 25 }) // Add popups
+        .setHTML(caption));
+}
+
+function Place(place_name, place_district, place_city, place_desc, lat, lon) {
+    this.caption = `<div class="mapPopup">
+                        <div class="popupTitle">
+                            <h2 style="font-size:16px;">${place_name}, ${place_district}, ${place_city}</h2>
+                        </div>
+                        <p style="font-size:15px;">${place_desc}</p>
+                    </div>`;
+    this.coords = [lon, lat];
+    createButtons(place_city, lat, lon, 9);
+}
+
+const places = [
+    new Place(
+        'Zhujiajiao',
+        'Qingpu District',
+        'Shanghai', 
+        'Super pretty water town with lots of historic architecture and yummy food.',
+        31.113630863554462,
+        121.05345698483865
+    ),
+    new Place(
+        'Leifeng Pagoda',
+        'Xihu District',
+        'Hangzhou',
+        'Originally a Buddhist tower that has been rebuilt over the years. \
+            I sadly didn\'t have time to go see the view from the topmost level.',
+        30.231512056688324,
+        120.149705725118
+    ),
+    new Place(
+        'Classical Gardens of Suzhou',
+        'Gusu District',
+        'Suzhou',
+        'Collection of gardens. The lotus ponds were really pretty!',
+        31.372395575344928,
+        120.62852505160254
+    ),
+    new Place(
+        'Nanjing Fuzimiao',
+        'Qinhuai District',
+        'Nanjing',
+        'A Confucius Temple where the imperial exam was held. \
+            There\'s a museum on the same street with a cheatsheet from the Qing Dynasty \
+            on display. As expected, the handwriting is tiny, haha.',
+        32.02184144417682,
+        118.79184414016119
+    ),
+]
+
+// Create map and add markers
+const map = new maplibregl.Map({
+    container: 'map', // container ID
+    style: 'https://api.maptiler.com/maps/dataviz/style.json?key=aRyJfnj25CKYN2noi9Wt', // Your style URL
+    center: [120.10623118282591, 31.204359154022054], // Starting position [lng, lat]
+    zoom: 7 // Starting zoom level
+});
+createButtons("Default View", 31.204359154022054, 120.10623118282591, 7);
+
+let markers = [];
+for (let i = 0; i < places.length; i++) {
+    markers.push(createCustomIcon(places[i].caption, places[i].coords));
+}
+markers.forEach((marker) => marker.addTo(map)); // Ensure the order is longitude, latitude
diff --git a/week2/styles/style.css b/week2/styles/style.css
@@ -0,0 +1,216 @@
+/* The * selects everything and acts as a global reset to ensure consistency across browsers */
+* {
+    font-family: "Open Sans", Helvetica, Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+/* Sets the overall background and ensures the content fits the screen height */
+html {
+    background-color: #ffd7e2;
+}
+
+html,
+body {
+    height: 140vh;
+    padding: 1rem;
+}
+
+/* Defines the page layout using a grid */
+body {
+    display: grid;
+    grid-template-areas:
+        "header"
+        "main"
+        "footer";
+    grid-template-rows: auto 1fr 7vh;
+    /* Adjusted to reflect the simplified structure */
+}
+
+main {
+    display: grid;
+    grid-template-areas: "col1 col2 col3";
+    grid-template-columns: 2fr 3fr 1fr;
+}
+
+/* Assigns each major section to a part of the grid */
+h1 {
+    padding: 10px;
+}
+
+h2 {
+    color: #ec3c63;
+    padding-top:10px;
+}
+
+p {
+    font-size: 17px;
+    line-height: 1.3;
+}
+
+header {
+    grid-area: header;
+    background-color: #8dc2ff;
+    color: white;
+    margin-bottom: 15px;
+    padding: 10px;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+main {
+    grid-area: main;
+}
+
+.col1 {
+    grid-area: col1;
+    padding-right:10px;
+    display: flex;
+    flex-flow: column;
+}
+
+#avatar {
+    border:solid;
+    border-bottom: none;
+    border-width: 2ch;
+    border-color: #ffb4c4;
+}
+
+img {
+    width: 400px;
+    height: auto;
+}
+
+#description {
+    border:solid;
+    border-top: none;
+    border-width: 2ch;
+    border-color: #ffb4c4;
+
+    margin-right:10px;
+    padding: 15px; 
+    background-color: #ffb4c4;
+    flex: 1 1 auto;
+    width:400px;
+}
+
+a:link {
+    color:#0088ff;
+    text-decoration-line: none;
+}
+a:visited {
+    color:#0088ff;
+    text-decoration-line: none;
+}
+a:hover {
+    color: white;
+    text-decoration-line: none;
+}
+a:active {
+    color:white;
+    text-decoration-line: none;
+}
+
+ul {
+    padding-left: 30px;
+}
+
+ol {
+    padding-left: 30px;
+}
+
+li {
+    font-size: 17px;
+}
+
+.col2 {
+    grid-area: col2;
+    padding-right:10px;
+    display: flex;
+    flex-flow: column;
+}
+
+.title {
+    margin-bottom: 10px;
+}
+
+#map {
+    flex: 1 1 auto;
+    border-style: solid;
+    border-width: 0.25ch;
+}
+
+.mapPopup {
+    background-color: #f8f9fa;
+    color: #212529;
+    font-size: 16px;
+    padding: 10px;
+}
+
+.popupTitle {
+    border:solid;
+    border-top: none;
+    border-right: none;
+    border-left: none;
+    border-width: 1px;
+    border-color: black;
+
+    padding-bottom: 5px;
+    margin-bottom: 10px;
+}
+
+.col3 {
+    grid-area: col3;    
+}
+
+.zoom {
+    width: 100%;
+    height: 100px;
+    margin-bottom: 10px;
+
+    background: url(../images/my-button.png) no-repeat;
+    background-position: center;
+    border: none;
+    background-size: auto 100%;
+
+    padding-left: 80px;
+    border-radius: 10px;
+    text-align: left;
+
+    transition: transform 0.5s;
+    color: rgb(255, 255, 255);
+}
+
+.zoom:hover { 
+    transform: scale(95%);
+    background: url(../images/my-button-hover.png) no-repeat;
+    background-position: center;
+    border: none;
+    background-size: auto 100%;
+    text-align: center;
+    padding-left: 0px;
+}
+
+.zoom-label {
+    display: inline-block;
+    color: white;
+    font-weight: 600;
+    font-size: 18px;
+    padding: 5px;
+    border-radius: 5px;
+}
+
+#footer {
+    grid-area: footer;
+    background-color: #8dc2ff;
+    color: white;
+    padding: 10px;
+    margin-top: 15px;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}