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);
|
||||||
|
}
|
||||||
237
index.php
237
index.php
@ -1,131 +1,118 @@
|
|||||||
<?php
|
<!DOCTYPE html>
|
||||||
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>
|
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>New Style</title>
|
<title>The People's Glossary - Definitions for Everyone</title>
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<meta name="description" content="An open glossary where users can find and contribute definitions for various terms.">
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<meta name="robots" content="index, follow">
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
|
|
||||||
<style>
|
<!-- Open Graph -->
|
||||||
:root {
|
<meta property="og:title" content="The People's Glossary">
|
||||||
--bg-color-start: #6a11cb;
|
<meta property="og:description" content="Definitions for everyone, by everyone.">
|
||||||
--bg-color-end: #2575fc;
|
<meta property="og:type" content="website">
|
||||||
--text-color: #ffffff;
|
<meta property="og:url" content="http://<?php echo $_SERVER['HTTP_HOST']; ?>">
|
||||||
--card-bg-color: rgba(255, 255, 255, 0.01);
|
<meta property="og:image" content="https://picsum.photos/seed/glossaryhero/1200/630">
|
||||||
--card-border-color: rgba(255, 255, 255, 0.1);
|
|
||||||
}
|
<!-- Bootstrap 5 CSS -->
|
||||||
body {
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
|
||||||
margin: 0;
|
|
||||||
font-family: 'Inter', sans-serif;
|
<!-- Custom CSS -->
|
||||||
background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end));
|
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
||||||
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>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<main>
|
|
||||||
<div class="card">
|
<header class="bg-white shadow-sm">
|
||||||
<h1>Analyzing your requirements and generating your website…</h1>
|
<nav class="navbar navbar-expand-lg navbar-light">
|
||||||
<div class="loader" role="status" aria-live="polite" aria-label="Applying initial changes">
|
<div class="container">
|
||||||
<span class="sr-only">Loading…</span>
|
<a class="navbar-brand fw-bold" href="/">The People's Glossary</a>
|
||||||
</div>
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
<p class="hint"><?= ($_SERVER['HTTP_HOST'] ?? '') === 'appwizzy.com' ? 'AppWiZZy' : 'Flatlogic' ?> AI is collecting your requirements and applying the first changes.</p>
|
<span class="navbar-toggler-icon"></span>
|
||||||
<p class="hint">This page will update automatically as the plan is implemented.</p>
|
</button>
|
||||||
<p>Runtime: PHP <code><?= htmlspecialchars($phpVersion) ?></code> — UTC <code><?= htmlspecialchars($now) ?></code></p>
|
<div class="collapse navbar-collapse" id="navbarNav">
|
||||||
</div>
|
<ul class="navbar-nav ms-auto">
|
||||||
</main>
|
<li class="nav-item"><a class="nav-link" href="#about">About</a></li>
|
||||||
<footer>
|
<li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
|
||||||
Page updated: <?= htmlspecialchars($now) ?> (UTC)
|
<li class="nav-item"><a class="nav-link" href="/privacy.php">Privacy</a></li>
|
||||||
</footer>
|
</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>
|
</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