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 | 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 width="100%" cols="100" 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 width="100%" cols="55" rows="10" style="overflow=y:scroll"> |
---|
132 | Abstract : {{ abstract }} |
---|
133 | </textarea> |
---|
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: 230px; 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 | <li><a href="#tabs-5">Related Data</a></li> |
---|
163 | <li><a href="#tabs-6">Project Details</a></li> |
---|
164 | <li><a href="#tabs-7">Data Production Details</a></li> |
---|
165 | <li><a href="#tabs-8">documentation and links</a></li> |
---|
166 | <li><a href="#tabs-9">archive content details</a></li> |
---|
167 | </ul> |
---|
168 | |
---|
169 | <!-- tab containers --> |
---|
170 | <div id="tabs-1"> |
---|
171 | <p>Lorem ipsum dolor sit amet.</p> |
---|
172 | </div> |
---|
173 | <div id="tabs-2"> |
---|
174 | <p>Sed do eiusmod tempor incididunt.</p> |
---|
175 | </div> |
---|
176 | <div id="tabs-3"> |
---|
177 | <p>Ut enim ad minim veniam</p> |
---|
178 | </div> |
---|
179 | <div id="tabs-4"> |
---|
180 | <p> |
---|
181 | {{ lineage }} |
---|
182 | </p> |
---|
183 | </div> |
---|
184 | <div id="tabs-5"> |
---|
185 | <p>neccare est ecci romani</p> |
---|
186 | </div> |
---|
187 | <div id="tabs-6"> |
---|
188 | <p>et tu brutus</p> |
---|
189 | </div> |
---|
190 | <div id="tabs-7"> |
---|
191 | <p>amo arborae</p> |
---|
192 | </div> |
---|
193 | <div id="tabs-8"> |
---|
194 | <p>was wollen sie trinken</p> |
---|
195 | </div> |
---|
196 | <div id="tabs-9"> |
---|
197 | <p>ich bin ser mude</p> |
---|
198 | </div> |
---|
199 | </div> |
---|
200 | </div> |
---|
201 | <div class="grid_3"> |
---|
202 | <div align="center"> |
---|
203 | <p> |
---|
204 | <button id="b9">file list and checksums</button> |
---|
205 | </p> |
---|
206 | </div> |
---|
207 | </div> |
---|
208 | </div> |
---|
209 | </body> |
---|
210 | </html> |
---|