EVOLUTION-NINJA

Edit File: internship_page.php

<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Experience Certificate</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
  <style>
     
    @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wdth,wght@0,90.8,346;1,90.8,346&display=swap');
    
    /* -------------------------
       Common Styles (Screen & Print)
    ------------------------- */
    body {
      margin: 0;
      padding: 0;
    }
    p {
      font-family: "Roboto", serif;
    }
  
    .a4-page {
      background: white;
      width: 210mm;
      min-height: 297mm;
      padding: 20mm;
      margin: 20px auto;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      position: relative;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column; /* Align elements vertically */
    }
    .content-wrapper {
      width: 160mm; /* Reduced width for better readability */
      text-align: justify;
      margin-bottom: 200px;
    }
    
    /* Logo and underline styles */
    .logo-container {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      width: 100%;
      margin-bottom: 20px;
    }
    .logo-container img {
      max-width: 200px; /* Set width to 200px for both screen and print */
      max-height: 88px; /* Set height to 88px for both screen and print */
    }
    .underline {
      border-bottom: 2px solid black;
      width: 100%;
      margin-top: 5px;
    }

.date-section {
      text-align: left;
      margin-bottom: 20px;
    }
    .center-text {
      text-align: center;
      font-size: 22px;
      font-weight: bold;
      margin: 20px 0;
    }
    .certificate-text {
      font-size: 18px;
      line-height: 1.6;
    }
    /* Editable spans */
    .editable {
      padding: 0 3px;
      font-size: 22px;
      outline: none;
    }
    .editable:focus {
      background-color: #eef;
    }
    .signature-section {
      text-align: left;
      margin-top: 50px;
      font-size: 22px;
      font-weight: bold;
    }
    button#printBtn {
      display: block;
      margin: 20px auto;
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
    }

/* -------------------------
       Screen-specific Styles
    ------------------------- */
    @media screen {
      body {
        background: #f5f5f5;
        padding: 20px;
      }
      .a4-page {
        max-width: 95%;
        width: auto;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
      }
    }

/* -------------------------
       Print-specific Styles (Full Sheet A4)
    ------------------------- */
    @media print {
      @page {
        size: A4;
        margin: 0;
      }
      body {
        background: none;
      }
      .a4-page {
        margin: 0;
        padding: 0;
        width: 210mm;
        height: 297mm;
        box-shadow: none;
        page-break-after: avoid;
        page-break-before: avoid;
        page-break-inside: avoid;
      }
      .content-wrapper {
        width: 160mm;
        margin: auto;
        padding-bottom: 0px /* Reduced padding-bottom to shorten gap in print */
      }
      button#printBtn {
        display: none;
      }

/* Logo and underline in print view */
      .logo-container img {
        margin-top: 40px;
        max-width: 200px; /* Ensures logo width is 200px for print */
        max-height: 88px;
        margin-left:50px;
        /* Ensures logo height is 88px for print */
      }
      .contact-details{
       position: relative;
       bottom: 25px;
       font-family: "Roboto", serif;
       margin-left: 380px; 
       font-size: 16px;
       font-weight: 600;
      }
      .contact-details{
        /* text-decoration: underline;
        text-underline-offset: 6px; */
      }

}
  </style>
</head>
<body>
   
  <div class="a4-page">
   
    
    <div class="logo-container">
      <img src="<?php echo base_url('public/assets/images/Jay Blues logo-2.png') ?>" alt="Company Logo" /> 
    </div>
    <div class="underline"></div>

<div class="content-wrapper">
      
      <div class="date-section">
        <strong style="font-weight: bold; font-size: 24px;">Date:</strong>
        <span class="editable" contenteditable="true">Enter Date</span>
      </div>

<h2 class="center-text" style="font-size: 29px;"><u>To Whom So Ever It May Concern</u></h2>

<p class="certificate-text" style="line-height: 1.6; font-size: 20px; font-weight: 600;">
        This is to certify that 
        <span class="editable" contenteditable="true" style=" font-weight:900;"><b><?php echo htmlspecialchars($data->name); ?></b></span>
        has successfully completed <span class="editable" contenteditable="true">01  Month</span>  internship program in 
        <span class="editable" contenteditable="true" style=" font-weight: 900;"><?php echo htmlspecialchars($data->project); ?></span>
        with Jayblues Technologies. During the internship,<span class="editable" contenteditable="true">he</span> has shown a strong passion for Full Stack Development and a willingness to learn.
        <br>
        During the internship,<span class="editable" contenteditable="true">he</span> has worked on live projects and successfully delivered high-quality web applications. <span class="editable" contenteditable="true">He</span> has also been a great team player and effectively collaborated with other team members to achieve project goals.
        <br>
        We are pleased to award this certificate to 
        <span class="editable" contenteditable="true" style=" font-weight: 900;"><?php echo htmlspecialchars($data->name); ?></span> in recognition of <span class="editable" contenteditable="true">his</span> hard work and dedication to learning and growing in Live Project. We wish <span class="editable" contenteditable="true">him</span> all the best in <span class="editable" contenteditable="true">his</span> future endeavors.
   
        <br>
        <p class="certificate-text" style="line-height: 1.4; font-size: 20px; font-weight: 600;">CANDIDATE ID:
            <span span class="editable" contenteditable="true" style=" font-weight: 800;"></span></p>

<p class="certificate-text" style="line-height: 0.5; font-size: 20px; font-weight: 600;">DURATION DATE:
            <span span class="editable" contenteditable="true" style=" font-weight: 800;"><?php echo htmlspecialchars(date('M d', strtotime($data->start_date)));?> to <?php echo htmlspecialchars(date(' M d Y', strtotime($data->end_date)));?></span></p>

<div class="signature-section" style="font-size: 24px; margin-top: 90px;" >
        <p>Ajay Kumar HS</p>
        <p>CEO</p>
        <p>Jay Blues Technologies</p>
      </div>
    </div>
    <div class="contact-details">
      <p><i class="fas fa-phone"></i> +91 9663933606 | 0821 - 4262370</p>
      <p><i class="fas fa-envelope"></i> info@jayblues.com | <i class="fas fa-globe"></i> jayblues.com</p>
      <p><i class="fas fa-map-marker-alt"></i> #656/D, 16th Main, 5th Cross, Above GTRAC, <br>Saraswathipuram, Mysuru - 570009</p>
    </div>
  </div>
  </div>

<button id="printBtn" onclick="window.print()">Print</button>
</body>
</html>