start-007 · HarshaSadam · Oct 25, 2022 · Oct 25, 2022 · Oct 25, 2022 · Oct 25, 2022
diff --git a/index.js b/index.js
@@ -56,17 +56,17 @@ app.use(cors());
 
 ////////////////////////////////////////MongoDB/////////////////////////////////////////////////////
 
-//mongoose.connect("mongodb://localhost:27017/bonafidetrackerDB",{useNewUrlParser:true});
+// mongoose.connect("mongodb://localhost:27017/bonafidetrackerDB",{useNewUrlParser:true});
 const URI=process.env.ATLAS_URI
 const client = new MongoClient(URI, { useNewUrlParser: true, useUnifiedTopology: true, serverApi: ServerApiVersion.v1 });
 client.connect(err => {
   const collection = client.db("test").collection("devices");
   console.log(err);
 });
 
-mongoose.connect(URI,(err)=>{
-  console.log(err);
-});
+// mongoose.connect(URI,(err)=>{
+//   console.log(err);
+// });
 
 const openedSchema=new mongoose.Schema({
   rollno:"String",

diff --git a/public/assets/jntuhlogo-1.png b/public/assets/jntuhlogo-1.png
diff --git a/public/css/form.css b/public/css/form.css
@@ -0,0 +1,99 @@
+.form-container { 
+    outline: 3px solid black;    
+    margin: 30px;  
+    padding: 10px;  
+    outline-offset: 0.5em;
+    background-color:#FEF8DD;
+}
+.top-content {
+    display: inline-block;
+    width: 100%;
+    height: 25px;
+    padding: 4px 6px;
+    font-size: 16px;
+    font-weight: bold;
+    color: #000000;
+    margin-bottom: 13px;
+    clear: both;
+    text-align: center ;
+}
+.logo{
+    height : 150px;
+}
+.top-content .serial-num {
+    float: left;
+}
+.top-content .original {
+    float: right;
+}
+.clg-heading {
+    text-align: center;
+    font-family: "Roboto";
+    color:red;
+    letter-spacing: 1px;
+
+}
+.clg-title {
+    font-size:16px;
+    font-weight: bold;
+    word-spacing: 2px;
+}
+.clg-address {
+    font-size: 13px;
+    font-weight: 500px;
+    letter-spacing: 1px;
+
+}
+.bonafide-title {
+    font-size: 15px;
+    font-weight: bold;
+    letter-spacing: 1px;
+    word-spacing: 2px;
+    text-decoration-line: underline;
+    text-decoration-color: red;
+}
+.middle-details {
+    display: block;
+    height: 20px;
+    padding: 4px 6px;
+    font-size: 16px;
+    font-weight: bold;
+    color: brown;
+    margin-bottom: 7px;
+    clear: both;
+}
+.middle-details .hallticket {
+    float: left;
+}
+.middle-details .date {
+    float: right;
+}
+.details-filling {
+    font-size: 28px;
+    color:black;
+    font-weight: 500px;
+    font-family: "Roboto";
+    font-style: italic;
+    word-spacing: 1px;
+}
+.start-details {
+    padding-left: 35px;
+}
+.filled-values {
+    font-weight: bold;
+}
+.bottom-container {
+    padding-left: 500px;
+    text-align: right;
+    font-size:10px;
+    font-weight: bold;
+    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+    color:red;
+}
+.princi {
+    text-align: center;
+
+}
+.btm-clg-name {
+    text-align:center;
+}
diff --git a/public/css/popup.css b/public/css/popup.css
@@ -25,6 +25,14 @@
   visibility: hidden;
   transition: transform 0.4s , top 0.4s;
 }
+.popup img{
+  text-align: center;
+  width: 100px;
+  height: 100px;
+  margin-top: -25%;
+  border-radius: 50%;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+}
 .open-popup{
   top: 50%;
   visibility: visible;

diff --git a/public/css/styles.css b/public/css/styles.css
@@ -7,15 +7,13 @@ body{
   background-color: lightblue;
   height:30%;
   padding:20px;
-  padding-top:0px;
+  padding-top:20px;
   margin-top:0px;
   margin-bottom: 8px;
   text-align: center;
 }
 
-.inner-container {
-  padding: 10px;
-}
+
 
 .inner-heading {
   color:navy;
@@ -43,7 +41,7 @@ display:flex;
 justify-content:center;
 }
 .card-container {
-  text-align:left;
+  text-align:center;
   background-color:#E6E6E6  ;
   width:40%;
   border-radius:25px;
@@ -88,6 +86,7 @@ border-radius: 18px;
   font-size: 16px;
 }
 li{
+  text-align: left;
   text-transform: capitalize;
   font-size: 22px;
 }
@@ -108,4 +107,9 @@ h1 {
 
 .desc-list{
   display: flex;
-}
+}
+
+.others-text{
+  text-align: center;
+  display: none;
+}
diff --git a/public/javascript/script.js b/public/javascript/script.js
@@ -155,4 +155,12 @@ document.getElementById("submitbtn").addEventListener("click",(e)=>{
 
 const closePopup=()=>{
     popup.classList.remove("open-popup");
+}
+
+function checkvalue(val)
+{
+    if(val==="others")
+       document.getElementById('others-text').style.display='block';
+    else
+       document.getElementById('others-text').style.display='none'; 
 }
diff --git a/views/form.ejs b/views/form.ejs
@@ -4,54 +4,44 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title><%= Rollno %>-Bonafide</title>
-    <style>
-        body{
-            text-align: center;
-        }
-        @media print { @page { margin: 0; } 
-        body { margin: 1.6cm; } }
-    </style>
+    <title>Form</title>
+    <link rel="stylesheet" href="/css/form.css">
 </head>
 <body >
-    <span>S NO</span>
-    <span>ORIGINAL</span>
-    <div>
-
-        <h1>JNTUH UNIVERSITY COLLEGE OF ENGINEERING SULTANPUR</h1>
-
-        <h5 class="inner-para">Pulkal(M), Sangareddy(D),Telangana-502273 ,India</h5>
-        <h2>BONAFIDE CERTIFICATE</h2>
-
+    <div class="form-container">
+    <div class="top-content">
+        <span class="serial-num">S.NO</span>
+        <img class="logo" src="/assets/jntuhlogo-1.png" alt="jntuh-logo"/>
+        <span class="original">ORIGINAL</span>
     </div>
-    <div>
-        <span>Hall Ticket No.</span><span><%= Rollno %></span>
-        <span>Date.</span>
-        <span><%= Date %></span>
+    <div class="clg-heading">
+        <h1 class="clg-title">JAWAHARLAL NEHRU TECHNOLOGICAL UNIVERSITY HYDERABAD<br>
+            COLLEGE OF ENGINEERING SULTANPUR</h1>
+        <h5 class="clg-address">Pulkal(M), Sangareddy District, Telangana.</h5>
+        <h2 class="bonafide-title">BONAFIDE CERTIFICATE</h2> 
+    </div>
+
+    <div class="middle-details">
+        <span class="hallticket">Hall Ticket No. <%= Rollno %></span>
+        <span class="date">Date : <%= Date %></span>
     </div>
 
-    <p>
-
-        This is to certify that Mr./Mrs. <%=Name%> Son/Daughter of 
-        <%= Sonordaughterof %> studying in B.Tech <%= Year %>th Year
-        <%= Department %> Branch with Roll No <%= Rollno %> is 
+    <p class="details-filling">
+        <span class="start-details">This is to certify that</span> <span class="filled-values">Mr./Ms <%=Name%></span>
+        Son/Daughter of <span class="filled-values"><%= Sonordaughterof %></span> 
+         Studying in B.Tech <span class="filled-values"><%= Year %>th Year</span>
+        <% Department %> Branch with <span class="filled-values">Roll No <%= Rollno %></span> is 
         Bonafide student of this college.
     </p>
-    <p>
-        The certificate is issued to enable him/her to apply for <%= Purpose %> purpose
-        only.
-    </p>
-    <div>
+    <p class="details-filling">The certificate is issued to enable him/her to apply for
+        <span class="filled-values"> <%= Purpose %> purpose</span>
+        only.</p>
 
-        <h3>PRINCIPAL</h3> 
-        <h4>JNTUH UNIVERSITY COLLEGE OF ENGINEERING SULTANPUR</h4>
+    <div class="bottom-container">
+        <h3 class="princi">PRINCIPAL</h3>
+        <h4 class="btm-clg-name">JNTUH UNIVERSITY COLLEGE OF ENGINEERING SULTANPUR</h4>
 
     </div>
-
+    </div>
 </body>
-
-<script type="text/javascript">
-    window.onload = function() { window.print(); }
-</script>
-
 </html>
diff --git a/views/home.ejs b/views/home.ejs
@@ -5,13 +5,13 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
-
+    <link rel="stylesheet" href="/css/popup.css"> 
     <link rel="stylesheet" href="css/styles.css">
-    <link rel="stylesheet" href="/css/popup.css">
+
 </head>
 <body>
     <div class="top-container">
-        <img src="/assets/jntuhlogo.png" alt="" srcset="">
+        <img src="/assets/jntuhlogo.png" height="150px" width="150px">
         <div class="inner-container">
             <h1 class="inner-heading">JNTUH University College of Engineering Sultanpur</h1>
             <h5 class="inner-para">Sultanpur(V), Pulkal(M), Sangareddy(D),Telangana-502273 ,India</h5>
@@ -21,16 +21,16 @@
 
   <div class="card">
       <div class="card-container">
-        <h2 class="card-heading" id="prompt">Fill the details</h2>
+        <h2 class="card-heading" id="prompt">Fill the Details</h2>
         <form method="post" id = "form" action="/">
           <div class="card-items">
-            <label for="rollno">Roll Number of Student : </label>
-            <input type="text" id="rollno" name="rollno"><br>
+            <label class="rollnum" for="rollno">Roll Number of Student : </label>
+            <input class="text-box" type="text" id="rollno" name="rollno"><br>
           </div>
           <div class="card-items">
-            <label id = "purpose"> Purpose of Bonafide : </label>
+            <label class="rollnum" id = "purpose"> Purpose of Bonafide : </label>
 
-            <select id ="purposemenu"  onchange="yesnoCheck(this);">  
+            <select class="text-box" id ="purposemenu"  onchange="yesnoCheck(this);">  
 
               <option value = "Bus Pass"> Bus Pass </option>  
               <option value = "Bank Account"> Bank Account </option>  
@@ -43,7 +43,7 @@
             <br>
           </div>
           <div id="ifYes" style="display: none;">
-            <label for="Other">Enter the purpose:</label> <input type="text" id="Other" name="Other" /><br />
+            <label class="rollnum" for="Other">Enter the purpose:</label> <input class="text-box" type="text" id="Other" name="Other" required/><br />
           </div>
           <div class="submitbtncontainer">
             <input class="submitbtn" type = "submit" value="Submit" id = "submit"><br>
@@ -53,6 +53,7 @@
   </div>
 
   <div class="popup" id="popup">
+    <img src="/assets/tick.png">
     <h2 id="error" class="bonafide-title">Details Form</h2>
     <ul id="studentid" style="list-style: none">