← back to Designer Wallcoverings
auto-save: 2026-07-30T18:20:08 (1 files) — DW-Programming/DW-Dashboard/index.html
3b47647d1489a7deecf5903fba31f66698352ec5 · 2026-07-30 18:20:15 -0700 · Steve Abrams
Files touched
A DW-Programming/DW-Dashboard/index.html
Diff
commit 3b47647d1489a7deecf5903fba31f66698352ec5
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Thu Jul 30 18:20:15 2026 -0700
auto-save: 2026-07-30T18:20:08 (1 files) — DW-Programming/DW-Dashboard/index.html
---
DW-Programming/DW-Dashboard/index.html | 536 +++++++++++++++++++++++++++++++++
1 file changed, 536 insertions(+)
diff --git a/DW-Programming/DW-Dashboard/index.html b/DW-Programming/DW-Dashboard/index.html
new file mode 100644
index 00000000..84bdf3be
--- /dev/null
+++ b/DW-Programming/DW-Dashboard/index.html
@@ -0,0 +1,536 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Fortune 2000 Product Inquiries - Designer Wallcoverings</title>
+ <style>
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+
+ body {
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ min-height: 100vh;
+ padding: 20px;
+ }
+
+ .container {
+ max-width: 1400px;
+ margin: 0 auto;
+ background: white;
+ border-radius: 20px;
+ box-shadow: 0 20px 60px rgba(0,0,0,0.3);
+ overflow: hidden;
+ }
+
+ .header {
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ color: white;
+ padding: 30px;
+ text-align: center;
+ }
+
+ .header h1 {
+ font-size: 32px;
+ margin-bottom: 10px;
+ font-weight: 700;
+ }
+
+ .header p {
+ font-size: 16px;
+ opacity: 0.9;
+ }
+
+ .stats {
+ display: flex;
+ justify-content: space-around;
+ padding: 20px;
+ background: #f8f9fa;
+ border-bottom: 2px solid #e9ecef;
+ }
+
+ .stat {
+ text-align: center;
+ }
+
+ .stat-number {
+ font-size: 36px;
+ font-weight: 700;
+ color: #667eea;
+ display: block;
+ }
+
+ .stat-label {
+ font-size: 14px;
+ color: #6c757d;
+ text-transform: uppercase;
+ letter-spacing: 1px;
+ }
+
+ .filters {
+ padding: 20px 30px;
+ background: white;
+ border-bottom: 1px solid #e9ecef;
+ display: flex;
+ gap: 15px;
+ flex-wrap: wrap;
+ align-items: center;
+ }
+
+ .filter-group {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ }
+
+ .filter-group label {
+ font-size: 14px;
+ font-weight: 600;
+ color: #495057;
+ }
+
+ .filter-group select,
+ .filter-group input {
+ padding: 8px 15px;
+ border: 2px solid #e9ecef;
+ border-radius: 8px;
+ font-size: 14px;
+ outline: none;
+ transition: border-color 0.3s;
+ }
+
+ .filter-group select:focus,
+ .filter-group input:focus {
+ border-color: #667eea;
+ }
+
+ .emails-list {
+ padding: 30px;
+ max-height: calc(100vh - 400px);
+ overflow-y: auto;
+ }
+
+ .company-section {
+ margin-bottom: 40px;
+ }
+
+ .company-header {
+ display: flex;
+ align-items: center;
+ gap: 15px;
+ padding: 15px 20px;
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ color: white;
+ border-radius: 12px;
+ margin-bottom: 20px;
+ cursor: pointer;
+ transition: transform 0.2s;
+ }
+
+ .company-header:hover {
+ transform: translateX(5px);
+ }
+
+ .company-icon {
+ font-size: 32px;
+ }
+
+ .company-name {
+ font-size: 20px;
+ font-weight: 700;
+ flex: 1;
+ }
+
+ .company-count {
+ background: rgba(255,255,255,0.2);
+ padding: 5px 15px;
+ border-radius: 20px;
+ font-size: 14px;
+ font-weight: 600;
+ }
+
+ .email-card {
+ background: white;
+ border: 2px solid #e9ecef;
+ border-radius: 12px;
+ padding: 20px;
+ margin-bottom: 15px;
+ transition: all 0.3s;
+ }
+
+ .email-card:hover {
+ border-color: #667eea;
+ box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
+ transform: translateY(-2px);
+ }
+
+ .email-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: start;
+ margin-bottom: 10px;
+ }
+
+ .email-subject {
+ font-size: 16px;
+ font-weight: 600;
+ color: #212529;
+ flex: 1;
+ margin-right: 20px;
+ }
+
+ .email-date {
+ font-size: 12px;
+ color: #6c757d;
+ white-space: nowrap;
+ }
+
+ .email-from {
+ font-size: 14px;
+ color: #6c757d;
+ margin-bottom: 8px;
+ }
+
+ .email-actions {
+ margin-top: 15px;
+ display: flex;
+ gap: 10px;
+ }
+
+ .btn-view-email {
+ padding: 8px 16px;
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ color: white;
+ border: none;
+ border-radius: 8px;
+ font-size: 14px;
+ font-weight: 600;
+ cursor: pointer;
+ transition: all 0.3s;
+ }
+
+ .btn-view-email:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+ }
+
+ .email-preview {
+ margin-top: 15px;
+ padding: 15px;
+ background: #f8f9fa;
+ border-radius: 8px;
+ font-size: 14px;
+ color: #495057;
+ line-height: 1.6;
+ display: none;
+ max-height: 400px;
+ overflow-y: auto;
+ }
+
+ .email-card.expanded .email-preview {
+ display: block;
+ }
+
+ .email-body {
+ white-space: pre-wrap;
+ font-family: 'Courier New', monospace;
+ font-size: 13px;
+ margin-top: 10px;
+ padding: 10px;
+ background: white;
+ border-radius: 6px;
+ }
+
+ .no-results {
+ text-align: center;
+ padding: 60px 20px;
+ color: #6c757d;
+ }
+
+ .no-results-icon {
+ font-size: 64px;
+ margin-bottom: 20px;
+ opacity: 0.3;
+ }
+
+ .badge {
+ display: inline-block;
+ padding: 4px 12px;
+ background: #28a745;
+ color: white;
+ border-radius: 12px;
+ font-size: 12px;
+ font-weight: 600;
+ margin-left: 10px;
+ }
+
+ ::-webkit-scrollbar {
+ width: 10px;
+ }
+
+ ::-webkit-scrollbar-track {
+ background: #f1f1f1;
+ }
+
+ ::-webkit-scrollbar-thumb {
+ background: #667eea;
+ border-radius: 5px;
+ }
+
+ ::-webkit-scrollbar-thumb:hover {
+ background: #764ba2;
+ }
+
+ .loading {
+ text-align: center;
+ padding: 10px;
+ color: #6c757d;
+ }
+ </style>
+</head>
+<body>
+ <div class="container">
+ <div class="header">
+ <h1>🏢 Fortune 2000 Product Inquiries</h1>
+ <p>Business Communications - info@designerwallcoverings.com</p>
+ </div>
+
+ <div class="stats">
+ <div class="stat">
+ <span class="stat-number" id="totalEmails">0</span>
+ <span class="stat-label">Total Inquiries</span>
+ </div>
+ <div class="stat">
+ <span class="stat-number" id="totalCompanies">0</span>
+ <span class="stat-label">Companies</span>
+ </div>
+ <div class="stat">
+ <span class="stat-number" id="filteredCount">0</span>
+ <span class="stat-label">Showing</span>
+ </div>
+ </div>
+
+ <div class="filters">
+ <div class="filter-group">
+ <label>🏢 Company:</label>
+ <select id="companyFilter">
+ <option value="">All Companies</option>
+ </select>
+ </div>
+ <div class="filter-group">
+ <label>🔍 Search:</label>
+ <input type="text" id="searchFilter" placeholder="Search subject, from, date...">
+ </div>
+ </div>
+
+ <div class="emails-list" id="emailsList">
+ <div class="loading">Loading Fortune 2000 product inquiries...</div>
+ </div>
+ </div>
+
+ <script>
+ let emailsData = [];
+
+ // Load emails data
+ async function loadEmails() {
+ try {
+ const response = await fetch('/fortune-companies-emails.json');
+ emailsData = await response.json();
+
+ document.getElementById('totalEmails').textContent = emailsData.length;
+
+ const uniqueCompanies = [...new Set(emailsData.map(e => e.company))];
+ document.getElementById('totalCompanies').textContent = uniqueCompanies.length;
+
+ populateCompanyFilter();
+ renderEmails(emailsData);
+ } catch (error) {
+ console.error('Error loading emails:', error);
+ document.getElementById('emailsList').innerHTML = `
+ <div class="no-results">
+ <div class="no-results-icon">❌</div>
+ <h3>Error loading inquiries</h3>
+ <p>Please ensure fortune-inquiries.json is accessible.</p>
+ </div>
+ `;
+ }
+ }
+
+ function populateCompanyFilter() {
+ const companies = [...new Set(emailsData.map(e => e.company))].sort();
+ const select = document.getElementById('companyFilter');
+
+ companies.forEach(company => {
+ const option = document.createElement('option');
+ option.value = company;
+ option.textContent = company.toUpperCase();
+ select.appendChild(option);
+ });
+ }
+
+ function renderEmails(emails) {
+ const container = document.getElementById('emailsList');
+
+ if (emails.length === 0) {
+ container.innerHTML = `
+ <div class="no-results">
+ <div class="no-results-icon">🔍</div>
+ <h3>No inquiries found</h3>
+ <p>Try adjusting your filters</p>
+ </div>
+ `;
+ document.getElementById('filteredCount').textContent = '0';
+ return;
+ }
+
+ // Group by company
+ const grouped = emails.reduce((acc, email) => {
+ if (!acc[email.company]) acc[email.company] = [];
+ acc[email.company].push(email);
+ return acc;
+ }, {});
+
+ let html = '';
+
+ for (const [company, companyEmails] of Object.entries(grouped)) {
+ const icon = getCompanyIcon(company);
+
+ html += `
+ <div class="company-section">
+ <div class="company-header">
+ <span class="company-icon">${icon}</span>
+ <span class="company-name">${company.toUpperCase()}</span>
+ <span class="company-count">${companyEmails.length} inquiry${companyEmails.length > 1 ? 's' : ''}</span>
+ </div>
+ `;
+
+ companyEmails.forEach(email => {
+ html += `
+ <div class="email-card" id="card-${email.id}">
+ <div class="email-header">
+ <div class="email-subject">${escapeHtml(email.subject)}<span class="badge">INQUIRY</span></div>
+ <div class="email-date">${formatDate(email.date)}</div>
+ </div>
+ <div class="email-from">From: ${escapeHtml(email.from)}</div>
+ <div class="email-actions">
+ <button class="btn-view-email" onclick="viewEmail('${email.id}')">
+ 📧 Open Email
+ </button>
+ </div>
+ <div class="email-preview" id="preview-${email.id}"></div>
+ </div>
+ `;
+ });
+
+ html += `</div>`;
+ }
+
+ container.innerHTML = html;
+ document.getElementById('filteredCount').textContent = emails.length;
+ }
+
+ async function viewEmail(emailId) {
+ const card = document.getElementById(`card-${emailId}`);
+ const preview = document.getElementById(`preview-${emailId}`);
+
+ // Toggle if already expanded
+ if (card.classList.contains('expanded')) {
+ card.classList.remove('expanded');
+ return;
+ }
+
+ // Show loading
+ card.classList.add('expanded');
+ preview.innerHTML = '<div class="loading">Loading email content...</div>';
+
+ try {
+ const response = await fetch(`/api/get-email/${emailId}`);
+ const data = await response.json();
+
+ if (data.success && data.email) {
+ const email = data.email;
+ preview.innerHTML = `
+ <strong>From:</strong> ${escapeHtml(email.from)}<br>
+ <strong>To:</strong> ${escapeHtml(email.to)}<br>
+ <strong>Subject:</strong> ${escapeHtml(email.subject)}<br>
+ <strong>Date:</strong> ${escapeHtml(email.date)}<br><br>
+ <div class="email-body">${escapeHtml(email.body)}</div>
+ `;
+ } else {
+ preview.innerHTML = '<div style="color: red;">Failed to load email content</div>';
+ }
+ } catch (error) {
+ console.error('Error fetching email:', error);
+ preview.innerHTML = '<div style="color: red;">Error loading email content</div>';
+ }
+ }
+
+ function getCompanyIcon(company) {
+ const icons = {
+ 'louisvuitton.com': '👜',
+ 'ralphlauren.com': '👔',
+ 'cartier.com': '💎',
+ 'apple.com': '🍎',
+ 'google.com': '🔍',
+ 'amazon.com': '📦',
+ 'microsoft.com': '💻',
+ 'facebook.com': '📘',
+ 'disney.com': '🏰',
+ 'nike.com': '✔️',
+ 'marriott.com': '🏨',
+ 'hilton.com': '🏨',
+ 'fourseasons.com': '🏨'
+ };
+ return icons[company] || '🏢';
+ }
+
+ function formatDate(dateStr) {
+ const date = new Date(dateStr);
+ return date.toLocaleDateString('en-US', {
+ month: 'short',
+ day: 'numeric',
+ year: 'numeric',
+ hour: '2-digit',
+ minute: '2-digit'
+ });
+ }
+
+ function escapeHtml(text) {
+ const div = document.createElement('div');
+ div.textContent = text;
+ return div.innerHTML;
+ }
+
+ function filterEmails() {
+ const companyFilter = document.getElementById('companyFilter').value;
+ const searchFilter = document.getElementById('searchFilter').value.toLowerCase();
+
+ let filtered = emailsData;
+
+ if (companyFilter) {
+ filtered = filtered.filter(e => e.company === companyFilter);
+ }
+
+ if (searchFilter) {
+ filtered = filtered.filter(e =>
+ e.subject.toLowerCase().includes(searchFilter) ||
+ e.from.toLowerCase().includes(searchFilter) ||
+ e.date.toLowerCase().includes(searchFilter)
+ );
+ }
+
+ renderEmails(filtered);
+ }
+
+ document.getElementById('companyFilter').addEventListener('change', filterEmails);
+ document.getElementById('searchFilter').addEventListener('input', filterEmails);
+
+ // Load emails on page load
+ loadEmails();
+ </script>
+</body>
+</html>
← b07b90ad auto-save: 2026-07-30T17:19:46 (1 files) — shopify/scripts/c
·
back to Designer Wallcoverings
·
auto-save: 2026-07-30T23:22:00 (1 files) — shopify/scripts/c d5b7e0e3 →