Merged the stylesheets

VictorCaproiu · Mar 2, 2024 · 9c10d6f · 9c10d6f
1 parent 71f23a3
commit 9c10d6f
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 28 deletions.
diff --git a/dog.html b/dog.html
@@ -2,16 +2,16 @@
 <html>
     <head>
         <title>Image processing</title>
-        <link rel="stylesheet" href="style2.css">
+        <link rel="stylesheet" href="style.css">
     </head>
-    <body>
+    <body id="dog_body">
         <canvas id="canvas"></canvas>
-        <p>Click the button to get a random dog image. It will automatically be flipped and greyscaled!</p>
+        <p class="dog_p">Click the button to get a random dog image. It will automatically be flipped and greyscaled!</p>
         <button id="btnClick">Get image!</button>
         <a id="back_b" href="index.html">Go Back</a>
         <a id="back_b" href="index.html" style="color: rgb(0, 0, 0); background-color: #e1e1e1; padding: 10px 20px; text-decoration: none; border-radius: 5px;">Go Back</a>
-        <p id="mir_t"></p>
-        <p id="gray_t"></p>
+        <p class="dog_p" id="mir_t"></p>
+        <p class="dog_p" id="gray_t"></p>
         <script src="script.js"></script>
     </body>
 </html>
diff --git a/script.js b/script.js
@@ -72,7 +72,7 @@ function mirrorImg() {
     ctx.putImageData(imageData, 0, 0);
     var stop = Date.now();
     var num = stop-start;
-    mirrorTimer.innerHTML = "Timpul de oglindire este: " + num + " ms";
+    mirrorTimer.innerHTML = "Mirror time: " + num + " ms";
 }
 
 function greyscaleImg(){
@@ -96,7 +96,7 @@ function greyscaleImg(){
 
     var stop = Date.now();
     var num = stop-start;
-    grayTimer.innerHTML= "Timpul de procesare alb/negru este: " + num + " ms";
+    grayTimer.innerHTML= "Grayscale time: " + num + " ms";
 }
 
 async function start() {

diff --git a/style.css b/style.css
@@ -131,4 +131,26 @@ footer{
     display: flex;
     background-color: white;
     padding: 20px;
-}
+}
+
+/* dog api page styles */
+#dog_body{
+    background: black;
+}
+#canvas{
+    border: 3px solid white;
+    top: 50%;
+    left: 50%;
+    position: absolute;
+    transform: translate(-50%,-50%);
+    max-width: 70%;
+}
+#back_b{
+    position: absolute;
+    left: 20px;
+    bottom: 20px;
+}
+.dog_p{
+    color: white;  
+}
+
diff --git a/style2.css b/style2.css