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

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

made style changes

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