Energy Education

Main Page: Difference between revisions

No edit summary
No edit summary
Line 1: Line 1:
<html>
<html>
<style>
<style>
 
#author-contributor{
html, body {
  display: none;
  margin: 0px;
  padding: 0px;
  border: 0px;
}
 
#images-holder
{
    overflow: hidden;
    width: 800px;
    height: 450px;
    position: relative;
    display: block;
    background-color: black;
}
 
 
 
#images-slider
{
    z-index: 1;
    right: 0px;
    width: 100%;
    height: 100%;
    position: relative;
}
 
 
.image-slot
{
    -moz-transition: all 1s ease-in;
    -webkit-transition: all 1s ease-in;
    -o-transition: all 1s ease-in;
    -ms-transform: all 1s ease-in;
    transition: all 1s ease-in;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    width: 100%;
    height: 100%;
    background-color: black;
    position: absolute;
    margin-left: 0%;
    opacity: 0;
   
}
 
.images{
    margin: auto;
    height: 100%
}
 
#slot1
{
opacity: 1;
}
 
.button
{
    z-index: 2;
    width: 60px;
    height: 80px;
    position: absolute;
    background: rgba(0,0,0,0.75);
    opacity: 0;
    -moz-transition: opacity .4s;
    -webkit-transition: opacity .4s;
    transition: opacity .4s;
    top: 40%;
    text-align: center;
    line-height: 60px; 
    cursor: pointer;
}
 
 
#images-holder:hover  .button
{
    opacity: 1;
}
 
.button:hover .arrow{
    color: #880000;
}
 
 
.next
{
    right: 0px;
}
 
.previous
{
    left: 0px;
}
 
.arrow{
    color: #dddddd;
    font-size: 100pt;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    display: inline-block;
}
 
.caption{
    position: absolute;
    color: #dddddd;
    font-size: 14pt;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    bottom: 0px;
    width: 100%;
    left: 0px;
    background-color: rgba(0,0,0,0.75);
    text-align: left;
    box-sizing: border-box;
    line-height: 120%;
    padding: 10px 12px;
}
 
.notransition{
-moz-transition: none !important;
    -webkit-transition: none !important;
    -o-transition: none !important;
    -ms-transform: none !important;
transition: none !important;
}
 
.nav-holder{
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 3;
    padding: 2px;
    font-size: 0px;
    line-height: 0px;
    background-color: rgba(0,0,0,0.75);
    border-radius: 7px;
}
 
.navigation{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    bottom: 10%;
    display: inline-block;
    background: #dddddd;
    margin: 2px;
cursor: pointer;
}
 
.navigation:hover{
    background: #880000 !important;
}
 
#dot-1{
    /*left: 80%;*/
    background: #880000;
   
}
}
</style>
</style>
</html>
<gallery caption="Getting Started: Visit the links below to explore what interests you!" mode=packed heights=100px>
File:energymain.jpg|link=energy|[[Energy]], [[fuel]]s, [[flow]]s, [[TPES]], [[TFC]]
File:electrical-863402_1280.jpg|link=electrical grid|[[Electrical generation#World_electricity_generation|Generation]], [[Electrical grid|grid]], [[Access to electricity]]
File:Hopetoun_falls.jpg|link=environment|[[Environment]], [[Hydrologic cycle]], [[Carbon cycle]]
File:Littah.jpg|link=pollution|[[Pollution]], [[Smog]], [[Nitrogen oxide|NOx]], [[Sulfur oxides|SOx]]
</gallery>
<gallery mode=packed heights=100px>
File:Fermi NPP.jpg|link=Power plant|[[Power plant]]s:      [[Nuclear power plant|Nuclear]], [[Hydroelectric facility|Hydro]], [[Coal-fired power plant|Coal]], [[Solar panel|Solar]], [[Wind power|Wind]], [[Natural gas power plant|Natural Gas]]
File:atomic.png|link=Fundamental force|'''Fundamental physics''':      [[Fundamental force|Force]]s, [[Kinetic energy|Motion]], [[Temperature]], [[radiant energy|Light]]
File:earth-sun.jpg|link=climate|[[Climate]], [[Greenhouse gases]], [[Feedback cycle]]s, [[Earth's heat balance]]
File:traffic.jpg|link=transportation energy use|[[Transportation energy use]], [[Transportation]], [[Motor vehicle]]s, [[Internal combustion engine]]s
</gallery>


<script>
You can also try a [[Special:Random|random page]], and find something fun!
var mousetime = false;
var number_of_slots = 5
var timer = window.setTimeout(image_fade_forward, 6000);
 
var which_slot_vis = 1;
 
 
 
function image_fade_forward(){
if(which_slot_vis == number_of_slots){
update("slot1", "slot" + which_slot_vis.toString(), "dot-1", "dot-" + which_slot_vis.toString())
which_slot_vis = 1
update_link(which_slot_vis);
}else{
update("slot" + (which_slot_vis+1).toString(), "slot" + which_slot_vis.toString(), "dot-" + (which_slot_vis+1).toString(), "dot-" + which_slot_vis.toString())
which_slot_vis ++;
update_link(which_slot_vis);
}
if( !mousetime){
notMouseTime()
    }
}
 
function image_fade_back(){
if(which_slot_vis == 1){
update("slot" + number_of_slots.toString(), "slot1", "dot-" + number_of_slots.toString(), "dot-1")
which_slot_vis = number_of_slots
update_link(which_slot_vis);
}else{
update("slot" + (which_slot_vis-1).toString(), "slot" + which_slot_vis.toString(),"dot-" + (which_slot_vis-1).toString(), "dot-" + which_slot_vis.toString())
which_slot_vis --;
update_link(which_slot_vis);
}
if( !mousetime){
notMouseTime()
    }
}
function nav_image_fade(clicked_id){
just_clicked  = clicked_id.substr(clicked_id.length - 1);
       
        if (just_clicked != which_slot_vis){
update("slot" + just_clicked, "slot" + (which_slot_vis).toString(),"dot-" + just_clicked, "dot-" + (which_slot_vis).toString())
which_slot_vis = parseInt(just_clicked)
update_link(which_slot_vis);
        }
if( !mousetime){
notMouseTime()
    }
}
 
 
function update_link(visible){
if(visible == 1){
linkUpdate("https://energyeducation.ca/encyclopedia/Electrical_generation")
}else if(visible==2){
linkUpdate("https://energyeducation.ca/encyclopedia/Environmental_impact")
}else if(visible==3){
linkUpdate("https://www.energyeducation.ca/encyclopedia/End_use_energy")
}else if(visible==4){
linkUpdate("https://energyeducation.ca/encyclopedia/Total_final_consumption")
}else if(visible==5){
linkUpdate("https://energyeducation.ca/encyclopedia/Reserve")
}
}


function update(nextView, presentView, nextDot, presentDot){
We have a related project on the [http://energyeducation.ca/simulations/nuclear/nuclidechart.html chart of the nuclides] that is under development.
document.getElementById(nextView).classList.add('notransition');
document.getElementById(nextView).style.opacity = 1
document.getElementById(nextView).classList.remove('notransition');
document.getElementById(presentView).style.opacity = 0
document.getElementById(nextDot).style.background = '#880000'
document.getElementById(presentDot).style.background = '#dddddd'
}
 
function linkUpdate(link){
document.getElementById('imagelink').href = link
}
 
function notMouseTime(){
timer = window.setTimeout(image_fade_forward, 6000);
    mousetime = false;
}
 
function mouseTimeReset(){
    timer = window.setTimeout(image_fade_forward, 6000);
    mousetime = false;
}
 
function mouseTimePause(){
    window.clearTimeout(timer);
    mousetime = true
}
</script>
 
<center>
<div id="images-holder" onmouseover = "mouseTimePause()" onmouseout = "mouseTimeReset()">
 
   
      <div class = "button next" id="next-button-1" onclick="image_fade_forward()">
<span class="arrow"> &#x203a;</span>
      </div>
      <div  class = "button previous" id="previous-button-1" onclick="image_fade_back()">
<span class= "arrow">&#x2039;</span>
      </div>
  <div class = "nav-holder">
<div class = "navigation" id = "dot-1" onClick="nav_image_fade(this.id)"></div>
<div class = "navigation" id = "dot-2" onClick="nav_image_fade(this.id)"></div>
<div class = "navigation" id = "dot-3" onClick="nav_image_fade(this.id)"></div>
<div class = "navigation" id = "dot-4" onClick="nav_image_fade(this.id)"></div>
<div class = "navigation" id = "dot-5" onClick="nav_image_fade(this.id)"></div>
  </div>
 
     
    <div id="images-slider">
<a id = "imagelink">
<div class="image-slot" id="slot1">
<img src = "https://energyeducation.ca/wiki2develop/images/e/ee/SlideImage1.jpg" id="image1" class="images" />
<div class = "caption" id="cap1"><center>Electricity comes from different sources. Where does your country's electricity come from?</center></div>
</div>
<div class="image-slot" id="slot2">
<img src="https://energyeducation.ca/wiki2develop/images/9/92/SlideImage2.jpg" id="image2" class="images" />
<div class = "caption" id="cap2"><center>Energy use impacts the environment. Are these impacts getting better or worse?</center></div>
</div>
 
<div class="image-slot" id="slot3">
<img src="https://energyeducation.ca/wiki2develop/images/8/81/SlideImage3.jpg" id="image3" class="images" />
<div class = "caption" id="cap3"><center>Consumers use different forms of energy for services. What forms are used in your country?</center></div>
</div>
<div class="image-slot" id="slot4">
<img src="https://energyeducation.ca/wiki2develop/images/9/9f/SlideImage4.jpg" id="image4" class="images" />
<div class = "caption" id="cap4"><center>Different sectors require different energy. What uses the most energy in your country?</center></div>
</div>
<div class="image-slot" id="slot5">
<img src="https://energyeducation.ca/wiki2develop/images/8/8d/SlideImage5.jpg" id="image5" class="images" />
<div class = "caption" id="cap5"><center>We've been using fossil fuels for hundreds of years. When will we run out?</center></div>
</div>
      </div>
 
    </a>
    </div>
</center>
<script>
document.getElementById('imagelink').href = "https://energyeducation.ca/encyclopedia/Electrical_generation";
</script>
</html>
[[Category: Test page not to be moved]]

Revision as of 02:53, 21 July 2018

You can also try a random page, and find something fun!

We have a related project on the chart of the nuclides that is under development.

Retrieved from "https://energyeducation.ca/wiki/index.php?title=Main_Page&oldid=7938"