cloudfrontize 1.3.0 → 1.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/cli.js +23 -23
- package/dist/ui/app.js +43 -0
- package/dist/ui/assets/cloudfrontize-pro-transparent-512.png +0 -0
- package/dist/ui/index.html +30 -3
- package/dist/ui/style.css +153 -0
- package/package.json +1 -1
package/dist/ui/app.js
CHANGED
|
@@ -50,6 +50,13 @@ document.addEventListener('DOMContentLoaded', () => {
|
|
|
50
50
|
const data = JSON.parse(event.data);
|
|
51
51
|
if (data.type === 'init') {
|
|
52
52
|
portDisplay.textContent = data.port;
|
|
53
|
+
|
|
54
|
+
// Dynamic Versioning
|
|
55
|
+
const versionTag = document.querySelector('.version-tag');
|
|
56
|
+
if (versionTag && data.version) {
|
|
57
|
+
versionTag.textContent = `Developer Edition v${data.version}`;
|
|
58
|
+
}
|
|
59
|
+
|
|
53
60
|
// Wipe all local state for a clean slate
|
|
54
61
|
requestFeed.innerHTML = '<div class="empty-state"><p>Waiting for requests...</p></div>';
|
|
55
62
|
loadHeaderState(data.headerState);
|
|
@@ -396,4 +403,40 @@ document.addEventListener('DOMContentLoaded', () => {
|
|
|
396
403
|
document.getElementById('clear-feed').onclick = () => {
|
|
397
404
|
requestFeed.innerHTML = '<div class="empty-state"><p>Waiting for requests...</p></div>';
|
|
398
405
|
};
|
|
406
|
+
|
|
407
|
+
// About Modal Logic
|
|
408
|
+
const aboutModal = document.getElementById('about-modal');
|
|
409
|
+
const aboutTrigger = document.getElementById('about-trigger');
|
|
410
|
+
const closeAbout = document.getElementById('close-about');
|
|
411
|
+
|
|
412
|
+
const showAbout = () => {
|
|
413
|
+
aboutModal.classList.add('active');
|
|
414
|
+
document.body.style.overflow = 'hidden'; // Prevent background scroll
|
|
415
|
+
};
|
|
416
|
+
|
|
417
|
+
const hideAbout = () => {
|
|
418
|
+
aboutModal.classList.remove('active');
|
|
419
|
+
document.body.style.overflow = '';
|
|
420
|
+
};
|
|
421
|
+
|
|
422
|
+
aboutTrigger.addEventListener('click', (e) => {
|
|
423
|
+
e.preventDefault();
|
|
424
|
+
showAbout();
|
|
425
|
+
});
|
|
426
|
+
|
|
427
|
+
closeAbout.addEventListener('click', hideAbout);
|
|
428
|
+
|
|
429
|
+
// Close on click outside
|
|
430
|
+
aboutModal.addEventListener('click', (e) => {
|
|
431
|
+
if (e.target === aboutModal) {
|
|
432
|
+
hideAbout();
|
|
433
|
+
}
|
|
434
|
+
});
|
|
435
|
+
|
|
436
|
+
// Close on Escape
|
|
437
|
+
document.addEventListener('keydown', (e) => {
|
|
438
|
+
if (e.key === 'Escape' && aboutModal.classList.contains('active')) {
|
|
439
|
+
hideAbout();
|
|
440
|
+
}
|
|
441
|
+
});
|
|
399
442
|
});
|
|
Binary file
|
package/dist/ui/index.html
CHANGED
|
@@ -15,13 +15,13 @@
|
|
|
15
15
|
<meta name="theme-color" content="#1a1a1a"> <meta name="msapplication-config" content="/favicons/browserconfig.xml">
|
|
16
16
|
<meta name="msapplication-TileColor" content="#1a1a1a">
|
|
17
17
|
|
|
18
|
-
<link rel="stylesheet" href="style.css">
|
|
18
|
+
<link rel="stylesheet" href="./style.css">
|
|
19
19
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
|
20
20
|
</head>
|
|
21
21
|
<body class="dark-mode">
|
|
22
22
|
<header>
|
|
23
|
-
<div class="logo">
|
|
24
|
-
<
|
|
23
|
+
<div class="logo" id="about-trigger" title="About CloudFrontize PRO">
|
|
24
|
+
<img class="clipped-logo" src="./assets/cloudfrontize-pro-transparent-512.png" alt="CloudFrontize PRO">
|
|
25
25
|
<h1>CloudFrontize <span class="badge">PRO</span></h1>
|
|
26
26
|
</div>
|
|
27
27
|
<div class="status-bar">
|
|
@@ -97,6 +97,33 @@
|
|
|
97
97
|
</section>
|
|
98
98
|
</main>
|
|
99
99
|
|
|
100
|
+
<div id="about-modal" class="modal-overlay">
|
|
101
|
+
<div class="modal-content about-card">
|
|
102
|
+
<button class="modal-close" id="close-about">×</button>
|
|
103
|
+
<div class="about-header">
|
|
104
|
+
<img src="./assets/cloudfrontize-pro-transparent-512.png" alt="CloudFrontize PRO" class="about-logo">
|
|
105
|
+
<h2>CloudFrontize <span class="badge">PRO</span></h2>
|
|
106
|
+
<p class="version-tag">Developer Edition v1.0.0</p>
|
|
107
|
+
</div>
|
|
108
|
+
<div class="about-body">
|
|
109
|
+
<p>CloudFrontize PRO is the ultimate developer tool for local CloudFront and Lambda@Edge simulation.</p>
|
|
110
|
+
<div class="feature-pills">
|
|
111
|
+
<span class="pill">Edge Runtime</span>
|
|
112
|
+
<span class="pill">Header Intelligence</span>
|
|
113
|
+
<span class="pill">Fidelity Validation</span>
|
|
114
|
+
</div>
|
|
115
|
+
<div class="about-links">
|
|
116
|
+
<a href="https://github.com/felipecarrillo100/cloudfrontize" target="_blank" class="about-link">
|
|
117
|
+
<span class="material-icons">code</span> Repository
|
|
118
|
+
</a>
|
|
119
|
+
</div>
|
|
120
|
+
</div>
|
|
121
|
+
<div class="about-footer">
|
|
122
|
+
© 2026 Felipe Carrillo. Built for performance.
|
|
123
|
+
</div>
|
|
124
|
+
</div>
|
|
125
|
+
</div>
|
|
126
|
+
|
|
100
127
|
<script src="app.js"></script>
|
|
101
128
|
</body>
|
|
102
129
|
</html>
|
package/dist/ui/style.css
CHANGED
|
@@ -637,3 +637,156 @@ main {
|
|
|
637
637
|
border-radius: 3px;
|
|
638
638
|
background: var(--primary);
|
|
639
639
|
}
|
|
640
|
+
|
|
641
|
+
.clipped-logo {
|
|
642
|
+
width: 64px;
|
|
643
|
+
height: 48px; /* The "desired size" (clipping height) */
|
|
644
|
+
object-fit: cover; /* Ensures the image fills the area without stretching */
|
|
645
|
+
object-position: center; /* Centers the image vertically and horizontally */
|
|
646
|
+
display: block; /* Prevents bottom whitespace issues */
|
|
647
|
+
}
|
|
648
|
+
|
|
649
|
+
/* Modal Overlay */
|
|
650
|
+
.modal-overlay {
|
|
651
|
+
position: fixed;
|
|
652
|
+
top: 0;
|
|
653
|
+
left: 0;
|
|
654
|
+
width: 100%;
|
|
655
|
+
height: 100%;
|
|
656
|
+
background: rgba(0, 0, 0, 0.45);
|
|
657
|
+
backdrop-filter: blur(8px);
|
|
658
|
+
display: none; /* Hidden by default */
|
|
659
|
+
justify-content: center;
|
|
660
|
+
align-items: center;
|
|
661
|
+
z-index: 1000;
|
|
662
|
+
opacity: 0;
|
|
663
|
+
transition: opacity 0.3s ease;
|
|
664
|
+
}
|
|
665
|
+
|
|
666
|
+
.modal-overlay.active {
|
|
667
|
+
display: flex;
|
|
668
|
+
opacity: 1;
|
|
669
|
+
}
|
|
670
|
+
|
|
671
|
+
/* About Card */
|
|
672
|
+
.about-card {
|
|
673
|
+
background: linear-gradient(135deg, var(--bg-card) 0%, #0f172a 100%);
|
|
674
|
+
border: 1px solid var(--border);
|
|
675
|
+
border-radius: 24px;
|
|
676
|
+
padding: 3rem;
|
|
677
|
+
max-width: 500px;
|
|
678
|
+
width: 90%;
|
|
679
|
+
position: relative;
|
|
680
|
+
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
|
|
681
|
+
transform: translateY(20px);
|
|
682
|
+
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
683
|
+
text-align: center;
|
|
684
|
+
}
|
|
685
|
+
|
|
686
|
+
.modal-overlay.active .about-card {
|
|
687
|
+
transform: translateY(0);
|
|
688
|
+
}
|
|
689
|
+
|
|
690
|
+
.modal-close {
|
|
691
|
+
position: absolute;
|
|
692
|
+
top: 1.5rem;
|
|
693
|
+
right: 1.5rem;
|
|
694
|
+
background: none;
|
|
695
|
+
border: none;
|
|
696
|
+
color: var(--text-muted);
|
|
697
|
+
font-size: 2rem;
|
|
698
|
+
cursor: pointer;
|
|
699
|
+
transition: color 0.2s;
|
|
700
|
+
line-height: 1;
|
|
701
|
+
}
|
|
702
|
+
|
|
703
|
+
.modal-close:hover {
|
|
704
|
+
color: var(--primary);
|
|
705
|
+
}
|
|
706
|
+
|
|
707
|
+
.about-header {
|
|
708
|
+
margin-bottom: 2rem;
|
|
709
|
+
}
|
|
710
|
+
|
|
711
|
+
.about-logo {
|
|
712
|
+
width: 120px;
|
|
713
|
+
height: auto;
|
|
714
|
+
margin-bottom: 1.5rem;
|
|
715
|
+
filter: drop-shadow(0 0 20px var(--primary-glow));
|
|
716
|
+
}
|
|
717
|
+
|
|
718
|
+
.about-header h2 {
|
|
719
|
+
font-size: 2rem;
|
|
720
|
+
margin-bottom: 0.5rem;
|
|
721
|
+
}
|
|
722
|
+
|
|
723
|
+
.version-tag {
|
|
724
|
+
color: var(--text-muted);
|
|
725
|
+
font-size: 0.85rem;
|
|
726
|
+
font-family: 'JetBrains Mono', monospace;
|
|
727
|
+
}
|
|
728
|
+
|
|
729
|
+
.about-body {
|
|
730
|
+
margin-bottom: 2.5rem;
|
|
731
|
+
}
|
|
732
|
+
|
|
733
|
+
.about-body p {
|
|
734
|
+
color: var(--text-main);
|
|
735
|
+
line-height: 1.6;
|
|
736
|
+
margin-bottom: 1.5rem;
|
|
737
|
+
}
|
|
738
|
+
|
|
739
|
+
.feature-pills {
|
|
740
|
+
display: flex;
|
|
741
|
+
justify-content: center;
|
|
742
|
+
gap: 0.75rem;
|
|
743
|
+
margin-bottom: 2rem;
|
|
744
|
+
flex-wrap: wrap;
|
|
745
|
+
}
|
|
746
|
+
|
|
747
|
+
.pill {
|
|
748
|
+
background: var(--glass);
|
|
749
|
+
border: 1px solid var(--border);
|
|
750
|
+
padding: 0.4rem 1rem;
|
|
751
|
+
border-radius: 100px;
|
|
752
|
+
font-size: 0.75rem;
|
|
753
|
+
color: var(--text-muted);
|
|
754
|
+
font-weight: 500;
|
|
755
|
+
}
|
|
756
|
+
|
|
757
|
+
.about-links {
|
|
758
|
+
display: flex;
|
|
759
|
+
justify-content: center;
|
|
760
|
+
gap: 1.5rem;
|
|
761
|
+
}
|
|
762
|
+
|
|
763
|
+
.about-link {
|
|
764
|
+
display: flex;
|
|
765
|
+
align-items: center;
|
|
766
|
+
gap: 0.5rem;
|
|
767
|
+
color: var(--secondary);
|
|
768
|
+
text-decoration: none;
|
|
769
|
+
font-weight: 600;
|
|
770
|
+
transition: color 0.2s;
|
|
771
|
+
}
|
|
772
|
+
|
|
773
|
+
.about-link:hover {
|
|
774
|
+
color: var(--primary);
|
|
775
|
+
}
|
|
776
|
+
|
|
777
|
+
.about-footer {
|
|
778
|
+
border-top: 1px solid var(--border);
|
|
779
|
+
padding-top: 1.5rem;
|
|
780
|
+
color: var(--text-muted);
|
|
781
|
+
font-size: 0.75rem;
|
|
782
|
+
}
|
|
783
|
+
|
|
784
|
+
/* Logo Trigger Hover */
|
|
785
|
+
.logo {
|
|
786
|
+
cursor: pointer;
|
|
787
|
+
transition: transform 0.2s ease;
|
|
788
|
+
}
|
|
789
|
+
|
|
790
|
+
.logo:hover {
|
|
791
|
+
transform: scale(1.02);
|
|
792
|
+
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "cloudfrontize",
|
|
3
3
|
"description": "High-performance, high-fidelity local emulator for AWS Lambda@Edge and CloudFront Functions. Validate edge logic, catch illegal header mutations, and execute production-grade runtimes on a specialized local static server.",
|
|
4
|
-
"version": "1.3.
|
|
4
|
+
"version": "1.3.1",
|
|
5
5
|
"type": "commonjs",
|
|
6
6
|
"main": "dist/cli.js",
|
|
7
7
|
"bin": {
|