forked from FranciscoPinto/cern-summer-webfest
-
Notifications
You must be signed in to change notification settings - Fork 2
/
background-test.html
136 lines (101 loc) · 13.5 KB
/
background-test.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="bootstrap/js/bootstrap.js"></script>
<style type="text/css">
.definition {
border-bottom: 1px dotted black;
}
</style>
</head>
<div id="backcolor1" style="color: red; z-index: -2; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background-color: white; background-image: none; background-position: center center; background-repeat: no-repeat;">
</div>
<div id="backcolor2" style="color: red; z-index: -1; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background-color: white; background-image: none; background-position: center center; background-repeat: no-repeat;">
</div>
<div class="contentpages" id="activepage" style="-webkit-transition: font-color 400ms linear">
<input type="button" value="background 1" onclick="setBackground('white.png', 'white', 'black')"><br>
<input type="button" value="background 2" onclick="setBackground('back2.jpg', 'black', 'white')"><br>
<input type="button" value="background 3" onclick="setBackground('back1.jpg', 'white', 'black')"><br>
<h1>Lorem Ipsum dolor sit</h1>
<p>Porta Nam porta luctus mi, ac euismod risus dignissim sed. Aliquam pretium facilisis malesuada. Pellentesque in orci leo. Aliquam vulputate, sapien eu auctor rutrum, ante massa convallis libero, eget pellentesque quam velit et lectus. Proin condimentum sapien at est pharetra sed tristique elit sagittis. Cras ultricies tortor et nibh sodales vel semper nisl volutpat. Praesent turpis velit, pulvinar ac malesuada ornare, bibendum et mauris. Morbi condimentum suscipit orci, eget tempus leo cursus ut. Pellentesque non quam molestie tortor suscipit eleifend vel mollis justo. Aenean eget pulvinar orci. Curabitur non malesuada leo. Integer commodo ipsum eget odio viverra mollis.</p>
<h1>Consectetur adipiscing</h1>
<p>Duis ac sem eu nunc porta ullamcorper rutrum. Morbi arcu sapien, mollis sit amet sodales et, volutpat sit amet dolor. Donec sit amet lacus massa. Integer eget nisl id tortor condimentum cursus quis id odio. Nullam ut quam ac mi malesuada auctor. In hac habitasse platea dictumst. Nullam at libero non orci aliquet luctus. Mauris metus diam, convallis vitae tristique non, molestie vitae massa. Quisque scelerisque, nunc a consectetur tempus, sem neque ultricies urna, nec tempus urna lectus vitae sapien. Proin sit amet massa metus, quis dictum sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<script type="text/javascript">
{ "term": [], "description": ""},
var definitions = [
{ "term": ["atom", "atoms"], "description": "<b>Atoms</b> are made up of electrons, protons and neutrons. They have a core, that consists of neutrons and protons, that are bound by the strong force, and around the core there is an electron \"cloud\", bound by the electromagnetic force. The name is from the Greek word atomos, meaning indivisible."},
{ "term": ["particle","particles"], "description": "<b>Particles</b> are the building blocks of matter. <br> A fundamental or elementary particle is an indivisible, point-like object (i.e. it has no size). We do not actually know if the particles of the Standard Model are fundamental for sure, or if they are made of smaller particles. Neither do we know if they are really point like, or just very small. But to this day no experimental evidence exists that any of the particles in the Standard Model are not fundamental. <br> The word \"particle\" can also be used for objects such as proton, neutrons or atoms that are made up of fundamental particles."},
{ "term": ["nucleus", "nuclei"], "description": "All <b>atoms</b> consist of a nucleus, a tightly packed bunch of protons and neutrons, and a \"cloud\" of electrons surrounding the nucleus, attached to it by the attraction between the negative charge of the electrons and the positive charge of the protons."},
{ "term": ["mass","masses"], "description": "<b>Mass</b> is a fundamental property of matter. It is what makes stuff, stuff! Mass is responsible for two different properties of the objects we observe every day. The first is the weight of an object, which comes from the gravitational attraction between massive objects, such as you and the earth. The second is inertia, which means how hard it is to accelerate an object. This is the resistance you feel when trying to move a heavy object like, for example when trying to push a car. Scientists are still working to find out more about the origins of mass, which seem to be related to the Higgs boson."},
{ "term": ["charge","charges","charged"], "description": "<b>Charge</b> is an intrinsic property of elementary particles. All particles having a charge can participate in the electromagnetic interaction and are capable of absorbing and emitting photons. All fermions apart from neutrinos carry charge, while the W-Bosons are the only charged bosons we know of. Experimental evidence shows that there are two kinds of charge, and objects carrying the same kind of charge repel each other, while ones carrying opposite kinds of charge attract each other. Also, when two objects with different kinds of charge come close together, the system of the two will be “neutral”, their charges cancel each other if seen from a distance. Because of this behaviour, we call the different kinds of charges “positive” and “negative”, so that they add up to zero."},
{ "term": ["stable", "unstable", "stability"], "description": "Unstable particles, as opposed to stable ones, have a finite lifetime. As a consequence, they will decay into other particles after some time. All particles of the second and third generation and also the bosons carrying the weak interaction are unstable."},
{ "term": ["decay","decays"], "description": "When one initial state particle breaks down into a certain number - typically three - final state particles of lesser mass, we call this process a <b>decay</b>. Einstein’s relation between mass and energy tells us that these lighter particles are typically very fast (because they can have higher kinetic energy). A prominent and well-known example of a decay is nuclear decay of the neutron, turning into a proton and emitting an additional positron and an electron-neutrino. This process is called beta-decay [see weak interaction-> link] and is a very well-known process exploited in nuclear power plants and atomic bombs."},
{ "term": ["Einstein's relation", "Einstein relation", "E=mc²"], "description": "Einstein’s famous equation E=mc² relates mass to energy. In particle physics, one often chooses natural units, taking the speed of light as a unit of speed by convention, such that the numerical value of c (approximately 300.000.000 km/s) becomes \"1\". In these units, Einstein’s equation reads E=m, highlighting the fact that energy and mass are physically equivalent.<br> As a consequence, mass can be turned into energy, and hence heavy particles can spontaneously turn into lighter particles, releasing energy in the process. A particle must decay to at least two lighter particles, because of momentum conservation. As there are several stable, fundamental particles with different masses there are more rules that determine what kind of decays are possible. These rules are conservations of different properties of matter, called quantum numbers. One of these is electric charge, others are lepton numbers, baryon number."},
{ "term": ["energy","energies"], "description": "<b>Energy</b> is one of the most important physical observables. The amount of energy a physical system possesses determines the possible processes and interactions the system can undergo. In classical mechanics, two very well-understood types of energy are potential energy (a weight gains potential energy when you lift it) and kinetic energy (if you let it go, the potential energy is transformed into kinetic energy). Through the Einstein relation, energy is related to mass."},
{ "term": ["properties"], "description": "All of the particles that we have seen so far have many different <b>properties</b>. Just like objects that we see and touch in our everyday lives, they will have a permanent mass, which does not differ between particles of the same kind. For example, all electrons have the same mass. Another property is the electric charge of the particle, which determines the way in which the particle will participate in the electromagnetic interaction. The properties define the way that these particles interact and are so characteristic that they can be thought of as a definition for the particular type of particle. For example, if a quark has a different mass from a standard up-quark, then it cannot be an up-quark and must be another type of quark. The same goes for charge. Particles that are identical in every respect, but have opposite charge are antiparticles to one another."},
{ "term": ["proton","protons"], "description": "A <b>proton</b> is a composite particle made of two up-quarks and a down-quark. Protons are positively charged and exist in the nucleus of the atoms that make up the matter surrounding us."},
{ "term": ["neutron","neutrons"], "description": "The <b>neutron</b> is a neutral, composite particle, made of one up-quark and two down-quark. Like the proton it exists inside nuclei. As the protons are positively charged they will repel each other, but the strong force can keep a nucleus together, for larger atoms the electric repulsion will grow very large. The neutrons allows atoms with two or more protons to exist, as the protons do not have to be as tightly packed. The neutron is an unstable particle if it is free, with a lifetime of a about 15 minutes, but inside nuclei it can be stable."},
{ "term": ["spin","spins","fermion","fermions","boson","bosons"], "description": "The <b>spin</b> is a fundamental property of a particle, much like charge or mass. Mathematically, the property spin behaves similar to an angular momentum, much like if the particle was actually “spinning” around its own axis. However, for point-like particles, this analogy obviously does not work, and we have no means of actually understanding spin from our macroscopic, classical point of view. For example, a particles spin can only take full and half integer values. Apart from its similarity to an angular momentum, the spin also has a major influence on the way particles behave and interact with each other. Because the difference between particles with full and with half-integer spin is especially large, particles with integer spin are called bosons (after Satyendra Nath Bose), while particles with half-integer spin are called fermions (after Enrico Fermi)."},
{ "term": ["free particle","free particles"], "description": "A free particle, as opposed to a particle in a bound state, is a particle that does not feel any external force, such as attraction or repulsion from other particles."},
{ "term": ["bound state","binding"], "description": "A <b>bound</b> state is a combination of two or more particles that attract each other strong enough to keep the partner from escaping. In analogy, earth and sun form a bound system, as neither can escape the current position due to the gravitational force. Bound states are often summarized as combined physical systems, that can be thought of as single objects when considering a larger scale. Using the same analogy as before, the solar system is a bound state that can be considered a single object when considering the movement of the milky way’s spiral arm."}
];
function setBackground(pic, col, textcol)
{
// set the background layer to the current picture
document.getElementById("backcolor1").style.backgroundColor = document.getElementById("backcolor2").style.backgroundColor;
document.getElementById("backcolor1").style.backgroundImage = document.getElementById("backcolor2").style.backgroundImage;
// show the background layer
$("#backcolor2").hide();
// fade to the new picture with the foreground layer
document.getElementById("backcolor2").style.backgroundColor = col;
if(pic == '')
pic = 'white.png';
document.getElementById("backcolor2").style.backgroundImage = "url(./img/" + pic + ")";
$("#backcolor2").fadeIn("slow");
$(".contentpages").css('color', textcol);
}
function addExplanations(obj)
{
for(def in definitions)
{
definitions[def]["replaced"] = 0
}
obj.find("p").each(function() {
var ct = $(this).html();
var ctlower = ct.toLowerCase();
for(def in definitions)
{
for(term in definitions[def]["term"])
{
if(definitions[def]["replaced"] == 0)
{
var t = definitions[def]["term"][term];
pos = ctlower.indexOf(t.toLowerCase());
if(pos != -1)
{
ct = ct.substr(0, pos) + "<a href='#' class='definition def_" + definitions[def]["term"][0].toLowerCase() + "' rel='popover' data-content='" + definitions[def]["description"] + "' data-original-title='" + definitions[def]["term"][0] + "'>" + ct.substr(pos, t.length) + "</a>" + ct.substr(pos+t.length);
ctlower = ct.toLowerCase();
definitions[def]["replaced"] = 1;
}
}
}
}
$(this).html(ct);
});
for(def in definitions)
{
if(definitions[def]["replaced"] == 1)
{
obj.find(".def_"+definitions[def]["term"][0]).popover({"placement": "bottom"});
}
}
};
addExplanations($("#activepage"));
</script>
</html>