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

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

added textareas etc

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>CEDA Browse</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      div p textarea {
38        background-color:#fff;
39        font:bold 12px arial,sans-serif;
40        line-height: 2.0;
41      }
42      .container { background-color:#333; }
43      div button {
44        font-size:10px;
45        font-family:Tahoma,sans-serif;
46        font-weight:bold;
47        text-align:left;
48        color:#FFFFFF;
49        width:150px;
50        height:35px;
51        background-color:#2878C0;
52        border-style:default;
53        border-color:#2878C0;
54        border-width:5px;
55      }
56      div p {
57        -webkit-border-top-left-radius: 15px;
58        -webkit-border-top-right-radius: 15px;
59        -webkit-border-bottom-right-radius: 15px;
60        -webkit-border-bottom-left-radius: 15px;
61        -moz-border-radius-topleft: 15px;
62        -moz-border-radius-topright: 15px;
63        -moz-border-radius-bottomright: 15px;
64        -moz-border-radius-bottomleft: 15px;
65        border-top-left-radius: 15px;
66        border-top-right-radius: 15px;
67        border-bottom-right-radius: 15px;
68        border-bottom-left-radius: 15px;
69        border:1px solid #333; padding:10px;
70      }
71    </style>
72
73    <script type="text/javascript" language="javascript">
74      $(document).ready(function() {
75        // setup tabs
76        $( "#tabs" ).tabs();
77
78        // setup openlayers map
79        var map;// = new OpenLayers.Map("map");
80        init();
81        function init() {
82          map = new OpenLayers.Map('map');
83          var wms = new OpenLayers.Layer.WMS(
84            "OpenLayers WMS",
85            "http://labs.metacarta.com/wms/vmap0",
86            {layers: 'basic'}
87          );
88
89          map.addLayers([wms]);
90          map.zoomToMaxExtent();
91        }
92      });
93    </script>
94  </head>
95  <body>
96    <div class="container_12">
97      <div class="grid_12">
98        <img style="z-index:-1;position:absolute" src="/static/img/stfcHeader_960.jpg" alt="cedalogo" height="94"/width="940">
99        <img src="/static/img/stfc_ceda_left.jpg" alt="cedalogo" height="94" width="352" />
100      </div>
101      <div class="clear">nbsp;</div>
102      <div class="grid_2">
103        <img src="/static/img/cedaObsLogo.jpg" alt="cedalogo" />
104      </div>
105      <div class="grid_10">
106        <p>
107          <textarea readonly="readonly" width="100%" cols="105" rows="2" style="overflow=y:scroll">
108{{ title }}.{{ author }}.{{ DOI }}
109          </textarea>
110        </p>
111      </div>
112      <div class="clear">nbsp;</div>
113      <div class="grid_3">
114        <p>
115          <img src="/static/img/neodc.jpg" alt="cedalogo" height="90" width="180" />
116        </p>
117          <div align="center">
118          <p>
119          <button id="b1">sample data</button>
120          <br/>
121          <button id="b2">download and services</button>
122          <br/>
123          <button id="b3">apply for access</button>
124          <br/>
125          <button id="b4">help</button>
126          </p>
127          </div>
128      </div>
129      <div class="grid_6">
130        <p>
131          <textarea readonly="readonly" width="100%" cols="60" rows="10" style="overflow=y:scroll">
132Abstract :  {{ abstract }}
133          </textarea>
134        </p>
135        <p>
136          <textarea readonly="readonly" width="100%" cols="60" rows="2" style="overflow=y:scroll">
137latest news
138          </textarea>
139        </p>
140      </div>
141      <div class="grid_3">
142        <p>
143          <b>Status :</b> {{ status }}
144          <br/>
145          <b>Last Update :</b> {{ last_update_year }}-{{ last_update_month }}-{{ last_update_day }}
146        </p>
147       
148        <div id="map" style="width: 230px; height: 150px"></div>
149       
150        <p>
151          <textarea readonly="readonly" width="100%" cols="26" rows="5" style="overflow=y:scroll">
152Phenomenon begin : {{ phenomenon_begin_year }}-{{ phenomenon_begin_month }}-{{ phenomenon_begin_day }}
153Phenomenon end : {{ phenomenon_end_year }}-{{ phenomenon_end_month }}-{{ phenomenon_end_day }}
154Resolution : {{ resolution }}
155Vertical Extent :
156{% for ve in vertical_extent %}
157  {{ ve }}
158{% endfor %}
159          </textarea>
160        </p>
161      </div>
162      <div class="grid_9">
163          <div id="tabs">
164            <!-- tabs -->
165            <ul>
166              <li><a href="#tabs-1">Parameters</a></li>
167              <li><a href="#tabs-2">Format</a></li>
168              <li><a href="#tabs-3">Data Quality</a></li>
169              <li><a href="#tabs-4">Data Lineage</a></li>
170              <li><a href="#tabs-5">Related Data</a></li>
171              <li><a href="#tabs-6">Project Details</a></li>
172              <li><a href="#tabs-7">Data Production Details</a></li>
173              <li><a href="#tabs-8">documentation and links</a></li>
174              <li><a href="#tabs-9">archive content details</a></li>
175            </ul>
176
177            <!-- tab containers -->
178            <div id="tabs-1">
179              <p>
180              <textarea readonly="readonly" width="100%" cols="90" rows="4" style="overflow=y:scroll">
181Observerd Property : {{ observed_property }}
182Parameters :
183{% for pa in parameters %}
184  {{ pa }}
185{% endfor %}
186              </textarea>
187              </p>
188            </div>
189            <div id="tabs-2">
190              <p>
191              <textarea readonly="readonly" width="100%" cols="90" rows="4" style="overflow=y:scroll">
192
193              </textarea>
194              </p>
195            </div>
196            <div id="tabs-3">
197              <p>
198              <textarea readonly="readonly" width="100%" cols="90" rows="4" style="overflow=y:scroll">
199
200              </textarea>
201              </p>
202            </div>
203            <div id="tabs-4">
204              <p>
205              <textarea readonly="readonly" width="100%" cols="90" rows="4" style="overflow=y:scroll">
206{{ lineage }}
207              </textarea>
208              </p>
209            </div>
210            <div id="tabs-5">
211              <p>
212              <textarea readonly="readonly" width="100%" cols="90" rows="4" style="overflow=y:scroll">
213
214             </textarea>
215             </p>
216            </div>
217            <div id="tabs-6">
218              <p>
219              <textarea readonly="readonly" width="100%" cols="90" rows="4" style="overflow=y:scroll">
220Related party :
221{% for pd in project_details %}
222  {{ pd }}
223{% endfor %}
224              </textarea>
225              </p>
226            </div>
227            <div id="tabs-7">
228              <p>
229              <textarea readonly="readonly" width="100%" cols="90" rows="4" style="overflow=y:scroll">
230Procedure : {{ procedure }}
231              </textarea>
232              </p>
233            </div>
234            <div id="tabs-8">
235              <p>
236              <textarea readonly="readonly" width="100%" cols="90" rows="4" style="overflow=y:scroll">
237Documentation :
238{% for d in documentation %}
239  {{ d }}
240{% endfor %}
241              </textarea>
242              </p>
243            </div>
244            <div id="tabs-9">
245              <p>
246              <textarea readonly="readonly" width="100%" cols="90" rows="4" style="overflow=y:scroll">
247Number Of Files : {{ archive_no_files }}
248{% for l in archive_linkage %}
249link : {{ l }}
250{% endfor %}
251              </textarea>
252              </p>
253            </div>
254          </div>
255      </div>
256      <div class="grid_3">
257        <div align="center">
258          <p>
259          <button id="b9">file list and checksums</button>
260          </p>
261        </div>
262      </div>
263    </div>
264  </body>
265</html>
Note: See TracBrowser for help on using the repository browser.