add color table
This commit is contained in:
Flatlogic Bot
parent
06ac787db9
commit
16e1160553
125
index.php
125
index.php
@ -14,56 +14,99 @@ $now = date('Y-m-d H:i:s');
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>LAMP Workspace</title>
|
||||
<title>Welcome to the LAMP Stack!</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<style>
|
||||
:root { color-scheme: light dark; }
|
||||
body { margin: 0; font: 16px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }
|
||||
header { background:#111; color:#fff; padding:16px 24px; }
|
||||
main { max-width: 880px; margin: 32px auto; padding: 0 16px; }
|
||||
h1 { margin: 0 0 8px; font-size: 22px; }
|
||||
h2 { margin-top: 28px; font-size: 18px; }
|
||||
p { margin: 8px 0; }
|
||||
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
|
||||
pre { background: #0b1020; color: #cfe7ff; padding: 12px; border-radius: 8px; overflow:auto; }
|
||||
.grid { display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
|
||||
.card { border:1px solid #ddd; border-radius:8px; padding:12px; }
|
||||
.muted { color:#666; }
|
||||
.kv { display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px dashed #e3e3e3; }
|
||||
.kv:last-child { border-bottom:0; }
|
||||
footer { color:#777; margin: 28px 0 40px; text-align:center; font-size: 13px; }
|
||||
body {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
.hero {
|
||||
background: linear-gradient(to right, #6a11cb, #2575fc);
|
||||
color: white;
|
||||
padding: 4rem 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
.info-card {
|
||||
background-color: white;
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
||||
padding: 2rem;
|
||||
margin-top: -2rem;
|
||||
z-index: 10;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>LAMP stack is ready</h1>
|
||||
</header>
|
||||
<div class="hero">
|
||||
<div class="container">
|
||||
<h1 class="display-4">Behold the Power of LAMP!</h1>
|
||||
<p class="lead">This page is a testament to the flexibility and power of the classic LAMP stack, styled with a modern touch.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<main>
|
||||
<section class="grid">
|
||||
<div class="card">
|
||||
<h2>Stack</h2>
|
||||
<div class="kv"><span>Web server</span><code><?= htmlspecialchars($server) ?></code></div>
|
||||
<div class="kv"><span>PHP</span><code><?= htmlspecialchars($phpVersion) ?></code></div>
|
||||
<div class="container">
|
||||
<div class="info-card">
|
||||
<h2 class="text-center mb-4">Dynamic Server Information</h2>
|
||||
<div class="row">
|
||||
<div class="col-md-4 text-center">
|
||||
<h5><span class="badge bg-primary">Web Server</span></h5>
|
||||
<p class="fs-4"><?= htmlspecialchars($server) ?></p>
|
||||
</div>
|
||||
<div class="col-md-4 text-center">
|
||||
<h5><span class="badge bg-success">PHP Version</span></h5>
|
||||
<p class="fs-4"><?= htmlspecialchars($phpVersion) ?></p>
|
||||
</div>
|
||||
<div class="col-md-4 text-center">
|
||||
<h5><span class="badge bg-info">Server Time</span></h5>
|
||||
<p class="fs-4"><?= htmlspecialchars($now) ?> (UTC)</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="my-5">
|
||||
<h2 class="text-center mb-4">Fun with PHP Loops!</h2>
|
||||
<div class="card">
|
||||
<h2>Tips</h2>
|
||||
<p>• Put your app files into this folder.</p>
|
||||
<p>• <code>.htaccess</code> is enabled; <code>index.php</code> has priority.</p>
|
||||
<p>• Errors are shown for development (disable in production).</p>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Color Palette</h5>
|
||||
<p class="card-text">Here is a dynamically generated table of colors, created with a simple PHP loop and styled with Bootstrap.</p>
|
||||
<table class="table table-bordered table-striped table-hover">
|
||||
<thead class="table-dark">
|
||||
<tr>
|
||||
<th>Color Name</th>
|
||||
<th>Hex Code</th>
|
||||
<th>Preview</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<?php
|
||||
$colors = [
|
||||
"Crimson" => "#DC143C",
|
||||
"Gold" => "#FFD700",
|
||||
"LimeGreen" => "#32CD32",
|
||||
"DeepSkyBlue" => "#00BFFF",
|
||||
"MediumOrchid" => "#BA55D3",
|
||||
"Tomato" => "#FF6347",
|
||||
];
|
||||
|
||||
foreach ($colors as $name => $hex) {
|
||||
echo "<tr>";
|
||||
echo "<td>" . htmlspecialchars($name) . "</td>";
|
||||
echo "<td>" . htmlspecialchars($hex) . "</td>";
|
||||
echo "<td style=\"background-color:" . htmlspecialchars($hex) . "\"></td>";
|
||||
echo "</tr>";
|
||||
}
|
||||
?>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section>
|
||||
<h2>Try ideas</h2>
|
||||
<p class="muted">You can ask the assistant to generate or modify code. Example requests:</p>
|
||||
<pre><code>"Create a simple landing page with a hero section and a contact form."
|
||||
"Build an engineering calculator (e.g., beam deflection or resistor color code)."
|
||||
"Refactor the current PHP file for better readability and error handling."
|
||||
"Scan the project and list potential security issues in configuration."
|
||||
"Add basic routing and a simple controller to serve multiple pages."</code></pre>
|
||||
</section>
|
||||
<footer class="text-center text-muted py-4">
|
||||
<p>Generated by Flatlogic & Gemini</p>
|
||||
</footer>
|
||||
|
||||
<footer>Updated at <?= htmlspecialchars($now) ?> (UTC)</footer>
|
||||
</main>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user