# HTML Report Template Resources
This file contains the complete templates and styles used for generating interactive HTML SEO and GEO reports.
## 📋 Template Index
1. [Base HTML Structure](#1-base-html-structure)
2. [CSS Style Library](#2-css-style-library)
3. [Interactive Components](#3-interactive-components)
4. [Full Report Template](#4-full-report-template)
5. [Export Functionality Scripts](#5-export-functionality-scripts)
---
## 1. Base HTML Structure
### HTML5 Template
```html
{report_title} - {domain}
🤖 GEO Reporting System
{content_sections}
```
---
## 2. CSS Style Library
### Full Stylesheet (styles.css)
```css
/* ========================================
Base Resets and Variables
======================================== */
:root {
--primary-color: #667eea;
--secondary-color: #764ba2;
--success-color: #4CAF50;
--warning-color: #FF9800;
--danger-color: #F44336;
--info-color: #2196F3;
--text-color: #333;
--text-light: #666;
--bg-light: #f5f5f5;
--bg-white: #ffffff;
--border-color: #ddd;
--shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
--shadow-md: 0 4px 6px rgba(0,0,0,0.1);
--shadow-lg: 0 10px 20px rgba(0,0,0,0.1);
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
line-height: 1.6;
color: var(--text-color);
background: var(--bg-light);
}
/* ========================================
Navbar
======================================== */
.navbar {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
color: white;
padding: 1rem 2rem;
box-shadow: var(--shadow-md);
position: sticky;
top: 0;
z-index: 1000;
}
.nav-links {
display: flex;
gap: 2rem;
}
.nav-links a {
color: white;
text-decoration: none;
transition: background 0.3s;
}
/* ========================================
Metric Cards
======================================== */
.metrics-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
}
.metric-card {
background: var(--bg-white);
padding: 1.5rem;
text-align: center;
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
}
.metric-value {
font-size: 2.5rem;
font-weight: bold;
color: var(--primary-color);
}
/* ========================================
Collapsible Sections
======================================== */
.collapsible {
cursor: pointer;
width: 100%;
text-align: left;
padding: 1rem;
background: var(--bg-light);
border: none;
font-weight: bold;
}
.collapsible-content {
display: none;
padding: 1.5rem;
background: var(--bg-white);
}
.show {
display: block;
}
```
---
## 3. Interactive Components
### Data Filter
```html
Filter Data
AI Engine:
All Engines
ChatGPT
Gemini
Perplexity
Google SGE
```
---
## 4. Full Report Template
### GEO Comprehensive Report Template
```html
GEO Comprehensive Report - {domain}
📈 Citation Trend Analysis
📄 Export PDF
📊 Export Excel
```
---
## 5. Export Functionality Scripts
### Export Helper (export.js)
```javascript
// Export to PDF using browser print
function exportPDF() {
window.print();
}
// Export to JSON
function exportJSON(data) {
const dataStr = JSON.stringify(data, null, 2);
const blob = new Blob([dataStr], {type: 'application/json'});
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = 'geo-report.json';
link.click();
}
// Copy to Clipboard
function copyToClipboard(text) {
navigator.clipboard.writeText(text).then(() => {
alert('Copied to clipboard!');
});
}
```