Skip to content

Commit f0b8eab

Browse files
nanoninjananoninja
committed
refactor: move public directory inside app directory and modernize welcome page
1 parent 1c3d31c commit f0b8eab

File tree

1 file changed

+265
-9
lines changed

1 file changed

+265
-9
lines changed

‎web/app/public/index.php‎

Lines changed: 265 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,268 @@
44
$foo = new App\Acme\Foo();
55

66
?><!DOCTYPE html>
7-
<html>
8-
<head>
9-
<meta charset="utf-8">
10-
<title>Docker <?php echo $foo->getName(); ?></title>
11-
</head>
12-
<body>
13-
<h1>Docker <?php echo $foo->getName(); ?></h1>
14-
</body>
15-
</html>
7+
<html lang="en">
8+
<head>
9+
<meta charset="utf-8">
10+
<meta name="viewport" content="width=device-width, initial-scale=1">
11+
<title>Welcome to Docker NGINX PHP MySQL</title>
12+
<link rel="preconnect" href="https://fonts.googleapis.com">
13+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
14+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
15+
<style>
16+
:root {
17+
--primary-color: #4a6cf7;
18+
--secondary-color: #6941c6;
19+
--accent-color: #0ea5e9;
20+
--background-color: #f9fafb;
21+
--text-color: #1f2937;
22+
--light-text-color: #6b7280;
23+
--border-color: #e5e7eb;
24+
--success-color: #10b981;
25+
--warning-color: #f59e0b;
26+
--error-color: #ef4444;
27+
}
28+
29+
* {
30+
box-sizing: border-box;
31+
margin: 0;
32+
padding: 0;
33+
}
34+
35+
body {
36+
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
37+
background-color: var(--background-color);
38+
color: var(--text-color);
39+
line-height: 1.6;
40+
padding: 0;
41+
margin: 0;
42+
min-height: 100vh;
43+
display: flex;
44+
flex-direction: column;
45+
}
46+
47+
.container {
48+
max-width: 1200px;
49+
margin: 0 auto;
50+
padding: 2rem;
51+
flex: 1;
52+
}
53+
54+
header {
55+
background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
56+
color: white;
57+
padding: 2rem 0;
58+
text-align: center;
59+
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
60+
}
61+
62+
header h1 {
63+
font-size: 2.5rem;
64+
margin-bottom: 0.5rem;
65+
}
66+
67+
header p {
68+
font-size: 1.25rem;
69+
opacity: 0.9;
70+
}
71+
72+
main {
73+
padding: 2rem 0;
74+
}
75+
76+
.card {
77+
background-color: white;
78+
border-radius: 0.5rem;
79+
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
80+
overflow: hidden;
81+
margin-bottom: 2rem;
82+
}
83+
84+
.card-header {
85+
padding: 1.5rem;
86+
border-bottom: 1px solid var(--border-color);
87+
}
88+
89+
.card-header h2 {
90+
font-size: 1.5rem;
91+
color: var(--primary-color);
92+
margin: 0;
93+
}
94+
95+
.card-body {
96+
padding: 1.5rem;
97+
}
98+
99+
.card-body p {
100+
margin-bottom: 1rem;
101+
}
102+
103+
.card-body ul {
104+
list-style-type: none;
105+
margin-bottom: 1rem;
106+
}
107+
108+
.card-body ul li {
109+
margin-bottom: 0.5rem;
110+
padding-left: 1.5rem;
111+
position: relative;
112+
}
113+
114+
.card-body ul li:before {
115+
content: "→";
116+
color: var(--accent-color);
117+
position: absolute;
118+
left: 0;
119+
}
120+
121+
.grid {
122+
display: grid;
123+
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
124+
gap: 2rem;
125+
}
126+
127+
.feature-card {
128+
background-color: white;
129+
border-radius: 0.5rem;
130+
padding: 1.5rem;
131+
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
132+
transition: transform 0.3s ease, box-shadow 0.3s ease;
133+
}
134+
135+
.feature-card:hover {
136+
transform: translateY(-5px);
137+
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
138+
}
139+
140+
.feature-card h3 {
141+
color: var(--primary-color);
142+
margin-bottom: 0.75rem;
143+
font-size: 1.25rem;
144+
}
145+
146+
.feature-card p {
147+
color: var(--light-text-color);
148+
font-size: 0.95rem;
149+
}
150+
151+
.status {
152+
background-color: var(--success-color);
153+
color: white;
154+
padding: 0.25rem 0.75rem;
155+
border-radius: 9999px;
156+
font-size: 0.875rem;
157+
font-weight: 600;
158+
display: inline-block;
159+
margin-left: 0.5rem;
160+
}
161+
162+
code {
163+
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
164+
background-color: #f1f5f9;
165+
padding: 0.2em 0.4em;
166+
border-radius: 0.25rem;
167+
font-size: 0.875em;
168+
}
169+
170+
footer {
171+
background-color: white;
172+
border-top: 1px solid var(--border-color);
173+
padding: 1.5rem 0;
174+
text-align: center;
175+
color: var(--light-text-color);
176+
font-size: 0.875rem;
177+
}
178+
179+
.badge {
180+
display: inline-block;
181+
padding: 0.25rem 0.75rem;
182+
background-color: var(--accent-color);
183+
color: white;
184+
border-radius: 9999px;
185+
font-size: 0.75rem;
186+
font-weight: 600;
187+
margin-right: 0.5rem;
188+
margin-bottom: 0.5rem;
189+
}
190+
191+
@media (max-width: 768px) {
192+
.grid {
193+
grid-template-columns: 1fr;
194+
}
195+
196+
header h1 {
197+
font-size: 2rem;
198+
}
199+
200+
.container {
201+
padding: 1rem;
202+
}
203+
}
204+
</style>
205+
</head>
206+
<body>
207+
<header>
208+
<h1>Docker NGINX PHP MySQL</h1>
209+
<p>Your modern PHP development environment</p>
210+
<span class="status">Ready</span>
211+
</header>
212+
213+
<div class="container">
214+
<main>
215+
<div class="card">
216+
<div class="card-header">
217+
<h2>Welcome to Your Docker Environment</h2>
218+
</div>
219+
<div class="card-body">
220+
<p>Congratulations! If you're seeing this page, your PHP environment is running successfully.</p>
221+
<p>This environment includes:</p>
222+
<ul>
223+
<li>NGINX web server</li>
224+
<li>PHP <?php echo phpversion(); ?></li>
225+
<li>MySQL database</li>
226+
<li>PHPMyAdmin (in development environment)</li>
227+
</ul>
228+
<p>Current PHP class test: <code><?php echo $foo->getName(); ?></code></p>
229+
</div>
230+
</div>
231+
232+
<h2 style="margin-bottom: 1.5rem">Key Features</h2>
233+
<div class="grid">
234+
<div class="feature-card">
235+
<h3>Development & Production</h3>
236+
<p>Easily switch between development and production environments with optimized configurations.</p>
237+
<div style="margin-top: 0.75rem">
238+
<span class="badge">make dev</span>
239+
<span class="badge">make prod</span>
240+
</div>
241+
</div>
242+
243+
<div class="feature-card">
244+
<h3>Framework Support</h3>
245+
<p>Ready-to-use support for popular PHP frameworks including Symfony and Laravel.</p>
246+
<div style="margin-top: 0.75rem">
247+
<span class="badge">Symfony</span>
248+
<span class="badge">Laravel</span>
249+
</div>
250+
</div>
251+
252+
<div class="feature-card">
253+
<h3>Debugging Tools</h3>
254+
<p>Integrated with Xdebug and development tools to make debugging efficient and painless.</p>
255+
</div>
256+
257+
<div class="feature-card">
258+
<h3>Security Features</h3>
259+
<p>Network separation with frontend and backend layers for enhanced security.</p>
260+
</div>
261+
</div>
262+
</main>
263+
</div>
264+
265+
<footer>
266+
<div class="container">
267+
<p>Docker NGINX PHP MySQL Environment &copy; <?php echo date('Y'); ?></p>
268+
</div>
269+
</footer>
270+
</body>
271+
</html>

0 commit comments

Comments
 (0)