Merge pull request #1 from xianyingkong/main

Add website for competition day resources
ucsdlib · Nov 13, 2023 · 7be1c24 · 7be1c24 · amywork20 · Nov 14, 2023
2 parents 8c1c760 + c2f26be
commit 7be1c24
Show file tree

Hide file tree

Showing 7 changed files with 239 additions and 0 deletions.
diff --git a/docs/assets/UCGISLogo-removebg.png b/docs/assets/UCGISLogo-removebg.png
diff --git a/docs/assets/background2.jpg b/docs/assets/background2.jpg
diff --git a/docs/assets/doc-icon.png b/docs/assets/doc-icon.png
diff --git a/docs/assets/slides.png b/docs/assets/slides.png
diff --git a/docs/assets/youtube.png b/docs/assets/youtube.png
diff --git a/docs/index.html b/docs/index.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Competition Resources</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+<div id="container">
+    <div class="logo">
+        <img src="assets/UCGISLogo-removebg.png" alt="Competition Logo" width="130">
+    </div>
+
+    <div id="intro">
+        <h1>&#127881; Welcome to the UC San Diego Library Mapathon 2023! &#127881;</h1>
+        <p>
+
+        </p>
+        <p>
+            To support the <a href="https://www.missingmaps.org/about/" target="_blank">Missing Maps</a> project to map vulnerable areas before disaster or crisis strikes to reduce risk and speed recovery efforts, <br>
+            we will work together to trace buildings and infrastructures from satellite images
+        </p>
+
+        <h3>Explore the resources below to get started &#128205;</h3>
+    </div>
+
+    <div id="resource-section">
+        <div class="resource-block" style="background-color: rgb(255, 245, 229);">
+            <div class="resource-details">
+                <h2 class="resource-title">Before you start</h2>
+                <p class="resource-description" style="color: rgb(0, 0, 0);">Be sure to <a href="https://www.openstreetmap.org/user/new" target="_blank">create an OpenStreetMap (OSM) account</a>
+                and <a href="https://tasks.hotosm.org/login" target="_blank">create an HOTOSM account</a></p>
+            </div>
+        </div>
+
+        <a class="resource-block" style="background-color: rgb(255, 245, 229);" href="https://slides.com/amywork/ucsd-mapathon-2023-ucgisweek" target="_blank">
+            <div class="resource-details">
+                <h2 class="resource-title">Quick Start Tutorial Slides</h2>
+                <p class="resource-description" style="color: rgb(0, 0, 0);">Easy-to-follow steps to submit a task and use hashtags for leaderboard</p>
+            </div>
+            <div class="icon-circle">
+                <img class="icon" src="assets/slides.png" alt="Icon is shy">
+            </div>
+        </a>
+
+        <a class="resource-block" href="https://docs.google.com/document/d/1-OMJ0y6-xYml0VSBgfoGKYkuKd0Np3RuYH6pLBRISiU/edit#heading=h.t9189sbfip4y" target="_blank">
+            <div class="resource-details">
+                <h2 class="resource-title">Quick Start Guide Document</h2>
+                <p class="resource-description">Get started on publishing your first map!</p>
+            </div>
+            <div class="icon-circle">
+                <img class="icon" src="assets/doc-icon.png" alt="Icon is shy">
+            </div>
+        </a>
+
+
+
+        <a class="resource-block" href="https://youtu.be/nswUcgMfKTM" target="_blank">
+            <div class="resource-details">
+                <h2 class="resource-title">OSM Video</h2>
+                <p class="resource-description">How to use the task manager</p>
+            </div>
+            <div class="icon-circle">
+                <img class="icon" src="assets/youtube.png" alt="Icon is shy">
+            </div>
+        </a>
+
+        <a class="resource-block" href="https://tasks.hotosm.org/learn/quickstart" target="_blank">
+            <div class="resource-details">
+                <h2 class="resource-title">HOT OSM Quick Start Guide</h2>
+                <p class="resource-description">How to create account and submit task</p>
+            </div>
+            <div class="icon-circle">
+                <img class="icon" src="assets/slides.png" alt="Icon is shy">
+            </div>
+        </a>
+
+    <!-- Add more resource blocks as needed -->
+    </div>
+
+    <div class="credits">
+        <p>Background image from unsplash. Icons from flaticon.</p>
+    </div>
+</div>
+
+</body>
+</html>
diff --git a/docs/style.css b/docs/style.css
@@ -0,0 +1,150 @@
+body {
+    font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
+    margin: 0;
+    padding: 0;
+    background-color: #f4f4f4;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-image: url('assets/background2.jpg'); /* Replace with the path to your background image */
+    background-size: cover;
+    position: relative;
+}
+
+/* Set the background color with opacity */
+body::before {
+    content: '';
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(255, 255, 255, 0.406); /* Adjust the alpha (last value) for opacity */
+    z-index: -1; /* Place the overlay behind the content */
+  }
+
+#intro {
+    text-align: center;
+    padding: 20px 20px;
+    margin: 0 50px; /* Adjust the left and right margin as needed */
+}
+
+#container {
+    text-align: center;
+    margin: 20px 60px;    
+
+}
+
+.logo {
+    margin-top: 50px;
+    box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.177);
+}
+
+#intro h1 {
+    color: #182d4c;
+    font-weight: 900;
+    font-size: 37px;
+    text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.427); 
+}
+
+#intro p {
+    color: #182d4c;
+    margin-bottom: 10px;
+    font-size: 15px;
+    text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.427); 
+}
+
+#intro h3 {
+    color: #182d4c;
+    font-weight: 900;
+    font-size: 20px;
+    text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.427); 
+}
+
+#resource-section {
+    text-align: center;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+}
+
+.resource-block {
+    background-color: #ffffff;
+    border-radius: 20px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    margin: 10px;
+    padding: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    transition: transform 0.3s ease-in-out;
+    width: calc(45% - 10px); 
+}
+
+.resource-block:hover {
+    transform: scale(1.05);
+}
+
+.resource-details {
+    text-align: left;
+}
+
+.resource-title {
+    color: #333333;
+    margin-bottom: 0px;
+}
+
+.resource-description {
+    color: #666666;
+}
+
+.resource-link {
+    color: #0066cc;
+    text-decoration: none;
+    display: block;
+    margin-top: 10px;
+}
+
+a {
+    text-decoration: none; /* Remove underline */
+}
+
+.logo {
+    background-color: #ffffff;
+    width: 130px;
+    height: 130px;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    border-radius: 50%;
+}
+
+.icon-circle {
+    width: 10%;
+    height: auto;
+    background-color: aliceblue;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+}
+
+.icon {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 50%;
+}
+
+.credits {
+    text-align: center;
+    padding: 0px;
+}
+
+.credits p {
+    margin-top: 20px;
+    font-size: 10px;
+    color: #777;
+}