source: mauRepo/MolesManager/trunk/src/MolesManager/static/templates/cedaBrowse.html @ 8303

Subversion URL: http://proj.badc.rl.ac.uk/svn/ndg/mauRepo/MolesManager/trunk/src/MolesManager/static/templates/cedaBrowse.html@8303
Revision 8303, 6.5 KB checked in by jhorton, 8 years ago (diff)

added extra widgets

Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3  <head>
4    <title>Untitled Page</title>
5
6    <link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/start/jquery-ui.css" rel="stylesheet" type="text/css"></link>
7    <link rel="stylesheet" type="text/css" href="/static/css/960/reset.css"  />
8    <link rel="stylesheet" type="text/css" href="/static/css/960/960_12_col.css"  />
9    <link rel="stylesheet" type="text/css" href="/static/css/960/text.css"  />
10    <link rel="stylesheet" type="text/css" href="/static/css/ceda.css"  />
11    <link rel="stylesheet" type="text/css" href="/static/css/cedacat.css"  />
12
13    <link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/start/jquery-ui.css" rel="stylesheet" type="text/css"></link>
14
15    <script src="http://openlayers.org/api/OpenLayers.js"></script>
16<!--
17    <link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css" type="text/css">
18-->
19    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
20    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 
21
22    <style>
23      body { background-color: #D0D7E4; }
24      div p { background-color:#fff; }
25      .container { background-color:#333; }
26      div button {
27        font-size:10px;
28        font-family:Tahoma,sans-serif;
29        font-weight:bold;
30        text-align:left;
31        color:#FFFFFF;
32        width:150px;
33        height:35px;
34        background-color:#2878C0;
35        border-style:default;
36        border-color:#2878C0;
37        border-width:5px;
38      }
39      div p {
40        -webkit-border-top-left-radius: 30px;
41        -webkit-border-top-right-radius: 30px;
42        -webkit-border-bottom-right-radius: 30px;
43        -webkit-border-bottom-left-radius: 30px;
44        -moz-border-radius-topleft: 30px;
45        -moz-border-radius-topright: 30px;
46        -moz-border-radius-bottomright: 30px;
47        -moz-border-radius-bottomleft: 30px;
48        border-top-left-radius: 30px;
49        border-top-right-radius: 30px;
50        border-bottom-right-radius: 30px;
51        border-bottom-left-radius: 30px;
52        border:1px solid #333; padding:30px;
53      }
54    </style>
55
56    <script type="text/javascript" language="javascript">
57      $(document).ready(function() {
58        // setup tabs
59        $( "#tabs" ).tabs();
60
61        // setup openlayers map
62        var map;// = new OpenLayers.Map("map");
63        init();
64        function init() {
65          map = new OpenLayers.Map('map');
66          var wms = new OpenLayers.Layer.WMS(
67            "OpenLayers WMS",
68            "http://labs.metacarta.com/wms/vmap0",
69            {layers: 'basic'}
70          );
71
72          map.addLayers([wms]);
73          map.zoomToMaxExtent();
74        }
75
76/*
77        var ol_wms = new OpenLayers.Layer.WMS(
78            "OpenLayers WMS",
79            "http://vmap0.tiles.osgeo.org/wms/vmap0",
80            {layers: "basic"}
81        );
82
83        var dm_wms = new OpenLayers.Layer.WMS(
84            "Canadian Data",
85            "http://www2.dmsolutions.ca/cgi-bin/mswms_gmap",
86            {
87                layers: "bathymetry,land_fn,park,drain_fn,drainage," +
88                    "prov_bound,fedlimit,rail,road,popplace",
89                transparent: "true",
90                format: "image/png"
91            },
92            {isBaseLayer: false, visibility: false}
93        );
94
95        map.addLayers([ol_wms, dm_wms]);
96        map.addControl(new OpenLayers.Control.LayerSwitcher());
97        map.zoomToMaxExtent();
98*/
99      });
100    </script>
101  </head>
102  <body>
103    <div class="container_12">
104      <div class="grid_12">
105        <img src="/static/img/stfc_ceda_left.jpg" alt="cedalogo" height="94" width="352" />
106      </div>
107      <div class="grid_2">
108        <img src="/static/img/cedaObsLogo.jpg" alt="cedalogo" height="80" />
109      </div>
110      <div class="grid_10">
111        <p>
112          <b> {{ title }}.{{ author }}.{{ DOI }} </b>
113        </p>
114      </div>
115      <div class="grid_3">
116        <p>
117          logo and image
118        </p>
119          <div align="center">
120          <p>
121          <button id="b1">sample data</button>
122          <br/>
123          <button id="b2">download and services</button>
124          <br/>
125          <button id="b3">apply for access</button>
126          <br/>
127          <button id="b4">help</button>
128          </p>
129          </div>
130      </div>
131      <div class="grid_6">
132        <p>
133          <b>Abstract : </b> {{ abstract }}
134        </p>
135        <p>
136          latest news
137        </p>
138      </div>
139      <div class="grid_3">
140        <p>
141          <b>Status :</b> {{ status }}
142          <br/>
143          <b>Last Update :</b> {{ last_update_year }}-{{ last_update_month }}-{{ last_update_day }}
144        </p>
145       
146        <div id="map" style="width: 300px; height: 150px"></div>
147       
148        <p>
149          Phenomenon begin {{ phenomenon_begin_year }}-{{ phenomenon_begin_month }}-{{ phenomenon_begin_day }}
150          Phenomenon end {{ phenomenon_end_year }}-{{ phenomenon_end_month }}-{{ phenomenon_end_day }}
151          geographic details
152        </p>
153      </div>
154      <div class="grid_9">
155          <div id="tabs">
156            <!-- tabs -->
157            <ul>
158              <li><a href="#tabs-1">Parameters</a></li>
159              <li><a href="#tabs-2">Format</a></li>
160              <li><a href="#tabs-3">Data Quality</a></li>
161              <li><a href="#tabs-4">Data Lineage</a></li>
162            </ul>
163
164            <!-- tab containers -->
165            <div id="tabs-1">
166              <p>Lorem ipsum dolor sit amet.</p>
167            </div>
168            <div id="tabs-2">
169              <p>Sed do eiusmod tempor incididunt.</p>
170            </div>
171            <div id="tabs-3">
172              <p>Ut enim ad minim veniam</p>
173            </div>
174            <div id="tabs-4">
175              <p>
176                {{ lineage }}
177              </p>
178            </div>
179          </div>
180      </div>
181      <div class="grid_3">
182        <div align="center">
183          <p>
184          <button id="b5">related data</button>
185          <br/>
186          <button id="b6">project details</button>
187          <br/>
188          <button id="b6">data production details</button>
189          <br/>
190          <button id="b7">documentation and links</button>
191          <br/>
192          <button id="b8">archive content details</button>
193          <br/>
194          <button id="b9">file list and checksums</button>
195          </p>
196        </div>
197      </div>
198    </div>
199  </body>
200</html>
Note: See TracBrowser for help on using the repository browser.