<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Customer List from Virtuoso Demo Database</title>
<style>
:root {
--primary-color: #1a3b5d;
--secondary-color: #2c5282;
--accent-color: #718096;
--text-color: #2d3748;
--background-color: #f7fafc;
--card-shadow: 0 4px 6px rgba(0,0,0,0.1);
--border-color: #e2e8f0;
}
body {
font-family: 'Arial', 'Helvetica', sans-serif;
margin: 0;
padding: 0;
background-color: var(--background-color);
color: var(--text-color);
line-height: 1.6;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.report-header {
border-bottom: 2px solid var(--primary-color);
padding-bottom: 20px;
margin-bottom: 30px;
}
.report-title {
color: var(--primary-color);
font-size: 24px;
font-weight: bold;
margin: 0;
text-transform: uppercase;
letter-spacing: 1px;
}
.report-subtitle {
color: var(--accent-color);
font-size: 16px;
margin: 5px 0 0 0;
}
.report-meta {
margin-top: 20px;
display: flex;
justify-content: space-between;
font-size: 14px;
color: var(--accent-color);
}
.report-section {
background-color: white;
border: 1px solid var(--border-color);
border-radius: 5px;
box-shadow: var(--card-shadow);
padding: 20px;
margin-bottom: 30px;
}
.section-title {
color: var(--primary-color);
font-size: 18px;
margin-top: 0;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid var(--border-color);
}
table {
border-collapse: collapse;
width: 100%;
margin: 0;
font-size: 14px;
}
th, td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid var(--border-color);
}
th {
background-color: #f8fafc;
font-weight: bold;
color: var(--primary-color);
border-top: 1px solid var(--border-color);
border-bottom: 2px solid var(--primary-color);
}
tr:hover {
background-color: #f1f5f9;
}
.summary-section {
display: flex;
justify-content: space-between;
margin-top: 20px;
}
.summary-box {
background-color: #f8fafc;
border: 1px solid var(--border-color);
border-radius: 5px;
padding: 15px;
width: 30%;
text-align: center;
}
.summary-title {
font-size: 14px;
color: var(--accent-color);
margin: 0 0 5px 0;
}
.summary-value {
font-size: 20px;
font-weight: bold;
color: var(--primary-color);
margin: 0;
}
.report-footer {
text-align: center;
margin-top: 30px;
padding-top: 15px;
border-top: 1px solid var(--border-color);
color: var(--accent-color);
font-size: 12px;
}
@media print {
body {
background-color: white;
}
.report-section {
box-shadow: none;
border: 1px solid #ddd;
}
.container {
max-width: 100%;
padding: 0;
}
}
</style>
</head>
<body>
<div class="container">
<div class="report-header">
<h1 class="report-title">Customer Data Report</h1>
<p class="report-subtitle">Virtuoso Demo Database - Customer Information</p>
<div class="report-meta">
<div class="report-date">
<strong>Report Date:</strong> <?vsp http_value(datestring(now())); ?>
</div>
<div class="report-id">
<strong>Report ID:</strong> VSP-<?vsp http_value(substring(uuid(), 1, 8)); ?>
</div>
</div>
</div>
<div class="report-section">
<h2 class="section-title">Customer Overview</h2>
<table>
<thead>
<tr>
<th>Customer ID</th>
<th>Company Name</th>
<th>Contact Name</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<?vsp
-- Charset set
SET HTTP_CHARSET='WINDOWS-1252';
-- Query the Customers table from the Demo schema
declare country_count integer;
declare total_customers integer;
-- Get total count first
select count(*) into total_customers from Demo.demo.Customers;
-- Get country count
select count(distinct Country) into country_count from Demo.demo.Customers;
-- Get the customer data
for (select CustomerID, CompanyName, ContactName, Country
from Demo.demo.Customers
order by Country, CompanyName) do {
-- Output each row as an HTML table row
http(sprintf('<tr><td>%s</td><td>%s</td><td>%s</td><td>%s</td></tr>',
CustomerID,
CompanyName,
ContactName,
Country));
}
?>
</tbody>
</table>
</div>
<div class="summary-section">
<div class="summary-box">
<p class="summary-title">Total Customers</p>
<p class="summary-value">
<?vsp http_value(total_customers); ?>
</p>
</div>
<div class="summary-box">
<p class="summary-title">Countries Represented</p>
<p class="summary-value">
<?vsp http_value(country_count); ?>
</p>
</div>
<div class="summary-box">
<p class="summary-title">Generated By</p>
<p class="summary-value">Virtuoso VSP</p>
</div>
</div>
<div class="report-footer">
<p>This report contains confidential information and is intended for authorized personnel only.<br>
Generated on <?vsp http_value(datestring(now())); ?> by Virtuoso Server Pages.</p>
</div>
</div>
</body>
</html>