Inicial
This commit is contained in:
Flatlogic Bot
parent
50d29bc9d0
commit
6906a2fc17
72
assets/css/custom.css
Normal file
72
assets/css/custom.css
Normal file
@ -0,0 +1,72 @@
|
||||
/* assets/css/custom.css */
|
||||
:root {
|
||||
--primary-color: #3B82F6;
|
||||
--secondary-color: #10B981;
|
||||
--background-color: #F9FAFB;
|
||||
--surface-color: #FFFFFF;
|
||||
--text-dark-color: #1F2937;
|
||||
--text-light-color: #6B7280;
|
||||
--border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-dark-color);
|
||||
}
|
||||
|
||||
.hero {
|
||||
background: linear-gradient(rgba(59, 130, 246, 0.8), rgba(16, 185, 129, 0.8)), url('https://picsum.photos/seed/glossaryhero/1600/900') no-repeat center center;
|
||||
background-size: cover;
|
||||
color: white;
|
||||
padding: 6rem 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: 3rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.hero p {
|
||||
font-size: 1.25rem;
|
||||
max-width: 600px;
|
||||
margin: 1rem auto;
|
||||
}
|
||||
|
||||
.search-form .form-control {
|
||||
border-radius: var(--border-radius);
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
|
||||
.search-form .btn {
|
||||
border-radius: var(--border-radius);
|
||||
padding: 0.75rem 1.5rem;
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: 4rem 1.5rem;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 2.25rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.card {
|
||||
border: none;
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
||||
}
|
||||
|
||||
.footer {
|
||||
background-color: var(--surface-color);
|
||||
padding: 2rem 1.5rem;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.img-fluid {
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
239
index.php
239
index.php
@ -1,131 +1,118 @@
|
||||
<?php
|
||||
declare(strict_types=1);
|
||||
@ini_set('display_errors', '1');
|
||||
@error_reporting(E_ALL);
|
||||
@date_default_timezone_set('UTC');
|
||||
|
||||
$phpVersion = PHP_VERSION;
|
||||
$now = date('Y-m-d H:i:s');
|
||||
?>
|
||||
<!doctype html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>New Style</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--bg-color-start: #6a11cb;
|
||||
--bg-color-end: #2575fc;
|
||||
--text-color: #ffffff;
|
||||
--card-bg-color: rgba(255, 255, 255, 0.01);
|
||||
--card-border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: 'Inter', sans-serif;
|
||||
background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end));
|
||||
color: var(--text-color);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
body::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M-10 10L110 10M10 -10L10 110" stroke-width="1" stroke="rgba(255,255,255,0.05)"/></svg>');
|
||||
animation: bg-pan 20s linear infinite;
|
||||
z-index: -1;
|
||||
}
|
||||
@keyframes bg-pan {
|
||||
0% { background-position: 0% 0%; }
|
||||
100% { background-position: 100% 100%; }
|
||||
}
|
||||
main {
|
||||
padding: 2rem;
|
||||
}
|
||||
.card {
|
||||
background: var(--card-bg-color);
|
||||
border: 1px solid var(--card-border-color);
|
||||
border-radius: 16px;
|
||||
padding: 2rem;
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.loader {
|
||||
margin: 1.25rem auto 1.25rem;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border: 3px solid rgba(255, 255, 255, 0.25);
|
||||
border-top-color: #fff;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
@keyframes spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
.hint {
|
||||
opacity: 0.9;
|
||||
}
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px; height: 1px;
|
||||
padding: 0; margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap; border: 0;
|
||||
}
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
font-weight: 700;
|
||||
margin: 0 0 1rem;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
p {
|
||||
margin: 0.5rem 0;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
code {
|
||||
background: rgba(0,0,0,0.2);
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||||
}
|
||||
footer {
|
||||
position: absolute;
|
||||
bottom: 1rem;
|
||||
font-size: 0.8rem;
|
||||
opacity: 0.7;
|
||||
}
|
||||
</style>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>The People's Glossary - Definitions for Everyone</title>
|
||||
<meta name="description" content="An open glossary where users can find and contribute definitions for various terms.">
|
||||
<meta name="robots" content="index, follow">
|
||||
|
||||
<!-- Open Graph -->
|
||||
<meta property="og:title" content="The People's Glossary">
|
||||
<meta property="og:description" content="Definitions for everyone, by everyone.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="http://<?php echo $_SERVER['HTTP_HOST']; ?>">
|
||||
<meta property="og:image" content="https://picsum.photos/seed/glossaryhero/1200/630">
|
||||
|
||||
<!-- Bootstrap 5 CSS -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
|
||||
|
||||
<!-- Custom CSS -->
|
||||
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="card">
|
||||
<h1>Analyzing your requirements and generating your website…</h1>
|
||||
<div class="loader" role="status" aria-live="polite" aria-label="Applying initial changes">
|
||||
<span class="sr-only">Loading…</span>
|
||||
</div>
|
||||
<p class="hint"><?= ($_SERVER['HTTP_HOST'] ?? '') === 'appwizzy.com' ? 'AppWiZZy' : 'Flatlogic' ?> AI is collecting your requirements and applying the first changes.</p>
|
||||
<p class="hint">This page will update automatically as the plan is implemented.</p>
|
||||
<p>Runtime: PHP <code><?= htmlspecialchars($phpVersion) ?></code> — UTC <code><?= htmlspecialchars($now) ?></code></p>
|
||||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
Page updated: <?= htmlspecialchars($now) ?> (UTC)
|
||||
</footer>
|
||||
|
||||
<header class="bg-white shadow-sm">
|
||||
<nav class="navbar navbar-expand-lg navbar-light">
|
||||
<div class="container">
|
||||
<a class="navbar-brand fw-bold" href="/">The People's Glossary</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav ms-auto">
|
||||
<li class="nav-item"><a class="nav-link" href="#about">About</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="/privacy.php">Privacy</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section class="hero">
|
||||
<div class="container">
|
||||
<h1>The People's Glossary</h1>
|
||||
<p>Definitions for everyone, by everyone. Your open-source dictionary for modern terms.</p>
|
||||
<form action="/" method="GET" class="row g-3 justify-content-center search-form mt-4">
|
||||
<div class="col-md-6">
|
||||
<input type="text" name="q" class="form-control form-control-lg" placeholder="Search for a term..." value="<?php echo htmlspecialchars($_GET['q'] ?? ''); ?>">
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<button type="submit" class="btn btn-primary btn-lg">Search</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div id="results" class="container my-5">
|
||||
<?php
|
||||
if (!empty($_GET['q'])) {
|
||||
$query = htmlspecialchars($_GET['q']);
|
||||
echo <<<HTML
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Search Results for: "{$query}"</h2>
|
||||
<p class="card-text">
|
||||
<em>(This is a placeholder. The real definition for "{$query}" will be fetched from the database or generated by an AI in the next step.)</em>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
HTML;
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
|
||||
<section id="about" class="section">
|
||||
<div class="container">
|
||||
<h2 class="section-title">About Us</h2>
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-6">
|
||||
<img src="https://picsum.photos/seed/glossaryabout/800/600" alt="A person reading a book in a library." class="img-fluid">
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h3>Knowledge for All</h3>
|
||||
<p class="text-light-color">This project was born from the idea that knowledge should be free and accessible. We use a combination of community contributions and AI to create a comprehensive, living glossary. Our goal is to provide clear and concise definitions for a wide range of topics, from technology to philosophy.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="contact" class="section bg-white">
|
||||
<div class="container">
|
||||
<h2 class="section-title">Get In Touch</h2>
|
||||
<div class="row align-items_center">
|
||||
<div class="col-md-6">
|
||||
<h3>Contact Us</h3>
|
||||
<p class="text-light-color">Have a question, suggestion, or want to contribute? We'd love to hear from you. A full contact form will be available here soon. For now, feel free to browse and search for terms.</p>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<img src="https://picsum.photos/seed/glossarycontact/800/600" alt="A vintage telephone on a wooden desk." class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="container text-center">
|
||||
<p class="text-light-color mb-0">© <?php echo date("Y"); ?> The People's Glossary. All Rights Reserved.</p>p>
|
||||
<p><a href="/privacy.php">Privacy Policy</a></p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Bootstrap 5 JS -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
45
privacy.php
Normal file
45
privacy.php
Normal file
@ -0,0 +1,45 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Privacy Policy - The People's Glossary</title>
|
||||
<meta name="robots" content="noindex, nofollow">
|
||||
|
||||
<!-- Bootstrap 5 CSS -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
|
||||
|
||||
<!-- Custom CSS -->
|
||||
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header class="bg-white shadow-sm">
|
||||
<nav class="navbar navbar-expand-lg navbar-light">
|
||||
<div class="container">
|
||||
<a class="navbar-brand fw-bold" href="/">The People's Glossary</a>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main class="container section">
|
||||
<h1 class="section-title">Privacy Policy</h1>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<p>This is a placeholder for the Privacy Policy.</p>
|
||||
<p>This page will detail how user data is collected, used, and protected. For now, please note that search queries may be logged for analytical purposes, but no personally identifiable information is stored.</p>
|
||||
<a href="/" class="btn btn-primary">Back to Home</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="footer fixed-bottom">
|
||||
<div class="container text-center">
|
||||
<p class="text-light-color mb-0">© <?php echo date("Y"); ?> The People's Glossary. All Rights Reserved.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Bootstrap 5 JS -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user