863b433eba
Consolidates V2 codebase into main project directory Updates build script to support simplified entry points Removes redundant files and cleans up project organization Simplifies module imports and entry points for calendar application
317 lines
No EOL
11 KiB
HTML
317 lines
No EOL
11 KiB
HTML
|
|
<!DOCTYPE html>
|
|
<html lang="da">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>CSS Analysis Report - Calendar Plantempus</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
line-height: 1.6;
|
|
color: #333;
|
|
background: #f5f5f5;
|
|
padding: 20px;
|
|
}
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
background: white;
|
|
padding: 40px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
}
|
|
h1 {
|
|
color: #2196f3;
|
|
margin-bottom: 10px;
|
|
font-size: 2.5em;
|
|
}
|
|
.subtitle {
|
|
color: #666;
|
|
margin-bottom: 30px;
|
|
font-size: 1.1em;
|
|
}
|
|
.summary {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 20px;
|
|
margin-bottom: 40px;
|
|
}
|
|
.stat-card {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
|
}
|
|
.stat-card.warning {
|
|
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
|
}
|
|
.stat-card.success {
|
|
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
|
}
|
|
.stat-value {
|
|
font-size: 2.5em;
|
|
font-weight: bold;
|
|
margin: 10px 0;
|
|
}
|
|
.stat-label {
|
|
font-size: 0.9em;
|
|
opacity: 0.9;
|
|
}
|
|
section {
|
|
margin-bottom: 40px;
|
|
}
|
|
h2 {
|
|
color: #333;
|
|
margin-bottom: 20px;
|
|
padding-bottom: 10px;
|
|
border-bottom: 2px solid #2196f3;
|
|
}
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-top: 20px;
|
|
}
|
|
th, td {
|
|
padding: 12px;
|
|
text-align: left;
|
|
border-bottom: 1px solid #ddd;
|
|
}
|
|
th {
|
|
background: #f8f9fa;
|
|
font-weight: 600;
|
|
color: #555;
|
|
}
|
|
tr:hover {
|
|
background: #f8f9fa;
|
|
}
|
|
.file-detail {
|
|
background: #f8f9fa;
|
|
padding: 15px;
|
|
border-radius: 4px;
|
|
margin-bottom: 15px;
|
|
}
|
|
.rejected-list {
|
|
max-height: 200px;
|
|
overflow-y: auto;
|
|
background: white;
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
margin-top: 10px;
|
|
font-family: 'Courier New', monospace;
|
|
font-size: 0.9em;
|
|
}
|
|
.badge {
|
|
display: inline-block;
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
font-size: 0.85em;
|
|
font-weight: 600;
|
|
}
|
|
.badge-danger { background: #ffebee; color: #c62828; }
|
|
.badge-warning { background: #fff3e0; color: #ef6c00; }
|
|
.badge-success { background: #e8f5e9; color: #2e7d32; }
|
|
.timestamp {
|
|
color: #999;
|
|
font-size: 0.9em;
|
|
margin-top: 30px;
|
|
text-align: center;
|
|
}
|
|
.color-palette {
|
|
display: flex;
|
|
gap: 5px;
|
|
flex-wrap: wrap;
|
|
margin-top: 10px;
|
|
}
|
|
.color-swatch {
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 4px;
|
|
border: 1px solid #ddd;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>📊 CSS Analysis Report</h1>
|
|
<p class="subtitle">Calendar Plantempus - Production CSS Analysis</p>
|
|
|
|
<div class="summary">
|
|
<div class="stat-card">
|
|
<div class="stat-label">Total CSS Size</div>
|
|
<div class="stat-value">19.26 KB</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-label">CSS Files</div>
|
|
<div class="stat-value">4</div>
|
|
</div>
|
|
<div class="stat-card warning">
|
|
<div class="stat-label">Unused CSS Rules</div>
|
|
<div class="stat-value">43</div>
|
|
</div>
|
|
<div class="stat-card success">
|
|
<div class="stat-label">Potential Removal</div>
|
|
<div class="stat-value">0.27%</div>
|
|
</div>
|
|
</div>
|
|
|
|
<section>
|
|
<h2>📈 CSS Statistics by File</h2>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>File</th>
|
|
<th>Size</th>
|
|
<th>Lines</th>
|
|
<th>Rules</th>
|
|
<th>Selectors</th>
|
|
<th>Properties</th>
|
|
<th>Colors</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
|
|
<tr>
|
|
<td><strong>calendar-v2.css</strong></td>
|
|
<td>0.18 KB</td>
|
|
<td>7</td>
|
|
<td>0</td>
|
|
<td>0</td>
|
|
<td>1</td>
|
|
<td>0</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><strong>calendar-v2-base.css</strong></td>
|
|
<td>1.66 KB</td>
|
|
<td>67</td>
|
|
<td>3</td>
|
|
<td>3</td>
|
|
<td>47</td>
|
|
<td>32</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><strong>calendar-v2-layout.css</strong></td>
|
|
<td>8.65 KB</td>
|
|
<td>428</td>
|
|
<td>56</td>
|
|
<td>71</td>
|
|
<td>219</td>
|
|
<td>2</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><strong>calendar-v2-events.css</strong></td>
|
|
<td>8.77 KB</td>
|
|
<td>383</td>
|
|
<td>54</td>
|
|
<td>62</td>
|
|
<td>196</td>
|
|
<td>5</td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>🗑️ Unused CSS by File</h2>
|
|
|
|
<div class="file-detail">
|
|
<h3>calendar-v2.css</h3>
|
|
<p>
|
|
<span class="badge badge-success">
|
|
0 unused rules
|
|
</span>
|
|
<span style="margin-left: 10px; color: #666;">
|
|
Original: 186 | After purge: 186
|
|
</span>
|
|
</p>
|
|
<p style="color: #2e7d32; margin-top: 10px;">✅ No unused CSS found!</p>
|
|
</div>
|
|
|
|
<div class="file-detail">
|
|
<h3>calendar-v2-layout.css</h3>
|
|
<p>
|
|
<span class="badge badge-success">
|
|
16 unused rules
|
|
</span>
|
|
<span style="margin-left: 10px; color: #666;">
|
|
Original: 7087 | After purge: 6800
|
|
</span>
|
|
</p>
|
|
|
|
<details>
|
|
<summary style="cursor: pointer; margin-top: 10px;">Show unused selectors</summary>
|
|
<div class="rejected-list">
|
|
.view-chip<br>&:hover<br>&.active<br>.workweek-dropdown<br>&:focus<br>fieldset<br>legend<br>.resource-checkboxes<br>label<br>input[type="checkbox"]<br>&.btn-small<br>&[data-levels="date"] > swp-day-header<br>&[data-levels="resource date"]<br>&[data-levels="team resource date"]<br>&[data-levels="department resource date"]<br>&[data-hidden="true"]
|
|
|
|
</div>
|
|
</details>
|
|
|
|
</div>
|
|
|
|
<div class="file-detail">
|
|
<h3>calendar-v2-events.css</h3>
|
|
<p>
|
|
<span class="badge badge-warning">
|
|
26 unused rules
|
|
</span>
|
|
<span style="margin-left: 10px; color: #666;">
|
|
Original: 7047 | After purge: 6504
|
|
</span>
|
|
</p>
|
|
|
|
<details>
|
|
<summary style="cursor: pointer; margin-top: 10px;">Show unused selectors</summary>
|
|
<div class="rejected-list">
|
|
&.drag-ghost<br>&:hover<br>&[data-continues-before="true"]<br>&[data-continues-after="true"]<br>swp-events-layer[data-filter-active="true"] swp-event<br>swp-events-layer[data-filter-active="true"] swp-event[data-matches="true"]<br>swp-event[data-stack-link]:not([data-stack-link*='"stackLevel":0'])<br>
|
|
swp-event-group[data-stack-link]:not([data-stack-link*='"stackLevel":0']) swp-event<br>.is-red<br>.is-pink<br>.is-magenta<br>.is-purple<br>.is-violet<br>.is-deep-purple<br>.is-indigo<br>.is-blue<br>.is-light-blue<br>.is-cyan<br>.is-teal<br>.is-green<br>.is-light-green<br>.is-lime<br>.is-yellow<br>.is-amber<br>.is-orange<br>.is-deep-orange
|
|
|
|
</div>
|
|
</details>
|
|
|
|
</div>
|
|
|
|
<div class="file-detail">
|
|
<h3>calendar-v2-base.css</h3>
|
|
<p>
|
|
<span class="badge badge-success">
|
|
1 unused rules
|
|
</span>
|
|
<span style="margin-left: 10px; color: #666;">
|
|
Original: 1574 | After purge: 1570
|
|
</span>
|
|
</p>
|
|
|
|
<details>
|
|
<summary style="cursor: pointer; margin-top: 10px;">Show unused selectors</summary>
|
|
<div class="rejected-list">
|
|
body
|
|
|
|
</div>
|
|
</details>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<section>
|
|
<h2>💡 Recommendations</h2>
|
|
<ul style="line-height: 2;">
|
|
<li>✅ CSS usage is relatively clean.</li>
|
|
|
|
<li>📦 Consider consolidating similar styles to reduce duplication.</li>
|
|
<li>🎨 Review color palette - found 39 unique colors across all files.</li>
|
|
<li>🔄 Implement a build process to automatically remove unused CSS in production.</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<p class="timestamp">Report generated: 17.12.2025, 21.36.53</p>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
|