Compare commits
No commits in common. "ai-dev" and "master" have entirely different histories.
@ -1,134 +0,0 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');
|
||||
|
||||
:root {
|
||||
--primary-color: #000000;
|
||||
--secondary-color: #475569;
|
||||
--background-color: #F8FAFC;
|
||||
--surface-color: #FFFFFF;
|
||||
--text-color: #000000;
|
||||
--border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.navbar {
|
||||
background-color: var(--surface-color);
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.navbar-brand, .nav-link {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.hero {
|
||||
background-color: var(--surface-color);
|
||||
padding: 6rem 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 80vh;
|
||||
}
|
||||
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: 4rem 1rem;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-weight: 700;
|
||||
color: var(--text-color);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
border: none;
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
||||
transition: transform 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: var(--primary-color);
|
||||
border-color: var(--primary-color);
|
||||
border-radius: var(--border-radius);
|
||||
padding: 0.75rem 1.5rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.footer {
|
||||
background-color: var(--surface-color);
|
||||
padding: 2rem 1rem;
|
||||
border-top: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
#about .section-title,
|
||||
#portfolio .section-title,
|
||||
#contact .section-title {
|
||||
color: #000 !important;
|
||||
}
|
||||
|
||||
.portfolio-card {
|
||||
background-color: var(--surface-color);
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: var(--border-radius);
|
||||
margin-bottom: 5rem; /* Increased margin for more space */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.portfolio-card-body {
|
||||
padding: 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.portfolio-card-title {
|
||||
font-weight: 700;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.portfolio-card-text {
|
||||
color: var(--text-color);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.btn-dark {
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-dark:hover {
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
.btn-outline-secondary {
|
||||
border-color: #000;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.btn-outline-secondary:hover {
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.portfolio-card:not(:last-child) {
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
@ -1,20 +0,0 @@
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const navLinks = document.querySelectorAll('.nav-link');
|
||||
|
||||
navLinks.forEach(link => {
|
||||
if (link.hash !== '') {
|
||||
link.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const targetElement = document.querySelector(this.hash);
|
||||
|
||||
if(targetElement) {
|
||||
targetElement.scrollIntoView({
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 354 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.5 MiB |
262
index.php
262
index.php
@ -1,141 +1,131 @@
|
||||
<!DOCTYPE html>
|
||||
<?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>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Jane Doe - Architect Portfolio</title>
|
||||
<meta name="description" content="A personal portfolio website for Jane Doe, showcasing architectural projects and skills.">
|
||||
|
||||
<!-- Bootstrap CSS -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Custom CSS -->
|
||||
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
||||
|
||||
<!-- Open Graph Meta Tags -->
|
||||
<meta property="og:title" content="Jane Doe - Architect Portfolio">
|
||||
<meta property="og:description" content="A personal portfolio website for Jane Doe, showcasing architectural projects and skills.">
|
||||
<meta property="og:image" content="https://picsum.photos/seed/architecture-og/1200/630">
|
||||
<meta property="og:url" content="">
|
||||
<meta property="og:type" content="website">
|
||||
|
||||
<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>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Header -->
|
||||
<header class="hero text-center">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-8 mx-auto">
|
||||
<h1 class="display-1 fw-bold">Jane Doe</h1>
|
||||
<p class="lead">Architect</p>
|
||||
<a href="#portfolio" class="btn btn-dark btn-lg">See my work</a>
|
||||
<a href="#contact" class="btn btn-outline-secondary btn-lg">Get in touch</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- About Section -->
|
||||
<section id="about" class="section">
|
||||
<div class="container">
|
||||
<h2 class="section-title text-center">About Me</h2>
|
||||
<div class="row">
|
||||
<div class="col-md-8 mx-auto text-center">
|
||||
<p>Hello! I'm Jane, an architect with a passion for creating sustainable and innovative buildings. I believe great design can improve lives and strive to create spaces that are both beautiful and functional. When I'm not designing, you can find me exploring new cities or sketching in my notebook.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Portfolio Section -->
|
||||
<section id="portfolio" class="section bg-light">
|
||||
<div class="container">
|
||||
<h2 class="section-title text-center">Latest Work</h2>
|
||||
<div class="portfolio-card">
|
||||
<div class="row g-0">
|
||||
<div class="col-md-6">
|
||||
<div class="portfolio-card-body">
|
||||
<h3 class="portfolio-card-title">Modern Villa</h3>
|
||||
<p class="portfolio-card-text">A stunning architectural villa with a minimalist design, focusing on open spaces and natural light.</p>
|
||||
<a href="#" class="btn btn-dark">More</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<img src="https://picsum.photos/seed/architecture-1/800/600" class="img-fluid" alt="Modern Architectural Villa">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="portfolio-card">
|
||||
<div class="row g-0">
|
||||
<div class="col-md-6">
|
||||
<div class="portfolio-card-body">
|
||||
<h3 class="portfolio-card-title">City Museum</h3>
|
||||
<p class="portfolio-card-text">A contemporary museum design that blends with the urban landscape, featuring a unique facade.</p>
|
||||
<a href="#" class="btn btn-dark">More</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<img src="https://picsum.photos/seed/architecture-2/800/600" class="img-fluid" alt="Contemporary City Museum">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="portfolio-card">
|
||||
<div class="row g-0">
|
||||
<div class="col-md-6">
|
||||
<div class="portfolio-card-body">
|
||||
<h3 class="portfolio-card-title">Residential Tower</h3>
|
||||
<p class="portfolio-card-text">A high-rise residential tower with a focus on sustainable living and community spaces.</p>
|
||||
<a href="#" class="btn btn-dark">More</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<img src="https://picsum.photos/seed/architecture-3/800/600" class="img-fluid" alt="Sustainable Residential Tower">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Contact Section -->
|
||||
<section id="contact" class="section">
|
||||
<div class="container">
|
||||
<h2 class="section-title text-center">Get In Touch</h2>
|
||||
<div class="row">
|
||||
<div class="col-md-6 mx-auto">
|
||||
<p class="text-center mb-4">Have a project in mind or just want to say hello? Drop me a line.</p>
|
||||
<form>
|
||||
<div class="mb-3">
|
||||
<input type="text" class="form-control" placeholder="Your Name" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<input type="email" class="form-control" placeholder="Your Email" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<textarea class="form-control" rows="5" placeholder="Your Message" required></textarea>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<button type="submit" class="btn btn-dark">Send Message</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="footer text-center">
|
||||
<div class="container">
|
||||
<p class="mb-0">© 2025 Jane Doe. All Rights Reserved.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Bootstrap JS -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
<!-- Custom JS -->
|
||||
<script src="assets/js/main.js"></script>
|
||||
|
||||
<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">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>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user