File manager - Edit - G:/PleskVhosts/indiaminerals.in/vgm.INFOFIXDEVELOPERS.COM/admin/animal-details-master.html
Back
<!DOCTYPE html> <!-- This is a starter template page. Use this page to start your new project from scratch. This page gets rid of all links and provides the needed markup only. --> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Animal Detail Master </title> <!-- Google Font: Source Sans Pro --> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.5.0/dist/js/bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script> <!-- Font Awesome Icons --> <link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css"> <!-- Theme style --> <link rel="stylesheet" href="dist/css/adminlte.min.css"> </head> <style> .main-header { background-color: #9F91CC; color: #ffffff; } .main-sidebar { background-color: #3D246C; color: #ffffff; } .container { margin: 0 auto; padding: 20px; background-color: #f9f9f9; border: 1px solid #ddd; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .header { display: flex; align-items: center; justify-content: center; background-color: #9F91CC; color: #fff; padding: 10px 20px; border-radius: 5px; font-family: 'Roboto', sans-serif; font-weight: 600; margin-bottom: 20px; } .header img { height: 50px; width: auto; margin-right: 10px; } .table-dark{ background-color: #9F91CC; color: #fff; } /* Form Label Styles */ label { font-weight: bold; color: #555; } /* Text Input Styles */ .form-control { width: 100%; padding: 8px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 5px; } /* Textarea Styles */ textarea.form-control { height: 100px; } /* Checkbox Styles */ .form-check-input[type="checkbox"] { margin-top: 5px; } /* Button Styles */ .btn-primary { background-color: #3D246C; color: #fff; border: none; border-radius: 5px; padding: 10px 20px; font-size: 16px; cursor: pointer; } .btn-primary:hover { background-color: #9F91CC; } /* Update table header and row styles */ .table { background-color: #9F91CC; color: #fff; } .table thead th { background-color: #9F91CC; color: #fff; border-color: #9F91CC; } .table tbody td { background-color: #f9f9f9; color: #333; border-color: #ddd; } .custom-modal-dialog { max-width: 800px; width: 80%; } .custom-card { flex: 1; text-align: center; padding: 10px; border: 1px solid #ccc; border-radius: 5px; background-color: #fff; } .custom-container { display: flex; justify-content: space-between; align-items: center; height: 100px; padding: 10px; background-color: #f0f0f0; /* Customize the background color */ border: 2px solid #ccc; /* Customize the border */ border-radius: 10px; /* Customize the border radius */ box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); /* Add a box shadow */ } .custom-card { flex: 1; text-align: center; padding: 10px; border: 1px solid #ccc; border-radius: 5px; background-color: #fff; } .card-title { font-size: 24px; font-weight: bold; color: #333; background-color: #f7f7f7; padding: 10px; border-radius: 5px; text-align: center; margin: 0; } dl { margin: 0; padding: 0; } dt { font-weight: bold; } dd { margin-bottom: 10px; } </style> <body class="hold-transition sidebar-mini"> <div class="wrapper"> <!-- Navbar --> <nav class="main-header navbar navbar-expand navbar-white navbar-light"> <!-- Left navbar links --> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a> </li> <li class="nav-item d-none d-sm-inline-block"> <a href="#" class="nav-link">Home</a> </li> </ul> </nav> <!-- /.navbar --> <!-- Main Sidebar Container --> <aside class="main-sidebar sidebar-dark-primary elevation-4"> <!-- Brand Logo --> <a href="#" class="brand-link"> <img src="dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3" style="opacity: .8"> <span class="brand-text font-weight-light">AdminLTE 3</span> </a> <!-- Sidebar --> <div class="sidebar"> <!-- Sidebar user panel (optional) --> <!-- SidebarSearch Form --> <div class="form-inline mt-2"> <div class="input-group" data-widget="sidebar-search"> <input class="form-control form-control-sidebar" type="search" placeholder="Search" aria-label="Search"> <div class="input-group-append"> <button class="btn btn-sidebar"> <i class="fas fa-search fa-fw"></i> </button> </div> </div> </div> <!-- Sidebar Menu --> <nav class="mt-2"> <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false" > <!-- Add icons to the links using the .nav-icon class with font-awesome or any other icon font library --> <li class="nav-item"> <a href="starter.html" class="nav-link"> <i class="nav-icon fas fa-th"></i> <p>Animal Registration</p> </a> </li> <li class="nav-item"> <a href="observation-form.html" class="nav-link"> <i class="nav-icon fas fa-calendar-alt"></i> <p>Observation Form</p> </a> </li> <li class="nav-item"> <a href="animal-master.html" class="nav-link"> <i class="nav-icon fas fa-calendar-alt"></i> <p>Animal Category Master</p> </a> </li> <li class="nav-item"> <a href="special-investigation.html" class="nav-link"> <i class="nav-icon fas fa-calendar-alt"></i> <p>Special Investigation</p> </a> </li> <li class="nav-item"> <a href="discharge-detail.html" class="nav-link"> <i class="nav-icon fas fa-calendar-alt"></i> <p>Discharge Details </p> </a> </li> <li class="nav-item"> <a href="death-form.html" class="nav-link"> <i class="nav-icon fas fa-calendar-alt"></i> <p>Death Form </p> </a> </li> <li class="nav-item"> <a href="medical-master.html" class="nav-link"> <i class="nav-icon fas fa-calendar-alt"></i> <p>Medicine Master </p> </a> </li> <li class="nav-item"> <a href="purchase-medicine.html" class="nav-link"> <i class="nav-icon fas fa-calendar-alt"></i> <p>Purchase Medicine </p> </a> </li> <li class="nav-item"> <a href="medicine-issue.html" class="nav-link"> <i class="nav-icon fas fa-calendar-alt"></i> <p>Medicine Issue </p> </a> </li> <li class="nav-item"> <a href="upload-document.html" class="nav-link"> <i class="nav-icon fas fa-calendar-alt"></i> <p>Upload Document </p> </a> </li> <li class="nav-item"> <a href="animal-detail-master.html" class="nav-link"> <i class="nav-icon fas fa-calendar-alt"></i> <p>Animal Detail Master </p> </a> </li> </ul> </nav> <!-- /.sidebar-menu --> </div> <!-- /.sidebar --> </aside> <div class="content-wrapper"> <div class="container"> <div class="row"> <div class="col-md-3"> <!-- Animal Category --> <div class="form-group"> <label for="registration">Tag No.</label> <input type="text" class="form-control" id="registration" name="registration"> </div> </div> <div class="col-md-3"> <div class="text-center"> <button type="button" class="btn btn-primary mt-4" data-bs-toggle="modal" data-bs-target="#exampleModal"> Submit </button> </div> </div> </div> <div class="row"> <div class="col-lg-12"> <div> <div class="d-flex profile-wrapper"> <!-- Nav tabs --> <ul class="nav nav-pills animation-nav profile-nav gap-2 gap-lg-3 flex-grow-1" role="tablist"> <li class="nav-item"> <a class="nav-link fs-14 active" data-bs-toggle="tab" href="#overview-tab" role="tab"> <i class="ri-airplay-fill d-inline-block d-md-none"></i> <span class="d-none d-md-inline-block">Owner Details/ Animal Details</span> </a> </li> <li class="nav-item"> <a class="nav-link fs-14" data-bs-toggle="tab" href="#activities" role="tab"> <i class="ri-list-unordered d-inline-block d-md-none"></i> <span class="d-none d-md-inline-block">Observation Details</span> </a> </li> <li class="nav-item"> <a class="nav-link fs-14" data-bs-toggle="tab" href="#projects" role="tab"> <i class="ri-price-tag-line d-inline-block d-md-none"></i> <span class="d-none d-md-inline-block">Discharge Details/Death</span> </a> </li> <li class="nav-item"> <a class="nav-link fs-14" data-bs-toggle="tab" href="#documents" role="tab"> <i class="ri-folder-4-line d-inline-block d-md-none"></i> <span class="d-none d-md-inline-block">Document Details</span> </a> </li> </ul> </div> <!-- Tab panes --> <div class="tab-content pt-4 text-muted"> <div class="tab-pane active" id="overview-tab" role="tabpanel"> <div class="row"> <h5 class="card-title mb-3">Owner Information</h5> <div class="col-md-12"> <div class="card"> <div class="card-body"> <div class="table-responsive"> <table class="table table-borderless mb-0"> <tbody> <tr> <th class="ps-0" scope="row">Full Name :</th> <td class="text-muted">Anna Adame</td> </tr> <tr> <th class="ps-0" scope="row">Mobile :</th> <td class="text-muted">+(1) 987 6543</td> </tr> <tr> <th class="ps-0" scope="row">Address :</th> <td class="text-muted">daveadame@velzon.com</td> </tr> </tbody> </table> </div> </div><!-- end card body --> </div> </div> <h3 class="card-title">Animal Details</h3> <div class="container mt-4"> <div class="row"> <div class="col-md-6"> <div class="row mb-3"> <div class="col-md-6 font-weight-bold">Animal Category:</div> <div class="col-md-6">Mammal</div> </div> <div class="row mb-3"> <div class="col-md-6 font-weight-bold">How the Animal Arrived:</div> <div class="col-md-6">Rescued</div> </div> <div class="row mb-3"> <div class="col-md-6 font-weight-bold">Species/Breed:</div> <div class="col-md-6">Golden Retriever</div> </div> <div class="row mb-3"> <div class="col-md-6 font-weight-bold">Age:</div> <div class="col-md-6">2 years</div> </div> <div class="row mb-3"> <div class="col-md-6 font-weight-bold">Gender:</div> <div class="col-md-6">Male</div> </div> </div> <div class="col-md-6"> <div class="row mb-3"> <div class="col-md-6 font-weight-bold">Color/Markings:</div> <div class="col-md-6">Golden with white markings</div> </div> <div class="row mb-3"> <div class="col-md-6 font-weight-bold">Weight:</div> <div class="col-md-6">30 kg</div> </div> <div class="row mb-3"> <div class="col-md-6 font-weight-bold">Date of Birth:</div> <div class="col-md-6">January 15, 2021</div> </div> <div class="row mb-3"> <div class="col-md-6 font-weight-bold">Disease Diagnosis:</div> <div class="col-md-6">None</div> </div> <div class="row mb-3"> <div class="col-md-6 font-weight-bold">Prognosis:</div> <div class="col-md-6">Healthy</div> </div> </div> </div> </div> <!--end col--> </div> <!--end row--> </div> <div class="tab-pane fade" id="activities" role="tabpanel"> <div class="row"> <div class="card-header"> <div class="d-flex align-items-center mb-4"> <h5 class="card-title flex-grow-1 mb-0">Animal Treatment Details</h5> </div> <div class="card-tools"> <label for="dateRange">Select Date Range:</label> <select id="dateRange" name="dateRange"> <option value="1-8-2022|22-9-2023">1-8-2022 - 22-9-2023</option> <option value="1-1-2023|31-1-2023">1-1-2023 - 31-1-2023</option> <option value="1-2-2023|28-2-2023">1-2-2023 - 28-2-2023</option> <option value="1-3-2023|31-3-2023">1-3-2023 - 31-3-2023</option> <option value="custom">Custom Range</option> </select> </div> </div> <table id="noticeTable" class="table table-bordered my-2 mt-3"> <thead class="table-dark"> <tr> <th scope="col">S. No</th> <th scope="col">Date</th> <th scope="col">Treatment</th> <th scope="col">Dose:</th> <th scope="col">OD, BID, TID</th> </tr> </thead> <tbody id="databody"> <!-- Example row with Edit button --> <tr> <td>1</td> <td>2023-10-08</td> <td>Example Treatment</td> <td>5 mg</td> <td>OD</td> </tr> <!-- You can add more rows with Edit buttons as needed --> </tbody> </table> </div> </div> <!--end tab-pane--> <div class="tab-pane fade" id="projects" role="tabpanel"> <div class="row"> <dl class="col-md-3"> <dt>Date:</dt> <dd>11-2-2022</dd> </dl> <dl class="col-md-3"> <dt>Time:</dt> <dd>11:45 PM</dd> </dl> <dl class="col-md-3"> <dt>Name of Gaushala:</dt> <dd>VGM Charitable</dd> </dl> <dl class="col-md-3"> <dt>Reason:</dt> <dd>January 15, 2021</dd> </dl> </div> </div> <!--end tab-pane--> <div class="tab-pane fade" id="documents" role="tabpanel"> <div class="card"> <div class="card-body"> <div class="d-flex align-items-center mb-4"> <h5 class="card-title flex-grow-1 mb-0">Documents</h5> </div> <div class="row"> <div class="col-lg-12"> <div class="table-responsive"> <table class="table table-borderless align-middle mb-0"> <thead class="table-light"> <tr> <th scope="col">File Name</th> <th scope="col">Upload Date</th> <th scope="col">Image</th> </tr> </thead> <tbody> <tr> <td>Zip File</td> <td>12 Dec 2021</td> <td> <img src="https://westcoasteastcoastmovers.com/wp-content/uploads/2021/06/person-off-screen-stacking-documentation.jpeg" alt="Image 1" class="thumbnail" data-toggle="modal" data-target="#imageModal" style="height: 100px;"> </td> </tr> <tr> <td>PDF File</td> <td>24 Nov 2021</td> <td> <img src="https://edwardbrownfwdotcom.files.wordpress.com/2020/02/depositphotos_16363681_s-2019.jpg" alt="Image 2" class="thumbnail" data-toggle="modal" data-target="#imageModal" style="height: 100px;"> </td> </tr> </tbody> </table> <div class="modal fade" id="imageModal" tabindex="-1" aria-labelledby="imageModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="imageModalLabel">Image Gallery</h5> <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div id="imageCarousel" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"></ol> <div class="carousel-inner"></div> <a class="carousel-control-prev" href="#imageCarousel" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#imageCarousel" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <!--end tab-pane--> </div> <!--end tab-content--> </div> </div> <!--end col--> </div> </div> </div> <footer class="main-footer text-center"> <!-- To the right --> <!-- Default to the left --> <strong >Copyright © 2014-2021 <a href="https://adminlte.io">VGM Charitable Trust</a>.</strong > All rights reserved. </footer> </div> <script> $(document).ready(function () { const images = $(".thumbnail"); let currentIndex = 0; const modal = $("#imageModal"); const modalTitle = modal.find(".modal-title"); const modalImage = modal.find(".carousel-inner"); // Event handler for clicking on an image images.on("click", function () { currentIndex = $(this).closest("tr").index(); updateModal(currentIndex); }); // Event handlers for previous and next buttons $(".carousel-control-prev").on("click", function () { currentIndex = (currentIndex - 1 + images.length) % images.length; updateModal(currentIndex); }); $(".carousel-control-next").on("click", function () { currentIndex = (currentIndex + 1) % images.length; updateModal(currentIndex); }); // Function to update the modal with the current image function updateModal(index) { const image = images.eq(index); modalTitle.text(image.attr("alt")); modalImage.html(` <div class="carousel-item active"> <img src="${image.attr("src")}" class="d-block w-100" alt="${image.attr("alt")}"> </div> `); modal.modal("show"); } }); </script> <!-- AdminLTE App --> <script src="dist/js/adminlte.min.js"></script> </body> </html>
| ver. 1.4 |
Github
|
.
| PHP 7.3.33 | Generation time: 0.03 |
proxy
|
phpinfo
|
Settings