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

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

update to browse

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    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
15    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 
16
17    <style>
18      body { background-color: #fff; }
19      .container div p { background-color:#fff; }
20      .container { background-color:#333; }
21      div p {
22        -webkit-border-top-left-radius: 30px;
23        -webkit-border-top-right-radius: 30px;
24        -webkit-border-bottom-right-radius: 30px;
25        -webkit-border-bottom-left-radius: 30px;
26        -moz-border-radius-topleft: 30px;
27        -moz-border-radius-topright: 30px;
28        -moz-border-radius-bottomright: 30px;
29        -moz-border-radius-bottomleft: 30px;
30        border-top-left-radius: 30px;
31        border-top-right-radius: 30px;
32        border-bottom-right-radius: 30px;
33        border-bottom-left-radius: 30px;
34        border:1px solid #333; padding:30px;
35      }
36    </style>
37
38    <script type="text/javascript" language="javascript">
39      $(document).ready(function() {
40        $( "#tabs" ).tabs();
41      });
42    </script>
43  </head>
44  <body>
45    <div class="container_12">
46      <div class="grid_12">
47        <p>
48          header
49        </p>
50      </div>
51      <div class="grid_3">
52        <p>
53          logo
54        </p>
55      </div>
56      <div class="grid_9">
57        <p>
58          <b> {{ title }}.{{ author }}.{{ DOI }} </b>
59        </p>
60      </div>
61      <div class="grid_3">
62        <p>
63          logo and image
64        </p>
65          <div align="center">
66          <p>
67          <button>sample data</button>
68          <br/>
69          <button>download and services</button>
70          <br/>
71          <button>apply for access</button>
72          <br/>
73          <button>help</button>
74          </p>
75          </div>
76      </div>
77      <div class="grid_6">
78        <p>
79          <b>Abstract : </b> {{ abstract }}
80        </p>
81        <p>
82          latest news
83        </p>
84      </div>
85      <div class="grid_3">
86        <p>
87          <b>Status :</b> {{ status }}
88          <br/>
89          <b>Last Update :</b> {{ last_update_year }}-{{ last_update_month }}-{{ last_update_day }}
90        </p>
91        <p>
92          graphics
93        </p>
94        <p>
95          temporal range
96          geographic details
97        </p>
98      </div>
99      <div class="grid_9">
100          <div id="tabs">
101            <!-- tabs -->
102            <ul>
103              <li><a href="#tabs-1">Parameters</a></li>
104              <li><a href="#tabs-2">Format</a></li>
105              <li><a href="#tabs-3">Data Quality</a></li>
106              <li><a href="#tabs-4">Data Lineage</a></li>
107            </ul>
108
109            <!-- tab containers -->
110            <div id="tabs-1">
111              <p>Lorem ipsum dolor sit amet.</p>
112            </div>
113            <div id="tabs-2">
114              <p>Sed do eiusmod tempor incididunt.</p>
115            </div>
116            <div id="tabs-3">
117              <p>Ut enim ad minim veniam</p>
118            </div>
119            <div id="tabs-4">
120              <p>
121                {{ lineage }}
122              </p>
123            </div>
124          </div>
125      </div>
126      <div class="grid_3">
127        <div align="center">
128          <p>
129          <button>related data</button>
130          <br/>
131          <button>project details</button>
132          <br/>
133          <button>data production details</button>
134          <br/>
135          <button>documentation and links</button>
136          <br/>
137          <button>archive content details</button>
138          <br/>
139          <button>file list and checksums</button>
140          </p>
141        </div>
142      </div>
143    </div>
144  </body>
145</html>
Note: See TracBrowser for help on using the repository browser.