Update style

michaelkmpoon · Nov 2, 2018 · 71d6fc6 · 71d6fc6
1 parent c9ef59f
commit 71d6fc6
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -1,18 +1,25 @@
 <html>
     <head>
         <title>Test1 Aladin Lite</title>
-        <link rel="stylesheet" href="https://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css" />
-        <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.min.js" charset="utf-8"></script>
+        <link rel="stylesheet" href="http://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css" />
+        <link rel="stylesheet" href="style.css" />
+        <script type="text/javascript" src="http://code.jquery.com/jquery-1.12.1.min.js" charset="utf-8"></script>
     </head>
 
     <body>
-        <h1>Test 1 Aladin Lite Viewer</h1>
-        <p>Trial one of adding Aladin Lite to an HTML page.</p>
-        <div id="aladin-lite-div" style="width:800px;height:800px;"></div>
-        <script type="text/javascript" src="https://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.js" charset="utf-8"></script>
+        <div class="sidebar"></div>
+        <h1>Dragonfly Telescope Survey Viewer</h1>
+        <div id="left">
+            <h2>About the Viewer</h2>
+            <p>The HiPS survey for the Dragonfly telescope is displayed in the AladinLite viewer to the right. The Needle Galaxy and a star field are currently included in the survey.</p>
+        </div>
+
+        <div id="aladin-lite-div"></div>
+        <script type="text/javascript" src="http://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.js" charset="utf-8"></script>
         <script type="text/javascript">
             var aladin = A.aladin('#aladin-lite-div', {survey: "P/SDSS9/color", fov:1, target: "NGC4565"});
             aladin.setImageSurvey(aladin.createImageSurvey("Dragonfly", "Dragonfly", "https://dragonflydatavis.azurewebsites.net/4image_colourHiPS/UNK.AUTH_P_4image_colour/", 'equatorial', 8, {imgFormat: 'png'}));
         </script>
+        <div class="sidebar"></div>
     </body>
-</html>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,42 @@
+html {
+    background-color: purple;
+}
+
+body {
+    margin-left: auto;
+    margin-right: auto;
+    width: 85%;
+    background-color: white;
+}
+
+
+h1 {
+    font-weight: 300;
+    margin-top: 25px;
+    text-align: center;
+}
+
+#left {
+    font-size: 18px;
+    float: left;
+    margin-left: 120px;
+    margin-top: 10px;
+    text-align: left;
+    width: 25%;
+}
+
+h2 {
+    margin-top: 0px;
+}
+p {
+    display: block;
+}
+
+#aladin-lite-div {
+    float: right;
+    height: 550px;
+    margin-top: 10px;
+    margin-bottom: 30px;
+    margin-right: 120px;
+    width: 550px;
+}