@@ -81,15 +81,89 @@ def api_data(request):
8181 <head>
8282 <meta charset="UTF-8" />
8383 <meta name="viewport" content="width=device-width, initial-scale=1" />
84- <title>Mallo App </title>
84+ <title>Mallo Framework </title>
8585 <link rel="stylesheet" href="/static/style.css" />
8686 </head>
8787 <body>
88- <main class="wrap">
89- <h1>Mallo is running</h1>
90- <p>Your project scaffold is ready.</p>
91- <p>Try <a href="/hello/World">/hello/World</a> and <a href="/api/data">/api/data</a>.</p>
92- </main>
88+ <div class="page">
89+ <div class="top">
90+ <div class="brand">Mallo Framework</div>
91+ <div class="chip">Minimal customizable Web Core • Fast Iteration</div>
92+ </div>
93+
94+ <section class="hero">
95+ <h1>Build web apps with a clean Python workflow, and help shape Mallo.</h1>
96+ <p class="lead">
97+ Mallo gives you routing, templates, static files, error pages, and development reload in a small readable codebase.
98+ You keep control while moving quickly, and your contributions directly improve the framework.
99+ </p>
100+ <div class="actions">
101+ <a class="btn primary" href="https://pypi.org/project/mallo/" target="_blank" rel="noreferrer">Install from PyPI</a>
102+ <a class="btn secondary" href="https://github.com/Betrand-dev/mallo-fr.git" target="_blank" rel="noreferrer">Contribute on GitHub</a>
103+ </div>
104+ </section>
105+
106+ <section class="grid">
107+ <article class="card span-4">
108+ <h3>Simple Routing</h3>
109+ <p>Register endpoints with decorators and typed URL params without extra ceremony.</p>
110+ </article>
111+ <article class="card span-4">
112+ <h3>Template Rendering</h3>
113+ <p>Use <code>render_template()</code> for the <code>templates/</code> folder or <code>render_template_file()</code> for explicit paths.</p>
114+ </article>
115+ <article class="card span-4">
116+ <h3>Safe Defaults</h3>
117+ <p>Auto-escaped templates, security headers, CSRF checks, and structured error pages.</p>
118+ </article>
119+ <article class="card span-6">
120+ <h3>Production Path</h3>
121+ <p>Run with Gunicorn, package from PyPI, and keep improving with versioned pre-releases.</p>
122+ </article>
123+ <article class="card span-6">
124+ <h3>Developer Experience</h3>
125+ <p>Live reload in debug mode, readable internals, and a small surface area for faster onboarding.</p>
126+ </article>
127+ </section>
128+
129+ <div class="snippet">
130+ <span class="prompt">from</span> mallo <span class="prompt">import</span> Mallo, render_template<br><br>
131+ app = Mallo(__name__)<br><br>
132+ @app.get('/')<br>
133+ def home(request):<br>
134+ return render_template('index.html', title='Welcome to Mallo')<br><br>
135+ if __name__ == '__main__':<br>
136+ app.run(debug=True)
137+ </div>
138+
139+ <section class="grid">
140+ <article class="card span-8">
141+ <h3>Call for Contributors</h3>
142+ <p>
143+ Mallo is actively evolving. If you work with Python web apps, your help can directly improve architecture,
144+ developer experience, and production readiness.
145+ </p>
146+ </article>
147+ <article class="card span-4">
148+ <h3>Start Here</h3>
149+ <p>Open issues, propose improvements, or submit a pull request for docs, tests, or core features.</p>
150+ </article>
151+ <article class="card span-4">
152+ <h3>Good First PRs</h3>
153+ <p>Template improvements, middleware polish, test coverage, and CLI usability.</p>
154+ </article>
155+ <article class="card span-4">
156+ <h3>Join the Core Work</h3>
157+ <p>Help harden sessions, request parsing, and deployment workflows for stable production use.</p>
158+ </article>
159+ <article class="card span-4">
160+ <h3>Repository</h3>
161+ <p><a href="https://github.com/Betrand-dev/mallo-fr.git" target="_blank" rel="noreferrer">github.com/Betrand-dev/mallo-fr</a></p>
162+ </article>
163+ </section>
164+
165+ <div class="footer">Mallo - lightweight Python web framework</div>
166+ </div>
93167 </body>
94168 </html>
95169 """
@@ -98,33 +172,195 @@ def api_data(request):
98172 css_content = dedent (
99173 """\
100174 :root {
101- --bg: #f6f2ea;
102- --surface: #fffdf8;
103- --ink: #1a1510;
104- --muted: #6b5f52;
105- --line: #e8ddcd;
106- --accent: #b6551d;
175+ --bg: #f8f5ef;
176+ --paper: #fffdf9;
177+ --ink: #16130f;
178+ --muted: #655a4d;
179+ --accent: #bb5a1d;
180+ --accent-2: #1f7a7a;
181+ --line: #e7dccd;
182+ --shadow: 0 24px 60px rgba(31, 22, 12, 0.14);
183+ --radius: 18px;
184+ }
185+
186+ @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&family=Space+Mono:wght@400;700&display=swap');
187+
188+ * {
189+ box-sizing: border-box;
107190 }
108191
109192 body {
110193 margin: 0;
111- font-family: "Segoe UI", Tahoma , sans-serif;
194+ font-family: "Outfit", " Segoe UI", sans-serif;
112195 color: var(--ink);
113- background: var(--bg);
196+ background:
197+ radial-gradient(1000px 500px at 10% 0%, #efe4d3 0%, rgba(239, 228, 211, 0) 60%),
198+ radial-gradient(900px 450px at 90% 0%, #ddeeea 0%, rgba(221, 238, 234, 0) 56%),
199+ var(--bg);
200+ line-height: 1.5;
114201 }
115202
116- .wrap {
117- max-width: 700px;
118- margin: 40px auto;
119- padding: 20px;
203+ .page {
204+ max-width: 1080px;
205+ margin: 0 auto;
206+ padding: 38px 20px 70px;
207+ }
208+
209+ .top {
210+ display: flex;
211+ justify-content: space-between;
212+ align-items: center;
213+ margin-bottom: 30px;
214+ }
215+
216+ .brand {
217+ font-weight: 700;
218+ letter-spacing: 0.08em;
219+ text-transform: uppercase;
220+ font-size: 0.86rem;
221+ color: var(--accent);
222+ }
223+
224+ .chip {
225+ border: 1px solid var(--line);
226+ background: var(--paper);
227+ border-radius: 999px;
228+ padding: 8px 12px;
229+ font-size: 0.84rem;
230+ color: var(--muted);
231+ }
232+
233+ .hero {
234+ background: var(--paper);
120235 border: 1px solid var(--line);
236+ border-radius: var(--radius);
237+ box-shadow: var(--shadow);
238+ padding: 34px;
239+ margin-bottom: 20px;
240+ position: relative;
241+ overflow: hidden;
242+ }
243+
244+ .hero::after {
245+ content: "";
246+ position: absolute;
247+ right: -60px;
248+ top: -60px;
249+ width: 220px;
250+ height: 220px;
251+ border-radius: 50%;
252+ background: radial-gradient(circle, rgba(187, 90, 29, 0.2) 0%, rgba(187, 90, 29, 0) 70%);
253+ pointer-events: none;
254+ }
255+
256+ h1 {
257+ margin: 0 0 12px;
258+ font-size: clamp(2rem, 5vw, 3.5rem);
259+ line-height: 1.05;
260+ max-width: 760px;
261+ }
262+
263+ .lead {
264+ margin: 0;
265+ max-width: 700px;
266+ color: var(--muted);
267+ font-size: 1.05rem;
268+ }
269+
270+ .actions {
271+ display: flex;
272+ gap: 10px;
273+ margin-top: 22px;
274+ flex-wrap: wrap;
275+ }
276+
277+ .btn {
278+ text-decoration: none;
121279 border-radius: 12px;
122- background: var(--surface);
280+ padding: 11px 16px;
281+ font-weight: 600;
282+ transition: transform 140ms ease, box-shadow 140ms ease;
283+ display: inline-block;
123284 }
124285
125- h1 { margin-top: 0; }
126- p { color: var(--muted); }
127- a { color: var(--accent); }
286+ .btn.primary {
287+ background: var(--accent);
288+ color: #fff;
289+ box-shadow: 0 12px 24px rgba(187, 90, 29, 0.28);
290+ }
291+
292+ .btn.secondary {
293+ background: #fff;
294+ color: var(--ink);
295+ border: 1px solid var(--line);
296+ }
297+
298+ .btn:hover {
299+ transform: translateY(-1px);
300+ }
301+
302+ .grid {
303+ display: grid;
304+ grid-template-columns: repeat(12, 1fr);
305+ gap: 14px;
306+ margin-top: 14px;
307+ }
308+
309+ .card {
310+ background: var(--paper);
311+ border: 1px solid var(--line);
312+ border-radius: 14px;
313+ padding: 20px;
314+ }
315+
316+ .card h3 {
317+ margin: 0 0 8px;
318+ font-size: 1.05rem;
319+ }
320+
321+ .card p {
322+ margin: 0;
323+ color: var(--muted);
324+ font-size: 0.96rem;
325+ }
326+
327+ .span-4 { grid-column: span 4; }
328+ .span-6 { grid-column: span 6; }
329+ .span-8 { grid-column: span 8; }
330+
331+ .snippet {
332+ background: #151a22;
333+ color: #ecf1ff;
334+ border-radius: 14px;
335+ padding: 18px;
336+ margin-top: 14px;
337+ border: 1px solid #202838;
338+ font-family: "Space Mono", monospace;
339+ font-size: 0.9rem;
340+ overflow-x: auto;
341+ }
342+
343+ .snippet .prompt {
344+ color: #8dd6d0;
345+ }
346+
347+ .footer {
348+ margin-top: 20px;
349+ color: var(--muted);
350+ font-size: 0.9rem;
351+ text-align: center;
352+ }
353+
354+ @media (max-width: 900px) {
355+ .span-4,
356+ .span-6,
357+ .span-8 {
358+ grid-column: span 12;
359+ }
360+ .hero {
361+ padding: 26px;
362+ }
363+ }
128364 """
129365 )
130366
0 commit comments