574 lines
33 KiB
PHP
574 lines
33 KiB
PHP
<?php include('../include/headscript.php'); ?>
|
|
<?php include("../class/company.php");
|
|
include('parsedatachart.php');
|
|
//include('documentModal.php');
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
|
|
<?php include('../include/seo.php'); ?>
|
|
|
|
<!-- Favicon -->
|
|
<link rel="shortcut icon" href="../assets/images/favicon.ico">
|
|
<link rel="icon" type="image/png" href="../assets/images/favicon.png" sizes="32x32">
|
|
<link rel="apple-touch-icon" href="../assets/images/favicon.png">
|
|
|
|
<!-- CSS -->
|
|
<link href="../assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
|
|
<link href="../assets/css/icons.css" rel="stylesheet" type="text/css">
|
|
<link href="../assets/css/style.css" rel="stylesheet" type="text/css">
|
|
<link href="https://cdn.jsdelivr.net/npm/boxicons@2.0.7/css/boxicons.min.css" rel="stylesheet">
|
|
<link href="https://cdn.jsdelivr.net/npm/sweetalert2@10.16.6/dist/sweetalert2.min.css" rel="stylesheet">
|
|
<link href="../assets/plugins/select2/select2.min.css" rel="stylesheet">
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/4.2.6/gridstack.min.css" rel="stylesheet">
|
|
<?php include('css-statkpi.php'); ?>
|
|
|
|
<!-- Script -->
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
|
|
<script defer src="https://cdn.jsdelivr.net/npm/apexcharts@3.35.3/dist/apexcharts.min.js"></script>
|
|
<script defer src="https://cdn.jsdelivr.net/npm/sweetalert2@10.16.6/dist/sweetalert2.min.js"></script>
|
|
<script defer src="../assets/plugins/select2/select2.min.js"></script>
|
|
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/4.2.6/gridstack-h5.min.js"></script>
|
|
<!-- Risorse locali -->
|
|
<script defer src="../assets/js/jquery.slimscroll.js"></script>
|
|
<script defer src="../assets/js/app.js"></script>
|
|
<!-- Rimuovi dashboard.js temporaneamente -->
|
|
<!-- <script defer src="../assets/js/dashboard.js"></script> -->
|
|
<script defer src="../assets/js/detect.js"></script>
|
|
<script defer src="../assets/js/jquery.blockUI.js"></script>
|
|
<script defer src="../assets/js/waves.js"></script>
|
|
<script defer src="../assets/js/jquery.nicescroll.js"></script>
|
|
<script defer src="../assets/js/jquery.scrollTo.min.js"></script>
|
|
<!-- Script principale (modulo) -->
|
|
<script type="module" defer src="js/main.js"></script>
|
|
</head>
|
|
|
|
|
|
<body class="fixed-left">
|
|
|
|
|
|
|
|
<!-- Begin page -->
|
|
<div id="wrapper">
|
|
|
|
<?php include('../include/navigationbar.php');
|
|
?>
|
|
|
|
<!-- Start right Content here -->
|
|
|
|
<div class="content-page">
|
|
<!-- Start content -->
|
|
<div class="content">
|
|
|
|
<?php include('../include/topbar.php'); ?>
|
|
|
|
<div class="page-content-wrapper " id="main-content">
|
|
|
|
<div class="container-fluid">
|
|
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<div class="page-title-box">
|
|
<div class="btn-group float-right">
|
|
<ol class="breadcrumb hide-phone p-0 m-0">
|
|
<li class="breadcrumb-item"><a href="#">Reportify</a></li>
|
|
<li class="breadcrumb-item active">Importify</li>
|
|
</ol>
|
|
</div>
|
|
<h4 class="page-title">Importify</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end page title end breadcrumb -->
|
|
|
|
<button id="toggleFilters" class="btn btn-primary">Toggle Filters</button>
|
|
<button id="createPDF" class="btn btn-primary">Report</button>
|
|
<!-- Right Sidebar -->
|
|
<div class="filter-sidebar" id="filterSidebar">
|
|
<?php
|
|
|
|
?>
|
|
<div class="form-group">
|
|
<label for="productsRefnumber">Product Ref Number</label>
|
|
<select id="productsRefnumber" class="form-control select2" multiple>
|
|
|
|
<?php foreach ($refNumbers as $refNumber): ?>
|
|
<option value="<?php echo $refNumber['refNumber']; ?>"><?php echo $refNumber['refNumber']; ?></option>
|
|
<?php endforeach; ?>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="productsSeason">Product Season</label>
|
|
<select id="productsSeason" class="form-control select2" multiple>
|
|
<?php foreach ($productsSeasons as $productSeason): ?>
|
|
<option value="<?php echo $productSeason['season']; ?>"><?php echo $productSeason['season']; ?></option>
|
|
<?php endforeach; ?>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="ageRange">Age Range</label>
|
|
<select id="ageRange" class="form-control select2" multiple>
|
|
<?php foreach ($ageRange as $age): ?>
|
|
<option value="<?php echo $age['ageRange']; ?>"><?php echo $age['ageRange']; ?></option>
|
|
<?php endforeach; ?>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="reportsLabName">Lab Name</label>
|
|
<select id="reportsLabName" class="form-control select2" multiple>
|
|
<?php foreach ($labName as $lab): ?>
|
|
<option value="<?php echo $lab['labName']; ?>"><?php echo $lab['labName']; ?></option>
|
|
<?php endforeach; ?>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="reportsTestType">Tes Type</label>
|
|
<select id="reportsTestType" class="form-control select2" multiple>
|
|
<?php foreach ($tesType as $test): ?>
|
|
<option value="<?php echo $test['tesType']; ?>"><?php echo $test['tesType']; ?></option>
|
|
<?php endforeach; ?>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="reportsNumberLab">Report Number</label>
|
|
<select id="reportsNumberLab" class="form-control select2" multiple>
|
|
<?php foreach ($numberLabs as $number): ?>
|
|
<option value="<?php echo $number['reportNumber']; ?>"><?php echo $number['reportNumber']; ?></option>
|
|
<?php endforeach; ?>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scripts -->
|
|
<script>
|
|
$(document).ready(function() {
|
|
$('.select2').select2({
|
|
placeholder: "Select options",
|
|
allowClear: true
|
|
});
|
|
|
|
$('#toggleFilters').on('click', function() {
|
|
$('#filterSidebar').toggle();
|
|
$('#main-content').toggleClass('collapsed');
|
|
});
|
|
|
|
$('#createPDF').on('click', function() {
|
|
$('#documentModal').modal('show');
|
|
});
|
|
|
|
$('.select2').on('change', function() {
|
|
updateActiveFilters();
|
|
});
|
|
|
|
$('#startDate, #endDate').on('change', function() {
|
|
updateActiveFilters();
|
|
});
|
|
|
|
function updateActiveFilters() {
|
|
let activeFilters = [];
|
|
$('.select2').each(function() {
|
|
const selectedValues = $(this).val();
|
|
if (selectedValues) {
|
|
// activeFilters with values
|
|
// activeFilters.push(`${$(this).prev('label').text()}: ${selectedValues.join(', ')}`);
|
|
// activefilters without values
|
|
activeFilters.push($(this).prev('label').text());
|
|
}
|
|
});
|
|
$('#startDate, #endDate').each(function() {
|
|
const selectedValue = $(this).val();
|
|
if (selectedValue) {
|
|
activeFilters.push($(this).prev('label').text());
|
|
}
|
|
})
|
|
|
|
$('#activeFilters').html(activeFilters.map(f => `<span class="badge badge-info mr-1">${f} <button class="close" onclick="removeFilter('${f}')">×</button></span>`).join(''));
|
|
|
|
}
|
|
});
|
|
|
|
function removeFilter(filter) {
|
|
const label = filter.split(':')[0];
|
|
const select = $('label').filter(function() {
|
|
return $(this).text().trim() === label;
|
|
}).next('select');
|
|
|
|
const dateInput = $('label').filter(function() {
|
|
return $(this).text().trim() === label;
|
|
}).next('input')
|
|
|
|
// Clear the select2 field
|
|
if (select.length) {
|
|
select.val(null).trigger('change');
|
|
}
|
|
// Clear the date field
|
|
if (dateInput.length) {
|
|
dateInput.val(null).trigger('change');
|
|
}
|
|
}
|
|
</script>
|
|
|
|
|
|
<div class="row">
|
|
<div class="col-xl-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="header-title pb-3 mt-0">Importify: <?php echo $dashboard; ?></h5>
|
|
|
|
<!-- Filter Section -->
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<label for="startDate">Start Date</label>
|
|
<input type="date" id="startDate" class="form-control" placeholder="Start Date">
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label for="endDate">End Date</label>
|
|
<input type="date" id="endDate" class="form-control" placeholder="End Date">
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label for="supplierFilter">Supplier</label>
|
|
<select id="supplierFilter" class="form-control select2" multiple>
|
|
<?php foreach ($productDropdown as $supplier): ?>
|
|
<option value="<?php echo $supplier['supplier']; ?>"><?php echo $supplier['supplier']; ?></option>
|
|
<?php endforeach; ?>
|
|
</select>
|
|
</div>
|
|
|
|
</div>
|
|
<hr>
|
|
<!-- Active Filters Display -->
|
|
<div id="activeFiltersDiv" class="mt-3" style="background-color:white;">
|
|
<h6>Active Filters:</h6>
|
|
<div id="activeFilters" class="filters-applied badge badge-info p-2" style="font-size: 16px;"></div>
|
|
<button id="clearFilters" class="btn btn-sm btn-warning ml-3">Clear Filters</button>
|
|
</div>
|
|
|
|
|
|
<hr>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end row -->
|
|
<div class="container my-4" data-id="1">
|
|
<h2 class="text-center text-primary fw-bold">Product Statistic</h2>
|
|
<hr class="my-3">
|
|
</div>
|
|
|
|
<div class="chart-container" id="charts">
|
|
|
|
<div class="row chart-box" id="chart1" data-id="2">
|
|
<div class="col-xl-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
|
|
|
|
<!-- cards -->
|
|
<div class="row justify-content-between">
|
|
<div class="col-md-2 col-sm-6">
|
|
<div class="card text-center bg-light border-primary">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Products</h5>
|
|
<h2 id="totalProducts">0</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-2 col-sm-6">
|
|
<div class="card text-center bg-light border-info">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Reports</h5>
|
|
<h2 id="totalReports">0</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-2 col-sm-6">
|
|
<div class="card text-center bg-light border-danger">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Failed Reports</h5>
|
|
<div class="d-flex justify-content-center align-items-baseline">
|
|
<h2 id="failedReports">0</h2>
|
|
<span class="percentage text-danger" id="failedReportsPercent" style="margin-left: 10px;">(0%)</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-2 col-sm-6">
|
|
<div class="card text-center bg-light border-success">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Total Tests</h5>
|
|
<h2 id="totalTests">0</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-2 col-sm-6">
|
|
<div class="card text-center bg-light border-warning">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Failed Tests</h5>
|
|
<div class="d-flex justify-content-center align-items-baseline">
|
|
<h2 id="failedTests">0</h2>
|
|
<span class="percentage text-danger" id="failedTestsPercent" style="margin-left: 10px;">(0%)</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end row -->
|
|
|
|
<div class="row chart-box" id="chart2" data-id="3">
|
|
<div class="col-md-4"> <!-- Colonna per il primo grafico (Pie Chart) -->
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title" id="reports_overview">Reports Overview</h5>
|
|
<div id="reportPieChart"></div>
|
|
<!-- Pulsante per mostrare/nascondere la tabella -->
|
|
<button class="btn btn-sm btn-primary toggle-table" data-target="#tableChart2">Toggle Data Table</button>
|
|
<!-- Contenitore per la tabella -->
|
|
<div id="tableChart2" class="hidden table-container"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-8">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Reports Bar Chart</h5>
|
|
<div id="reportBarChart"></div>
|
|
<button class="btn btn-sm btn-primary toggle-table" data-target="#tableChart3">Toggle Data Table</button>
|
|
<div id="tableChart3" class="hidden table-container"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container my-4" data-id="4">
|
|
<h2 class="text-center text-primary fw-bold">Supplier Statistic</h2>
|
|
<hr class="my-3">
|
|
</div>
|
|
|
|
<div class="row chart-box" id="chart3" data-id="5">
|
|
<div class="col-md-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Worst Suppliers by Failed Report Percentage</h5>
|
|
<div id="worstSuppliersChart"></div> <!-- Il grafico verrà inserito qui -->
|
|
<!-- Pulsante per mostrare/nascondere la tabella -->
|
|
<button class="btn btn-sm btn-primary toggle-table" data-target="#tableChartWorstSuppliers">Toggle Data Table</button>
|
|
<!-- Contenitore per la tabella -->
|
|
<div id="tableChartWorstSuppliers" class="hidden table-container"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="row chart-box" id="chart4" data-id="6">
|
|
<div class="col-md-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Number of Products by Supplier</h5>
|
|
<div id="productBySupplierChart"></div> <!-- Spazio per il grafico -->
|
|
<!-- Pulsante per mostrare/nascondere la tabella -->
|
|
<button class="btn btn-sm btn-primary toggle-table" data-target="#tableChartProductsBySupplier">Toggle Data Table</button>
|
|
<!-- Contenitore per la tabella -->
|
|
<div id="tableChartProductsBySupplier" class="hidden table-container"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container my-4" data-id="7">
|
|
<h2 class="text-center text-primary fw-bold">Analysis Statistic</h2>
|
|
<hr class="my-3">
|
|
</div>
|
|
|
|
<div class="row chart-box" id="chart5" data-id="8">
|
|
<div class="col-md-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Analysis Distribution</h5>
|
|
<div id="analysisDistributionChart"></div> <!-- Il grafico verrà inserito qui -->
|
|
<!-- Pulsante per mostrare/nascondere la tabella -->
|
|
<button class="btn btn-sm btn-primary toggle-table" data-target="#tableChartAnalysisDistribution">Toggle Data Table</button>
|
|
<!-- Contenitore per la tabella -->
|
|
<div id="tableChartAnalysisDistribution" class="hidden table-container"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row chart-box" id="chart5" data-id="9">
|
|
<div class="col-md-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Worst Analysis</h5>
|
|
<div id="worsttenanalysis"></div>
|
|
<!-- Pulsante per mostrare/nascondere la tabella -->
|
|
<button class="btn btn-sm btn-primary toggle-table" data-target="#tableChartWorst">Toggle Data Table</button>
|
|
<!-- Contenitore per la tabella -->
|
|
<div id="tableChartWorst" class="hidden table-container"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="container my-4" data-id="10">
|
|
<h2 class="text-center text-primary fw-bold">Components/Substances Statistic</h2>
|
|
<hr class="my-3">
|
|
</div>
|
|
|
|
<div class="row chart-box" id="chart6" data-id="11">
|
|
<div class="col-md-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Analytes with Most Failures</h5>
|
|
<div id="analytesFailChart"></div> <!-- Lo spazio per il grafico -->
|
|
<!-- Pulsante per mostrare/nascondere la tabella -->
|
|
<button class="btn btn-sm btn-primary toggle-table" data-target="#tableChartAnalytesFail">Toggle Data Table</button>
|
|
<!-- Contenitore per la tabella -->
|
|
<div id="tableChartAnalytesFail" class="hidden table-container"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container my-4" data-id="12">
|
|
<h2 class="text-center text-primary fw-bold">Other Parameter Statistic</h2>
|
|
<hr class="my-3">
|
|
</div>
|
|
|
|
<div class="row chart-box" id="chart7" data-id="13">
|
|
<div class="col-md-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title" id="dynamicChartTitle">Rating Distribution by Group</h5>
|
|
|
|
<!-- Inserisci il dropdown direttamente all'interno della card -->
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<label for="groupingField">Group by:</label>
|
|
<select id="groupingField" class="form-control">
|
|
<option value="products_season">Product Season</option>
|
|
<option value="agerange">Age Range</option>
|
|
<option value="namesupplier">Name Supplier</option>
|
|
<!-- Aggiungi altri campi se necessario -->
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Area per il primo grafico -->
|
|
<br>
|
|
<h6 class="mt-4">Report Rating Distribution</h6>
|
|
<div id="horizontalBarChart"></div>
|
|
<button class="btn btn-sm btn-primary toggle-table" data-target="#tableHorizontalBarChart">Toggle Data Table</button>
|
|
<div id="tableHorizontalBarChart" class="hidden table-container"></div>
|
|
|
|
<!-- Area per il secondo grafico -->
|
|
<h6 class="mt-4">Analysis Rating Distribution</h6>
|
|
<div id="horizontalBarAnalysisChart"></div>
|
|
<button class="btn btn-sm btn-primary toggle-table" data-target="#tableHorizontalBarAnalysisChart">Toggle Data Table</button>
|
|
<div id="tableHorizontalBarAnalysisChart" class="hidden table-container"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mt-4" data-id="14">
|
|
<!-- Colonna Sinistra per il Grafico a Torta -->
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Products Distribution by Phase</h5>
|
|
<div id="phasePieChart"></div>
|
|
<!-- Pulsante per mostrare/nascondere la tabella -->
|
|
<button class="btn btn-sm btn-primary toggle-table" data-target="#tablePhasePie">Toggle Data Table</button>
|
|
<!-- Contenitore per la tabella -->
|
|
<div id="tablePhasePie" class="hidden table-container"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Colonna Destra (Vuota o per futuri contenuti) -->
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Phase Rating Distribution</h5>
|
|
<div id="phaseBarChart"></div> <!-- Contenitore per il grafico -->
|
|
<!-- Pulsante per mostrare/nascondere la tabella -->
|
|
<button class="btn btn-sm btn-primary toggle-table" data-target="#tablePhaseBar">Toggle Data Table</button>
|
|
<!-- Contenitore per la tabella -->
|
|
<div id="tableChartPhaseBar" class="hidden table-container"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
</div><!-- container -->
|
|
|
|
</div> <!-- Page content Wrapper -->
|
|
|
|
</div> <!-- content -->
|
|
|
|
<?php include('../include/footer.php'); ?>
|
|
|
|
</div>
|
|
<!-- End Right content here -->
|
|
|
|
</div>
|
|
<!-- END wrapper -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.14.0/Sortable.min.js"></script>
|
|
<!-- script for chart order -->
|
|
|
|
<!-- Drag & drop Script -->
|
|
<?php include('js-dragdrop.php'); ?>
|
|
|
|
|
|
|
|
<?php //include('js-statkpi.php');
|
|
?>
|
|
|
|
|
|
<script>
|
|
document.getElementById('totalProducts').innerText = <?php echo $totalProducts; ?>;
|
|
document.getElementById('totalReports').innerText = <?php echo $totalReports; ?>;
|
|
document.getElementById('failedReports').innerText = <?php echo $failedReports; ?>;
|
|
document.getElementById('failedReportsPercent').innerText = "(<?php echo number_format($failedReportsPercent, 2); ?>%)";
|
|
document.getElementById('totalTests').innerText = <?php echo $totalTests; ?>;
|
|
document.getElementById('failedTests').innerText = <?php echo $failedTests; ?>;
|
|
document.getElementById('failedTestsPercent').innerText = "(<?php echo number_format($failedTestsPercent, 2); ?>%)";
|
|
</script>
|
|
<script>
|
|
// for multiple select
|
|
$(document).ready(function() {
|
|
$('.select2').select2({
|
|
placeholder: "Select options",
|
|
allowClear: true,
|
|
width: '100%'
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<!-- plugin JS -->
|
|
<?php include('jsinclude-statkpi.php'); ?>
|
|
|
|
|
|
</body>
|
|
|
|
</html>
|