Iniital work for new UI

This commit is contained in:
shane committed 2014-02-19 16:10:57 +10:00
1 parent d72dbdd9b2
commit ef96af8d46
168 files changed
+27011 -67

No files matched your search

@@ -0,0 +1,881 @@
@charset "UTF-8";
/* RESETS & CUSTOM FONT DECLARATIONS */
* {
margin: 0;
padding: 0;
}
@font-face {
font-family: 'quicksandbold';
src: url('fonts/qcksnd-bold-webfont.eot');
src: url('fonts/qcksnd-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/qcksnd-bold-webfont.woff') format('woff'),
url('fonts/qcksnd-bold-webfont.ttf') format('truetype'),
url('fonts/qcksnd-bold-webfont.svg#quicksandbold') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'quicksandbold_italic';
src: url('fonts/qcksnd-bolditalic-webfont.eot');
src: url('fonts/qcksnd-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/qcksnd-bolditalic-webfont.woff') format('woff'),
url('fonts/qcksnd-bolditalic-webfont.ttf') format('truetype'),
url('fonts/qcksnd-bolditalic-webfont.svg#quicksandbold_italic') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'quicksanddash';
src: url('fonts/qcksnd-dash-webfont.eot');
src: url('fonts/qcksnd-dash-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/qcksnd-dash-webfont.woff') format('woff'),
url('fonts/qcksnd-dash-webfont.ttf') format('truetype'),
url('fonts/qcksnd-dash-webfont.svg#quicksanddash') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'quicksanditalic';
src: url('fonts/qcksnd-italic-webfont.eot');
src: url('fonts/qcksnd-italic-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/qcksnd-italic-webfont.woff') format('woff'),
url('fonts/qcksnd-italic-webfont.ttf') format('truetype'),
url('fonts/qcksnd-italic-webfont.svg#quicksanditalic') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'quicksandlight';
src: url('fonts/qcksnd-light-webfont.eot');
src: url('fonts/qcksnd-light-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/qcksnd-light-webfont.woff') format('woff'),
url('fonts/qcksnd-light-webfont.ttf') format('truetype'),
url('fonts/qcksnd-light-webfont.svg#quicksandlight') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'quicksandlight_italic';
src: url('fonts/qcksnd-lightitalic-webfont.eot');
src: url('fonts/qcksnd-lightitalic-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/qcksnd-lightitalic-webfont.woff') format('woff'),
url('fonts/qcksnd-lightitalic-webfont.ttf') format('truetype'),
url('fonts/qcksnd-lightitalic-webfont.svg#quicksandlight_italic') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'quicksandregular';
src: url('fonts/qcksnd-regular-webfont.eot');
src: url('fonts/qcksnd-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/qcksnd-regular-webfont.woff') format('woff'),
url('fonts/qcksnd-regular-webfont.ttf') format('truetype'),
url('fonts/qcksnd-regular-webfont.svg#quicksandregular') format('svg');
font-weight: normal;
font-style: normal;
}
/* GENERAL STRUCTURE */
html, body {
height: 100%;
}
body {
background-image:url('images/background_tile_lightest.jpg');
background-repeat: repeat;
background-attachment: scroll;
}
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -55px; /* the bottom margin is the negative value of the footer's height */
}
#footer, #push {
height: 55px; /* .push must be the same height as .footer */
clear: both;
}
#footer {
width: 100%;
margin-left: auto;
background-color: #CCCCCC;
z-index: 900;
}
#footer ul {
list-style-type: none;
text-align: center;
padding: 15px 20px;
}
#footer li {
display: inline;
text-align: center;
font-family: 'quicksandbold', Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #7a8189;
text-transform: uppercase;
}
#footer a {
text-decoration: none;
display: inline;
text-align: center;
font-family: 'quicksandbold', Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #7a8189;
text-transform: uppercase;
}
#footer a:hover {
text-decoration: none;
display: inline;
text-align: center;
font-family: 'quicksandbold', Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
text-transform: uppercase;
-webkit-transition: color 0.25s ease-out;
-moz-transition: color 0.25s ease-out;
-ms-transition: color 0.25s ease-out;
-o-transition: color 0.25s ease-out;
transition: color 0.25s ease-out;
}
#container {
width: 100%;
height:91.2vh;
background-image:url('images/background_tile_lightest.jpg');
background-repeat: repeat;
background-attachment: scroll;
}
#header {
width: 100%;
height: auto;
}
#logo {
width: 20%;
height: 44px;
background-color: #FFFFFF;
text-align: center;
float: left;
}
#logo p {
padding-top: 5%;
}
#menuContainer {
width: 80%;
height: auto;
float: right;
}
#mainText {
width: 70%;
padding-left:7px;
margin-left: auto;
margin-right: auto;
background: rgb(255, 255, 255);
/* RGBa with 0.6 opacity */
background: rgba(255, 255, 255, 0.5);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
#sidebar {
width: 20%;
height: auto;
float: left;
}
#virtualObject {
width: 80%;
height: auto;
float: right;
}
#mineralOne,
#mineralTwo,
#mineralThree,
#mineralFour,
#mineralFive {
float: left;
width: 100%;
padding-left: 5px;
padding-top: 5px;
}
#pushDown {
width: 100%;
padding-bottom: 40vh;
}
#pushDownTwo {
width: 100%;
padding-bottom: 60px;
}
#pushDownThree {
width: 100%;
padding-bottom: 10px;
}
/* TEXT STYLES */
#mainText p {
font-size: 12pt;
font-family: 'quicksandregular', Helvetica, sans-serif;
line-height: 16pt;
text-align: left;
color: #000;
}
#mineralContainer p {
font-size: 12pt;
font-family: 'quicksandregular', Helvetica, sans-serif;
line-height: 16pt;
text-align: left;
color: #000;
}
h1.subHeadings {
font-size: 22pt;
font-family: 'quicksandbold', Helvetica, sans-serif;
text-transform: uppercase;
letter-spacing: 3px;
line-height: 26pt;
text-align: left;
padding-bottom: 5px;
color: #000;
}
h2.theoryHeadings {
font-size: 14pt;
font-family: 'quicksandbold', Helvetica, sans-serif;
line-height: 18pt;
text-align: left;
color: #000;
padding-top: 5px;
padding-bottom: 5px;
}
img.example {
width: 100%;
height: auto;
}
/* MENU SPECIFIC STYLES */
#cssmenu {
position: relative;
height: 44px;
background: #CCCCCC;
width: auto;
}
#cssmenu ul {
list-style: none;
padding: 0;
margin: 0;
line-height: 1;
}
#cssmenu > ul {
position: relative;
display: block;
background: #CCCCCC;
height: 32px;
width: 100%;
z-index: 500;
}
#cssmenu > ul > li {
display: block;
position: relative;
float: left;
margin: 0;
padding: 0;
}
#cssmenu > ul > li.mainitem { /*CUSTOM CLASS TEST*/
width: 25%;
}
#cssmenu > ul > #menu-button {
display: none;
}
#cssmenu ul li a {
display: block;
font-family: 'quicksandbold', Helvetica, sans-serif;
text-decoration: none;
}
#cssmenu > ul > li > a {
font-size: 14px;
font-weight: bold;
padding: 15px 20px;
color: #7a8189;
text-transform: uppercase;
-webkit-transition: color 0.25s ease-out;
-moz-transition: color 0.25s ease-out;
-ms-transition: color 0.25s ease-out;
-o-transition: color 0.25s ease-out;
transition: color 0.25s ease-out;
}
#cssmenu > ul > li.has-sub > a {
padding-right: 32px;
}
#cssmenu > ul > li:hover > a {
color: #ffffff;
}
#cssmenu li.has-sub::after {
display: block;
content: '';
position: absolute;
width: 0;
height: 0;
}
#cssmenu > ul > li.has-sub::after {
right: 10px;
top: 20px;
border: 5px solid transparent;
border-top-color: #7a8189;
}
#cssmenu > ul > li:hover::after {
border-top-color: #ffffff;
}
#indicatorContainer {
position: absolute;
height: 12px;
width: 100%;
bottom: 0px;
overflow: hidden;
z-index: -1;
}
#pIndicator {
position: absolute;
height: 0;
width: 100%;
border: 12px solid transparent;
border-top-color: #2b2f3a;
z-index: -2;
-webkit-transition: left .25s ease;
-moz-transition: left .25s ease;
-ms-transition: left .25s ease;
-o-transition: left .25s ease;
transition: left .25s ease;
}
#cIndicator {
position: absolute;
height: 0;
width: 100%;
border: 12px solid transparent;
border-top-color: #2b2f3a;
top: -12px;
right: 100%;
z-index: -2;
}
#cssmenu ul ul {
position: absolute;
left: -9999px;
top: 70px;
opacity: 0;
-webkit-transition: opacity .3s ease, top .25s ease;
-moz-transition: opacity .3s ease, top .25s ease;
-ms-transition: opacity .3s ease, top .25s ease;
-o-transition: opacity .3s ease, top .25s ease;
transition: opacity .3s ease, top .25s ease;
z-index: 1000;
}
#cssmenu ul ul ul {
top: 37px;
padding-left: 5px;
}
#cssmenu ul ul li {
position: relative;
}
#cssmenu > ul > li:hover > ul {
left: auto;
top: 44px;
opacity: 1;
}
#cssmenu ul ul li:hover > ul {
left: 170px;
top: 0;
opacity: 1;
}
#cssmenu ul ul li a {
width: 130px;
border-bottom: 1px solid #eee;
padding: 10px 20px;
font-size: 12px;
color: #9ea2a5;
background: #fff;
-webkit-transition: all .35s ease;
-moz-transition: all .35s ease;
-ms-transition: all .35s ease;
-o-transition: all .35s ease;
transition: all .35s ease;
}
#cssmenu ul ul li:hover > a {
background: #f6f6f6;
color: #8c9195;
}
#cssmenu ul ul li:last-child > a,
#cssmenu ul ul li.last > a {
border-bottom: 0;
}
.submenuArrow {
border: 6px solid transparent;
width: 0;
height: 0;
border-bottom-color: #fff;
position: absolute;
top: -12px;
}
#cssmenu ul ul li.has-sub::after {
border: 4px solid transparent;
border-left-color: #9ea2a5;
right: 10px;
top: 12px;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
-webkit-transition: -webkit-transform 0.2s ease, right 0.2s ease;
}
#cssmenu ul ul li.has-sub:hover::after {
border-left-color: #fff;
right: -5px;
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
@media all and (max-width: 800px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
#cssmenu {
width: auto;
}
#cssmenu ul {
width: auto;
}
#cssmenu .submenuArrow,
#cssmenu #indicatorContainer {
display: none;
}
#cssmenu > ul {
height: auto;
display: block;
}
#cssmenu > ul > li {
float: none;
}
#cssmenu li,
#cssmenu > ul > li {
display: none;
}
#cssmenu ul ul,
#cssmenu ul ul ul,
#cssmenu ul > li:hover > ul,
#cssmenu ul ul > li:hover > ul {
position: relative;
left: auto;
top: auto;
opacity: 1;
padding-left: 0;
}
#cssmenu ul .has-sub::after {
display: none;
}
#cssmenu ul li a {
padding: 12px 20px;
}
#cssmenu ul ul li a {
border: 0;
background: none;
width: auto;
padding: 8px 35px;
}
#cssmenu ul ul li:hover > a {
background: none;
color: #8c9195;
}
#cssmenu ul ul ul a {
padding: 8px 50px;
}
#cssmenu ul ul ul ul a {
padding: 8px 65px;
}
#cssmenu ul ul ul ul ul a {
padding: 8px 80px;
}
#cssmenu ul ul ul ul ul ul a {
padding: 8px 95px;
}
#cssmenu > ul > #menu-button {
display: block;
cursor: pointer;
}
#cssmenu #menu-button > a {
padding: 14px 20px;
}
#cssmenu ul.open li,
#cssmenu > ul.open > li {
display: block;
}
#cssmenu > ul.open > li#menu-button > a {
color: #fff;
border-bottom: 1px solid rgba(150, 150, 150, 0.1);
}
#cssmenu #menu-button::after {
display: block;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 2px solid #7a8189;
border-bottom: 2px solid #7a8189;
right: 20px;
top: 15px;
}
#cssmenu #menu-button::before {
display: block;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 2px solid #7a8189;
right: 20px;
top: 25px;
}
#cssmenu ul.open #menu-button::after,
#cssmenu ul.open #menu-button::before {
border-color: #fff;
}
}
#mineralMenu {
position: relative;
height: 44px;
background: #CCCCCC;
width: auto;
}
#mineralMenu ul {
list-style: none;
padding: 0;
margin: 0;
line-height: 1;
}
#mineralMenu > ul {
position: relative;
display: block;
background: #CCCCCC;
height: 32px;
width: 100%;
z-index: 500;
}
#mineralMenu > ul > li {
display: block;
position: relative;
float: left;
margin: 0;
padding: 0;
}
/*CUSTOM CLASS TEST*/
#mineralMenu > ul > li.mainitem {
width: 100%;
}
#mineralMenu > ul > #menu-button {
display: none;
}
#mineralMenu ul li a {
display: block;
font-family: 'quicksandbold', Helvetica, sans-serif;
text-decoration: none;
}
#mineralMenu > ul > li > a {
font-size: 14px;
font-weight: bold;
padding: 15px 20px;
color: #7a8189;
text-transform: uppercase;
-webkit-transition: color 0.25s ease-out;
-moz-transition: color 0.25s ease-out;
-ms-transition: color 0.25s ease-out;
-o-transition: color 0.25s ease-out;
transition: color 0.25s ease-out;
}
#mineralMenu > ul > li.has-sub > a {
padding-right: 32px;
}
#mineralMenu > ul > li:hover > a {
color: #ffffff;
}
#mineralMenu li.has-sub::after {
display: block;
content: '';
position: absolute;
width: 0;
height: 0;
}
#mineralMenu > ul > li.has-sub::after {
right: 10px;
top: 20px;
border: 5px solid transparent;
border-top-color: #7a8189;
}
#mineralMenu > ul > li:hover::after {
border-top-color: #ffffff;
}
#indicatorContainer {
position: absolute;
height: 12px;
width: 100%;
bottom: 0px;
overflow: hidden;
z-index: -1;
}
#pIndicator {
position: absolute;
height: 0;
width: 100%;
border: 12px solid transparent;
border-top-color: #2b2f3a;
z-index: -2;
-webkit-transition: left .25s ease;
-moz-transition: left .25s ease;
-ms-transition: left .25s ease;
-o-transition: left .25s ease;
transition: left .25s ease;
}
#cIndicator {
position: absolute;
height: 0;
width: 100%;
border: 12px solid transparent;
border-top-color: #2b2f3a;
top: -12px;
right: 100%;
z-index: -2;
}
#mineralMenu ul ul {
position: absolute;
left: -9999px;
top: 70px;
opacity: 0;
-webkit-transition: opacity .3s ease, top .25s ease;
-moz-transition: opacity .3s ease, top .25s ease;
-ms-transition: opacity .3s ease, top .25s ease;
-o-transition: opacity .3s ease, top .25s ease;
transition: opacity .3s ease, top .25s ease;
z-index: 1000;
}
#mineralMenu ul ul ul {
top: 37px;
padding-left: 5px;
}
#mineralMenu ul ul li {
position: relative;
}
#mineralMenu > ul > li:hover > ul {
left: auto;
top: 44px;
opacity: 1;
}
#mineralMenu ul ul li:hover > ul {
left: 170px;
top: 0;
opacity: 1;
}
#mineralMenu ul ul li a {
width: 130px;
border-bottom: 1px solid #eee;
padding: 10px 20px;
font-size: 10px;
color: #9ea2a5;
background: #fff;
-webkit-transition: all .35s ease;
-moz-transition: all .35s ease;
-ms-transition: all .35s ease;
-o-transition: all .35s ease;
transition: all .35s ease;
}
#mineralMenu ul ul li:hover > a {
background: #f6f6f6;
color: #8c9195;
}
#mineralMenu ul ul li:last-child > a,
#mineralMenu ul ul li.last > a {
border-bottom: 0;
}
.submenuArrow {
border: 6px solid transparent;
width: 0;
height: 0;
border-bottom-color: #fff;
position: absolute;
top: -12px;
}
#mineralMenu ul ul li.has-sub::after {
border: 4px solid transparent;
border-left-color: #9ea2a5;
right: 10px;
top: 12px;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
-webkit-transition: -webkit-transform 0.2s ease, right 0.2s ease;
}
#mineralMenu ul ul li.has-sub:hover::after {
border-left-color: #fff;
right: -5px;
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
@media all and (max-width: 800px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
#mineralMenu {
width: auto;
}
#mineralMenu ul {
width: auto;
}
#mineralMenu .submenuArrow,
#mineralMenu #indicatorContainer {
display: none;
}
#mineralMenu > ul {
height: auto;
display: block;
}
#mineralMenu > ul > li {
float: none;
}
#mineralMenu li,
#mineralMenu > ul > li {
display: none;
}
#mineralMenu ul ul,
#mineralMenu ul ul ul,
#mineralMenu ul > li:hover > ul,
#mineralMenu ul ul > li:hover > ul {
position: relative;
left: auto;
top: auto;
opacity: 1;
padding-left: 0;
}
#mineralMenu ul .has-sub::after {
display: none;
}
#mineralMenu ul li a {
padding: 12px 20px;
}
#mineralMenu ul ul li a {
border: 0;
background: none;
width: auto;
padding: 8px 35px;
}
#mineralMenu ul ul li:hover > a {
background: none;
color: #8c9195;
}
#mineralMenu ul ul ul a {
padding: 8px 50px;
}
#mineralMenu ul ul ul ul a {
padding: 8px 65px;
}
#mineralMenu ul ul ul ul ul a {
padding: 8px 80px;
}
#mineralMenu ul ul ul ul ul ul a {
padding: 8px 95px;
}
#mineralMenu > ul > #menu-button {
display: block;
cursor: pointer;
}
#mineralMenu #menu-button > a {
padding: 14px 20px;
}
#mineralMenu ul.open li,
#mineralMenu > ul.open > li {
display: block;
}
#mineralMenu > ul.open > li#menu-button > a {
color: #fff;
border-bottom: 1px solid rgba(150, 150, 150, 0.1);
}
#mineralMenu #menu-button::after {
display: block;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 2px solid #7a8189;
border-bottom: 2px solid #7a8189;
right: 20px;
top: 15px;
}
#mineralMenu #menu-button::before {
display: block;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 2px solid #7a8189;
/*right: 20px;
top: 25px;*/
}
#mineralMenu ul.open #menu-button::after,
#mineralMenu ul.open #menu-button::before {
border-color: #fff;
}
}
+6
View File
@@ -0,0 +1,6 @@
/*! jQuery v1.10.2 | (c) 2005, 2013 jQuery Foundation, Inc. | jquery.org/license
//@ sourceMappingURL=jquery.min.map
*/
(function(e,t){var n,r,i=typeof t,o=e.location,a=e.document,s=a.documentElement,l=e.jQuery,u=e.$,c={},p=[],f="1.10.2",d=p.concat,h=p.push,g=p.slice,m=p.indexOf,y=c.toString,v=c.hasOwnProperty,b=f.trim,x=function(e,t){return new x.fn.init(e,t,r)},w=/[+-]?(?:\d*\.|)\d+(?:[eE][+-]?\d+|)/.source,T=/\S+/g,C=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,N=/^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/,k=/^<(\w+)\s*\/?>(?:<\/\1>|)$/,E=/^[\],:{}\s]*$/,S=/(?:^|:|,)(?:\s*\[)+/g,A=/\\(?:["\\\/bfnrt]|u[\da-fA-F]{4})/g,j=/"[^"\\\r\n]*"|true|false|null|-?(?:\d+\.|)\d+(?:[eE][+-]?\d+|)/g,D=/^-ms-/,L=/-([\da-z])/gi,H=function(e,t){return t.toUpperCase()},q=function(e){(a.addEventListener||"load"===e.type||"complete"===a.readyState)&&(_(),x.ready())},_=function(){a.addEventListener?(a.removeEventListener("DOMContentLoaded",q,!1),e.removeEventListener("load",q,!1)):(a.detachEvent("onreadystatechange",q),e.detachEvent("onload",q))};x.fn=x.prototype={jquery:f,constructor:x,init:function(e,n,r){var i,o;if(!e)return this;if("string"==typeof e){if(i="<"===e.charAt(0)&&">"===e.charAt(e.length-1)&&e.length>=3?[null,e,null]:N.exec(e),!i||!i[1]&&n)return!n||n.jquery?(n||r).find(e):this.constructor(n).find(e);if(i[1]){if(n=n instanceof x?n[0]:n,x.merge(this,x.parseHTML(i[1],n&&n.nodeType?n.ownerDocument||n:a,!0)),k.test(i[1])&&x.isPlainObject(n))for(i in n)x.isFunction(this[i])?this[i](n[i]):this.attr(i,n[i]);return this}if(o=a.getElementById(i[2]),o&&o.parentNode){if(o.id!==i[2])return r.find(e);this.length=1,this[0]=o}return this.context=a,this.selector=e,this}return e.nodeType?(this.context=this[0]=e,this.length=1,this):x.isFunction(e)?r.ready(e):(e.selector!==t&&(this.selector=e.selector,this.context=e.context),x.makeArray(e,this))},selector:"",length:0,toArray:function(){return g.call(this)},get:function(e){return null==e?this.toArray():0>e?this[this.length+e]:this[e]},pushStack:function(e){var t=x.merge(this.constructor(),e);return t.prevObject=this,t.context=this.context,t},each:function(e,t){return x.each(this,e,t)},ready:function(e){return x.ready.promise().done(e),this},slice:function(){return this.pushStack(g.apply(this,arguments))},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},eq:function(e){var t=this.length,n=+e+(0>e?t:0);return this.pushStack(n>=0&&t>n?[this[n]]:[])},map:function(e){return this.pushStack(x.map(this,function(t,n){return e.call(t,n,t)}))},end:function(){return this.prevObject||this.constructor(null)},push:h,sort:[].sort,splice:[].splice},x.fn.init.prototype=x.fn,x.extend=x.fn.extend=function(){var e,n,r,i,o,a,s=arguments[0]||{},l=1,u=arguments.length,c=!1;for("boolean"==typeof s&&(c=s,s=arguments[1]||{},l=2),"object"==typeof s||x.isFunction(s)||(s={}),u===l&&(s=this,--l);u>l;l++)if(null!=(o=arguments[l]))for(i in o)e=s[i],r=o[i],s!==r&&(c&&r&&(x.isPlainObject(r)||(n=x.isArray(r)))?(n?(n=!1,a=e&&x.isArray(e)?e:[]):a=e&&x.isPlainObject(e)?e:{},s[i]=x.extend(c,a,r)):r!==t&&(s[i]=r));return s},x.extend({expando:"jQuery"+(f+Math.random()).replace(/\D/g,""),noConflict:function(t){return e.$===x&&(e.$=u),t&&e.jQuery===x&&(e.jQuery=l),x},isReady:!1,readyWait:1,holdReady:function(e){e?x.readyWait++:x.ready(!0)},ready:function(e){if(e===!0?!--x.readyWait:!x.isReady){if(!a.body)return setTimeout(x.ready);x.isReady=!0,e!==!0&&--x.readyWait>0||(n.resolveWith(a,[x]),x.fn.trigger&&x(a).trigger("ready").off("ready"))}},isFunction:function(e){return"function"===x.type(e)},isArray:Array.isArray||function(e){return"array"===x.type(e)},isWindow:function(e){return null!=e&&e==e.window},isNumeric:function(e){return!isNaN(parseFloat(e))&&isFinite(e)},type:function(e){return null==e?e+"":"object"==typeof e||"function"==typeof e?c[y.call(e)]||"object":typeof e},isPlainObject:function(e){var n;if(!e||"object"!==x.type(e)||e.nodeType||x.isWindow(e))return!1;try{if(e.constructor&&!v.call(e,"constructor")&&!v.call(e.constructor.prototype,"isPrototypeOf"))return!1}catch(r){return!1}if(x.support.ownLast)for(n in e)return v.call(e,n);for(n in e);return n===t||v.call(e,n)},isEmptyObject:function(e){var t;for(t in e)return!1;return!0},error:function(e){throw Error(e)},parseHTML:function(e,t,n){if(!e||"string"!=typeof e)return null;"boolean"==typeof t&&(n=t,t=!1),t=t||a;var r=k.exec(e),i=!n&&[];return r?[t.createElement(r[1])]:(r=x.buildFragment([e],t,i),i&&x(i).remove(),x.merge([],r.childNodes))},parseJSON:function(n){return e.JSON&&e.JSON.parse?e.JSON.parse(n):null===n?n:"string"==typeof n&&(n=x.trim(n),n&&E.test(n.replace(A,"@").replace(j,"]").replace(S,"")))?Function("return "+n)():(x.error("Invalid JSON: "+n),t)},parseXML:function(n){var r,i;if(!n||"string"!=typeof n)return null;try{e.DOMParser?(i=new DOMParser,r=i.parseFromString(n,"text/xml")):(r=new ActiveXObject("Microsoft.XMLDOM"),r.async="false",r.loadXML(n))}catch(o){r=t}return r&&r.documentElement&&!r.getElementsByTagName("parsererror").length||x.error("Invalid XML: "+n),r},noop:function(){},globalEval:function(t){t&&x.trim(t)&&(e.execScript||function(t){e.eval.call(eLine truncated
}({});var B=/(?:\{[\s\S]*\}|\[[\s\S]*\])$/,P=/([A-Z])/g;function R(e,n,r,i){if(x.acceptData(e)){var o,a,s=x.expando,l=e.nodeType,u=l?x.cache:e,c=l?e[s]:e[s]&&s;if(c&&u[c]&&(i||u[c].data)||r!==t||"string"!=typeof n)return c||(c=l?e[s]=p.pop()||x.guid++:s),u[c]||(u[c]=l?{}:{toJSON:x.noop}),("object"==typeof n||"function"==typeof n)&&(i?u[c]=x.extend(u[c],n):u[c].data=x.extend(u[c].data,n)),a=u[c],i||(a.data||(a.data={}),a=a.data),r!==t&&(a[x.camelCase(n)]=r),"string"==typeof n?(o=a[n],null==o&&(o=a[x.camelCase(n)])):o=a,o}}function W(e,t,n){if(x.acceptData(e)){var r,i,o=e.nodeType,a=o?x.cache:e,s=o?e[x.expando]:x.expando;if(a[s]){if(t&&(r=n?a[s]:a[s].data)){x.isArray(t)?t=t.concat(x.map(t,x.camelCase)):t in r?t=[t]:(t=x.camelCase(t),t=t in r?[t]:t.split(" ")),i=t.length;while(i--)delete r[t[i]];if(n?!I(r):!x.isEmptyObject(r))return}(n||(delete a[s].data,I(a[s])))&&(o?x.cleanData([e],!0):x.support.deleteExpando||a!=a.window?delete a[s]:a[s]=null)}}}x.extend({cache:{},noData:{applet:!0,embed:!0,object:"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"},hasData:function(e){return e=e.nodeType?x.cache[e[x.expando]]:e[x.expando],!!e&&!I(e)},data:function(e,t,n){return R(e,t,n)},removeData:function(e,t){return W(e,t)},_data:function(e,t,n){return R(e,t,n,!0)},_removeData:function(e,t){return W(e,t,!0)},acceptData:function(e){if(e.nodeType&&1!==e.nodeType&&9!==e.nodeType)return!1;var t=e.nodeName&&x.noData[e.nodeName.toLowerCase()];return!t||t!==!0&&e.getAttribute("classid")===t}}),x.fn.extend({data:function(e,n){var r,i,o=null,a=0,s=this[0];if(e===t){if(this.length&&(o=x.data(s),1===s.nodeType&&!x._data(s,"parsedAttrs"))){for(r=s.attributes;r.length>a;a++)i=r[a].name,0===i.indexOf("data-")&&(i=x.camelCase(i.slice(5)),$(s,i,o[i]));x._data(s,"parsedAttrs",!0)}return o}return"object"==typeof e?this.each(function(){x.data(this,e)}):arguments.length>1?this.each(function(){x.data(this,e,n)}):s?$(s,e,x.data(s,e)):null},removeData:function(e){return this.each(function(){x.removeData(this,e)})}});function $(e,n,r){if(r===t&&1===e.nodeType){var i="data-"+n.replace(P,"-$1").toLowerCase();if(r=e.getAttribute(i),"string"==typeof r){try{r="true"===r?!0:"false"===r?!1:"null"===r?null:+r+""===r?+r:B.test(r)?x.parseJSON(r):r}catch(o){}x.data(e,n,r)}else r=t}return r}function I(e){var t;for(t in e)if(("data"!==t||!x.isEmptyObject(e[t]))&&"toJSON"!==t)return!1;return!0}x.extend({queue:function(e,n,r){var i;return e?(n=(n||"fx")+"queue",i=x._data(e,n),r&&(!i||x.isArray(r)?i=x._data(e,n,x.makeArray(r)):i.push(r)),i||[]):t},dequeue:function(e,t){t=t||"fx";var n=x.queue(e,t),r=n.length,i=n.shift(),o=x._queueHooks(e,t),a=function(){x.dequeue(e,t)};"inprogress"===i&&(i=n.shift(),r--),i&&("fx"===t&&n.unshift("inprogress"),delete o.stop,i.call(e,a,o)),!r&&o&&o.empty.fire()},_queueHooks:function(e,t){var n=t+"queueHooks";return x._data(e,n)||x._data(e,n,{empty:x.Callbacks("once memory").add(function(){x._removeData(e,t+"queue"),x._removeData(e,n)})})}}),x.fn.extend({queue:function(e,n){var r=2;return"string"!=typeof e&&(n=e,e="fx",r--),r>arguments.length?x.queue(this[0],e):n===t?this:this.each(function(){var t=x.queue(this,e,n);x._queueHooks(this,e),"fx"===e&&"inprogress"!==t[0]&&x.dequeue(this,e)})},dequeue:function(e){return this.each(function(){x.dequeue(this,e)})},delay:function(e,t){return e=x.fx?x.fx.speeds[e]||e:e,t=t||"fx",this.queue(t,function(t,n){var r=setTimeout(t,e);n.stop=function(){clearTimeout(r)}})},clearQueue:function(e){return this.queue(e||"fx",[])},promise:function(e,n){var r,i=1,o=x.Deferred(),a=this,s=this.length,l=function(){--i||o.resolveWith(a,[a])};"string"!=typeof e&&(n=e,e=t),e=e||"fx";while(s--)r=x._data(a[s],e+"queueHooks"),r&&r.empty&&(i++,r.empty.add(l));return l(),o.promise(n)}});var z,X,U=/[\t\r\n\f]/g,V=/\r/g,Y=/^(?:input|select|textarea|button|object)$/i,J=/^(?:a|area)$/i,G=/^(?:checked|selected)$/i,Q=x.support.getSetAttribute,K=x.support.input;x.fn.extend({attr:function(e,t){return x.access(this,x.attr,e,t,arguments.length>1)},removeAttr:function(e){return this.each(function(){x.removeAttr(this,e)})},prop:function(e,t){return x.access(this,x.prop,e,t,arguments.length>1)},removeProp:function(e){return e=x.propFix[e]||e,this.each(function(){try{this[e]=t,delete this[e]}catch(n){}})},addClass:function(e){var t,n,r,i,o,a=0,s=this.length,l="string"==typeof e&&e;if(x.isFunction(e))return this.each(function(t){x(this).addClass(e.call(this,t,this.className))});if(l)for(t=(e||"").match(T)||[];s>a;a++)if(n=this[a],r=1===n.nodeType&&(n.className?(" "+n.className+" ").replace(U," "):" ")){o=0;while(i=t[o++])0>r.indexOf(" "+i+" ")&&(r+=i+" ");n.className=x.trim(r)}return this},removeClass:function(e){var t,n,r,i,o,a=0,s=this.length,l=0===arguments.length||"string"==typeof e&&e;if(x.isFunction(e))return this.each(function(t){x(this).removeClass(e.call(this,t,this.className))});if(l)for(t=(e||"").match(T)||[];s>a;a++)if(n=this[a],r=1===n.nodeType&&(n.className?(" "+n.className+" ").replace(U," "):"")){o=0;while(i=t[o++])whilLine truncated
u[o]&&(delete u[o],c?delete n[l]:typeof n.removeAttribute!==i?n.removeAttribute(l):n[l]=null,p.push(o))}},_evalUrl:function(e){return x.ajax({url:e,type:"GET",dataType:"script",async:!1,global:!1,"throws":!0})}}),x.fn.extend({wrapAll:function(e){if(x.isFunction(e))return this.each(function(t){x(this).wrapAll(e.call(this,t))});if(this[0]){var t=x(e,this[0].ownerDocument).eq(0).clone(!0);this[0].parentNode&&t.insertBefore(this[0]),t.map(function(){var e=this;while(e.firstChild&&1===e.firstChild.nodeType)e=e.firstChild;return e}).append(this)}return this},wrapInner:function(e){return x.isFunction(e)?this.each(function(t){x(this).wrapInner(e.call(this,t))}):this.each(function(){var t=x(this),n=t.contents();n.length?n.wrapAll(e):t.append(e)})},wrap:function(e){var t=x.isFunction(e);return this.each(function(n){x(this).wrapAll(t?e.call(this,n):e)})},unwrap:function(){return this.parent().each(function(){x.nodeName(this,"body")||x(this).replaceWith(this.childNodes)}).end()}});var Pt,Rt,Wt,$t=/alpha\([^)]*\)/i,It=/opacity\s*=\s*([^)]*)/,zt=/^(top|right|bottom|left)$/,Xt=/^(none|table(?!-c[ea]).+)/,Ut=/^margin/,Vt=RegExp("^("+w+")(.*)$","i"),Yt=RegExp("^("+w+")(?!px)[a-z%]+$","i"),Jt=RegExp("^([+-])=("+w+")","i"),Gt={BODY:"block"},Qt={position:"absolute",visibility:"hidden",display:"block"},Kt={letterSpacing:0,fontWeight:400},Zt=["Top","Right","Bottom","Left"],en=["Webkit","O","Moz","ms"];function tn(e,t){if(t in e)return t;var n=t.charAt(0).toUpperCase()+t.slice(1),r=t,i=en.length;while(i--)if(t=en[i]+n,t in e)return t;return r}function nn(e,t){return e=t||e,"none"===x.css(e,"display")||!x.contains(e.ownerDocument,e)}function rn(e,t){var n,r,i,o=[],a=0,s=e.length;for(;s>a;a++)r=e[a],r.style&&(o[a]=x._data(r,"olddisplay"),n=r.style.display,t?(o[a]||"none"!==n||(r.style.display=""),""===r.style.display&&nn(r)&&(o[a]=x._data(r,"olddisplay",ln(r.nodeName)))):o[a]||(i=nn(r),(n&&"none"!==n||!i)&&x._data(r,"olddisplay",i?n:x.css(r,"display"))));for(a=0;s>a;a++)r=e[a],r.style&&(t&&"none"!==r.style.display&&""!==r.style.display||(r.style.display=t?o[a]||"":"none"));return e}x.fn.extend({css:function(e,n){return x.access(this,function(e,n,r){var i,o,a={},s=0;if(x.isArray(n)){for(o=Rt(e),i=n.length;i>s;s++)a[n[s]]=x.css(e,n[s],!1,o);return a}return r!==t?x.style(e,n,r):x.css(e,n)},e,n,arguments.length>1)},show:function(){return rn(this,!0)},hide:function(){return rn(this)},toggle:function(e){return"boolean"==typeof e?e?this.show():this.hide():this.each(function(){nn(this)?x(this).show():x(this).hide()})}}),x.extend({cssHooks:{opacity:{get:function(e,t){if(t){var n=Wt(e,"opacity");return""===n?"1":n}}}},cssNumber:{columnCount:!0,fillOpacity:!0,fontWeight:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,widows:!0,zIndex:!0,zoom:!0},cssProps:{"float":x.support.cssFloat?"cssFloat":"styleFloat"},style:function(e,n,r,i){if(e&&3!==e.nodeType&&8!==e.nodeType&&e.style){var o,a,s,l=x.camelCase(n),u=e.style;if(n=x.cssProps[l]||(x.cssProps[l]=tn(u,l)),s=x.cssHooks[n]||x.cssHooks[l],r===t)return s&&"get"in s&&(o=s.get(e,!1,i))!==t?o:u[n];if(a=typeof r,"string"===a&&(o=Jt.exec(r))&&(r=(o[1]+1)*o[2]+parseFloat(x.css(e,n)),a="number"),!(null==r||"number"===a&&isNaN(r)||("number"!==a||x.cssNumber[l]||(r+="px"),x.support.clearCloneStyle||""!==r||0!==n.indexOf("background")||(u[n]="inherit"),s&&"set"in s&&(r=s.set(e,r,i))===t)))try{u[n]=r}catch(c){}}},css:function(e,n,r,i){var o,a,s,l=x.camelCase(n);return n=x.cssProps[l]||(x.cssProps[l]=tn(e.style,l)),s=x.cssHooks[n]||x.cssHooks[l],s&&"get"in s&&(a=s.get(e,!0,r)),a===t&&(a=Wt(e,n,i)),"normal"===a&&n in Kt&&(a=Kt[n]),""===r||r?(o=parseFloat(a),r===!0||x.isNumeric(o)?o||0:a):a}}),e.getComputedStyle?(Rt=function(t){return e.getComputedStyle(t,null)},Wt=function(e,n,r){var i,o,a,s=r||Rt(e),l=s?s.getPropertyValue(n)||s[n]:t,u=e.style;return s&&(""!==l||x.contains(e.ownerDocument,e)||(l=x.style(e,n)),Yt.test(l)&&Ut.test(n)&&(i=u.width,o=u.minWidth,a=u.maxWidth,u.minWidth=u.maxWidth=u.width=l,l=s.width,u.width=i,u.minWidth=o,u.maxWidth=a)),l}):a.documentElement.currentStyle&&(Rt=function(e){return e.currentStyle},Wt=function(e,n,r){var i,o,a,s=r||Rt(e),l=s?s[n]:t,u=e.style;return null==l&&u&&u[n]&&(l=u[n]),Yt.test(l)&&!zt.test(n)&&(i=u.left,o=e.runtimeStyle,a=o&&o.left,a&&(o.left=e.currentStyle.left),u.left="fontSize"===n?"1em":l,l=u.pixelLeft+"px",u.left=i,a&&(o.left=a)),""===l?"auto":l});function on(e,t,n){var r=Vt.exec(t);return r?Math.max(0,r[1]-(n||0))+(r[2]||"px"):t}function an(e,t,n,r,i){var o=n===(r?"border":"content")?4:"width"===t?1:0,a=0;for(;4>o;o+=2)"margin"===n&&(a+=x.css(e,n+Zt[o],!0,i)),r?("content"===n&&(a-=x.css(e,"padding"+Zt[o],!0,i)),"margin"!==n&&(a-=x.css(e,"border"+Zt[o]+"Width",!0,i))):(a+=x.css(e,"padding"+Zt[o],!0,i),"padding"!==n&&(a+=x.css(e,"border"+Zt[o]+"Width",!0,i)));return a}function sn(e,t,n){var r=!0,i="width"===t?e.offsetWidth:e.offsetHeight,o=Rt(e),a=x.support.boxSizing&&"border-box"===x.css(e,"boxSizing",!1,o);if(0>=i||null==i){if(i=Wt(e,t,o),(0>i||null==i)&&(iLine truncated
@@ -0,0 +1,58 @@
$( document ).ready(function() {
$('#cssmenu').prepend('<div id="indicatorContainer"><div id="pIndicator"><div id="cIndicator"></div></div></div>');
var activeElement = $('#cssmenu>ul>li:first');
$('#cssmenu>ul>li').each(function() {
if ($(this).hasClass('active')) {
activeElement = $(this);
}
});
var posLeft = activeElement.position().left;
var elementWidth = activeElement.width();
posLeft = posLeft + elementWidth/2 -6;
if (activeElement.hasClass('has-sub')) {
posLeft -= 6;
}
$('#cssmenu #pIndicator').css('left', posLeft);
var element, leftPos, indicator = $('#cssmenu pIndicator');
$("#cssmenu>ul>li").hover(function() {
element = $(this);
var w = element.width();
if ($(this).hasClass('has-sub'))
{
leftPos = element.position().left + w/2 - 12;
}
else {
leftPos = element.position().left + w/2 - 6;
}
$('#cssmenu #pIndicator').css('left', leftPos);
}
, function() {
$('#cssmenu #pIndicator').css('left', posLeft);
});
$('#cssmenu>ul>.has-sub>ul').append('<div class="submenuArrow"></div>');
$('#cssmenu>ul').children('.has-sub').each(function() {
var posLeftArrow = $(this).width();
posLeftArrow /= 2;
posLeftArrow -= 12;
$(this).find('.submenuArrow').css('left', posLeftArrow);
});
$('#cssmenu>ul').prepend('<li id="menu-button"><a>Menu</a></li>');
$( "#menu-button" ).click(function(){
if ($(this).parent().hasClass('open')) {
$(this).parent().removeClass('open');
}
else {
$(this).parent().addClass('open');
}
});
});
@@ -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>
@@ -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 %}
@@ -0,0 +1 @@
{% extends "three_d_viewer/base.html" %}
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>