From 36ebacfcccbf9f62b3b5fb71e59bf332f39186e8 Mon Sep 17 00:00:00 2001
From: biancadajo <bianca.badajos@gmail.com>
Date: Fri, 5 Jul 2024 12:16:37 -0700
Subject: [PATCH] margins

---
 scans.html | 359 +++++++++++++++++++++++++++--------------------------
 test.html  | 161 ------------------------
 2 files changed, 183 insertions(+), 337 deletions(-)
 delete mode 100644 test.html

diff --git a/scans.html b/scans.html
index bc5f36e..84ae54a 100644
--- a/scans.html
+++ b/scans.html
@@ -41,191 +41,198 @@ <h1> 3D Scanning Atlas </h1>
 
     <div class="pagetxt">
         <!-- <div class="scansbody"> -->
+        <description>
+
+            <h3 class="descriptionhead">Comparison of 3D scanners by object</h3>
+            The 3D Scanning Atlas is powered by the Potree Viewer and is hosted by UCLA. <br>
+
+            <br> <br>
+            Below are the OBJs produced for each of the nine objects:
+
+            <div class="row">
+                <div class="window">
+                    <b>
+                        <span class="l_text">
+                            <a href="https://www.pointcloud.ucla.edu/3DAtlas/gaugetool.html"> Nut bolt thread gauge</a>
+                        </span>
+                        <span> <a class="l_link" href="https://www.pointcloud.ucla.edu/3DAtlas/gaugetool.html">
+                                <figure>
+                                    <img class="linkimg" src="/resources/link.svg">
+                                </figure>
+                            </a>
+                        </span>
+                    </b>
+
+                    <!-- <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" width="600" height="400"></iframe> -->
+
+                    <a href="https://www.pointcloud.ucla.edu/3DAtlas/gaugetool.html"><iframe
+                            src="https://www.pointcloud.ucla.edu/3DAtlas/gaugetool.html" target="_parent"
+                            scrolling="yes" seamless></iframe></a>
+                </div>
+
+
+                <div class="window">
+                    <b>
+                        <span class="l_text">
+                            <a href="https://www.pointcloud.ucla.edu/3DAtlas/bolt.html">Stainless steel hex head screw
+                            </a>
+                        </span>
+                        <span> <a class="l_link" href="https://www.pointcloud.ucla.edu/3DAtlas/bolt.html">
+                                <figure>
+                                    <img class="linkimg" src="/resources/link.svg">
+                                </figure>
+                        </span>
+                    </b>
+                    <!-- <img class="iframe" src="/resources/screw.png"> -->
+
+                    <a href="https://www.pointcloud.ucla.edu/3DAtlas/bolt.html"><iframe
+                            src="https://www.pointcloud.ucla.edu/3DAtlas/bolt.html" scrolling="yes"
+                            seamless></iframe></a>
+
+                </div>
+
+                <div class="window">
+                    <b>
+                        <span class="l_text">
+                            <a href="https://www.pointcloud.ucla.edu/3DAtlas/skull.html"> Human skull model</a>
+                        </span>
+                        <span> <a class="l_link" href="https://www.pointcloud.ucla.edu/3DAtlas/skull.html">
+                                <figure>
+                                    <img class="linkimg" src="/resources/link.svg">
+                                </figure>
+                        </span>
+                    </b>
+
+                    <!-- <img class="iframe" src="/resources/skull.png"> -->
+
+                    <a href="https://www.pointcloud.ucla.edu/3DAtlas/skull.html"><iframe
+                            src="https://www.pointcloud.ucla.edu/3DAtlas/skull.html" scrolling="yes"
+                            seamless></iframe></a>
+
+                </div>
 
-        <h3 class="descriptionhead">Comparison of 3D scanners by object</h3>
-        The 3D Scanning Atlas is powered by the Potree Viewer and is hosted by UCLA. <br>
-
-        <br> <br>
-        Below are the OBJs produced for each of the nine objects:
-
-        <div class="row">
-            <div class="window">
-                <b>
-                    <span class="l_text">
-                        <a href="https://www.pointcloud.ucla.edu/3DAtlas/gaugetool.html"> Nut bolt thread gauge</a>
-                    </span>
-                    <span> <a class="l_link" href="https://www.pointcloud.ucla.edu/3DAtlas/gaugetool.html">
-                            <figure>
-                                <img class="linkimg" src="/resources/link.svg">
-                            </figure>
-                        </a>
-                    </span>
-                </b>
-
-                <!-- <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" width="600" height="400"></iframe> -->
-
-                <a href="https://www.pointcloud.ucla.edu/3DAtlas/gaugetool.html"><iframe
-                        src="https://www.pointcloud.ucla.edu/3DAtlas/gaugetool.html" target="_parent" scrolling="yes" seamless></iframe></a>
-            </div>
-
-
-            <div class="window">
-                <b>
-                    <span class="l_text">
-                        <a href="https://www.pointcloud.ucla.edu/3DAtlas/bolt.html">Stainless steel hex head screw </a>
-                    </span>
-                    <span> <a class="l_link" href="https://www.pointcloud.ucla.edu/3DAtlas/bolt.html">
-                            <figure>
-                                <img class="linkimg" src="/resources/link.svg">
-                            </figure>
-                    </span>
-                </b>
-                <!-- <img class="iframe" src="/resources/screw.png"> -->
-
-                <a href="https://www.pointcloud.ucla.edu/3DAtlas/bolt.html"><iframe
-                        src="https://www.pointcloud.ucla.edu/3DAtlas/bolt.html" scrolling="yes" seamless></iframe></a>
 
             </div>
 
-            <div class="window">
-                <b>
-                    <span class="l_text">
-                        <a href="https://www.pointcloud.ucla.edu/3DAtlas/skull.html"> Human skull model</a>
-                    </span>
-                    <span> <a class="l_link" href="https://www.pointcloud.ucla.edu/3DAtlas/skull.html">
-                            <figure>
-                                <img class="linkimg" src="/resources/link.svg">
-                            </figure>
-                    </span>
-                </b>
-
-                <!-- <img class="iframe" src="/resources/skull.png"> -->
-
-                <a href="https://www.pointcloud.ucla.edu/3DAtlas/skull.html"><iframe
-                        src="https://www.pointcloud.ucla.edu/3DAtlas/skull.html" scrolling="yes" seamless></iframe></a>
-
+            <div class="row">
+                <div class="window">
+                    <b>
+                        <span class="l_text">
+                            <a href="https://www.pointcloud.ucla.edu/3DAtlas/fuzzydice.html">Fuzzy die</a>
+
+                        </span>
+                        <span> <a class="l_link" href="https://www.pointcloud.ucla.edu/3DAtlas/fuzzydice.html">
+                                <figure>
+                                    <img class="linkimg" src="/resources/link.svg">
+                                </figure>
+                        </span>
+                    </b>
+                    <a href="https://www.pointcloud.ucla.edu/3DAtlas/fuzzydice.html"><iframe
+                            src="https://www.pointcloud.ucla.edu/3DAtlas/fuzzydice.html" scrolling="yes"
+                            seamless></iframe></a>
+
+                </div>
+
+
+                <div class="window">
+                    <b>
+                        <span class="l_text">
+                            <a href="https://www.pointcloud.ucla.edu/3DAtlas/silverstar.html">Silver star ornament</a>
+                        </span>
+                        <span> <a class="l_link" href="https://www.pointcloud.ucla.edu/3DAtlas/silverstar.html">
+                                <figure>
+                                    <img class="linkimg" src="/resources/link.svg">
+                                </figure>
+                        </span>
+                    </b>
+
+                    <a href="https://www.pointcloud.ucla.edu/3DAtlas/silverstar.html"><iframe
+                            src="https://www.pointcloud.ucla.edu/3DAtlas/silverstar.html" scrolling="yes"
+                            seamless></iframe></a>
+
+                </div>
+
+
+                <div class="window">
+                    <b>
+                        <span class="l_text">
+                            <a href="https://www.pointcloud.ucla.edu/3DAtlas/blueglitterstar.html"> Blue glitter star
+                                ornament</a>
+                        </span>
+                        <span> <a class="l_link" href="https://www.pointcloud.ucla.edu/3DAtlas/blueglitterstar.html">
+                                <figure>
+                                    <img class="linkimg" src="/resources/link.svg">
+                                </figure>
+                        </span>
+                    </b>
+                    <a href="https://www.pointcloud.ucla.edu/3DAtlas/blueglitterstar.html"> <iframe
+                            src="https://www.pointcloud.ucla.edu/3DAtlas/blueglitterstar.html" scrolling="yes"
+                            seamless></iframe></a>
+
+                </div>
             </div>
 
-
-        </div>
-
-        <div class="row">
-            <div class="window">
-                <b>
-                    <span class="l_text">
-                        <a href="https://www.pointcloud.ucla.edu/3DAtlas/fuzzydice.html">Fuzzy die</a>
-
-                    </span>
-                    <span> <a class="l_link" href="https://www.pointcloud.ucla.edu/3DAtlas/fuzzydice.html">
-                            <figure>
-                                <img class="linkimg" src="/resources/link.svg">
-                            </figure>
-                    </span>
-                </b>
-                <a href="https://www.pointcloud.ucla.edu/3DAtlas/fuzzydice.html"><iframe
-                        src="https://www.pointcloud.ucla.edu/3DAtlas/fuzzydice.html" scrolling="yes"
-                        seamless></iframe></a>
-
+            <div class="row">
+
+                <div class="window">
+                    <b>
+                        <span class="l_text">
+                            <a href=" https://www.pointcloud.ucla.edu/3DAtlas/goldpresent.html">Gold Christmas box
+                                ornament</a>
+                        </span>
+                        <span> <a class="l_link" href="https://www.pointcloud.ucla.edu/3DAtlas/goldpresent.html">
+                                <figure>
+                                    <img class="linkimg" src="/resources/link.svg">
+                                </figure>
+                        </span>
+                    </b>
+                    <a href="https://www.pointcloud.ucla.edu/3DAtlas/goldpresent.html"> <iframe
+                            src="https://www.pointcloud.ucla.edu/3DAtlas/goldpresent.html" scrolling="yes"
+                            seamless></iframe></a>
+
+                </div>
+
+                <div class="window">
+                    <b>
+                        <span class="l_text">
+                            <a href="https://www.pointcloud.ucla.edu/3DAtlas/bwpresent.html">Black & white Christmas box
+                                ornament</a>
+                        </span>
+                        <span> <a class="l_link" href="https://www.pointcloud.ucla.edu/3DAtlas/bwpresent.html">
+                                <figure>
+                                    <img class="linkimg" src="/resources/link.svg">
+                                </figure>
+                        </span>
+                    </b>
+                    <a href="https://www.pointcloud.ucla.edu/3DAtlas/bwpresent.html"> <iframe
+                            src="https://www.pointcloud.ucla.edu/3DAtlas/bwpresent.html" scrolling="yes"
+                            seamless></iframe></a>
+
+                </div>
+
+                <div class="window">
+                    <b>
+                        <span class="l_text">
+                            <a href="https://www.pointcloud.ucla.edu/3DAtlas/frostedknight.html">Frosted glass chess
+                                piece</a>
+                        </span>
+                        <span> <a class="l_link" href="https://www.pointcloud.ucla.edu/3DAtlas/frostedknight.html">
+                                <figure>
+                                    <img class="linkimg" src="/resources/link.svg">
+                                </figure>
+                        </span>
+                    </b>
+
+                    <a href="https://www.pointcloud.ucla.edu/3DAtlas/frostedknight.html"><iframe
+                            src="https://www.pointcloud.ucla.edu/3DAtlas/frostedknight.html" scrolling="yes"
+                            seamless></iframe></a>
+
+                </div>
             </div>
 
+    </div>
 
-            <div class="window">
-                <b>
-                    <span class="l_text">
-                        <a href="https://www.pointcloud.ucla.edu/3DAtlas/silverstar.html">Silver star ornament</a>
-                    </span>
-                    <span> <a class="l_link" href="https://www.pointcloud.ucla.edu/3DAtlas/silverstar.html">
-                            <figure>
-                                <img class="linkimg" src="/resources/link.svg">
-                            </figure>
-                    </span>
-                </b>
-
-                <a href="https://www.pointcloud.ucla.edu/3DAtlas/silverstar.html"><iframe
-                        src="https://www.pointcloud.ucla.edu/3DAtlas/silverstar.html" scrolling="yes"
-                        seamless></iframe></a>
-
-            </div>
-
-
-            <div class="window">
-                <b>
-                    <span class="l_text">
-                        <a href="https://www.pointcloud.ucla.edu/3DAtlas/blueglitterstar.html"> Blue glitter star
-                            ornament</a>
-                    </span>
-                    <span> <a class="l_link" href="https://www.pointcloud.ucla.edu/3DAtlas/blueglitterstar.html">
-                            <figure>
-                                <img class="linkimg" src="/resources/link.svg">
-                            </figure>
-                    </span>
-                </b>
-                <a href="https://www.pointcloud.ucla.edu/3DAtlas/blueglitterstar.html"> <iframe
-                        src="https://www.pointcloud.ucla.edu/3DAtlas/blueglitterstar.html" scrolling="yes"
-                        seamless></iframe></a>
-
-            </div>
-        </div>
-
-        <div class="row">
-
-            <div class="window">
-                <b>
-                    <span class="l_text">
-                        <a href=" https://www.pointcloud.ucla.edu/3DAtlas/goldpresent.html">Gold Christmas box
-                            ornament</a>
-                    </span>
-                    <span> <a class="l_link" href="https://www.pointcloud.ucla.edu/3DAtlas/goldpresent.html">
-                            <figure>
-                                <img class="linkimg" src="/resources/link.svg">
-                            </figure>
-                    </span>
-                </b>
-                <a href="https://www.pointcloud.ucla.edu/3DAtlas/goldpresent.html"> <iframe
-                        src="https://www.pointcloud.ucla.edu/3DAtlas/goldpresent.html" scrolling="yes"
-                        seamless></iframe></a>
-
-            </div>
-
-            <div class="window">
-                <b>
-                    <span class="l_text">
-                        <a href="https://www.pointcloud.ucla.edu/3DAtlas/bwpresent.html">Black & white Christmas box
-                            ornament</a>
-                    </span>
-                    <span> <a class="l_link" href="https://www.pointcloud.ucla.edu/3DAtlas/bwpresent.html">
-                            <figure>
-                                <img class="linkimg" src="/resources/link.svg">
-                            </figure>
-                    </span>
-                </b>
-                <a href="https://www.pointcloud.ucla.edu/3DAtlas/bwpresent.html"> <iframe
-                        src="https://www.pointcloud.ucla.edu/3DAtlas/bwpresent.html" scrolling="yes"
-                        seamless></iframe></a>
-
-            </div>
-
-            <div class="window">
-                <b>
-                    <span class="l_text">
-                        <a href="https://www.pointcloud.ucla.edu/3DAtlas/frostedknight.html">Frosted glass chess
-                            piece</a>
-                    </span>
-                    <span> <a class="l_link" href="https://www.pointcloud.ucla.edu/3DAtlas/frostedknight.html">
-                            <figure>
-                                <img class="linkimg" src="/resources/link.svg">
-                            </figure>
-                    </span>
-                </b>
-
-                <a href="https://www.pointcloud.ucla.edu/3DAtlas/frostedknight.html"><iframe
-                        src="https://www.pointcloud.ucla.edu/3DAtlas/frostedknight.html" scrolling="yes"
-                        seamless></iframe></a>
-
-            </div>
-        </div>
-
-    </div> 
+    </description>
 
 </body>
 
diff --git a/test.html b/test.html
deleted file mode 100644
index 9ed870d..0000000
--- a/test.html
+++ /dev/null
@@ -1,161 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <title>Scans | 3D Scanning Atlas</title>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <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=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="/styles/header.css">
-    <link rel="stylesheet" href="/styles/body.css">
-    <link rel="stylesheet" href="/styles/window.css">
-    <link rel="shortcut icon" href="/resources/globe.png">
-    <style>
-        .carousel {
-            width: 80%;
-            margin: auto;
-            overflow: hidden;
-            position: relative;
-        }
-        .carousel-inner {
-            display: flex;
-            transition: transform 0.5s ease;
-        }
-        .carousel-item {
-            min-width: 100%;
-            box-sizing: border-box;
-        }
-        .carousel-controls {
-            position: absolute;
-            top: 50%;
-            width: 100%;
-            display: flex;
-            justify-content: space-between;
-            transform: translateY(-50%);
-        }
-        .carousel-button {
-            background-color: rgba(0, 0, 0, 0.5);
-            border: none;
-            color: white;
-            padding: 10px;
-            cursor: pointer;
-        }
-    </style>
-</head>
-<body>
-    <header class="navbar">
-        <span class="opt">
-            <a href="index.html">Home</a>
-        </span>
-        <span class="opt">
-            <a href="scans.html">Scans</a>
-        </span>
-        <span>
-            <a href="contribute.html">Contribute</a>
-        </span>
-    </header>
-    <header class="titlerow">
-        <a href="index.html">
-            <figure>
-                <img src="/resources/UCLogo.png" class="icon" alt="UC Logo" left="25px">
-            </figure>
-        </a>
-        <h1>3D Scanning Atlas</h1>
-    </header>
-    <div class="pagetxt">
-        <h3 class="descriptionhead">Comparison of 3D scanners by object</h3>
-        The 3D Scanning Atlas is powered by the Potree Viewer and is hosted by UCLA. <br>
-        <br><br>
-        Below are the OBJs produced for each of the nine objects:
-        <div class="carousel">
-            <div class="carousel-inner">
-                <div class="carousel-item">
-                    <div class="window">
-                        <b>
-                            <span class="l_text">
-                                <a href="https://www.pointcloud.ucla.edu/3DAtlas/gaugetool.html">Nut bolt thread gauge</a>
-                            </span>
-                            <span>
-                                <a class="l_link" href="https://www.pointcloud.ucla.edu/3DAtlas/gaugetool.html">
-                                    <figure>
-                                        <img class="linkimg" src="/resources/link.svg">
-                                    </figure>
-                                </a>
-                            </span>
-                        </b>
-                        <a href="https://www.pointcloud.ucla.edu/3DAtlas/gaugetool.html">
-                            <iframe src="https://www.pointcloud.ucla.edu/3DAtlas/gaugetool.html" target="_parent" scrolling="yes" seamless></iframe>
-                        </a>
-                    </div>
-                </div>
-                <div class="carousel-item">
-                    <div class="window">
-                        <b>
-                            <span class="l_text">
-                                <a href="https://www.pointcloud.ucla.edu/3DAtlas/bolt.html">Stainless steel hex head screw</a>
-                            </span>
-                            <span>
-                                <a class="l_link" href="https://www.pointcloud.ucla.edu/3DAtlas/bolt.html">
-                                    <figure>
-                                        <img class="linkimg" src="/resources/link.svg">
-                                    </figure>
-                                </a>
-                            </span>
-                        </b>
-                        <a href="https://www.pointcloud.ucla.edu/3DAtlas/bolt.html">
-                            <iframe src="https://www.pointcloud.ucla.edu/3DAtlas/bolt.html" scrolling="yes" seamless></iframe>
-                        </a>
-                    </div>
-                </div>
-                <div class="carousel-item">
-                    <div class="window">
-                        <b>
-                            <span class="l_text">
-                                <a href="https://www.pointcloud.ucla.edu/3DAtlas/skull.html">Human skull model</a>
-                            </span>
-                            <span>
-                                <a class="l_link" href="https://www.pointcloud.ucla.edu/3DAtlas/skull.html">
-                                    <figure>
-                                        <img class="linkimg" src="/resources/link.svg">
-                                    </figure>
-                                </a>
-                            </span>
-                        </b>
-                        <a href="https://www.pointcloud.ucla.edu/3DAtlas/skull.html">
-                            <iframe src="https://www.pointcloud.ucla.edu/3DAtlas/skull.html" scrolling="yes" seamless></iframe>
-                        </a>
-                    </div>
-                </div>
-                <!-- Add more items as needed -->
-            </div>
-            <div class="carousel-controls">
-                <button class="carousel-button" onclick="prevSlide()">❮</button>
-                <button class="carousel-button" onclick="nextSlide()">❯</button>
-            </div>
-        </div>
-    </div>
-    <script>
-        let currentIndex = 0;
-        function showSlide(index) {
-            const slides = document.querySelectorAll('.carousel-item');
-            if (index >= slides.length) {
-                currentIndex = 0;
-            } else if (index < 0) {
-                currentIndex = slides.length - 1;
-            } else {
-                currentIndex = index;
-            }
-            const offset = -currentIndex * 100;
-            document.querySelector('.carousel-inner').style.transform = `translateX(${offset}%)`;
-        }
-        function prevSlide() {
-            showSlide(currentIndex - 1);
-        }
-        function nextSlide() {
-            showSlide(currentIndex + 1);
-        }
-        showSlide(currentIndex);
-    </script>
-</body>
-</html>