commit 89734651d1c904bb92530e807528e95f6bbfd17d
parent 43b1a05c9c05d2771d2149d7b51a6daf8feb3e4f
Author: Alexander Kulpin <alexanderkulpin@rocketmail.com>
Date: Tue, 9 Apr 2019 09:56:20 -0400
CSS and JavaScript seperation
Split the CSS code and JavaScript from the HTML
Diffstat:
| M | src/html/index.html | | | 220 | +------------------------------------------------------------------------------ |
| A | src/html/javascript.js | | | 105 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
| A | src/html/style.css | | | 121 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
3 files changed, 228 insertions(+), 218 deletions(-)
diff --git a/src/html/index.html b/src/html/index.html
@@ -1,117 +1,7 @@
<!DOCTYPE html>
<html>
<head>
-<style>
-
-body, html
-{
- background: #FFF3DD;
- background-color: #FFF3DD;
- height: 100%;
- margin-left: auto;
- margin-right: auto;
- margin-top: 0px;
- font-family: Arial;
-}
-
-div
-{
- height: 100px;
- width: 1000px;
- padding: 10px;
- border: 5px solid #57150B;
- border-top: 50px solid #57150B;
- margin-top: 0px;
- margin-left: auto;
- margin-right: auto;
-}
-
-.button
-{
- background-color: #57150B;
- border: none;
- color: #FFDD4D;
- padding: 15px 32px;
- text-align: center;
- text-decoration: none;
- display: inline-block;
- font-size: 16px;
- margin: 4px 2px;
- cursor: pointer;
-}
-
-.input
-{
- background-color: #57150B;
- border: none;
- color: #FFDD4D;
- padding: 15px 32px;
- text-align: center;
- text-decoration: none;
- display: inline-block;
- font-size: 16px;
- margin: 4px 2px;
- cursor: pointer;
-}
-
-h1
-{
- color: #57150B;
- margin-left: auto;
- margin-right: auto;
-}
-h2
-{
- color: #57150B;
- margin-left: auto;
- margin-right: auto;
-}
-h3
-{
- color: #57150B;
- margin-left: auto;
- margin-right: auto;
-}
-h4
-{
- color: #57150B;
- margin-left: auto;
- margin-right: auto;
-}
-
-.tablink
-{
- background-color: #57150B;
- color: #FFCC00;
- float: left;
- border: none;
- outline: none;
- cursor: pointer;
- padding: 14px 16px;
- font-size: 17px;
- width: 25%;
-}
-
-.tablink:hover
-{
- background-color: #FFCC00;
- color: #57150B;
-}
-
-.tabcontent
-{
- color: #57150B;
- display: none;
- padding: 20px 20px;
- height: auto;
-}
-
-#Home {background-color: white;}
-#Download {background-color: white;}
-#Upload {background-color: white;}
-#Status {background-color: white;}
-
-</style>
+ <link rel="stylesheet" href="style.css">
</head>
<body>
@@ -1080,112 +970,7 @@ h4
</body>
-<script>
-
-function openPage(pageName, elmnt, color)
-{
- var i, tabcontent, tablinks;
- tabcontent = document.getElementsByClassName("tabcontent");
- for (i = 0; i < tabcontent.length; i++)
- {
- tabcontent[i].style.display = "none";
- }
-
- tablinks = document.getElementsByClassName("tablink");
- for (i = 0; i < tablinks.length; i++)
- {
- tablinks[i].style.backgroundColor = "";
- }
-
- document.getElementById(pageName).style.display = "block";
-
- elmnt.style.backgroundColor = color;
-}
-
-document.getElementById("defaultOpen").click();
+<script type="text/javascript" src="javascript.js"></script>
-function fieldappear(that)
-{
- if (that.value == "form_A")
- {
- document.getElementById("fadeableA").style.display = "block";
- document.getElementById("fadeableB").style.display = "none";
- document.getElementById("fadeableC").style.display = "none";
- document.getElementById("fadeableD").style.display = "none";
- document.getElementById("fadeableE").style.display = "none";
- document.getElementById("fadeableF").style.display = "none";
- }
- else if (that.value == "form_B")
- {
- document.getElementById("fadeableA").style.display = "none";
- document.getElementById("fadeableB").style.display = "block";
- document.getElementById("fadeableC").style.display = "none";
- document.getElementById("fadeableD").style.display = "none";
- document.getElementById("fadeableE").style.display = "none";
- document.getElementById("fadeableF").style.display = "none";
- }
- else if (that.value == "form_C")
- {
- document.getElementById("fadeableA").style.display = "none";
- document.getElementById("fadeableB").style.display = "none";
- document.getElementById("fadeableC").style.display = "block";
- document.getElementById("fadeableD").style.display = "none";
- document.getElementById("fadeableE").style.display = "none";
- document.getElementById("fadeableF").style.display = "none";
- }
- else if (that.value == "form_D")
- {
- document.getElementById("fadeableA").style.display = "none";
- document.getElementById("fadeableB").style.display = "none";
- document.getElementById("fadeableC").style.display = "none";
- document.getElementById("fadeableD").style.display = "block";
- document.getElementById("fadeableE").style.display = "none";
- document.getElementById("fadeableF").style.display = "none";
- }
- else if (that.value == "form_E")
- {
- document.getElementById("fadeableA").style.display = "none";
- document.getElementById("fadeableB").style.display = "none";
- document.getElementById("fadeableC").style.display = "none";
- document.getElementById("fadeableD").style.display = "none";
- document.getElementById("fadeableE").style.display = "block";
- document.getElementById("fadeableF").style.display = "none";
- }
- else if (that.value == "form_F")
- {
- document.getElementById("fadeableA").style.display = "none";
- document.getElementById("fadeableB").style.display = "none";
- document.getElementById("fadeableC").style.display = "none";
- document.getElementById("fadeableD").style.display = "none";
- document.getElementById("fadeableE").style.display = "none";
- document.getElementById("fadeableF").style.display = "block";
- }
- else
- {
- document.getElementById("fadeableA").style.display = "none";
- document.getElementById("fadeableB").style.display = "none";
- document.getElementById("fadeableC").style.display = "none";
- document.getElementById("fadeableD").style.display = "none";
- document.getElementById("fadeableE").style.display = "none";
- document.getElementById("fadeableF").style.display = "none";
- }
-}
-function mainappear(pass, dep, that)
-{
- if (pass.value == dep.value && pass.value != "")
- {
- document.getElementById("fadeableMain").style.display = "block";
- document.getElementById("fadeableMain2").style.display = "none";
- document.getElementById("department_name").text = dep.value;
- that.style.display = "none";
- }
- else
- {
- document.getElementById("fadeableMain").style.display = "none";
- document.getElementById("fadeableMain2").style.display = "block";
- alert("wrong password");
- }
-}
-</script>
-\ No newline at end of file
diff --git a/src/html/javascript.js b/src/html/javascript.js
@@ -0,0 +1,105 @@
+function openPage(pageName, elmnt, color)
+{
+ var i, tabcontent, tablinks;
+ tabcontent = document.getElementsByClassName("tabcontent");
+ for (i = 0; i < tabcontent.length; i++)
+ {
+ tabcontent[i].style.display = "none";
+ }
+
+ tablinks = document.getElementsByClassName("tablink");
+ for (i = 0; i < tablinks.length; i++)
+ {
+ tablinks[i].style.backgroundColor = "";
+ }
+
+ document.getElementById(pageName).style.display = "block";
+
+ elmnt.style.backgroundColor = color;
+}
+
+document.getElementById("defaultOpen").click();
+
+function fieldappear(that)
+{
+ if (that.value == "form_A")
+ {
+ document.getElementById("fadeableA").style.display = "block";
+ document.getElementById("fadeableB").style.display = "none";
+ document.getElementById("fadeableC").style.display = "none";
+ document.getElementById("fadeableD").style.display = "none";
+ document.getElementById("fadeableE").style.display = "none";
+ document.getElementById("fadeableF").style.display = "none";
+ }
+ else if (that.value == "form_B")
+ {
+ document.getElementById("fadeableA").style.display = "none";
+ document.getElementById("fadeableB").style.display = "block";
+ document.getElementById("fadeableC").style.display = "none";
+ document.getElementById("fadeableD").style.display = "none";
+ document.getElementById("fadeableE").style.display = "none";
+ document.getElementById("fadeableF").style.display = "none";
+ }
+ else if (that.value == "form_C")
+ {
+ document.getElementById("fadeableA").style.display = "none";
+ document.getElementById("fadeableB").style.display = "none";
+ document.getElementById("fadeableC").style.display = "block";
+ document.getElementById("fadeableD").style.display = "none";
+ document.getElementById("fadeableE").style.display = "none";
+ document.getElementById("fadeableF").style.display = "none";
+ }
+ else if (that.value == "form_D")
+ {
+ document.getElementById("fadeableA").style.display = "none";
+ document.getElementById("fadeableB").style.display = "none";
+ document.getElementById("fadeableC").style.display = "none";
+ document.getElementById("fadeableD").style.display = "block";
+ document.getElementById("fadeableE").style.display = "none";
+ document.getElementById("fadeableF").style.display = "none";
+ }
+ else if (that.value == "form_E")
+ {
+ document.getElementById("fadeableA").style.display = "none";
+ document.getElementById("fadeableB").style.display = "none";
+ document.getElementById("fadeableC").style.display = "none";
+ document.getElementById("fadeableD").style.display = "none";
+ document.getElementById("fadeableE").style.display = "block";
+ document.getElementById("fadeableF").style.display = "none";
+ }
+ else if (that.value == "form_F")
+ {
+ document.getElementById("fadeableA").style.display = "none";
+ document.getElementById("fadeableB").style.display = "none";
+ document.getElementById("fadeableC").style.display = "none";
+ document.getElementById("fadeableD").style.display = "none";
+ document.getElementById("fadeableE").style.display = "none";
+ document.getElementById("fadeableF").style.display = "block";
+ }
+ else
+ {
+ document.getElementById("fadeableA").style.display = "none";
+ document.getElementById("fadeableB").style.display = "none";
+ document.getElementById("fadeableC").style.display = "none";
+ document.getElementById("fadeableD").style.display = "none";
+ document.getElementById("fadeableE").style.display = "none";
+ document.getElementById("fadeableF").style.display = "none";
+ }
+}
+
+function mainappear(pass, dep, that)
+{
+ if (pass.value == dep.value && pass.value != "")
+ {
+ document.getElementById("fadeableMain").style.display = "block";
+ document.getElementById("fadeableMain2").style.display = "none";
+ document.getElementById("department_name").text = dep.value;
+ that.style.display = "none";
+ }
+ else
+ {
+ document.getElementById("fadeableMain").style.display = "none";
+ document.getElementById("fadeableMain2").style.display = "block";
+ alert("wrong password");
+ }
+}
diff --git a/src/html/style.css b/src/html/style.css
@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<html>
+<head>
+<body>
+<style>
+ "body, html
+ {
+ background: #FFF3DD;
+ background-color: #FFF3DD;
+ height: 100%;
+ margin-left: auto;
+ margin-right: auto;
+ margin-top: 0px;
+ font-family: Arial;
+ }
+
+ div
+ {
+ height: 100px;
+ width: 1000px;
+ padding: 10px;
+ border: 5px solid #57150B;
+ border-top: 50px solid #57150B;
+ margin-top: 0px;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .button
+ {
+ background-color: #57150B;
+ border: none;
+ color: #FFDD4D;
+ padding: 15px 32px;
+ text-align: center;
+ text-decoration: none;
+ display: inline-block;
+ font-size: 16px;
+ margin: 4px 2px;
+ cursor: pointer;
+ }
+
+ .input
+ {
+ background-color: #57150B;
+ border: none;
+ color: #FFDD4D;
+ padding: 15px 32px;
+ text-align: center;
+ text-decoration: none;
+ display: inline-block;
+ font-size: 16px;
+ margin: 4px 2px;
+ cursor: pointer;
+ }
+
+ h1
+ {
+ color: #57150B;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ h2
+ {
+ color: #57150B;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ h3
+ {
+ color: #57150B;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ h4
+ {
+ color: #57150B;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .tablink
+ {
+ background-color: #57150B;
+ color: #FFCC00;
+ float: left;
+ border: none;
+ outline: none;
+ cursor: pointer;
+ padding: 14px 16px;
+ font-size: 17px;
+ width: 25%;
+ }
+
+ .tablink:hover
+ {
+ background-color: #FFCC00;
+ color: #57150B;
+ }
+
+ .tabcontent
+ {
+ color: #57150B;
+ display: none;
+ padding: 20px 20px;
+ height: auto;
+ }
+
+#Home {background-color: white;}
+#Download {background-color: white;}
+#Upload {background-color: white;}
+#Status {background-color: white;}
+"
+</style>
+</body>
+</head>
+</html>
+\ No newline at end of file
