chem12cpt

CSS/Style.css

@@ -73,3 +73,11 @@ body::-webkit-scrollbar- {
     both;
   animation: text-pop-up-top 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
 }
+
+
+iframe{
+  margin: auto;
+  width: 100%;
+  border: 0;
+  
+}

index.html

@@ -16,5 +16,41 @@
     <div class="content">
       <h1 class="text-pop-up-top">Ethan Pisani.</h1>
     </div>
+    <div>
+      <iframe src="./threejs-test" height="200" width="300" title="Iframe Example"></iframe>
+    </div>
+    <div>
+      <iframe src="./threejs-test" height="200" width="300" title="Iframe Example"></iframe>
+    </div>
+    <div>
+      <iframe src="./threejs-test" height="200" width="300" title="Iframe Example"></iframe>
+    </div>
+    <div>
+      <iframe src="./threejs-test" height="200" width="300" title="Iframe Example"></iframe>
+    </div>
+    <div>
+      <iframe src="./threejs-test" height="200" width="300" title="Iframe Example"></iframe>
+    </div>
+    <div>
+      <iframe src="./threejs-test" height="200" width="300" title="Iframe Example"></iframe>
+    </div>
+    <div>
+      <iframe src="./threejs-test" height="200" width="300" title="Iframe Example"></iframe>
+    </div>
+    <div>
+      <iframe src="./threejs-test" height="200" width="300" title="Iframe Example"></iframe>
+    </div>
+    <div>
+      <iframe src="./threejs-test" height="200" width="300" title="Iframe Example"></iframe>
+    </div>
+    <div>
+      <iframe src="./threejs-test" height="200" width="300" title="Iframe Example"></iframe>
+    </div>
+    <div>
+      <iframe src="./threejs-test" height="200" width="300" title="Iframe Example"></iframe>
+    </div>
+    <div>
+      <iframe src="./threejs-test" height="200" width="300" title="Iframe Example"></iframe>
+    </div>
   </body>
 </html>

main.py

@@ -0,0 +1,224 @@
+from flask import Flask, render_template, request
+import random
+
+from flask.helpers import url_for
+app = Flask(__name__)
+"""
+2-bromobutane
+benzene
+butane
+ethanal
+ethanoic_acid
+hex-3-yne
+1-methoxypropane
+n-methylbutan-2-amine
+n_n-dimethylpropanamide
+pent-2-ene
+pentan-2-one
+propan-2-ol
+propyl_ethanoate
+
+
+"""
+
+frontlist=[
+
+'Aristotle',
+
+'Democritus (300 B.C)',
+
+'All matter made up of tiny particles (atoms)',
+
+'Thomson Model of the Atom',
+
+'Calculate relative charge and mass of the electron',
+
+'Ernest Rutherford (1911)',
+
+'Proved the existence of the neutron',
+
+'Neils Bohr',
+
+'Quantum Hypothesis made to explain observations',
+
+'The energy of the photon is transferred to the electron',
+
+'Energy level must be filled before moving up next level',
+
+'Pauli Exclusion Principle',
+
+'Hund’s Rule',
+
+'Ionic Compounds',
+
+'Molecular Compounds',
+
+'What type of bond? ΔEN = 0.2',
+
+'What type of bond? ΔEN = 1.9'
+]
+
+backlist=[
+
+'Only four elements earth, air, fire and water',
+
+'Atoms are made of tiny, indivisible things',
+
+'Dalton’s Atomic Theory',
+
+'Electrons could be emitted from matter',
+
+'Robert Millikan (1909)',
+
+'Discovered atom is mostly empty space',
+
+'James Chadwick (1932)',
+
+'The Planetary Model',
+
+'Max Planck (1900)',
+
+'Einstein (1905)',
+
+'Aufbau Principle',
+
+'No 2 e- in an atom can have 4 quantum numbers, on 2 e- can exist per orbital',
+
+'1 e- is placed in each suborbital',
+
+'Made of ionic bonds, usually between metals and nonmetals, bonded in a crystal lattice structure, EN >= 1.7',
+
+'Covalent bonds between 2 nonmetals, EN = 0 to 0.5 is nonpolar',
+
+'Non-polar bond',
+
+'Polar bond'
+
+]
+
+correct='<div class="answer"><h1 class="c">&check;</h1><p class="c">Correct!</p><p>Your answer:</p><p>'
+incorrect='<div class="answer"><h1 class="x">&cross;</h1><p class="x">Incorrect!</p><p>Your answer:</p><p>'
+style='<style>input{display:none;}.hide{display:none;}</style>'
+answerdict={
+    'in1.1':'</p><hr/> <p>Correct answer:</p><table class="hct"> <tr> <th>System</th> <th>Surrounding</th> </tr><tr> <td>Metal</td><td>Water</td></tr><tr> <td>m=300g</td><td>m=500g</td></tr><tr> <td>c=?</td><td>c=4.184 J/g°C</td></tr><tr><td>T<sub>1</sub>=915°C</td><td>T<sub>1</sub>=21.5°C</td></tr><tr><td>T<sub>2</sub>=74.6°C</td><td>T <sub>2</sub>=74.6°C</td></tr><tr><td>𝚫T=-840.4°C</td><td>𝚫T=+53.1°C</td></tr></table><div><p>Q=mcT</p><p>Q=(500g)(4.184 J/g°C)(53.1°C)</p><p>Q<sub>water</sub>=111,085.2 J</p><p>Q<sub>metal</sub>=-111,085.2 J</p><p>c=-111,085.2J / (300g)(-840.4°C)</p><p>c=0.44060447 J/g°C</p><p>c=0.4406 J/g°C</p></div></div>',
+    'in1.2':'</p><hr/> <p>Correct answer:</p><table class="hct"> <tr> <th>Substance</th> <th>Heat Capacity</th> </tr><tr style="background-color: #6cb400"> <td>Iron</td><td>0.440</td></tr><tr> <td>Lithium</td><td>3.56</td></tr><tr> <td>Sodium</td><td>1.23</td></tr><tr> <td>Aluminum</td><td>0.900</td></tr><tr> <td>Potassium</td><td>0.75</td></tr><tr> <td>Lead</td><td>0.160</td></tr><tr> <td>Gold</td><td>0.1290</td></tr></table> <p>Iron is most likely</p></div>',
+    'in2.1':'</p><hr/> <p>Correct answer:</p><p> 2C<sub>6</sub>H<sub>14</sub> + 19O<sub>2</sub> → 12CO<sub >2</sub > + 14H<sub>2</sub>O </p></div>',
+    'in2.2':'</p><hr/> <p>Correct answer:</p><p> ΔH=∑[(n)(ΔH<sub>f</sub> Products)] - ∑[(n)(ΔH<sub>f</sub> Reactants)] </p><p> ΔH=[(12 mol)(ΔH<sub>f</sub> CO<sub>2</sub>) + (14 mol)(ΔH<sub >f</sub > H<sub>2</sub>O)] - [(2 mol)(ΔH<sub>f</sub> C<sub>6</sub>H<sub>14</sub>) + (19 mol)(ΔH<sub>f</sub> O<sub>2</sub>)] </p><p> ΔH=[(12 mol)(-393.5 kJ/mol) + (14 mol)(-285.8 kJ/mol)] - [(2 mol)(-198.67 kJ/mol) + <s>(19 mol)(0 kJ/mol)</s>] </p><p>ΔH=[-8723.2 kJ] - [-397.34 kJ]</p><p>ΔH=-8325.86 kJ</p></div>',
+    'in2.3':'</p><hr/> <p>Correct answer:</p><p>ΔH=(n)(ΔH<sub>x</sub>)</p><p>ΔH<sub>x</sub>=-8325.86 kJ / 2 mol</p><p>ΔH<sub>x</sub>=-4162.93 kJ/mol</p></div>',
+    'in3.1':'</p><hr/> <p>Correct answer:</p><p>ΔS=∑[(n)(ΔS Products)] - ∑[(n)(ΔS Reactants)]</p><p> ΔS=[(2 mol)(ΔS LiOH) + (1 mol)(ΔS H<sub>2</sub>)] - [(2 mol)(ΔS Li) + (2 mol)(ΔS H<sub>2</sub>O)] </p><p>ΔS=[(2 mol)(47.97 J/mol*K) + (1 mol)(130.6  J/mol*K)] - [(2 mol)(ΔS 29.09 J/mol*K) + (2 mol)(69.95 J/mol*K)]</p><p>ΔS=[226.54 J/mol*K] - [198.08 J/mol*K]</p><p>ΔS=28.46 J/mol*K</p></div>',
+    'in3.2':'</p><hr/> <p>Correct answer:</p><p>Yes, because the ΔS is positive</p></div>'
+}
+
+@app.route("/")
+def home():
+    return render_template("main.html")
+
+@app.route("/chem12cpt/")
+def chem12cpt():
+    return render_template("chem12cpt.html")
+
+#UNITS
+@app.route("/chem12cpt/unit1/")
+def unit1():
+    return render_template("unit1.html")
+
+@app.route("/chem12cpt/unit2/")
+def unit2():
+    f = '<p>ftest</p><p>test</p>'
+    b = '<p>btest</p><p>test</p>'
+    r = random.randint(0, len(frontlist)-1)
+    return render_template("card.html", front=f"<p>{frontlist[r]}</p>", back=f"<p>{backlist[r]}</p>")
+
+
+
+@app.route("/chem12cpt/unit3/", methods=["POST","GET"])
+def unit3():
+    if request.method == "POST":
+        in11 = request.form['in1.1']
+        in12 = request.form['in1.2']
+        in211 = request.form['in2.1.1']
+        in212 = request.form['in2.1.2']
+        in213 = request.form['in2.1.3']
+        in214 = request.form['in2.1.4']
+        in22 = request.form['in2.2']
+        in23 = request.form['in2.3']
+        in31 = request.form['in3.1']
+        in32 = request.form['in3.2']
+        print(in11)
+        print(in211)
+        """ 
+        for key in a_dict:
+            print(key)
+        """
+
+        indic={}
+        try:
+            if float(in11) > 0.43 and float(in11) < 0.45:
+                print("correct")
+                indic['in1.1']=f"{correct}{in11}{answerdict['in1.1']}"
+            else:
+                indic['in1.1']=f"{incorrect}{in11}{answerdict['in1.1']}"
+        except:
+            indic['in1.1']=f"{incorrect}{in11}{answerdict['in1.1']}"
+
+        try:
+            if in12.lower() == 'iron':
+                indic['in1.2']=f"{correct}{in12}{answerdict['in1.2']}"
+            else:
+                indic['in1.2']=f"{incorrect}{in12}{answerdict['in1.2']}"
+        except:
+            indic['in1.2']=f"{incorrect}{in12}{answerdict['in1.2']}"
+
+        try:
+            if in211=='2C6H14' and in212=='19O2' and in213=='12CO2' and in214=='14H2O' or in211=='2C6H14' and in212=='19O2' and in213=='14H2O' and in214=='12CO2':
+                indic['in2.1']=f"{correct}{in211} + {in212} → {in213}+ {in214}{answerdict['in2.1']}"
+            else:
+                indic['in2.1']=f"{incorrect}{in211} + {in212} → {in213} + {in214}{answerdict['in2.1']}"
+        except:
+            indic['in2.1']=f"{incorrect}{in211} + {in212} → {in213} + {in214}{answerdict['in2.1']}"
+        
+        try:
+            if float(in22) > -8400 and float(in22) < -8300:
+                indic['in2.2']=f"{correct}{in22} kJ{answerdict['in2.2']}"
+            else:
+                indic['in2.2']=f"{incorrect}{in22} kJ{answerdict['in2.2']}"
+        except:
+            indic['in2.2']=f"{incorrect}{in22} kJ{answerdict['in2.2']}"
+        try:
+            if float(in23) > -4200 and float(in23) < -4100:
+                indic['in2.3']=f"{correct}{in23} kJ/mol{answerdict['in2.3']}"
+            else:
+                indic['in2.3']=f"{incorrect}{in23}  kJ/mol{answerdict['in2.3']}"
+        except:
+            indic['in2.3']=f"{incorrect}{in23}  kJ/mol{answerdict['in2.3']}"
+        try:
+            if float(in31) > 27 and float(in31) < 29:
+                indic['in3.1']=f"{correct}{in31} J/mol*K{answerdict['in3.1']}"
+            else:
+                indic['in3.1']=f"{incorrect}{in31} J/mol*K{answerdict['in3.1']}"
+        except:
+            indic['in3.1']=f"{incorrect}{in31} J/mol*K{answerdict['in3.1']}"
+        try:
+            if in32.lower() == 'yes':
+                indic['in3.2']=f"{correct}{in32}{answerdict['in3.2']}"
+            else:
+                indic['in3.2']=f"{incorrect}{in32}{answerdict['in3.2']}"
+        except:
+            indic['in3.2']=f"{incorrect}{in32}{answerdict['in3.2']}"
+        #print(in11)
+        print(in12)
+        return render_template("unit3.html", style=style, testa=indic)
+    return render_template("unit3.html")
+
+@app.route("/chem12cpt/unit4/")
+def unit4():
+    return render_template("unit4.html")
+
+
+
+@app.route("/3d/<model>/")
+def model(model):
+    return render_template("model.html", model=model)
+
+if __name__ == "__main__":
+    app.run(host="0.0.0.0", debug=False, port=80)

static/css/card.css

@@ -0,0 +1,72 @@
+
+body {
+    font-size: 3em;
+    background-color: #2c2c2c; 
+    font-family: "Roboto", sans-serif;
+    margin: auto;
+    margin-top: 5vh;
+    text-align: center;
+  }
+a{
+  background-color: #535353;
+
+  border: none;
+  border-radius: 0.5em;
+  color: white;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  padding: 10px;
+  cursor: pointer;
+}
+.scene {
+  width: 50vw;
+  height: 50vh;
+  margin: auto;
+  perspective: 70vh;
+  padding-bottom: 5vh;
+}
+
+.card {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  
+  cursor: pointer;
+  transform-style: preserve-3d;
+  transform-origin: center right;
+  transition: transform 0.7s;
+}
+
+.card.is-flipped {
+  transform:  rotateX(-180deg);
+}
+.cardtext{
+    padding-left: 20%;
+    padding-right: 20%;
+  padding-top: 10%;
+}
+.card__face {
+  border-radius: 75px;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  color: white;
+  text-align: center;
+  font-weight: bold;
+  font-size: 40px;
+  backface-visibility: hidden;
+}
+.refresh{
+  border: #229100;
+  border-radius: 75px;
+}
+.card__face--front {
+  background: #229100;
+  
+}
+
+.card__face--back {
+  background: black;
+  transform: rotateX(180deg);
+}

static/css/chem12cpt.css

@@ -0,0 +1,59 @@
+body {
+  font-size: 1em;
+  background-color: #2c2c2c;
+  font-family: "Roboto", sans-serif;
+  margin: auto;
+  /* margin-top: 30vh;*/
+  text-align: center;
+  color: white;
+}
+::-webkit-scrollbar {
+  background-color: #202324;
+  color: #aba499;
+}
+::-webkit-scrollbar-corner {
+  background-color: #181a1b;
+}
+::-webkit-scrollbar-thumb {
+  background-color: #535353;
+}
+p.links {
+  color: #229100;
+}
+button {
+  background-color: #229100;
+  border: none;
+  border-radius: 0.5em;
+  color: white;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  padding: 10px;
+  cursor: pointer;
+}
+
+a {
+  color: white;
+  border-radius: 0.5em;
+  text-decoration: none;
+}
+
+.wrapper {
+  border-radius: 2em;
+  padding: 2em;
+  width: 30%;
+  margin-bottom: 2em;
+  margin: auto;
+  margin-top:0;
+  overflow: hidden; /* add this to contain floated children */
+}
+.first {
+  width: 50%;
+
+  float: left; /* add this */
+}
+.second {
+  width: 50%;
+
+  float: right; /* add this */
+}

static/css/main.css

@@ -0,0 +1,257 @@
+body {
+  font-size: 3em;
+  background-color: #2c2c2c; 
+  font-family: "Roboto", sans-serif;
+  margin: auto;
+  margin-top: 30vh;
+  text-align: center;
+}
+
+a{
+  background-color: #535353;
+
+  border: none;
+  border-radius: 0.5em;
+  color: white;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  padding: 10px;
+  cursor: pointer;
+}
+h1 {
+  color: #229100;
+
+  
+}
+
+/** UNDERLINE
+:root {
+  --mainColor: #00b1c9;
+}
+
+
+a {
+  background:
+     linear-gradient(
+       to bottom, var(--mainColor) 0%,
+       var(--mainColor) 100%
+     );
+  font-weight: bold;
+  background-position: 0 100%;
+  background-repeat: repeat-x;
+  background-size: 4px 4px;
+  text-decoration: none;
+  transition: background-size .2s;
+}
+
+a:hover {
+  background-size: 4px 50px;
+}
+
+
+
+ * ----------------------------------------
+ * animation text-pop-up-top
+ * ----------------------------------------
+ */
+
+/* DARW BOX   #243754   
+      <div class="wrapper">
+        <span class="square">
+          <a class="tenth before after" href="#">Chem 12 CPT</a>
+        </span>
+      </div>
+.wrapper{
+  margin:3em 0;
+}
+a,a:visited,a:hover,a:active{
+  -webkit-backface-visibility:hidden;
+          backface-visibility:hidden;
+	position:relative;
+  transition:0.5s color ease;
+	text-decoration:none;
+	color:#229100;
+	font-size:2.5em;
+}
+a:hover{
+	color:#40e7e7;
+}
+a.before:before,a.after:after{
+  content: "";
+  transition:0.5s all ease;
+  -webkit-backface-visibility:hidden;
+          backface-visibility:hidden;
+  position:absolute;
+}
+a.before:before{
+  top:-0.25em;
+}
+a.after:after{
+  bottom:-0.25em;
+}
+a.before:before,a.after:after{
+  height:5px;
+  height:0.35rem;
+  width:0;
+  background:#40e7e7;
+}
+a.first:after{
+  left:0;
+}
+a.second:after{
+  right:0;
+}
+a.third:after,a.sixth:before,a.sixth:after{
+  left:50%;
+  -webkit-transform:translateX(-50%);
+          transform:translateX(-50%);
+}
+a.fourth:before,a.fourth:after{
+  left:0;
+}
+a.fifth:before,a.fifth:after{
+  right:0;
+}
+a.seventh:before{
+  right:0;
+}
+a.seventh:after{
+  left:0;
+}
+a.eigth:before{
+  left:0;
+}
+a.eigth:after{
+  right:0;
+}
+a.before:hover:before,a.after:hover:after{
+  width:100%;
+}
+.square{
+  box-sizing:border-box;
+  margin-left:-0.4em;
+  position:relative;
+  font-size:1em;
+  overflow:hidden;
+}
+.square a{
+  position:static;
+  font-size:100%;
+  padding:0.2em 0.4em;
+}
+.square:before,.square:after{
+  content: "";
+  box-sizing:border-box;
+  transition:0.25s all ease;
+  -webkit-backface-visibility:hidden;
+          backface-visibility:hidden;
+  position:absolute;
+  width:5px;
+  width:0.35rem;
+  height:0;
+  background:#40e7e7;
+}
+.square:before{
+  left:0;
+  bottom:-0.2em;
+}
+.square.individual:before{
+  transition-delay:0.6s;
+}
+.square:after{
+  right:0;
+  top:-0.2em;
+}
+.square.individual:after{
+  transition-delay:0.2s;
+}
+.square a:before{
+  left:0;
+  transition:0.25s all ease;
+}
+.square a:after{
+  right:0;
+  transition:0.25s all ease;
+}
+.square.individual a:after{
+  transition:0.25s all ease 0.4s;
+}
+.square:hover:before,.square:hover:after{
+  height:calc(100% + 0.4em);
+}
+.square:hover a:before,.square:hover a:after{
+  width:100%;
+}
+
+*/
+
+body::-webkit-scrollbar {
+  width: 0;
+}
+body::-webkit-scrollbar- {
+  width: 0;
+}
+
+/* ----------------------------------------------
+ * Generated by Animista on 2020-12-31 16:52:43
+ * Licensed under FreeBSD License.
+ * See http://animista.net/license for more info. 
+ * w: http://animista.net, t: @cssanimista
+ * ---------------------------------------------- */
+
+/**
+ * ----------------------------------------
+ * animation text-pop-up-top
+ * ----------------------------------------
+ */
+@-webkit-keyframes text-pop-up-top {
+  0% {
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+    -webkit-transform-origin: 50% 50%;
+    transform-origin: 50% 50%;
+    text-shadow: none;
+  }
+  100% {
+    -webkit-transform: translateY(-50px);
+    transform: translateY(-50px);
+    -webkit-transform-origin: 50% 50%;
+    transform-origin: 50% 50%;
+    text-shadow: 0 1px 0 #229100, 0 2px 0 #229100, 0 3px 0 #229100,
+      0 4px 0 #229100, 0 5px 0 #229100, 0 6px 0 #229100, 0 7px 0 #229100,
+      0 8px 0 #229100, 0 9px 0 #229100, 0 50px 30px rgba(0, 0, 0, 0.3);
+  }
+}
+@keyframes text-pop-up-top {
+  0% {
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+    -webkit-transform-origin: 50% 50%;
+    transform-origin: 50% 50%;
+    text-shadow: none;
+  }
+  100% {
+    -webkit-transform: translateY(-50px);
+    transform: translateY(-50px);
+    -webkit-transform-origin: 50% 50%;
+    transform-origin: 50% 50%;
+    text-shadow: 0 1px 0 #229100, 0 2px 0 #229100, 0 3px 0 #229100,
+      0 4px 0 #229100, 0 5px 0 #229100, 0 6px 0 #229100, 0 7px 0 #229100,
+      0 8px 0 #229100, 0 9px 0 #229100, 0 50px 30px rgba(0, 0, 0, 0.3);
+  }
+}
+
+.text-pop-up-top {
+  -webkit-animation: text-pop-up-top 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94)
+    both;
+  animation: text-pop-up-top 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+}
+
+
+iframe{
+  margin: auto;
+  width: 100%;
+  border: 0;
+  
+}

static/css/unit1.css

@@ -0,0 +1,93 @@
+a {
+  color: #229100;
+}
+a.button{
+  background-color: #535353;
+
+  border: none;
+  border-radius: 0.5em;
+  color: white;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  padding: 10px;
+  cursor: pointer;
+}
+iframe {
+  border-radius: 10px;
+  border-color: #229100;
+  width: 100%;
+  height: inherit;
+}
+
+img{
+    width: 100%;
+    border-radius: 10px;
+    border-color: #229100;
+}
+.hide{
+  display: none;
+}
+.t{
+  color: #fff;
+}
+.wrapper {
+  border-radius: 2em;
+  padding: 2em;
+  background: #535353;
+  margin-bottom: 2em;
+  width: 55%;
+  height: 30vh;
+  margin: auto;
+  overflow: hidden; /* add this to contain floated children */
+}
+.first {
+  width: 59%;
+  height: inherit;
+  float: left; /* add this */
+}
+.second {
+  width: 40%;
+  height: inherit;
+  float: right; /* add this */
+}
+
+/** Switch
+ -------------------------------------*/
+
+.switch input {
+  position: absolute;
+  opacity: 0;
+  
+}
+
+/**
+   * 1. Adjust this to size
+   */
+
+.switch {
+  display: inline-block;
+  font-size: 20px; /* 1 */
+  height: 1em;
+  width: 2em;
+  background: #bdb9a6;
+  border-radius: 1em;
+  margin-right: 10px;
+}
+
+.switch div {
+  height: 1em;
+  width: 1em;
+  border-radius: 1em;
+  background: #fff;
+  box-shadow: 0 0.1em 0.3em rgba(0, 0, 0, 0.3);
+  -webkit-transition: all 300ms;
+  -moz-transition: all 300ms;
+  transition: all 300ms;
+}
+
+.switch input:checked + div {
+  -webkit-transform: translate3d(100%, 0, 0);
+  -moz-transform: translate3d(100%, 0, 0);
+  transform: translate3d(100%, 0, 0);
+}

static/css/unit3.css

@@ -0,0 +1,98 @@
+.content {
+  width: 40%;
+  margin: auto;
+  text-align: left;
+}
+.hct {
+  width: 100%;
+  margin: auto;
+  border: #000000;
+  border-style: solid;
+}
+.baleq {
+  width: 4em;
+}
+h1.c {
+  color: greenyellow;
+  margin: 0;
+  padding: 0;
+  display: inline;
+}
+h1.x {
+  color: red;
+  margin: 0;
+  padding: 0;
+  display: inline;
+}
+
+p.c {
+  color: greenyellow;
+  display: inline;
+  font-size: 1.5em;
+}
+p.x {
+  color: red;
+  display: inline;
+  font-size: 1.5em;
+}
+.q1 {
+  border-radius: 2em;
+  padding: 2em;
+  background: #535353;
+  margin-bottom: 2em;
+}
+
+.q2 {
+  border-radius: 2em;
+  padding: 2em;
+  background: #535353;
+  margin-bottom: 2em;
+}
+
+.q3 {
+  border-radius: 2em;
+  padding: 2em;
+  background: #535353;
+  margin-bottom: 2em;
+}
+
+a.button {
+  background-color: #535353;
+  color: #ffffff;
+  text-decoration: none;
+  padding: 15px;
+}
+
+h4 {
+  margin: 0;
+}
+.title {
+  text-align: center;
+}
+.subbut {
+  text-align: right;
+  border-radius: 0.5em;
+  font-size:1.4em;
+  cursor: pointer;
+  background-color: #535353;
+}
+tr:nth-child(even) {
+  background-color: #2c2c2c;
+}
+tr:nth-child(odd) {
+  background-color: #535353;
+}
+input {
+  margin-bottom: 2em;
+  padding: 8px;
+  border: none;
+  border-bottom: 1px solid #2c2c2c;
+  background-color: #2c2c2c;
+  color: #ffffff;
+}
+
+.answer {
+  padding: 1em;
+  border-radius: 1.5em;
+  background-color: #2c2c2c;
+}

static/css/unit4.css

@@ -0,0 +1,60 @@
+.walk {
+  margin: auto;
+  width: 60%;
+  border-radius: 2em;
+  padding: 2em;
+  background: #535353;
+  margin-bottom: 2em;
+}
+p.quest {
+  margin: auto;
+  width: 60%;
+}
+.hl {
+  color: #229100;
+}
+.hl2 {
+  color: #229100;
+}
+.answer {
+  padding: 1em;
+  border-radius: 1.5em;
+  background-color: #2c2c2c;
+  overflow: hidden;
+}
+.wrapper {
+  padding-top: 2em;
+  margin-bottom: 2em;
+  margin: auto;
+  overflow: hidden; /* add this to contain floated children */
+}
+.first {
+  width: 50%;
+  float: left; /* add this */
+  text-align: left;
+}
+.second {
+  width: 50%;
+  float: right; /* add this */
+}
+.ice {
+  margin: auto;
+}
+tr:nth-child(even) {
+  background-color: #2c2c2c;
+}
+tr:nth-child(odd) {
+  background-color: #535353;
+}
+a.button {
+  background-color: #535353;
+  color: #ffffff;
+  text-decoration: none;
+  padding: 15px;
+}
+.hide{
+  display: none;
+}
+.t{
+  color: white;
+}

templates/card.html

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Ethan's Site</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="{{ url_for('static',filename='css/card.css') }}"
+    />
+    <meta name="msapplication-TileColor" content="#000000" />
+    <meta name="theme-color" content="#000000" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="{{ url_for('static',filename='css/chem12cpt.css') }}"
+    />
+    <link
+      rel="icon"
+      href="{{ url_for('static',filename='img/favicon.ico') }}"
+    />
+    <meta name="robots" content="index,follow" />
+  </head>
+  <body>
+    <h3>Click card to flip.</h3>
+    <div class="scene scene--card">
+      <div class="card">
+        <div class="card__face card__face--front">
+          <div class="cardtext">{{ front|safe }}</div>
+        </div>
+        <div class="card__face card__face--back">
+          <div class="cardtext">{{ back|safe }}</div>
+        </div>
+      </div>
+    </div>
+    <a href="../" class="button">Go Back</a>
+    <a onClick="window.location.reload()" class="button">Next</a>
+
+    <style></style>
+    <script>
+      var card = document.querySelector(".card");
+      card.addEventListener("click", function () {
+        card.classList.toggle("is-flipped");
+      });
+    </script>
+  </body>
+</html>

templates/chem12cpt.html

@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Ethan's Site</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="{{ url_for('static',filename='css/chem12cpt.css') }}"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="{{ url_for('static',filename='css/main.css') }}"
+    />
+    <meta name="msapplication-TileColor" content="#000000" />
+    <meta name="theme-color" content="#000000" />
+    <link
+      rel="icon"
+      href="{{ url_for('static',filename='img/favicon.ico') }}"
+    />
+    <meta name="robots" content="index,follow" />
+  </head>
+  <body style="margin-top: 1vh">
+    <div>
+      <h1>Chemistry 12 CPT</h1>
+    </div>
+    <div>
+      <p>
+        <a href="{{ url_for('static',filename='docs/studyguide.pdf') }}"
+          >Study Guide Units 1,2,3,4</a
+        >
+      </p>
+      <p class="links">Creative components:</p>
+      <div class="wrapper">
+        <div class="first">
+          <p><a href="./unit1">Unit 1</a></p>
+
+          <p><a href="./unit2">Unit 2</a></p>
+        </div>
+        <div class="second">
+          <p><a href="./unit3">Unit 3</a></p>
+
+          <p><a href="./unit4">Unit 4</a></p>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>

templates/main.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Redzuzu's Site</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/main.css') }}" />
+    <meta name="msapplication-TileColor" content="#000000" />
+    <meta name="theme-color" content="#000000" />
+    <link rel="icon" href="{{ url_for('static',filename='img/favicon.ico') }}" />
+    <meta name="robots" content="index,follow" />
+  </head>
+  <body>
+    <div class="content">
+      <h1 class="text-pop-up-top">Ethan Pisani.</h1>
+      <a href="/chem12cpt/">Chemistry 12 CPT</a>
+
+    </div>
+
+
+
+
+  </body>
+</html>

templates/model.html

@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>{{model}} Model</title>
+    <style>
+      body {
+        margin: 0;
+      }
+      canvas{
+        display: block;
+          width: 100%;
+          height: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    
+    <script type="module">
+import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r125/build/three.module.js';
+import {OrbitControls} from 'https://threejsfundamentals.org/threejs/resources/threejs/r125/examples/jsm/controls/OrbitControls.js';
+import {GLTFLoader} from 'https://threejsfundamentals.org/threejs/resources/threejs/r125/examples/jsm/loaders/GLTFLoader.js';
+let camera, scene, renderer;
+
+init();
+render();
+
+function init() {
+
+    const container = document.createElement( 'div' );
+    document.body.appendChild( container );
+
+    camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
+    //camera.position.set( - 1.8, 0.6, 2.7 );
+
+    scene = new THREE.Scene();
+
+            const loader = new GLTFLoader().setPath('../../static/models/organic/' );
+            var obj;
+            //loader.load( 'propan-2-ol.glb', function ( gltf ) {
+                loader.load( '{{model}}.glb', function ( gltf ) {
+                //loader.load( 'Box.gltf', function ( gltf ) {
+                obj = gltf.scene;
+                scene.add( gltf.scene );
+
+
+                render();
+
+            } );
+            var light = new THREE.HemisphereLight(0xffffff, 0x000000, 1.5)
+            scene.add(light);
+            camera.position.set(0, 0, 10)
+            scene.background = new THREE.Color(0x2c2c2c)
+            //Object.rotation.y += 0.01;
+    renderer = new THREE.WebGLRenderer( { antialias: true } );
+    renderer.setPixelRatio( window.devicePixelRatio );
+    renderer.setSize( window.innerWidth, window.innerHeight );
+    container.appendChild( renderer.domElement );
+    window.addEventListener( 'resize', onWindowResize );
+
+    function animate(){
+      requestAnimationFrame(animate);
+      obj.rotation.y +=0.01;
+      obj.rotation.x +=0.01;
+      obj.rotation.z +=0.01;
+      render();
+    }
+animate();
+
+
+    
+    
+}
+
+function onWindowResize() {
+
+    camera.aspect = window.innerWidth / window.innerHeight;
+    camera.updateProjectionMatrix();
+
+    renderer.setSize( window.innerWidth, window.innerHeight );
+
+    render();
+
+}
+
+//
+
+function render() {
+
+    renderer.render( scene, camera );
+
+}
+
+
+
+    </script>
+
+  </body>
+</html>

templates/unit1.html

@@ -0,0 +1,270 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Ethan's Site</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="{{ url_for('static',filename='css/chem12cpt.css') }}"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="{{ url_for('static',filename='css/unit1.css') }}"
+    />
+    <meta name="msapplication-TileColor" content="#000000" />
+    <meta name="theme-color" content="#000000" />
+    <link
+      rel="icon"
+      href="{{ url_for('static',filename='img/favicon.ico') }}"
+    />
+    <meta name="robots" content="index,follow" />
+  </head>
+  <body>
+    <div class="content">
+      <h1>Chemistry 12 CPT</h1>
+
+      <a href="../" class="button">Go Back</a>
+      <br />
+      <br />
+      <div class="wrapper">
+        <div class="first">
+          <p>Alkane:</p>
+          <p>Any hydrocarbon with only single bonds</p>
+          <p>Example: <a href="../../3d/butane">butane</a></p>
+        </div>
+        <div class="second">
+          <iframe
+            loading="lazy"
+            src="../../3d/pent-2-ene"
+            title="butane"
+          ></iframe>
+        </div>
+      </div>
+      <br />
+      <div class="wrapper">
+        <div class="first">
+          <p>Alkene:</p>
+          <p>Any hydrocarbon with double bonds</p>
+          <p>Example: <a href="../../3d/pent-2-ene">pent-2-ene</a></p>
+        </div>
+        <div class="second">
+          <iframe
+            loading="lazy"
+            src="../../3d/pent-2-ene"
+            title="butane"
+          ></iframe>
+        </div>
+      </div>
+      <br />
+      <div class="wrapper">
+        <div class="first">
+          <p>Alkyne:</p>
+          <p>Any hydrocarbon with triple bonds</p>
+          <p>Example: <a href="../../3d/hex-3-yne">hex-3-yne</a></p>
+        </div>
+        <div class="second">
+          <iframe
+            loading="lazy"
+            src="../../3d/hex-3-yne"
+            title="butane"
+          ></iframe>
+        </div>
+      </div>
+      <br />
+      <div class="wrapper">
+        <div class="first">
+          <p>Aromatic:</p>
+          <p>
+            Any hydrocarbon that contains benzene or benzene like properties
+          </p>
+          <p>Example: <a href="../../3d/benzene">benzene</a></p>
+        </div>
+        <div class="second">
+          <iframe
+            loading="lazy"
+            src="../../3d/benzene"
+            title="benzene"
+          ></iframe>
+        </div>
+      </div>
+      <br />
+
+      <div class="wrapper">
+        <div class="first">
+          <p>Alcohol:</p>
+          <p>A hydrocarbon with a main hydroxyl (OH) branch</p>
+          <p>Example: <a href="../../3d/propan-2-ol">propan-2-ol</a></p>
+        </div>
+        <div class="second">
+          <iframe
+            loading="lazy"
+            src="../../3d/propan-2-ol"
+            title="propan-2-ol"
+          ></iframe>
+        </div>
+      </div>
+      <br />
+
+      <div class="wrapper">
+        <div class="first">
+          <p>Aldehyde:</p>
+          <p>
+            A hydrocarbon with double bonded oxygen (=O), single bonded hydrogen
+            (H)
+          </p>
+          <p>Example: <a href="../../3d/ethanal">ethanal</a></p>
+        </div>
+        <div class="second">
+          <iframe
+            loading="lazy"
+            src="../../3d/ethanal"
+            title="ethanal"
+          ></iframe>
+        </div>
+      </div>
+      <br />
+
+      <div class="wrapper">
+        <div class="first">
+          <p>Ether:</p>
+          <p>A hydrocarbon with an oxygen (O) between two alkyl groups</p>
+          <p>
+            Example: <a href="../../3d/1-methoxypropane">1-methoxypropane</a>
+          </p>
+        </div>
+        <div class="second">
+          <iframe
+            loading="lazy"
+            src="../../3d/1-methoxypropane"
+            title="1-methoxypropane"
+          ></iframe>
+        </div>
+      </div>
+      <br />
+
+      <div class="wrapper">
+        <div class="first">
+          <p>Carboxylic acid:</p>
+          <p>
+            A hydrocarbon with a carboxyl group (C(=O)OH) attached to an alkyl
+            groups
+          </p>
+          <p>Example: <a href="../../3d/ethanoic_acid">ethanoic acid</a></p>
+        </div>
+        <div class="second">
+          <iframe
+            loading="lazy"
+            src="../../3d/ethanoic_acid"
+            title="ethanoic_acid"
+          ></iframe>
+        </div>
+      </div>
+      <br />
+
+      <div class="wrapper">
+        <div class="first">
+          <p>Ketone:</p>
+          <p>
+            A hydrocarbon with a double bonded oxygen (C=O) attached to two
+            alkyl groups
+          </p>
+          <p>Example: <a href="../../3d/pentan-2-one">pentan-2-one</a></p>
+        </div>
+        <div class="second">
+          <iframe
+            loading="lazy"
+            src="../../3d/pentan-2-one"
+            title="pentan-2-one"
+          ></iframe>
+        </div>
+      </div>
+      <br />
+
+      <div class="wrapper">
+        <div class="first">
+          <p>Ester:</p>
+          <p>
+            A hydrocarbon with a double bonded oxygen and a single bonded oxygen
+            (O-C=O) attached to two alkyl groups
+          </p>
+          <p>
+            Example: <a href="../../3d/propyl_ethanoate">propyl ethanoate</a>
+          </p>
+        </div>
+        <div class="second">
+          <iframe
+            loading="lazy"
+            src="../../3d/propyl_ethanoate"
+            title="propyl_ethanoate"
+          ></iframe>
+        </div>
+      </div>
+      <br />
+
+      <div class="wrapper">
+        <div class="first">
+          <p>Amine:</p>
+          <p>
+            A hydrocarbon with a bonded nitrogen (N) attached to 1 to 3 alkyl
+            groups
+          </p>
+          <p>
+            Example:
+            <a href="../../3d/n-methylbutan-2-amine">n-methylbutan-2-amine</a>
+          </p>
+        </div>
+        <div class="second">
+          <iframe
+            loading="lazy"
+            src="../../3d/n-methylbutan-2-amine"
+            title="n-methylbutan-2-amine"
+          ></iframe>
+        </div>
+      </div>
+      <br />
+
+      <div class="wrapper">
+        <div class="first">
+          <p>Aminde:</p>
+          <p>
+            A hydrocarbon with a bonded nitrogen with a double bonded oxygen
+            (N-C=O) attached to 1 to 3 alkyl groups
+          </p>
+          <p>
+            Example:
+            <a href="../../3d/n_n-dimethylpropanamide"
+              >n,n-dimethylpropanamide</a
+            >
+          </p>
+        </div>
+        <div class="second">
+          <iframe
+            loading="lazy"
+            src="../../3d/n_n-dimethylpropanamide"
+            title="n_n-dimethylpropanamide"
+          ></iframe>
+        </div>
+      </div>
+      <br />
+    </div>
+  </body>
+  <script>
+    function checkf() {
+      var checkb = document.getElementById("checkbox");
+      if (checkb.checked == true) {
+        console.log("checked");
+        var list = document.getElementsByClassName("t");
+        console.log(list);
+        for (var i = 0; i < list.length; i++) {
+          var e = list[i];
+          e.className = "hide";
+        }
+      }
+    }
+  </script>
+</html>

templates/unit1copyimg.html

@@ -0,0 +1,370 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Ethan's Site</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="{{ url_for('static',filename='css/chem12cpt.css') }}"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="{{ url_for('static',filename='css/unit1.css') }}"
+    />
+    <meta name="msapplication-TileColor" content="#000000" />
+    <meta name="theme-color" content="#000000" />
+    <link
+      rel="icon"
+      href="{{ url_for('static',filename='img/favicon.ico') }}"
+    />
+    <meta name="robots" content="index,follow" />
+  </head>
+  <body>
+    <div class="content">
+      <h1>Chemistry 12 CPT</h1>
+
+      <div class="container">
+        <label class="switch"
+          ><input type="checkbox" id="checkbox" onchange="checkf()" />
+          <div></div> </label
+        >3d models
+      </div>
+      <br />
+      <div class="wrapper">
+        <div class="first">
+          <p>Alkane:</p>
+          <p>Any hydrocarbon with only single bonds</p>
+          <p>Example: <a href="../../3d/butane">butane</a></p>
+        </div>
+        <div class="second">
+          <img
+            class="t"
+            id="1"
+            src="../../static/img/butane.png"
+            alt="butane"
+          />
+          <iframe
+            class="hide"
+            id="if"
+            loading="lazy"
+            src="../../3d/pent-2-ene"
+            title="butane"
+          ></iframe>
+        </div>
+      </div>
+      <br />
+      <div class="wrapper">
+        <div class="first">
+          <p>Alkene:</p>
+          <p>Any hydrocarbon with double bonds</p>
+          <p>Example: <a href="../../3d/pent-2-ene">pent-2-ene</a></p>
+        </div>
+        <div class="second">
+          <img
+            class="t"
+            id="2"
+            src="../../static/img/pent-2-ene.png"
+            alt="pent-2-ene"
+          />
+          <iframe
+            class="hide"
+            id="if"
+            loading="lazy"
+            src="../../3d/pent-2-ene"
+            title="butane"
+          ></iframe>
+        </div>
+      </div>
+      <br />
+      <div class="wrapper">
+        <div class="first">
+          <p>Alkyne:</p>
+          <p>Any hydrocarbon with triple bonds</p>
+          <p>Example: <a href="../../3d/hex-3-yne">hex-3-yne</a></p>
+        </div>
+        <div class="second">
+          <img
+            class="t"
+            id="im"
+            src="../../static/img/hex-3-yne.png"
+            alt="hex-3-yne"
+          />
+          <iframe
+            class="hide"
+            id="if"
+            loading="lazy"
+            src="../../3d/hex-3-yne"
+            title="butane"
+          ></iframe>
+        </div>
+      </div>
+      <br />
+      <div class="wrapper">
+        <div class="first">
+          <p>Aromatic:</p>
+          <p>
+            Any hydrocarbon that contains benzene or benzene like properties
+          </p>
+          <p>Example: <a href="../../3d/benzene">benzene</a></p>
+        </div>
+        <div class="second">
+          <img
+            class="t"
+            id="im"
+            src="../../static/img/benzene.png"
+            alt="benzene"
+          />
+          <iframe
+            class="hide"
+            id="if"
+            loading="lazy"
+            src="../../3d/benzene"
+            title="benzene"
+          ></iframe>
+        </div>
+      </div>
+      <br />
+
+      <div class="wrapper">
+        <div class="first">
+          <p>Alcohol:</p>
+          <p>A hydrocarbon with a main hydroxyl (OH) branch</p>
+          <p>Example: <a href="../../3d/propan-2-ol">propan-2-ol</a></p>
+        </div>
+        <div class="second">
+          <img
+            class="t"
+            id="im"
+            src="../../static/img/propan-2-ol.png"
+            alt="propan-2-ol"
+          />
+          <iframe
+            class="hide"
+            id="if"
+            loading="lazy"
+            src="../../3d/propan-2-ol"
+            title="propan-2-ol"
+          ></iframe>
+        </div>
+      </div>
+      <br />
+
+      <div class="wrapper">
+        <div class="first">
+          <p>Aldehyde:</p>
+          <p>
+            A hydrocarbon with double bonded oxygen (=O), single bonded hydrogen
+            (H)
+          </p>
+          <p>Example: <a href="../../3d/ethanal">ethanal</a></p>
+        </div>
+        <div class="second">
+          <img
+            class="t"
+            id="im"
+            src="../../static/img/ethanal.png"
+            alt="ethanal"
+          />
+          <iframe
+            class="hide"
+            id="if"
+            loading="lazy"
+            src="../../3d/ethanal"
+            title="ethanal"
+          ></iframe>
+        </div>
+      </div>
+      <br />
+
+      <div class="wrapper">
+        <div class="first">
+          <p>Ether:</p>
+          <p>A hydrocarbon with an oxygen (O) between two alkyl groups</p>
+          <p>
+            Example: <a href="../../3d/1-methoxypropane">1-methoxypropane</a>
+          </p>
+        </div>
+        <div class="second">
+          <img
+            class="t"
+            id="im"
+            src="../../static/img/1-methoxypropane.png"
+            alt="1-methoxypropane"
+          />
+          <iframe
+            class="hide"
+            id="if"
+            loading="lazy"
+            src="../../3d/1-methoxypropane"
+            title="1-methoxypropane"
+          ></iframe>
+        </div>
+      </div>
+      <br />
+
+      <div class="wrapper">
+        <div class="first">
+          <p>Carboxylic acid:</p>
+          <p>
+            A hydrocarbon with a carboxyl group (C(=O)OH) attached to an alkyl
+            groups
+          </p>
+          <p>Example: <a href="../../3d/ethanoic_acid">ethanoic acid</a></p>
+        </div>
+        <div class="second">
+          <img
+            class="t"
+            id="im"
+            src="../../static/img/ethanoic_acid.png"
+            alt="ethanoic_acid"
+          />
+          <iframe
+            class="hide"
+            id="if"
+            loading="lazy"
+            src="../../3d/ethanoic_acid"
+            title="ethanoic_acid"
+          ></iframe>
+        </div>
+      </div>
+      <br />
+
+      <div class="wrapper">
+        <div class="first">
+          <p>Ketone:</p>
+          <p>
+            A hydrocarbon with a double bonded oxygen (C=O) attached to two
+            alkyl groups
+          </p>
+          <p>Example: <a href="../../3d/pentan-2-one">pentan-2-one</a></p>
+        </div>
+        <div class="second">
+          <img
+            class="t"
+            id="im"
+            src="../../static/img/pentan-2-one.png"
+            alt="pentan-2-one"
+          />
+          <iframe
+            class="hide"
+            id="if"
+            loading="lazy"
+            src="../../3d/pentan-2-one"
+            title="pentan-2-one"
+          ></iframe>
+        </div>
+      </div>
+      <br />
+
+      <div class="wrapper">
+        <div class="first">
+          <p>Ester:</p>
+          <p>
+            A hydrocarbon with a double bonded oxygen and a single bonded oxygen
+            (O-C=O) attached to two alkyl groups
+          </p>
+          <p>
+            Example: <a href="../../3d/propyl_ethanoate">propyl ethanoate</a>
+          </p>
+        </div>
+        <div class="second">
+          <img
+            class="t"
+            id="im"
+            src="../../static/img/propyl_ethanoate.png"
+            alt="propyl_ethanoate"
+          />
+          <iframe
+            class="hide"
+            id="if"
+            loading="lazy"
+            src="../../3d/propyl_ethanoate"
+            title="propyl_ethanoate"
+          ></iframe>
+        </div>
+      </div>
+      <br />
+
+      <div class="wrapper">
+        <div class="first">
+          <p>Amine:</p>
+          <p>
+            A hydrocarbon with a bonded nitrogen (N) attached to 1 to 3 alkyl
+            groups
+          </p>
+          <p>
+            Example:
+            <a href="../../3d/n-methylbutan-2-amine">n-methylbutan-2-amine</a>
+          </p>
+        </div>
+        <div class="second">
+          <img
+            class="t"
+            id="im"
+            src="../../static/img/n-methylbutan-2-amine.png"
+            alt="n-methylbutan-2-amine"
+          />
+          <iframe
+            class="hide"
+            id="if"
+            loading="lazy"
+            src="../../3d/n-methylbutan-2-amine"
+            title="n-methylbutan-2-amine"
+          ></iframe>
+        </div>
+      </div>
+      <br />
+
+      <div class="wrapper">
+        <div class="first">
+          <p>Aminde:</p>
+          <p>
+            A hydrocarbon with a bonded nitrogen  with a double bonded oxygen
+            (N-C=O) attached to 1 to 3 alkyl groups
+          </p>
+          <p>
+            Example:
+            <a href="../../3d/n_n-dimethylpropanamide"
+              >n,n-dimethylpropanamide</a
+            >
+          </p>
+        </div>
+        <div class="second">
+          <img
+            class="t"
+            id="im"
+            src="../../static/img/n_n-dimethylpropanamide.png"
+            alt="n_n-dimethylpropanamide"
+          />
+          <iframe
+            class="hide"
+            id="if"
+            loading="lazy"
+            src="../../3d/n_n-dimethylpropanamide"
+            title="n_n-dimethylpropanamide"
+          ></iframe>
+        </div>
+      </div>
+      <br />
+    </div>
+  </body>
+  <script>
+    function checkf() {
+      var checkb = document.getElementById("checkbox");
+      if (checkb.checked == true) {
+        console.log("checked");
+        var list = document.getElementsByClassName("t");
+        console.log(list);
+        for (var i = 0; i < list.length; i++) {
+          var e = list[i];
+          e.className = "hide";
+        }
+      }
+    }
+  </script>
+</html>

templates/unit2.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Ethan's Site</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/chem12cpt.css') }}" />
+    <meta name="msapplication-TileColor" content="#000000" />
+    <meta name="theme-color" content="#000000" />
+    <link rel="icon" href="/img/favicon.ico" />
+    <meta name="robots" content="index,follow" />
+  </head>
+  <body>
+</body>
+</html>

templates/unit3.html

@@ -0,0 +1,218 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Ethan's Site</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="{{ url_for('static',filename='css/chem12cpt.css') }}"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="{{ url_for('static',filename='css/unit3.css') }}"
+    />
+    <meta name="msapplication-TileColor" content="#000000" />
+    <meta name="theme-color" content="#000000" />
+    <link
+      rel="icon"
+      href="{{ url_for('static',filename='img/favicon.ico') }}"
+    />
+    <meta name="robots" content="index,follow" />
+  </head>
+  <body>
+    <div class="content">
+      <div class="quest">
+        <h1 class="title ">Unit 3 Quiz</h1>
+        <form method="POST" action="">
+
+          <div class="q1">
+            <h4>Q.1</h4>
+            <p>
+              300g of an unkown metal at 400°C is dropped into 500mL of water at
+              21.5°C. The water is heated up to 74.6°C, what is the heat
+              capacity of the metal?
+            </p>
+            <table class="hct">
+              <tr>
+                <th>Substance</th>
+                <th>Heat Capacity</th>
+              </tr>
+              <tr>
+                <td>Iron</td>
+                <td>0.440</td>
+              </tr>
+              <tr>
+                <td>Lithium</td>
+                <td>3.56</td>
+              </tr>
+              <tr>
+                <td>Sodium</td>
+                <td>1.23</td>
+              </tr>
+              <tr>
+                <td>Aluminum</td>
+                <td>0.900</td>
+              </tr>
+              <tr>
+                <td>Potassium</td>
+                <td>0.75</td>
+              </tr>
+              <tr>
+                <td>Lead</td>
+                <td>0.160</td>
+              </tr>
+              <tr>
+                <td>Gold</td>
+                <td>0.1290</td>
+              </tr>
+            </table>
+            <hr />
+            <p>1.1: Please put answers with 4 sig digs (No UNITS)</p>
+            <input name="in1.1" type="text" placeholder="Ex. 0.8000" />
+            {% if testa %}
+            {{testa['in1.1']|safe}}
+            {% endif%}
+            <hr />
+            <p>1.2: Based on the chart, what metal is it likely to be (Just the metal)?</p>
+            <input name="in1.2" type="text" placeholder="Ex. Copper" />
+            {% if testa %}
+            {{testa['in1.2']|safe}}
+            {% endif%}
+                
+          </div>
+          <div class="q2">
+            <h4>Q.2</h4>
+            <p>Hexane combusts completely with oxygen gas.</p>
+            <p>2.1: What is the balanced equation (NO fractions)?</p>
+            <p class="hide">
+              <input
+                class="baleq"
+                name="in2.1.1"
+                type="text"
+                placeholder="Ex. 5H2"
+              />+<input
+                class="baleq"
+                name="in2.1.2"
+                type="text"
+                placeholder="Ex. 5H2"
+              />--><input
+                class="baleq"
+                name="in2.1.3"
+                type="text"
+                placeholder="Ex. 5H2"
+              />+<input
+                class="baleq"
+                name="in2.1.4"
+                type="text"
+                placeholder="Ex. 5H2"
+              />
+            </p>
+            {% if testa %}
+            {{testa['in2.1']|safe}}
+            {% endif%}
+            <hr />
+            <p>2.2: What is the enthalpy change (include +/-)(No UNITS)(4 sig digs)?</p>
+            <table class="hct">
+              <tr>
+                <th>Substance</th>
+                <th>ΔH<sub>f</sub> (kJ/mol)</th>
+              </tr>
+              <tr>
+                <td>C<sub>6</sub>H<sub>14</sub></td>
+                <td>-198.67</td>
+              </tr>
+              <tr>
+                <td>O<sub>2</sub></td>
+                <td>0</td>
+              </tr>
+              <tr>
+                <td>CO<sub>2</sub></td>
+                <td>−393.5</td>
+              </tr>
+              <tr>
+                <td>H<sub>2</sub>O</td>
+                <td>-285.8</td>
+              </tr>
+            </table>
+            <br />
+            <input name="in2.2" type="text" placeholder="Ex. +800" />
+            {% if testa %}
+            {{testa['in2.2']|safe}}
+            {% endif%}
+            <hr />
+
+            <p>
+              2.3: What is the molar enthalpy change of the hexane (include
+              +/-)(No UNITS)(4 sig digs)?
+            </p>
+
+            <input name="in2.3" type="text" placeholder="Ex. +800" />
+            {% if testa %}
+            {{testa['in2.3']|safe}}
+            {% endif%}
+
+          </div>
+          <div class="q3">
+            <h4>Q.3</h4>
+            <p>3.1: What is the ΔS of this reaction?</p>
+            <p>
+              2Li<sub>(s)</sub> + 2H<sub>2</sub>O<sub>(l)</sub> = 2LiOH<sub
+                >(aq)</sub
+              >
+              + H<sub>2(g)</sub>
+            </p>
+            <table class="hct">
+              <tr>
+                <th>Chemical</th>
+                <th>ΔS (J/mol*K)</th>
+              </tr>
+              <tr>
+                <td>LiOH</td>
+                <td>47.97</td>
+              </tr>
+              <tr>
+                <td>Li</td>
+                <td>29.09</td>
+              </tr>
+              <tr>
+                <td>H<sub>2</sub></td>
+                <td>130.6</td>
+              </tr>
+              <tr>
+                <td>H<sub>2</sub>O</td>
+                <td>69.95</td>
+              </tr>
+            </table>
+            <br />
+
+            <p>Put answers in 4 sig digs</p>
+            <input name="in3.1" type="text" placeholder="Ex. 800" />
+            {% if testa %}
+            {{testa['in3.1']|safe}}
+            {% endif%}
+            
+
+
+            <p>3.2: Is this reaction spontaneous based on entropy alone?</p>
+
+            <input name="in3.2" type="text" placeholder="Ex. Yes/No" />
+            {% if testa %}
+            {{testa['in3.2']|safe}}
+            {% endif%}
+
+          </div>
+          <input class="subbut" value="submit" type="submit" />
+        </form>
+      </div>
+      <a href="../" class="button">Go Back</a>
+    </div>
+    
+    
+      {{style|safe}}
+  </body>
+</html>

templates/unit4.html

@@ -0,0 +1,225 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Ethan's Site</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="{{ url_for('static',filename='css/chem12cpt.css') }}"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="{{ url_for('static',filename='css/unit4.css') }}"
+    />
+    <meta name="msapplication-TileColor" content="#000000" />
+    <meta name="theme-color" content="#000000" />
+    <link
+      rel="icon"
+      href="{{ url_for('static',filename='img/favicon.ico') }}"
+    />
+    <meta name="robots" content="index,follow" />
+  </head>
+  <body>
+    <div class="content">
+      <h1>Unit 4 Approxmation Rule Walkthrough</h1>
+      <div class="walk">
+        <p class="quest">
+          Initially 4.00 mol of carbon monoxide and 3.00 mol of bromine gas are
+          placed into a  2.5 L container, what is the concentration of the
+          reactants and Carbonyl bromide at equilibrium?
+        </p>
+        <p class="quest" id="inputText">K<sub>eq</sub> = 4.5x10<sup>-5</sup></p>
+        <br />
+        <button><a href="">Reset</a></button>
+        <button class="prevb" onclick="prev()">Previous</button>
+        <button class="nextb" onclick="next()">Next</button>
+        <button onclick="showall()">Show All</button>
+        <br />
+        <br />
+        <div class="answer">
+          <div class="wrapper">
+            <div class="first">
+              <p id="q1" class="hl2">1. Find chemical equation</p>
+              <p id="q2" class="hide">2. Balance chemical equation</p>
+              <p id="q3" class="hide">3. Make ICE table</p>
+              <p id="q4" class="hide">4. Fill in ICE table</p>
+              <p id="q5" class="hide">
+                5. Is this question an approximation rule (more than 1000x
+                difference)?
+              </p>
+              <p id="q6" class="hide">
+                6. Write keq equation with products and reactants
+              </p>
+              <p id="q7" class="hide">
+                7. Cross out x for reactants because we can assume that the
+                initial concentration of the reactants will be very similar to
+                the concentration at equilibrium
+              </p>
+              <p id="q8" class="hide">8. Solve for x</p>
+              <p id="q9" class="hide">
+                9. Use x to solve for each chemical’s equilibrium concentration
+              </p>
+            </div>
+            <div class="second">
+              <p id="w1" class="hl">
+                CO<sub>(g)</sub> + Br<sub>2(g)</sub> ⇌ COBr<sub>2(g)</sub>
+              </p>
+              <p id="w2" class="hide">
+                1CO<sub>(g)</sub> + 1Br<sub>2(g)</sub> ⇌ 1COBr<sub>2(g)</sub>
+              </p>
+              <div id="w3" class="hide">
+                <table class="ice">
+                  <tr>
+                    <td></td>
+                    <td>CO(g)</td>
+                    <td>Br2(g)</td>
+                    <td>COBr2(g)</td>
+                  </tr>
+                  <tr>
+                    <td>I</td>
+                    <td></td>
+                    <td></td>
+                    <td></td>
+                  </tr>
+                  <tr>
+                    <td>C</td>
+                    <td></td>
+                    <td></td>
+                    <td></td>
+                  </tr>
+                  <tr>
+                    <td>E</td>
+                    <td></td>
+                    <td></td>
+                    <td></td>
+                  </tr>
+                </table>
+              </div>
+              <div id="w4" class="hide">
+                <table class="ice">
+                  <tr>
+                    <td></td>
+                    <td>CO(g)</td>
+                    <td>Br2(g)</td>
+                    <td>COBr2(g)</td>
+                  </tr>
+                  <tr>
+                    <td>I</td>
+                    <td>1.60 mol/L</td>
+                    <td>1.20 mol/L</td>
+                    <td>0</td>
+                  </tr>
+                  <tr>
+                    <td>C</td>
+                    <td>-x</td>
+                    <td>-x</td>
+                    <td>+x</td>
+                  </tr>
+                  <tr>
+                    <td>E</td>
+                    <td>1.60 -x</td>
+                    <td>1.20 -x</td>
+                    <td>x</td>
+                  </tr>
+                </table>
+              </div>
+              <p id="w5" class="hide">
+                1.6 / 4.5x10<sup>-5</sup> = 35555.555... ∴ Yes it is more than
+                1000x difference
+              </p>
+              <div id="w6" class="hide">
+                <p>K<sub>eq</sub> = [Products] / [Reactants]</p>
+                <p>
+                  K<sub>eq</sub> = [COBr<sub>2(g)</sub>]<sup>1</sup> /
+                  [CO<sub>(g)</sub>]<sup>1</sup>[Br<sub>2(g)</sub>]<sup>1</sup>
+                </p>
+              </div>
+
+              <p id="w7" class="hide">
+                4.5x10<sup>-5</sup> = [x]<sup>1</sup> / [1.60
+                -x]<sup>1</sup>[1.20 -x]<sup>1</sup>
+              </p>
+              <div id="w8" class="hide">
+                <p>4.5x10<sup>-5</sup> = x / (1.60)(1.20)</p>
+                <p>4.5x10<sup>-5</sup> = x / 1.92</p>
+                <p>(4.5x10<sup>-5</sup>)(1.92) = x</p>
+                <p>x = 8.64x10<sup>-5</sup></p>
+              </div>
+
+              <div id="w9" class="hide">
+                <div class="wrapper">
+                  <div class="first">
+                    <p>[COBr<sub>2(g)</sub>] = x</p>
+                    <p>[COBr<sub>2(g)</sub>] = 8.64x10<sup>-5</sup> mol/L</p>
+                    <p>[Br<sub>2(g)</sub> ] = 1.20 - x</p>
+                    <p>[Br<sub>2(g)</sub> ] = 1.20 -8.64x10<sup>-5</sup></p>
+                    <p>[Br<sub>2(g)</sub> ] = 1.19991 mol/L</p>
+                    <p>[Br<sub>2(g)</sub> ] = 1.20 mol/L</p>
+                  </div>
+                  <div class="second">
+                    <p>[CO<sub>(g)</sub> ] = 1.60 - x</p>
+                    <p>[CO<sub>(g)</sub> ] = 1.60 -8.64x10<sup>-5</sup></p>
+                    <p>[CO<sub>(g)</sub> ] = 1.59991 mol/L</p>
+                    <p>[CO<sub>(g)</sub> ] = 1.60 mol/L</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <p><a href="../" class="button">Go Back</a></p>
+    </div>
+  </body>
+  <script>
+    let walkan = ["w1", "w2", "w3", "w4", "w5", "w6", "w7", "w8", "w9"];
+    let walkan2 = ["q1", "q2", "q3", "q4", "q5", "q6", "q7", "q8", "q9"];
+    function highlight(text) {
+      var inputText = document.getElementById("inputText");
+      var innerHTML = inputText.innerHTML;
+      var index = innerHTML.indexOf(text);
+      if (index >= 0) {
+        innerHTML =
+          innerHTML.substring(0, index) +
+          "<span class='highlight'>" +
+          innerHTML.substring(index, index + text.length) +
+          "</span>" +
+          innerHTML.substring(index + text.length);
+        inputText.innerHTML = innerHTML;
+      }
+    }
+    function next() {
+      var x = document.querySelector(".hl");
+      let pos = walkan.indexOf(x.id);
+      if (pos != 8) {
+        document.getElementById(walkan[pos]).className = "";
+        document.getElementById(walkan[pos + 1]).className = "hl";
+        document.getElementById(walkan2[pos]).className = "";
+        document.getElementById(walkan2[pos + 1]).className = "hl2";
+      }
+    }
+    function prev() {
+      var x = document.querySelector(".hl");
+      let pos = walkan.indexOf(x.id);
+      if (pos != 0) {
+        document.getElementById(walkan[pos]).className = "hide";
+        document.getElementById(walkan[pos - 1]).className = "hl";
+        document.getElementById(walkan2[pos]).className = "hide";
+        document.getElementById(walkan2[pos - 1]).className = "hl2";
+      }
+    }
+    function showall() {
+      var arrayLength = walkan.length;
+      for (var i = 0; i < arrayLength; i++) {
+        document.getElementById(walkan[i]).className = "t";
+        document.getElementById(walkan2[i]).className = "t";
+      }
+    }
+  </script>
+</html>

threejs-test/example.js

@@ -0,0 +1,18 @@
+import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r125/build/three.module.js';
+import {OrbitControls} from 'https://threejsfundamentals.org/threejs/resources/threejs/r125/examples/jsm/controls/OrbitControls.js';
+import {GLTFLoader} from 'https://threejsfundamentals.org/threejs/resources/threejs/r125/examples/jsm/loaders/GLTFLoader.js';
+const loader = new GLTFLoader();
+const scene = new THREE.Scene();
+//scene.background = new THREE.Color('black');
+// Load a glTF resource
+
+
+
+
+const gltfLoader = new GLTFLoader();
+    gltfLoader.load('../models/organic/propan-2-ol.gltf', (gltf) => {
+      const root = gltf.scene;
+      scene.add(root);
+      gltf.asset;
+      render();
+    });

threejs-test/help.js

@@ -0,0 +1,74 @@
+import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r125/build/three.module.js';
+import {OrbitControls} from 'https://threejsfundamentals.org/threejs/resources/threejs/r125/examples/jsm/controls/OrbitControls.js';
+import {GLTFLoader} from 'https://threejsfundamentals.org/threejs/resources/threejs/r125/examples/jsm/loaders/GLTFLoader.js';
+let camera, scene, renderer;
+
+init();
+render();
+
+function init() {
+
+    const container = document.createElement( 'div' );
+    document.body.appendChild( container );
+
+    camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
+    //camera.position.set( - 1.8, 0.6, 2.7 );
+
+    scene = new THREE.Scene();
+
+            const loader = new GLTFLoader().setPath('../models/organic/' );
+            var obj;
+            //loader.load( 'propan-2-ol.glb', function ( gltf ) {
+                loader.load( 'testmolctrlj.glb', function ( gltf ) {
+                //loader.load( 'Box.gltf', function ( gltf ) {
+                obj = gltf.scene;
+                scene.add( gltf.scene );
+
+
+                render();
+
+            } );
+            var light = new THREE.HemisphereLight(0xffffff, 0x000000, 1.5)
+            scene.add(light);
+            camera.position.set(0, 0, 10)
+            scene.background = new THREE.Color(0x2c2c2c)
+            //Object.rotation.y += 0.01;
+    renderer = new THREE.WebGLRenderer( { antialias: true } );
+    renderer.setPixelRatio( window.devicePixelRatio );
+    renderer.setSize( window.innerWidth, window.innerHeight );
+    container.appendChild( renderer.domElement );
+    window.addEventListener( 'resize', onWindowResize );
+
+    function animate(){
+        requestAnimationFrame(animate);
+        obj.rotation.y += 0.005;
+        obj.rotation.z += 0.005;
+        obj.rotation.x += 0.005;
+        renderer.render(scene, camera)
+    }
+    animate();
+
+    
+
+}
+
+
+
+function onWindowResize() {
+
+    camera.aspect = window.innerWidth / window.innerHeight;
+    camera.updateProjectionMatrix();
+
+    renderer.setSize( window.innerWidth, window.innerHeight );
+
+    render();
+
+}
+
+//
+
+function render() {
+
+    renderer.render( scene, camera );
+
+}

threejs-test/index.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>My first three.js app</title>
+    <style>
+      body {
+        margin: 0;
+      }
+      canvas{
+        display: block;
+          width: 100%;
+          height: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    
+    <script type="module" src="./help.js"></script>
+
+  </body>
+</html>

threejs-test/main.js

@@ -0,0 +1,40 @@
+const scene = new THREE.Scene();
+
+const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+
+const render = new THREE.WebGLRenderer();
+
+render.setSize(window.innerWidth, window.innerHeight);
+
+document.body
+
+
+//
+loader.load(
+	// resource URL
+	'../models/organic/propan-2-ol.gltf',
+	// called when the resource is loaded
+	function ( gltf ) {
+
+		scene.add( gltf.scene );
+
+		gltf.animations; // Array<THREE.AnimationClip>
+		gltf.scene; // THREE.Group
+		gltf.scenes; // Array<THREE.Group>
+		gltf.cameras; // Array<THREE.Camera>
+		gltf.asset; // Object
+
+	},
+	// called while loading is progressing
+	function ( xhr ) {
+
+		console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
+
+	},
+	// called when loading has errors
+	function ( error ) {
+        console.log(error)
+		console.log( 'An error happened' );
+
+	}
+);