From 4b163d40d1aeade18703621a11a87205cebca230 Mon Sep 17 00:00:00 2001
From: Shchoholiev <sh.codework@gmail.com>
Date: Fri, 26 Nov 2021 11:37:15 +0200
Subject: [PATCH] added favicons & main page

---
 Set-Algebra/index.html  |   2 +-
 img/Boolean-Algebra.png | Bin 0 -> 2475 bytes
 img/Set-Algebra.png     | Bin 0 -> 4125 bytes
 index.html              |  44 ++++++++++++----------------------------
 style.css               |  38 ++++++++++++++++++++++++++++++++++
 5 files changed, 52 insertions(+), 32 deletions(-)
 create mode 100644 img/Boolean-Algebra.png
 create mode 100644 img/Set-Algebra.png

diff --git a/Set-Algebra/index.html b/Set-Algebra/index.html
index cd5d1a1..ae72e58 100644
--- a/Set-Algebra/index.html
+++ b/Set-Algebra/index.html
@@ -5,7 +5,7 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="icon" type="image/x-icon" href="../Set-Algebra/favicon.png">
+    <link rel="icon" type="image/x-icon" href="favicon.png">
     <title>Set Algebra Calculator</title>
 
     <link rel="stylesheet" href="../style.css">
diff --git a/img/Boolean-Algebra.png b/img/Boolean-Algebra.png
new file mode 100644
index 0000000000000000000000000000000000000000..5dd962f3758006ce03fc50a68c3ea8b931821c3f
GIT binary patch
literal 2475
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
Urnvd1!|w}*L7fE|c9%&10SLW<Z~y=R

literal 0
HcmV?d00001

diff --git a/img/Set-Algebra.png b/img/Set-Algebra.png
new file mode 100644
index 0000000000000000000000000000000000000000..460ba6f4414acd0e38594e3f7601aaba5181be44
GIT binary patch
literal 4125
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
bN~!+?MHlnFj~b}<00000NkvXXu0mjf^jXxo

literal 0
HcmV?d00001

diff --git a/index.html b/index.html
index e552cf0..dc979c4 100644
--- a/index.html
+++ b/index.html
@@ -5,10 +5,10 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" type="image/x-icon" href="img/favicon.png">
+    <title>CDM Calculator</title>
 
-    <title>Lab-1</title>
-
-    <link rel="stylesheet" href="/style.css">
+    <link rel="stylesheet" href="style.css">
 
 </head>
 
@@ -20,8 +20,8 @@
             <div class="content">
                 <h3><a href="">CDM</a></h3>
                 <div class="theme">
-                    <h3><a href="/Lab-1/index.html">Set Algebra</a></h3>
-                    <h3><a href="/Lab-2/index.html">Boolean Algebra</a></h3>
+                    <h3><a href="Set-Algebra/index.html">Set Algebra</a></h3>
+                    <h3><a href="">Boolean Algebra</a></h3>
                 </div>
             </div>
 
@@ -30,36 +30,18 @@
         <div class="wrapper">
 
             <div class="wrap-side">
-                <h1>Sets</h1>
-                <div id="sets">
-                    <div class="input-wrap">
-                        <h1 class="text">Set A = </h1>
-                        <div class="input"><input type="set" onkeydown="return checkInputSet(event.key, this.value)" id="set0" placeholder="1,2,3" /></div>
-                    </div>
-                    <div class="input-wrap">
-                        <h1 class="text">Set B = </h1>
-                        <div class="input"><input type="set" onkeydown="return checkInputSet(event.key, this.value)" id="set1" placeholder="Define set" /></div>
-                    </div>
-                </div>
-                <input class="addSet" type="button" value="Add Set" onclick="AddSet()" />
+                <a href="Set-Algebra/index.html" class="calculator">
+                    <img src="img/Set-Algebra.png">
+                    <h1>Set Algebra Calculator</h1>
+                </a>
             </div>
 
             <div class="wrap-side">
-                <h1>Problem</h1>
-                <h2><input type="problem" id="formula" onkeydown="return checkInputProblem(event.key)" placeholder="!A-C+B/U" /></h2>
-                <div class="buttons">
-                    <input class="button" type="button" id="calculate" value="Evaluate" onclick="Evaluate(true)" />
-                    <input class="button" type="button" id="calculate" value="Step by step" onclick="stepByStep()" />
-                </div>
-                <div class="wrap-result">
-                    <div class="input-wrap">
-                        <h1 class="text">Result </h1>
-                        <div class="input"><input type="result" id="result" readonly/></div>
-                    </div>
-                </div>
-                <h6 class="description">Define sets: A, B, C, and Universal set. Then write the problem you need to solve. </h6>
+                <a href="" class="calculator">
+                    <img src="img/Boolean-Algebra.png">
+                    <h1>Boolean Algebra Calculator</h1>
+                </a>
             </div>
-        </div>
 
 </body>
 
diff --git a/style.css b/style.css
index e0ac775..64175dd 100644
--- a/style.css
+++ b/style.css
@@ -248,6 +248,12 @@ input[type=button] {
     cursor: pointer;
     font-size: 18px;
     font-family: Myriad-R;
+    transition: 1s;
+}
+
+input[type=button]:hover {
+    background-color: rgba(255, 255, 255, 0.7);
+    transition: 1s;
 }
 
 input[type=result] {
@@ -323,6 +329,38 @@ input[type=result] {
     display: none;
 }
 
+
+/* ------------------Main-------------- */
+
+.calculator {
+    display: flex;
+    flex-direction: column;
+    margin: 20px auto;
+    width: 90%;
+    max-width: 250px;
+    background-color: rgba(255, 255, 255, 0.3);
+    border-radius: 20px;
+    padding: 20px;
+    transition: 1s;
+}
+
+.calculator img {
+    height: 100px;
+    margin: 20px auto;
+}
+
+.calculator:hover {
+    background-color: rgba(255, 255, 255, 0.5);
+    transition: 1s;
+}
+
+.calculator h1 {
+    margin: 0 auto;
+    text-align: center;
+    font-size: 23px;
+    max-width: 200px;
+}
+
 @media screen and (max-device-width: 650px) and (min-device-width: 0px) {
     .wrapper {
         flex-direction: column;