Pulsecoach 2.0
This commit is contained in:
Flatlogic Bot
parent
c2d64ad5ae
commit
735597275c
27
assets/css/custom.css
Normal file
27
assets/css/custom.css
Normal file
@ -0,0 +1,27 @@
|
||||
|
||||
body {
|
||||
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: Georgia, 'Times New Roman', Times, serif;
|
||||
}
|
||||
|
||||
.hero {
|
||||
background: linear-gradient(45deg, #0d6efd, #6f42c1);
|
||||
color: white;
|
||||
}
|
||||
|
||||
section {
|
||||
padding: 60px 0;
|
||||
}
|
||||
|
||||
.portfolio-item img {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.testimonial-card {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
18
assets/js/main.js
Normal file
18
assets/js/main.js
Normal file
@ -0,0 +1,18 @@
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
// Smooth scrolling for navigation links
|
||||
const navLinks = document.querySelectorAll('.nav-link');
|
||||
|
||||
for (const link of navLinks) {
|
||||
if (link.hash !== "") {
|
||||
link.addEventListener('click', function (event) {
|
||||
event.preventDefault();
|
||||
const hash = this.hash;
|
||||
|
||||
document.querySelector(hash).scrollIntoView({
|
||||
behavior: 'smooth'
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
289
index.php
289
index.php
@ -1,150 +1,157 @@
|
||||
<?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>
|
||||
<?php
|
||||
// Read project preview data from environment
|
||||
$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? '';
|
||||
$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
|
||||
?>
|
||||
<?php if ($projectDescription): ?>
|
||||
<!-- Meta description -->
|
||||
<meta name="description" content='<?= htmlspecialchars($projectDescription) ?>' />
|
||||
<!-- Open Graph meta tags -->
|
||||
<meta property="og:description" content="<?= htmlspecialchars($projectDescription) ?>" />
|
||||
<!-- Twitter meta tags -->
|
||||
<meta property="twitter:description" content="<?= htmlspecialchars($projectDescription) ?>" />
|
||||
<?php endif; ?>
|
||||
<?php if ($projectImageUrl): ?>
|
||||
<!-- Open Graph image -->
|
||||
<meta property="og:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
|
||||
<!-- Twitter image -->
|
||||
<meta property="twitter:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
|
||||
<?php endif; ?>
|
||||
<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><?php echo htmlspecialchars($_SERVER['PROJECT_NAME'] ?? 'Personal Portfolio'); ?></title>
|
||||
<meta name="description" content="<?php echo htmlspecialchars($_SERVER['PROJECT_DESCRIPTION'] ?? 'A personal portfolio website.'); ?>">
|
||||
|
||||
<!-- Bootstrap CSS -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="#"><?php echo htmlspecialchars($_SERVER['PROJECT_NAME'] ?? 'Portfolio'); ?></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="#intro">Intro</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#about">About</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#portfolio">Portfolio</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#testimonials">Testimonials</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
|
||||
</ul>
|
||||
</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)
|
||||
</nav>
|
||||
|
||||
<!-- Intro Section -->
|
||||
<header id="intro" class="hero text-center py-5">
|
||||
<div class="container">
|
||||
<h1 class="display-4">Welcome to My Portfolio</h1>
|
||||
<p class="lead">I build beautiful and functional websites.</p>
|
||||
<a href="#portfolio" class="btn btn-light btn-lg">See My Work</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- About Section -->
|
||||
<section id="about" class="py-5">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-8 mx-auto text-center">
|
||||
<h2 class="mb-4">About Me</h2>
|
||||
<p class="lead">This is a placeholder for your about section. Talk about your passion, your skills, and your experience. Make it personal and engaging. Let visitors know who you are beyond the professional. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Portfolio Section -->
|
||||
<section id="portfolio" class="bg-light py-5">
|
||||
<div class="container">
|
||||
<h2 class="text-center mb-5">Portfolio</h2>
|
||||
<div class="row">
|
||||
<!-- Portfolio Item 1 -->
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="card portfolio-item">
|
||||
<img src="https://picsum.photos/seed/p1/400/200" class="card-img-top" alt="Project 1">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Project One</h5>
|
||||
<p class="card-text">A brief description of the project. What was the challenge and how you solved it.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Portfolio Item 2 -->
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="card portfolio-item">
|
||||
<img src="https://picsum.photos/seed/p2/400/200" class="card-img-top" alt="Project 2">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Project Two</h5>
|
||||
<p class="card-text">A brief description of the project. What was the challenge and how you solved it.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Portfolio Item 3 -->
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="card portfolio-item">
|
||||
<img src="https://picsum.photos/seed/p3/400/200" class="card-img-top" alt="Project 3">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Project Three</h5>
|
||||
<p class="card-text">A brief description of the project. What was the challenge and how you solved it.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Testimonials Section -->
|
||||
<section id="testimonials" class="py-5">
|
||||
<div class="container">
|
||||
<h2 class="text-center mb-5">Testimonials</h2>
|
||||
<div class="row">
|
||||
<div class="col-lg-6 mx-auto">
|
||||
<div class="card testimonial-card p-4 mb-4">
|
||||
<p class="mb-0">"This is a placeholder testimonial. A great quote from a happy client goes here. It builds trust and credibility."</p>
|
||||
<footer class="blockquote-footer mt-2">Client Name, <cite title="Source Title">Company</cite></footer>
|
||||
</div>
|
||||
<div class="card testimonial-card p-4">
|
||||
<p class="mb-0">"Another fantastic quote. Highlighting specific positive outcomes is very effective. Keep it short and impactful."</p>
|
||||
<footer class="blockquote-footer mt-2">Another Client, <cite title="Source Title">Organization</cite></footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Contact Section -->
|
||||
<section id="contact" class="bg-light py-5">
|
||||
<div class="container">
|
||||
<h2 class="text-center mb-4">Contact Me</h2>
|
||||
<div class="row">
|
||||
<div class="col-lg-6 mx-auto">
|
||||
<form>
|
||||
<div class="mb-3">
|
||||
<label for="name" class="form-label">Name</label>
|
||||
<input type="text" class="form-control" id="name" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="email" class="form-label">Email address</label>
|
||||
<input type="email" class="form-control" id="email" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="message" class="form-label">Message</label>
|
||||
<textarea class="form-control" id="message" rows="4" required></textarea>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary w-100">Send Message</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="py-4 bg-dark text-white text-center">
|
||||
<div class="container">
|
||||
<a href="#" class="text-white me-3"><i class="bi bi-twitter"></i></a>
|
||||
<a href="#" class="text-white me-3"><i class="bi bi-linkedin"></i></a>
|
||||
<a href="#" class="text-white"><i class="bi bi-github"></i></a>
|
||||
<p class="mt-3 mb-0">Copyright © <?php echo date("Y"); ?>. All Rights Reserved.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Bootstrap JS -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<!-- Custom JS -->
|
||||
<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user