Iniital work for new UI

This commit is contained in:
2014-02-19 16:10:57 +10:00
parent d72dbdd9b2
commit ef96af8d46
168 changed files with 27011 additions and 67 deletions

View File

@@ -0,0 +1,68 @@
{% load static %}
{% load dajaxice_templatetags %}
<html>
<head>
<title>{% block title %}3D Sample Viewer{% endblock %}</title>
{% block includes %}
<link href="{% static "three_d_viewer/css/bootstrap.css" %}" rel="stylesheet" media="screen" />
<link href="{% static "three_d_viewer/css/custom.css" %}" rel="stylesheet" media="screen" />
<script type="text/javascript" src="{% static "three_d_viewer/js/jquery-2.0.3.js" %}"></script>
<script type="text/javascript" src="{% static "three_d_viewer/js/bootstrap.min.js" %}"></script>
{% endblock %}
</head>
<body onload={% block loadscript %}""{% endblock %}>
<div class="my-fluid-container">
<div class="page-header">
{% block pageheader %}
<h1>Three-D Virtual Object Library</h1>
<p class="lead">3DVOL</p>
{% endblock %}
</div>
<div class="row my-fluid-container">
<div class="col-sm-3">
{% block sidebar %}
<div class="row">
{% include "three_d_viewer/Old/sampletree.html" %}
</div>
{% endblock %}
</div>
<div id="contentdiv" class="col-sm-9" height="100%">
<div class="row">
{% block content %}
<p><h3>Welcome to 3DVOL Minerals.</h3><br><br>
This website contains a three-dimensional virtual object library of the most important rock-forming minerals making up planet Earth. You will find information on:<br>
<ul>
<li>Which are the most common minerals on Earth?</li>
<li>What are their most important physical and chemical properties?</li>
<li>Where in the Earth and under which physical conditions do they form?</li>
<li>How can they be identified in hand specimen?</li>
</ul>
A mineral is typically defined as an inorganic solid with a particular chemical composition and a characteristic, periodic atomic structure.
This characteristic atomic make-up is often reflected in the macroscopic crystalline structure of a mineral.
The 3D models presented on this website will help you to visualise, study, and memorise these beautiful and often
complex crystal structures as well as other diagnostic features of minerals.
<br>
We hope that you enjoy using 3DVOL.
<br><br>
Your 3DVOL team
<br><br>
Acknowledgements
<br>
3DVOL is funded by the QUT Teaching and Learning Unit and the School of Earth, Environmental, and Biological Sciences. QUT High Performance Computing provides technical support.
</p>
{% endblock %}
</div>
<div class="row">
{% block details %}
{% endblock details %}
</div>
</div>
</div>
</div>
</body>
</html>

View File

@@ -416,10 +416,10 @@ function resizeCanvas() {
{% block sidebar %}
<div class="row">
{% include "three_d_viewer/sampletree.html" %}
{% include "three_d_viewer/Old/sampletree.html" %}
</div>
<div class="row">
{% include "three_d_viewer/question.html" %}
{% include "three_d_viewer/Old/question.html" %}
</div>
{% endblock %}

View File

@@ -0,0 +1 @@
{% extends "three_d_viewer/base.html" %}

View File

@@ -12,7 +12,7 @@
<ul>
<ul class="nav nav-list tree">
{% for category in parent_categories %}
{% include "three_d_viewer/treenode.html" %}
{% include "three_d_viewer/Old/treenode.html" %}
{% endfor %}
</ul>
</ul>

View File

@@ -2,67 +2,62 @@
{% load dajaxice_templatetags %}
<html>
<head>
<title>{% block title %}3D Sample Viewer{% endblock %}</title>
<head>
<meta charset="UTF-8">
<title>3DVOL - 3D Virtual Object Library</title>
<link href="{% static "three_d_viewer/css/styles.css" %}" rel="stylesheet" media="screen" />
<script type="text/javascript" src="{% static "three_d_viewer/js/jquery.min.js" %}"></script>
<script type='text/javascript' src="{% static "three_d_viewer/js/menu_jquery.js.js" %}"></script>
</head>
{% block includes %}
<link href="{% static "three_d_viewer/css/bootstrap.css" %}" rel="stylesheet" media="screen" />
<link href="{% static "three_d_viewer/css/custom.css" %}" rel="stylesheet" media="screen" />
<script type="text/javascript" src="{% static "three_d_viewer/js/jquery-2.0.3.js" %}"></script>
<script type="text/javascript" src="{% static "three_d_viewer/js/bootstrap.min.js" %}"></script>
{% endblock %}
</head>
<body onload={% block loadscript %}""{% endblock %}>
<div class="my-fluid-container">
<div class="page-header">
{% block pageheader %}
<h1>Three-D Virtual Object Library</h1>
<p class="lead">3DVOL</p>
{% endblock %}
</div>
<div class="row my-fluid-container">
<div class="col-sm-3">
{% block sidebar %}
<div class="row">
{% include "three_d_viewer/sampletree.html" %}
</div>
{% endblock %}
</div>
<div id="contentdiv" class="col-sm-9" height="100%">
<div class="row">
{% block content %}
<p><h3>Welcome to 3DVOL Minerals.</h3><br><br>
This website contains a three-dimensional virtual object library of the most important rock-forming minerals making up planet Earth. You will find information on:<br>
<ul>
<li>Which are the most common minerals on Earth?</li>
<li>What are their most important physical and chemical properties?</li>
<li>Where in the Earth and under which physical conditions do they form?</li>
<li>How can they be identified in hand specimen?</li>
</ul>
A mineral is typically defined as an inorganic solid with a particular chemical composition and a characteristic, periodic atomic structure.
This characteristic atomic make-up is often reflected in the macroscopic crystalline structure of a mineral.
The 3D models presented on this website will help you to visualise, study, and memorise these beautiful and often
complex crystal structures as well as other diagnostic features of minerals.
<br>
We hope that you enjoy using 3DVOL.
<br><br>
Your 3DVOL team
<br><br>
Acknowledgements
<br>
3DVOL is funded by the QUT Teaching and Learning Unit and the School of Earth, Environmental, and Biological Sciences. QUT High Performance Computing provides technical support.
</p>
{% endblock %}
</div>
<div class="row">
{% block details %}
{% endblock details %}
</div>
</div>
</div>
</div>
</body>
</html>
<body>
<div id="wrapper">
<div id="container">
<div id="header">
<div id="logo">
<p>3D VOL</p>
</div><!-- CLOSE LOGO !-->
<div id="menuContainer">
<div id='cssmenu'>
<ul>
<li class='active mainitem'><a href='home.html'><span>Home</span></a></li>
<li class='has-sub mainitem'><a href='#'><span>Minerals</span></a>
<ul>
<li class='has-sub'><a href='minerals_theory.html'><span>Theory</span></a>
<ul>
<li><a href='minerals_theory.html#structureofearth'><span>Structure of Earth</span></a></li>
<li><a href='minerals_theory.html#pressureandtemp'><span>Pressure and temperature</span></a></li>
<li class='last'><a href='minerals_theory.html#bowensreactionseries'><span>Bowen's reaction series</span></a></li>
</ul>
</li>
<li><a href='minerals_practice.html'><span>Practice</span></a></li>
<li class='last'><a href='minerals_selftest.html'><span>Self Test</span></a></li>
</ul>
</li>
<li class="mainitem"><a href='#'><span>Rocks</span></a></li>
<li class='last mainitem'><a href='#'><span>Fossils</span></a></li>
</ul>
</div><!-- CLOSE CSSMENU !-->
</div><!-- CLOSE MENUCONTAINER !-->
</div><!-- HEADER !-->
<div id="content">
<div id="pushDown"></div>
<div id="mainText">
<p>Line of placeholder text for introduction to 3DVOL</p>
<p>Line of placeholder text</p>
<p>Line of placeholder text</p>
<p>Line of placeholder text</p>
<p>Line of placeholder text</p>
</div><!-- CLOSE MAINTEXT !-->
</div><!-- CLOSE CONTENT !-->
</div><!-- CLOSE CONTAINER !-->
<div id="push"></div><!-- CLOSE PUSH !-->
</div><!-- CLOSE WRAPPER !-->
<div id="footer">
<ul>
<li><a href="#">Glossary</a></li>
<li>&nbsp; - &nbsp;</li>
<li><a href="#">Acknowledgements</a></li>
</ul>
</div><!-- CLOSE FOOTER !-->
</body>

View File

@@ -1 +1,62 @@
{% extends "three_d_viewer/base.html" %}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>3DVOL - 3D Virtual Object Library</title>
<link rel='stylesheet' type='text/css' href='styles.css' />
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<script type='text/javascript' src='menu_jquery.js'></script>
</head>
<body>
<div id="wrapper">
<div id="container">
<div id="header">
<div id="logo">
<p>3D VOL</p>
</div><!-- CLOSE LOGO !-->
<div id="menuContainer">
<div id='cssmenu'>
<ul>
<li class='active mainitem'><a href='home.html'><span>Home</span></a></li>
<li class='has-sub mainitem'><a href='#'><span>Minerals</span></a>
<ul>
<li class='has-sub'><a href='minerals_theory.html'><span>Theory</span></a>
<ul>
<li><a href='minerals_theory.html#structureofearth'><span>Structure of Earth</span></a></li>
<li><a href='minerals_theory.html#pressureandtemp'><span>Pressure and temperature</span></a></li>
<li class='last'><a href='minerals_theory.html#bowensreactionseries'><span>Bowen's reaction series</span></a></li>
</ul>
</li>
<li><a href='minerals_practice.html'><span>Practice</span></a></li>
<li class='last'><a href='minerals_selftest.html'><span>Self Test</span></a></li>
</ul>
</li>
<li class="mainitem"><a href='#'><span>Rocks</span></a></li>
<li class='last mainitem'><a href='#'><span>Fossils</span></a></li>
</ul>
</div><!-- CLOSE CSSMENU !-->
</div><!-- CLOSE MENUCONTAINER !-->
</div><!-- HEADER !-->
<div id="content">
<div id="pushDown"></div>
<div id="mainText">
<p>Line of placeholder text for introduction to 3DVOL</p>
<p>Line of placeholder text</p>
<p>Line of placeholder text</p>
<p>Line of placeholder text</p>
<p>Line of placeholder text</p>
</div><!-- CLOSE MAINTEXT !-->
</div><!-- CLOSE CONTENT !-->
</div><!-- CLOSE CONTAINER !-->
<div id="push"></div><!-- CLOSE PUSH !-->
</div><!-- CLOSE WRAPPER !-->
<div id="footer">
<ul>
<li><a href="#">Glossary</a></li>
<li>&nbsp; - &nbsp;</li>
<li><a href="#">Acknowledgements</a></li>
</ul>
</div><!-- CLOSE FOOTER !-->
</body>
</html>

View File

@@ -0,0 +1,114 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>3DVOL - Minerals/Practice</title>
<link rel='stylesheet' type='text/css' href='styles.css' />
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<script type='text/javascript' src='menu_jquery.js'></script>
<script>
$(document).ready(function(){
$('a').click(function () {
var divname= this.name;
$("#"+divname).show("slow").siblings().hide("slow");
});
});
</script>
</head>
<body>
<div id="wrapper">
<div id="container">
<div id="header">
<div id="logo">
<p>3D VOL</p>
</div>
<div id="menuContainer">
<div id='cssmenu'>
<ul>
<li class='active mainitem'><a href='home.html'><span>Home</span></a></li>
<li class='has-sub mainitem'><a href='#'><span>Minerals</span></a>
<ul>
<li class='has-sub'><a href='minerals_theory.html'><span>Theory</span></a>
<ul>
<li><a href='minerals_theory.html#structureofearth'><span>Structure of Earth</span></a></li>
<li><a href='minerals_theory.html#pressureandtemp'><span>Pressure and temperature</span></a></li>
<li class='last'><a href='minerals_theory.html#bowensreactionseries'><span>Bowen's reaction series</span></a></li>
</ul>
</li>
<li><a href='#'><span>Practice</span></a></li>
<li class='last'><a href='minerals_selftest.html'><span>Self Test</span></a></li>
</ul>
</li>
<li class="mainitem"><a href='#'><span>Rocks</span></a></li>
<li class='last mainitem'><a href='#'><span>Fossils</span></a></li>
</ul>
</div>
</div>
<div id="content">
<div id="sidebar">
<div id='mineralMenu'>
<ul>
<li class="has-sub mainitem"><a href="#">Select a mineral</a>
<ul>
<li><a href='#mineralOne' name="mineralOne"><span>Mineral 1</span></a></li>
<li><a href='#mineralTwo' name="mineralTwo"><span>Mineral 2</span></a></li>
<li><a href='#mineralThree' name="mineralThree"><span>Mineral 3</span></a></li>
<li><a href='#mineralFour' name="mineralFour"><span>Mineral 4</span></a></li>
<li class="last"><a href='#mineralFive' name="mineralFive"><span>Mineral 5</span></a></li>
</ul>
</li>
</ul>
</div><!-- close MINERALMENU !-->
<div id="mineralContainer">
<div id="mineralOne" style="display:none">
<h1 class="subHeadings">Mineral name here</h1>
<h2 class="theoryHeadings">Physical properties</h2>
<p>Info about the mineral here</p>
<p>Info about the mineral here</p>
<p>Info about the mineral here</p>
<h2 class="theoryHeadings">Diagnostic features</h2>
<p>Info about the mineral here</p>
<p>Info about the mineral here</p>
<p>Info about the mineral here</p>
<h2 class="theoryHeadings">Geological significance</h2>
<p>Info about the mineral here</p>
<p>Info about the mineral here</p>
<p>Info about the mineral here</p>
</div>
<div id="mineralTwo" style="display:none">
<p>Info about mineral 2</p>
</div>
<div id="mineralThree" style="display:none">
<p>Info about mineral 3</p>
</div>
<div id="mineralFour" style="display:none">
<p>Info about mineral 4</p>
</div>
<div id="mineralFive" style="display:none">
<p>Info about mineral 5</p>
</div>
</div>
</div>
<div id="virtualObject">
<img src="images/rock_example.jpeg" class="example" />
</div>
</div>
</div>
<div id="push"></div><!-- CLOSE PUSH !-->
</div><!-- CLOSE WRAPPER !-->
<div id="footer">
<ul>
<li><a href="#">Glossary</a></li>
<li>&nbsp; - &nbsp;</li>
<li><a href="#">Acknowledgements</a></li>
</ul>
</div><!-- CLOSE FOOTER !-->
</body>
</html>

View File

@@ -0,0 +1,66 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>3DVOL - Minerals/Self Test</title>
<link rel='stylesheet' type='text/css' href='styles.css' />
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<script type='text/javascript' src='menu_jquery.js'></script>
</head>
<body>
<div id="wrapper">
<div id="container">
<div id="header">
<div id="logo">
<p>3D VOL</p>
</div>
<div id="menuContainer">
<div id='cssmenu'>
<ul>
<li class='active mainitem'><a href='home.html'><span>Home</span></a></li>
<li class='has-sub mainitem'><a href='#'><span>Minerals</span></a>
<ul>
<li class='has-sub'><a href='minerals_theory.html'><span>Theory</span></a>
<ul>
<li><a href='minerals_theory.html#structureofearth'><span>Structure of Earth</span></a></li>
<li><a href='minerals_theory.html#pressureandtemp'><span>Pressure and temperature</span></a></li>
<li class='last'><a href='minerals_theory.html#bowensreactionseries'><span>Bowen's reaction series</span></a></li>
</ul>
</li>
<li><a href='minerals_practice.html'><span>Practice</span></a></li>
<li class='last'><a href='minerals_selftest.html'><span>Self Test</span></a></li>
</ul>
</li>
<li class="mainitem"><a href='#'><span>Rocks</span></a></li>
<li class='last mainitem'><a href='#'><span>Fossils</span></a></li>
</ul>
</div>
</div>
<div id="content">
<div id="pushDownTwo"></div>
<div id="mainText">
<h1 class="subHeadings">Self Test</h1>
<p>Line of placeholder text for explaining the self-test section.</p>
<p>Line of placeholder text</p>
<p>Line of placeholder text</p>
<p>Line of placeholder text</p>
<p>Line of placeholder text</p>
<div id="pushDownThree"></div>
</div>
</div>
</div>
<div id="push"></div><!-- CLOSE PUSH !-->
</div><!-- CLOSE WRAPPER !-->
<div id="footer">
<ul>
<li><a href="#">Glossary</a></li>
<li>&nbsp; - &nbsp;</li>
<li><a href="#">Acknowledgements</a></li>
</ul>
</div><!-- CLOSE FOOTER !-->
</body>
</html>

View File

@@ -0,0 +1,77 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>3DVOL - Minerals/Theory</title>
<link rel='stylesheet' type='text/css' href='styles.css' />
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<script type='text/javascript' src='menu_jquery.js'></script>
</head>
<body>
<div id="wrapper">
<div id="container" style="height:auto !important;">
<div id="header">
<div id="logo">
<p>3D VOL</p>
</div>
<div id="menuContainer">
<div id='cssmenu'>
<ul>
<li class='active mainitem'><a href='home.html'><span>Home</span></a></li>
<li class='has-sub mainitem'><a href='#'><span>Minerals</span></a>
<ul>
<li class='has-sub'><a href='#'><span>Theory</span></a>
<ul>
<li><a href='#structureofearth'><span>Structure of Earth</span></a></li>
<li><a href='#pressureandtemp'><span>Pressure and temperature</span></a></li>
<li class='last'><a href='#bowensreactionseries'><span>Bowen's reaction series</span></a></li>
</ul>
</li>
<li><a href='minerals_practice.html'><span>Practice</span></a></li>
<li class='last'><a href='minerals_selftest.html'><span>Self Test</span></a></li>
</ul>
</li>
<li class="mainitem"><a href='#'><span>Rocks</span></a></li>
<li class='last mainitem'><a href='#'><span>Fossils</span></a></li>
</ul>
</div>
</div>
<div id="content">
<div id="pushDownTwo"></div>
<div id="mainText">
<h1 class="subHeadings">Theory</h1>
<p>Text about the theory section</p>
<h2 class="theoryHeadings" id="structureofearth">Structure of Earth</h2>
<p>Line of placeholder text</p>
<p>Line of placeholder text</p>
<p>Line of placeholder text</p>
<p>Line of placeholder text</p>
<p>Line of placeholder text</p>
<p>Line of placeholder text</p>
<p>Line of placeholder text</p>
<p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p>
<h2 class="theoryHeadings" id="pressureandtemp">Pressure and temperature</h2>
<p>Line of placeholder text</p>
<p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p>
<h2 class="theoryHeadings" id="bowensreactionseries">Bowen's reaction series</h2>
<p>Line of placeholder text</p>
<p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p>
<div id="pushDownThree"></div>
</div>
</div>
</div>
<div id="push"></div><!-- CLOSE PUSH !-->
</div><!-- CLOSE WRAPPER !-->
<div id="footer">
<ul>
<li><a href="#">Glossary</a></li>
<li>&nbsp; - &nbsp;</li>
<li><a href="#">Acknowledgements</a></li>
</ul>
</div><!-- CLOSE FOOTER !-->
</body>
</html>