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

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

cleaned up style a bit
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      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>
Note: See TracBrowser for help on using the repository browser.