Skip to content
Snippets Groups Projects
index.html 9.77 KiB
<!doctype html>
<!--
  - NASA Worldview
  -
  = This code was originally developed at NASA/Goddard Space Flight Center for
  - the Earth Science Data and Information System (ESDIS) project.
  -
  - Copyright (C) 2013 - 2016 United States Government as represented by the
  - Administrator of the National Aeronautics and Space Administration.
  - All Rights Reserved.
  -
  - Licensed under the NASA Open Source Agreement, Version 1.3
  - http://opensource.gsfc.nasa.gov/nosa.php
-->
<html>
<head>
    <title>@OFFICIAL_NAME@</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <script type="text/javascript">
        if ( /MSIE (\d+\.\d+);/.test(navigator.userAgent) && ! /unsupported/.test(location.search) ) {
            var version = parseFloat(navigator.appVersion.split("MSIE")[1]);
            if ( version < 9 ) {
                document.location.replace("pages/unsupported_browser.html" + location.search);
            }
        }
    </script>

    <link rel="shortcut icon" href="brand/images/wv-icon.ico" type="image/vnd.microsoft.icon" />

    <!-- meta defines -->
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="keywords" content="nasa, worldview, nasa worldview, eosdis worldview, satellite imagery, remote sensing, natural hazards, natural disasters, near real-time, nrt, lance, wildfire management, air quality, weather forecasting, agriculture, dust storms, smoke plumes, vegetation, severe storms, shipping, fisheries, floods, drought, oil spills">
    <meta name="description" content="Interactive interface for browsing full-resolution, global, near real-time satellite imagery.  Supports time-critical application areas such as wildfire management, air quality measurements, and weather forecasting.  Data is generally available within three hours of observation.">
    <meta http-equiv="Cache-control" content="no-cache">
    <meta http-equiv="Cache-control" content="no-store">
    <meta http-equiv="Pragma" content="no-cache">

    <!-- open graph for social sharing -->
    <meta property="og:title" content="Worldview: Explore Your Dynamic Planet">
    <meta property="og:image" content="images/preview.png" />
    <meta property="og:description" content="The NASA Worldview app provides a satellite's perspective of the planet as it looks today and as it has in the past. Worldview is part of NASA’s Earth Observing System Data and Information System. EOSDIS makes the agency's large repository of data accessible and freely available to the public.">

    <script type="text/javascript" src="dist/vendor.bundle.js"></script>
    <script type="text/javascript" src="dist/app.bundle.js"></script>

</head>

<body>
    <div data-role="page" id="app">
        <div data-role="content">
            <ul id="wv-toolbar">
                <li id="wv-link-button" class="wv-toolbar-button"></li>
                <li id="wv-proj-button" class="wv-toolbar-button"></li>
                <li id="wv-image-button" class="wv-toolbar-button"></li>
                <li id="wv-info-button" class="wv-toolbar-button wv-status-hide"></li>
            </ul>
            <a href="/" title="Click to Reset Worldview to Defaults" id="wv-logo"></a>
            <section id="productsHolder">
              <ul id="productsHolder-tabs"></ul>
              <div id="productsHoldertoggleButtonHolder"></div> <!-- bad -->
              <main id="products"></main>
              <div id="wv-events"></div>
              <div id="wv-data"></div>
              <footer>
                <button id="layers-add" class="action">+ Add Layers</button>
              </footer>
            </section>
            <div id="wv-map" class="wv-map"></div>
            <div id="eventsHolder"></div>
            <div id="imagedownload"></div>
            <div id="dlMap"></div>

            <div id="timewheels" style="display:none"></div>

            <section id="timeline" style="display: none">
                <div id="timeline-header">
                    <div id="focus-guard-1" class="focus-guard" tabindex="1"></div>
                    <div class="input-wrapper">
                        <div class="date-arrows date-arrow-up" data-interval="year" data-value="1">
                          <svg width="25" height="8">
                            <path d="M 12.5,0 25,8 0,8 z" class="uparrow"></path>
                          </svg>
                        </div>
                      <input type="text" size="4" maxlength="4" class="button-input-group" id="year-input-group" tabindex="2" />
                        <div class="date-arrows date-arrow-down" data-interval="year" data-value="-1">
                          <svg width="25" height="8">
                            <path d="M 12.5,0 25,8 0,8 z" class="downarrow"></path>
                          </svg>
                        </div>
                    </div><!--/input-wrapper-->
                    <div class="input-wrapper">
                        <div class="date-arrows date-arrow-up" data-interval="month" data-value="1">
                          <svg width="25" height="8">
                            <path d="M 12.5,0 25,8 0,8 z" class="uparrow"></path>
                          </svg>
                        </div>
                      <input type="text" size="3" maxlength="3" class="button-input-group" id="month-input-group" tabindex="3" />
                        <div class="date-arrows date-arrow-down" data-interval="month" data-value="-1">
                          <svg width="25" height="8">
                            <path d="M 12.5,0 25,8 0,8 z" class="downarrow"></path>
                          </svg>
                        </div>
                    </div><!--/input-wrapper-->
                    <div class="input-wrapper">
                        <div class="date-arrows date-arrow-up" data-interval="day" data-value="1">
                          <svg width="25" height="8">
                            <path d="M 12.5,0 25,8 0,8 z" class="uparrow"></path>
                          </svg>
                        </div>
                      <input type="text" size="2" maxlength="2" class="button-input-group" id="day-input-group" tabindex="4" onkeypress="return (event.charCode >= 48 && event.charCode <= 57) || event.keyCode == 13 || event.keyCode == 9 || even.keyCode == 8" />
                        <div class="date-arrows date-arrow-down" data-interval="day" data-value="-1">
                          <svg width="25" height="8">
                            <path d="M 12.5,0 25,8 0,8 z" class="downarrow"></path>
                          </svg>
                        </div>
                    </div><!--/input-wrapper-->
                    <div id="focus-guard-2" class="focus-guard" tabindex="5"></div>
                    <div class="button-action-group" id="left-arrow-group" title="Click and hold to animate backwards">
                        <svg width="24" height="30">
                            <path
                             d="M 10.240764,0 24,15 10.240764,30 0,30 13.759236,15 0,0 10.240764,0 z"
                             class="arrow"></path>
                        </svg>
                    </div>
                    <div class="button-action-group" id="right-arrow-group" title="Click and hold to animate forwards">
                        <svg width="24" height="30" >
                            <path
                            d="M 10.240764,0 24,15 10.240764,30 0,30 13.759236,15 0,0 10.240764,0 z"
                            class="arrow"></path>
                        </svg>
                    </div>
                    <div class="button-action-group animate-button" id="animate-button" title="Setup animation">
                        <i id="wv-animate" class="fa fa-video-camera wv-animate"></i>
                    </div>

                </div> <!--/timeline-header-->
                <div id="timeline-footer">
                    <div id="wv-animation-widet-case"> </div>
                </div><!--/timeline-footer-->
                <div id="timeline-zoom">
                  <!--<a class="zoom-btn" id="zoom-weeks">Weeks</a>-->
                  <a class="zoom-btn" id="zoom-days">Days</a>
                  <a class="zoom-btn" id="zoom-months">Months</a>
                  <a class="zoom-btn" id="zoom-years">Years</a>
                </div><!--/timeline-zoom-->
                <div id="timeline-hide">
                  <svg class="hamburger" width="10" height="9">
                    <path d="M 0,0 0,1 10,1 10,0 0,0 z M 0,4 0,5 10,5 10,4 0,4 z M 0,8 0,9 10,9 10,8 0,8 z"></path>
                  </svg>
                </div>
            </section>

        </div>
    </div>
    <section id="layer-modal">
      <header></header>
      <div id="layer-modal-main">
        <div id="layer-categories">

        </div>
        <div id="selected-category">

        </div>
        <div id="layers-all">

        </div>
      </div>
      <footer></footer>
    </section>
    <div id="wv-tour-content"></div>
    <div id="wv-image-top" class="wv-image-coords"></div>
    <div id="wv-image-right" class="wv-image-coords"></div>
    <div id="wv-image-bottom" class="wv-image-coords"></div>
    <div id="wv-image-left" class="wv-image-coords"></div>

    <style>
      /*.backdrop {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        z-index: 9998;
        background: rgba(0, 0, 0, 0.3);
      }*/
    </style>

    <div class="backdrop"></div>

    <style>
      /*.modal {
        width: 300px;
        height: 300px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -150px;
        margin-left: -150px;
        z-index: 9999;
        background: yellow;
      }*/
    </style>

</body>
</html>