feat : combine new UI

BE-Aeasthatic-Quality-Check/colorcube-master/FE-InHome/css/style.css

@@ -114,7 +114,7 @@ section {
 	clear: both;
 	padding: 80px 0;
 	background-color: #f8f9fa;
-	position: relative
+	position: center
 }
 
 #page-title .page-title {
@@ -143,7 +143,7 @@ section {
 
 #page-title.page-title-left .page-title {
 	float: left;
-	text-align: left;
+	text-align: center;
 	clear: both
 }
 

BE-Aeasthatic-Quality-Check/colorcube-master/FE-InHome/home_page.html

@@ -189,7 +189,13 @@
                     </form>
                     <small id="dropzoneHelp" class="form-text text-muted">Max file size is 2MB and max number of files is 10.</small>
                 </div>
+                
+                <!-- next button -->
+                <a href="/Users/chithuwedage/Documents/Presently/21_22-j-02/BE-Aeasthatic-Quality-Check/colorcube-master/startPage.html">
+                  <input id="brand-color-button" name="brand-color-button" type="submit" class="cc__form__button" value="Next" style="align-items:center">
+                </a>
                 <div class="line"></div>
+               
             </div>
             </div>
         </div>

BE-Aeasthatic-Quality-Check/colorcube-master/colorCube.html

@@ -27,7 +27,6 @@
 		<meta name="twitter:image:alt" content="We are sorry, but this tool is not optimized for the visually impaired.">
 	   
 		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-		<title>[Color Detector]</title>
 		<script type="text/javascript" src="./assets/js/detection.js"></script>
 		<link rel="stylesheet" type="text/css" media="screen" href="./assets/css/main.css" />
 	</head>
@@ -244,17 +243,36 @@
 	</article>
   </main>
 
-  <footer id="footer">
+  
+  
+  
+  <script
+      src="https://code.jquery.com/jquery-3.4.1.min.js"
+      integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
+      crossorigin="anonymous"></script>
+    <script type="text/javascript" src="assets/js/tinycolor.js"></script>
+    <script type="text/javascript" src="assets/js/colorcube.js" ></script>
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+    
+      ga('create', 'UA-43388256-3', 'auto');
+      ga('send', 'pageview');
+    </script>
+</body>
+<footer id="footer">
 	<div class="footer-content">
 		<div class="container">
 			<div class="row">
 				<div class="col-xl-2 col-lg-2 col-md-3">
 				<div class="widget">
 				
-			</div>
-		  </div>
-		</div>
-	  </div>
+				</div>
+		     	</div>
+		    </div>
+	    </div>
 	</div>
 	<div class="copyright-content">
 	  <div class="container">
@@ -301,22 +319,4 @@
   
   <a id="scrollTop"><i class="icon-chevron-up"></i><i class="icon-chevron-up"></i></a>
   
-  
-  
-  <script
-      src="https://code.jquery.com/jquery-3.4.1.min.js"
-      integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
-      crossorigin="anonymous"></script>
-    <script type="text/javascript" src="assets/js/tinycolor.js"></script>
-    <script type="text/javascript" src="assets/js/colorcube.js" ></script>
-    <script>
-      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
-    
-      ga('create', 'UA-43388256-3', 'auto');
-      ga('send', 'pageview');
-    </script>
-</body>
 </html>
\ No newline at end of file

BE-Aeasthatic-Quality-Check/colorcube-master/startPage.html

@@ -14,9 +14,9 @@
    
   <meta charset="UTF-8">
   <title>PRESENTLY </title>
-  <link rel="stylesheet" href="assets/css/styles.css" type="text/css">
+  <link rel="stylesheet" href="FE-InHome/css/style.css" type="text/css">
   
-  <meta name="twitter:card" content="summary">
+  <!-- <meta name="twitter:card" content="summary">
   <meta name="twitter:site" content="@oomphinc">
   <meta name="og:title" content="ColorCube: Evaluate Accessible Color Palettes">
   <meta name="twitter:title" content="ColorCube: Evaluate Accessible Color Palettes">
@@ -29,7 +29,7 @@
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>[Color Detector]</title>
   <script type="text/javascript" src="./assets/js/detection.js"></script>
-  <link rel="stylesheet" type="text/css" media="screen" href="./assets/css/main.css" />
+  <link rel="stylesheet" type="text/css" media="screen" href="./assets/css/main.css" /> -->
 </head>
   <body>
   <div class="body-inner">
@@ -102,39 +102,40 @@
     </div>
   </header>
 
+  <div class="container">
     <div class="l__max u__space__outer cc__brand">
-      <h2 class="cc__brand__title">
+      <h3 class="cc__brand__title" >
       <!-- <a href="." title="Press to reload page and start over with default values"> -->
         <!-- <img class="cc__brand__logo" src="assets/img/presently.jpeg" alt="" width="390"> -->
         Slide Quality Checker
       <!-- </a> -->
-      </h2>
+      </h3>
       <!-- <p class="cc__brand__subtitle text-italic text-light">Color Accessibility Checker built by <a title="Go to Oomph website, link opens in a new window." target="_blank" href="//oomphinc.com">Oomph</a></p> -->
     </div>
-
+</div>
 <div class="cc__form__submit g--wide text-align-center">
    
 
-    <div>
+    <div class="container">
     <a href="colorCube.html">
     <img src = "/Users/chithuwedage/Downloads/color accuracy.webp" width="300" height="200">
     <input id="brand-color-button" name="brand-color-button" type="submit" class="cc__form__button" value="Color Accuracy" style="align-items:center">
     </a>
   </div>
 
-    <div> 
+  <div class="container"> 
     <img src = "/Users/chithuwedage/Downloads/CSC-Reviewer-Grammar.png" width="300" height="200">
     <input id="brand-color-button" name="brand-color-button" type="submit" class="cc__form__button" value="Grammer Checker">
     </div>
 
-    <div>
+    <div class="container">
     <a href="contrastChecker.html">
     <img src = "/Users/chithuwedage/Downloads/color-blind.jpeg" width="300" height="200">
     <input id="brand-color-button" name="brand-color-button" type="submit" class="cc__form__button" value="Visual Accessibility Checker">
     </a>
     </div>
 
-    <div>
+    <div class="container">
     <img src = "/Users/chithuwedage/Downloads/images (2).jpeg" width="300" height="200">
     <input id="brand-color-button" name="brand-color-button" type="submit" class="cc__form__button" value="Visibility Checker">
     </div>