home page styling

Author: kilsw1ch

carrom.html

@@ -70,25 +70,25 @@
                 </tr>
 
                 <tr style="background-color: #fdfd96; color: #000;">
-                    <td>baba</td>
+                    <td id="p1namet"></td>
                     <td id="p1total">0</td>
                     <td id="p1avg">0</td>
                 </tr>
 
                 <tr style="background-color: #FFB3BA; color: #000;">
-                    <td>dada</td>
+                    <td id="p2namet">dada</td>
                     <td id="p2total">0</td>
                     <td id="p2avg">0</td>
                 </tr>
 
                 <tr style="background-color: #B8E2B8; color: #000;">
-                    <td>rohan</td>
+                    <td id="p3namet">rohan</td>
                     <td id="p3total">0</td>
                     <td id="p3avg">0</td>
                 </tr>
 
                 <tr style="background-color: #A7C6ED; color: #000;">
-                    <td>ma</td>
+                    <td id="p4namet">ma</td>
                     <td id="p4total">0</td>
                     <td id="p4avg">0</td>
                 </tr>

carrom.js

@@ -403,4 +403,9 @@ const p4name = sessionStorage.getItem('p4name');
 document.getElementById('p1namep').textContent = p1name;
 document.getElementById('p2namep').textContent = p2name;
 document.getElementById('p3namep').textContent = p3name;
-document.getElementById('p4namep').textContent = p4name;
+document.getElementById('p4namep').textContent = p4name;
+
+document.getElementById('p1namet').textContent = p1name;
+document.getElementById('p2namet').textContent = p2name;
+document.getElementById('p3namet').textContent = p3name;
+document.getElementById('p4namet').textContent = p4name;

index.css

@@ -20,7 +20,7 @@ body{
     position:absolute;
     display: flex;
     top: 30%;
-    left: 14%;
+    left: 10%;
 
     .radio {
         margin-left:40px;
@@ -89,14 +89,13 @@ body{
 
     #p1name{
         position: absolute;
-        /* top: 0; */
         left: 25%;
         background-color: #fdfd96;
     }
 
     #p2name{
         position: absolute;
-        top: 30%;
+        top: 50%;
         left: 25%;
         background-color: #ffb3ba;
     }
@@ -127,7 +126,7 @@ body{
     text-align: center;
     color: #fff;
     position: absolute;
-    top: 60%;
+    top: 65%;
     left: 35%;
 
     span{

index.html

@@ -23,18 +23,19 @@
 
         <div class="radio">
             <input type="radio" name="gamemode" id="gamemode1" value="1">
-            <label for="gamemode1">1v1</label>
+            <label for="gamemode1">1vs1</label>
         </div>
 
         <div class="radio">
             <input type="radio" name="gamemode" id="gamemode2" value="2">
-            <label for="gamemode2">2v2</label>
+            <label for="gamemode2">2vs2</label>
         </div>
     </div>
 
     <div class="names">
 
         <input type="text" id="p1name" placeholder="player 1">
+        <span style="position:absolute; top: 25%; left:47%" id="vsspan">vs</span>
         <input type="text" id="p2name" placeholder="player 2">
         <input type="text" id="p3name" placeholder="player 3">
         <input type="text" id="p4name" placeholder="player 4">

index.js

@@ -1,18 +1,37 @@
+const p1namefield=document.getElementById('p1name');
+const p2namefield=document.getElementById('p2name');
 const p3namefield=document.getElementById('p3name');
 const p4namefield=document.getElementById('p4name');
 
 const startbtn=document.getElementById('start');
+const vsspan=document.getElementById('vsspan');
 
 document.getElementById('gamemode1').onclick=function(){
+
     p3namefield.style.visibility='hidden';
     p4namefield.style.visibility='hidden';
-    startbtn.style.top="60%";
+
+    p1namefield.style.top="0";
+    p2namefield.style.top="50%";
+
+    vsspan.style.top="25%";
+
+    startbtn.style.top="65%";
 }
 
 document.getElementById('gamemode2').onclick=function(){
+
+    p2namefield.style.top="15%";
+
+    vsspan.style.top="37%";
+
     p3namefield.style.visibility='visible';
     p4namefield.style.visibility='visible';
-    startbtn.style.top="80%";
+
+    p3namefield.style.top="61%";
+    p4namefield.style.top="75%";
+
+    startbtn.style.top="75%";
 }
 
 startbtn.onclick=function(){
@@ -27,6 +46,6 @@ startbtn.onclick=function(){
     sessionStorage.setItem('p3name', p3name);
     sessionStorage.setItem('p4name', p4name);
 
-    window.location.href = 'https://kilsw1ch.github.io/Carrom-Counter/carrom.html';
-    // window.location.href = 'carrom.html';
+    // window.location.href = 'https://kilsw1ch.github.io/Carrom-Counter/carrom.html';
+    window.location.href = 'carrom.html';
 }