Automate css file to include in login and signup page

_templates/head.php

@@ -16,10 +16,11 @@
 
     <link href="/photogram-project-php/assets/dist/css/bootstrap.min.css" rel="stylesheet">
 
-    <!-- Style for login forms -->
-    <link href="/photogram-project-php/assets/dist/css/login.css" rel="stylesheet">
-    
-    <!-- Style for signup forms -->
-    <link href="/photogram-project-php/assets/dist/css/signup.css" rel="stylesheet">
+    <!-- CSS for login and signup page -->
+
+    <!-- Checks if the file is exists -->
+    <?if(file_exists($_SERVER['DOCUMENT_ROOT'].'/photogram-project-php/assets/dist/css/'.basename($_SERVER['PHP_SELF'],".php") . '.css')){?>
+        <link href="/photogram-project-php/assets/dist/css/<?=basename($_SERVER['PHP_SELF'], ".php")?>.css" rel="stylesheet">
+    <?}?> 
     
 </head>
\ No newline at end of file

_templates/signup-content.php

@@ -17,8 +17,8 @@
 	  <label for="floatingPassword">Password</label>
 	</div>
 	<div class="form-floating">
-	  <input name="phone" type="text" class="form-control" id="floatingInputphone" placeholder="Phone number">
-	  <label for="floatingInputphone">Phone number</label>
+	  <input name="phone" type="text" class="form-control" id="floatingInput" placeholder="Phone number">
+	  <label for="floatingInput">Phone number</label>
 	</div>
 	
 

assets/dist/css/signup.css

@@ -32,7 +32,7 @@ body {
     border-bottom-right-radius: 0;
     border-bottom-left-radius: 0;
   }
-  .form-signup input[id="floatingInputphone"] {
+  .form-signup input[name="phone"] {
     margin-bottom: 10px;
     border-top-left-radius: 0;
     border-top-right-radius: 0;