Skip to content

Commit 3cd2295

Browse files
marcominervamarcominerva
authored
Merge pull request #8 from marcominerva/copilot/fix-7
Add landing page for PdfSmith homepage
2 parents 0f7aebc + 15b23d7 commit 3cd2295

File tree

3 files changed

+357
-0
lines changed

3 files changed

+357
-0
lines changed

‎src/PdfSmith/Program.cs‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,9 @@
112112
options.SwaggerEndpoint("/openapi/v1.json", $"{app.Environment.ApplicationName} v1");
113113
});
114114

115+
app.UseDefaultFiles();
116+
app.UseStaticFiles();
117+
115118
app.UseRouting();
116119
//app.UseCors();
117120

‎src/PdfSmith/wwwroot/css/styles.css‎

Lines changed: 212 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,212 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
9+
line-height: 1.6;
10+
color: #333;
11+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
12+
min-height: 100vh;
13+
}
14+
15+
.container {
16+
max-width: 1200px;
17+
margin: 0 auto;
18+
padding: 0 20px;
19+
}
20+
21+
header {
22+
background: rgba(255, 255, 255, 0.1);
23+
backdrop-filter: blur(10px);
24+
padding: 1rem 0;
25+
margin-bottom: 2rem;
26+
}
27+
28+
nav {
29+
display: flex;
30+
justify-content: space-between;
31+
align-items: center;
32+
}
33+
34+
.logo {
35+
font-size: 1.8rem;
36+
font-weight: bold;
37+
color: white;
38+
}
39+
40+
.nav-links {
41+
display: flex;
42+
gap: 2rem;
43+
}
44+
45+
.nav-links a {
46+
color: white;
47+
text-decoration: none;
48+
transition: opacity 0.3s;
49+
}
50+
51+
.nav-links a:hover {
52+
opacity: 0.8;
53+
}
54+
55+
.hero {
56+
text-align: center;
57+
padding: 4rem 0;
58+
color: white;
59+
}
60+
61+
.hero h1 {
62+
font-size: 3.5rem;
63+
margin-bottom: 1rem;
64+
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
65+
}
66+
67+
.hero p {
68+
font-size: 1.3rem;
69+
margin-bottom: 2rem;
70+
opacity: 0.9;
71+
}
72+
73+
.cta-buttons {
74+
display: flex;
75+
gap: 1rem;
76+
justify-content: center;
77+
flex-wrap: wrap;
78+
}
79+
80+
.btn {
81+
display: inline-block;
82+
padding: 1rem 2rem;
83+
border-radius: 50px;
84+
text-decoration: none;
85+
font-weight: bold;
86+
transition: all 0.3s;
87+
cursor: pointer;
88+
border: none;
89+
font-size: 1rem;
90+
}
91+
92+
.btn-primary {
93+
background: #ff6b6b;
94+
color: white;
95+
}
96+
97+
.btn-secondary {
98+
background: rgba(255, 255, 255, 0.2);
99+
color: white;
100+
border: 2px solid white;
101+
}
102+
103+
.btn:hover {
104+
transform: translateY(-3px);
105+
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
106+
}
107+
108+
.features {
109+
background: white;
110+
padding: 4rem 0;
111+
margin: 4rem 0;
112+
border-radius: 20px;
113+
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
114+
}
115+
116+
.features h2 {
117+
text-align: center;
118+
margin-bottom: 3rem;
119+
font-size: 2.5rem;
120+
color: #333;
121+
}
122+
123+
.features-grid {
124+
display: grid;
125+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
126+
gap: 2rem;
127+
}
128+
129+
.feature-card {
130+
padding: 2rem;
131+
text-align: center;
132+
border-radius: 15px;
133+
background: #f8f9fa;
134+
transition: transform 0.3s;
135+
}
136+
137+
.feature-card:hover {
138+
transform: translateY(-5px);
139+
}
140+
141+
.feature-icon {
142+
font-size: 3rem;
143+
margin-bottom: 1rem;
144+
}
145+
146+
.feature-card h3 {
147+
margin-bottom: 1rem;
148+
color: #667eea;
149+
}
150+
151+
.api-example {
152+
background: rgba(255, 255, 255, 0.1);
153+
backdrop-filter: blur(10px);
154+
padding: 3rem 0;
155+
margin: 2rem 0;
156+
border-radius: 20px;
157+
color: white;
158+
}
159+
160+
.api-example h2 {
161+
text-align: center;
162+
margin-bottom: 2rem;
163+
}
164+
165+
.code-block {
166+
background: rgba(0, 0, 0, 0.3);
167+
padding: 1.5rem;
168+
border-radius: 10px;
169+
font-family: 'Monaco', 'Consolas', monospace;
170+
overflow-x: auto;
171+
margin: 1rem 0;
172+
}
173+
174+
.code-block pre {
175+
margin: 0;
176+
}
177+
178+
.code-block code {
179+
font-family: inherit;
180+
color: inherit;
181+
background: none;
182+
}
183+
184+
footer {
185+
text-align: center;
186+
padding: 2rem 0;
187+
color: white;
188+
opacity: 0.8;
189+
}
190+
191+
@media (max-width: 768px) {
192+
.hero h1 {
193+
font-size: 2.5rem;
194+
}
195+
196+
.hero p {
197+
font-size: 1.1rem;
198+
}
199+
200+
.nav-links {
201+
display: none;
202+
}
203+
204+
.cta-buttons {
205+
flex-direction: column;
206+
align-items: center;
207+
}
208+
209+
.btn {
210+
width: 200px;
211+
}
212+
}

‎src/PdfSmith/wwwroot/index.html‎

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🔨</text></svg>">
7+
<title>PDF Smith - Dynamic PDF Generation API</title>
8+
<link rel="stylesheet" href="css/styles.css">
9+
</head>
10+
<body>
11+
<header>
12+
<nav class="container">
13+
<div class="logo">🔨 PDF Smith</div>
14+
<div class="nav-links">
15+
<a href="#features">Features</a>
16+
<a href="#api">API</a>
17+
<a href="/swagger">Documentation</a>
18+
</div>
19+
</nav>
20+
</header>
21+
22+
<main>
23+
<section class="hero">
24+
<div class="container">
25+
<h1>Dynamic PDF Generation Made Simple</h1>
26+
<p>Create beautiful PDF documents on-the-fly using templates and data with our powerful REST API</p>
27+
<div class="cta-buttons">
28+
<a href="/swagger" class="btn btn-primary">Explore API</a>
29+
<a href="#features" class="btn btn-secondary">Learn More</a>
30+
</div>
31+
</div>
32+
</section>
33+
34+
<section id="features" class="features">
35+
<div class="container">
36+
<h2>Key Features</h2>
37+
<div class="features-grid">
38+
<div class="feature-card">
39+
<div class="feature-icon">⚡</div>
40+
<h3>Lightning Fast</h3>
41+
<p>Generate PDFs in seconds using high-performance Chromium engine with optimized rendering</p>
42+
</div>
43+
<div class="feature-card">
44+
<div class="feature-icon">🎨</div>
45+
<h3>Multiple Template Engines</h3>
46+
<p>Choose between Razor and Scriban template engines for maximum flexibility and power</p>
47+
</div>
48+
<div class="feature-card">
49+
<div class="feature-icon">🔐</div>
50+
<h3>Secure & Scalable</h3>
51+
<p>Built-in authentication, rate limiting, and request timeouts for production-ready deployment</p>
52+
</div>
53+
<div class="feature-card">
54+
<div class="feature-icon">📱</div>
55+
<h3>Responsive Design</h3>
56+
<p>Generate PDFs that look great on any device with responsive HTML templates</p>
57+
</div>
58+
<div class="feature-card">
59+
<div class="feature-icon">🌍</div>
60+
<h3>Internationalization</h3>
61+
<p>Full support for multiple cultures and languages in your PDF documents</p>
62+
</div>
63+
<div class="feature-card">
64+
<div class="feature-icon">🔧</div>
65+
<h3>Easy Integration</h3>
66+
<p>Simple REST API that works with any programming language and framework</p>
67+
</div>
68+
</div>
69+
</div>
70+
</section>
71+
72+
<section id="api" class="api-example">
73+
<div class="container">
74+
<h2>Quick Start Example</h2>
75+
<p style="text-align: center; margin-bottom: 2rem;">Send a POST request to generate your first PDF:</p>
76+
77+
<div class="code-block">
78+
<strong>Endpoint:</strong> POST /api/pdf<br>
79+
<strong>Content-Type:</strong> application/json<br>
80+
<strong>Accept-Language:</strong> en-US<br>
81+
<strong>Authorization:</strong> x-api-key: YOUR_API_KEY
82+
</div>
83+
84+
<div class="code-block">
85+
<pre><code>{
86+
"template":"&lt;h1&gt;Hello @Model.Name!&lt;/h1&gt;",
87+
"model":{
88+
"Name":"World"
89+
},
90+
"templateEngine":"razor",
91+
"pdfOptions":{
92+
"margin":{
93+
"top":"20",
94+
"bottom":"20",
95+
"left":"20",
96+
"right":"20"
97+
}
98+
}
99+
}</code></pre>
100+
</div>
101+
102+
<div style="text-align: center; margin-top: 2rem;">
103+
<a href="/swagger" class="btn btn-primary">Try it in Swagger UI</a>
104+
</div>
105+
</div>
106+
</section>
107+
</main>
108+
109+
<footer>
110+
<div class="container">
111+
<p>&copy; 2025 PDF Smith. Built with ❤️ using ASP.NET Core</p>
112+
</div>
113+
</footer>
114+
115+
<script>
116+
// Smooth scrolling for anchor links
117+
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
118+
anchor.addEventListener('click', function (e) {
119+
e.preventDefault();
120+
const target = document.querySelector(this.getAttribute('href'));
121+
if (target) {
122+
target.scrollIntoView({
123+
behavior: 'smooth',
124+
block: 'start'
125+
});
126+
}
127+
});
128+
});
129+
130+
// Add some interactive hover effects
131+
document.querySelectorAll('.feature-card').forEach(card => {
132+
card.addEventListener('mouseenter', function() {
133+
this.style.transform = 'translateY(-10px) scale(1.02)';
134+
});
135+
136+
card.addEventListener('mouseleave', function() {
137+
this.style.transform = 'translateY(0) scale(1)';
138+
});
139+
});
140+
</script>
141+
</body>
142+
</html>

0 commit comments

Comments
 (0)