alvin/school
1
0
Fork 0
mirror of https://github.com/Alvin-Zilverstand/school.git synced 2026-03-06 21:36:22 +01:00
Code Issues Packages Projects Releases Wiki Activity

add challenge 11(portifolio)

Browse Source
This commit is contained in:
vista-man
2025-06-19 01:03:59 +02:00
parent 8faefd26ae
commit 5245c6f9b1
27 changed files with 1937 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
projects/challenge 11/portifolio(work_in_progress)/.test/.sql/portfolio.sql Normal file
View File

@@ -0,0 +1,24 @@
-- Create database
CREATE DATABASE IF NOT EXISTS portfolio;
USE portfolio;
-- Create projects table
CREATE TABLE IF NOT EXISTS projects (
id INT AUTO_INCREMENT PRIMARY KEY,
title VARCHAR(255) NOT NULL,
description TEXT,
image_url VARCHAR(255),
project_url VARCHAR(255),
tags VARCHAR(255),
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
-- Insert a sample project
INSERT INTO projects (title, description, image_url, project_url, tags)
VALUES (
'Sample Project',
'This is a sample project description.',
'assets/sample.jpg',
'https://example.com',
'html,css,school'
);

5
projects/challenge 11/portifolio(work_in_progress)/.test/.sql/update_projects.sql Normal file
View File

@@ -0,0 +1,5 @@
-- Add long_description column to projects table
ALTER TABLE projects ADD COLUMN long_description TEXT AFTER description;
-- Update existing projects with long descriptions (optional)
UPDATE projects SET long_description = description WHERE long_description IS NULL;

75
projects/challenge 11/portifolio(work_in_progress)/.test/test-dark-mode.html Normal file
View File

@@ -0,0 +1,75 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dark Mode Test</title>
<!-- Google Fonts -->
<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@300;400;500;600;700&display=swap" rel="stylesheet">
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
dark: {
bg: '#0f172a',
card: '#334155',
text: '#f1f5f9'
}
},
fontFamily: {
'sans': ['Inter', 'system-ui', 'sans-serif'],
}
}
}
}
</script>
<!-- Custom CSS -->
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/animations.css">
</head>
<body class="min-h-screen bg-gray-100 dark:bg-dark-bg text-gray-900 dark:text-white transition-colors duration-200">
<div class="container mx-auto px-4 py-8">
<h1 class="text-4xl font-bold mb-8 text-center">Dark Mode Test Page</h1>
<div class="max-w-md mx-auto bg-white dark:bg-dark-card p-6 rounded-lg shadow-lg">
<h2 class="text-2xl font-semibold mb-4">Test Content</h2>
<p class="text-gray-700 dark:text-gray-300 mb-4">
This is a test page to verify that the dark mode toggle button appears and works correctly.
</p>
<p class="text-sm text-gray-500 dark:text-gray-400">
You should see a dark mode toggle button in the bottom-left corner of the screen.
</p>
</div>
<div class="mt-8 text-center">
<a href="index.php" class="btn-primary inline-block">Back to Main Page</a>
</div>
</div>
<!-- Scripts -->
<script src="js/dark-mode.js"></script>
<script>
// Additional debugging
console.log('Test page loaded');
setTimeout(() => {
const button = document.getElementById('theme-toggle');
if (button) {
console.log('✅ Dark mode button found:', button);
console.log('Button styles:', window.getComputedStyle(button));
} else {
console.log('❌ Dark mode button not found');
}
}, 1000);
</script>
</body>
</html>

60
projects/challenge 11/portifolio(work_in_progress)/assets/favicon.svg Normal file
View File

@@ -0,0 +1,60 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<defs>
<linearGradient id="mainGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#2563eb" />
<stop offset="100%" stop-color="#4f46e5" />
</linearGradient>
<radialGradient id="shine" cx="70%" cy="30%" r="60%">
<stop offset="0%" stop-color="#fff" stop-opacity="0.7"/>
<stop offset="100%" stop-color="#fff" stop-opacity="0"/>
</radialGradient>
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="0" dy="2" stdDeviation="2.5" flood-color="#6366f1" flood-opacity="0.25"/>
</filter>
<radialGradient id="glow" cx="50%" cy="50%" r="50%">
<stop offset="60%" stop-color="#a5b4fc" stop-opacity="0.18"/>
<stop offset="100%" stop-color="#6366f1" stop-opacity="0"/>
</radialGradient>
<linearGradient id="purpleOverlay" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#a78bfa" stop-opacity="0.18"/>
<stop offset="100%" stop-color="#7c3aed" stop-opacity="0.22"/>
</linearGradient>
</defs>
<!-- Background -->
<rect x="2" y="2" width="60" height="60" rx="16" fill="url(#mainGradient)"/>
<!-- Subtle purple overlay -->
<rect x="2" y="2" width="60" height="60" rx="16" fill="url(#purpleOverlay)"/>
<!-- Faint geometric grid (more purple, more visible) -->
<g opacity="0.22">
<rect x="14" y="14" width="36" height="36" rx="8" fill="none" stroke="#a78bfa" stroke-width="1.2"/>
<line x1="32" y1="14" x2="32" y2="50" stroke="#a78bfa" stroke-width="1"/>
<line x1="14" y1="32" x2="50" y2="32" stroke="#a78bfa" stroke-width="1"/>
</g>
<!-- Soft glowing ring -->
<circle cx="32" cy="32" r="23" fill="none" stroke="url(#glow)" stroke-width="7"/>
<!-- Shine overlay for premium look -->
<ellipse cx="38" cy="18" rx="18" ry="8" fill="url(#shine)"/>
<!-- Stylized P with purple highlight and indigo shadow -->
<g filter="url(#shadow)">
<path d="M22 48V16h12q10 0 10 8.5t-10 8.5h-8v15z" fill="#fff"/>
<path d="M30 20h4q6 0 6 4.5t-6 4.5h-4z" fill="#6366f1"/>
<path d="M28 28q7 0 7-4.5" stroke="#a78bfa" stroke-width="2.2" fill="none" opacity="0.85"/>
</g>
<!-- Accent star -->
<g>
<polygon points="52,10 53,13 56,13 53.5,15 54.5,18 52,16.5 49.5,18 50.5,15 48,13 51,13" fill="#ffe066" opacity="0.95"/>
<polygon points="52,11.5 52.7,13.5 54.5,13.5 53,14.7 53.7,16.5 52,15.5 50.3,16.5 51,14.7 49.5,13.5 51.3,13.5" fill="#fff" opacity="0.7"/>
<!-- Indigo accent dot near star -->
<circle cx="57" cy="12" r="1.1" fill="#6366f1" opacity="0.85"/>
</g>
<!-- Accent dot cluster (more purple/indigo) -->
<g>
<circle cx="16" cy="48" r="1.3" fill="#a78bfa" opacity="0.95"/>
<circle cx="19" cy="50" r="0.7" fill="#7c3aed" opacity="0.85"/>
<circle cx="14.5" cy="51.5" r="0.5" fill="#6366f1" opacity="0.85"/>
</g>
<!-- Strong indigo inner border -->
<rect x="7" y="7" width="50" height="50" rx="12" fill="none" stroke="#6366f1" stroke-width="1.5" opacity="0.45"/>
<!-- Subtle white border -->
<rect x="2" y="2" width="60" height="60" rx="16" fill="none" stroke="#fff" stroke-width="1.5" opacity="0.18"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
projects/challenge 11/portifolio(work_in_progress)/assets/img_68532b2c9db398.90652024.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
projects/challenge 11/portifolio(work_in_progress)/assets/img_68532c22650974.25780946.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 76 KiB

BIN
projects/challenge 11/portifolio(work_in_progress)/assets/img_685332e2c19726.68679915.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
projects/challenge 11/portifolio(work_in_progress)/assets/img_68533428d7dbf7.04812047.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 278 KiB

BIN
projects/challenge 11/portifolio(work_in_progress)/assets/img_68533897b6e606.91354272.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
projects/challenge 11/portifolio(work_in_progress)/assets/img_68533a4fae17a2.61602173.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 79 KiB

BIN
projects/challenge 11/portifolio(work_in_progress)/assets/img_68533d573a8017.49535201.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 141 KiB

BIN
projects/challenge 11/portifolio(work_in_progress)/assets/img_6853423c94f733.00653812.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 93 KiB

BIN
projects/challenge 11/portifolio(work_in_progress)/assets/img_685343f1288b20.49230464.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 152 KiB

BIN
projects/challenge 11/portifolio(work_in_progress)/assets/pano_left.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 MiB

240
projects/challenge 11/portifolio(work_in_progress)/css/animations.css Normal file
View File

@@ -0,0 +1,240 @@
/* Custom animations and keyframes */
/* Fade in animation */
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Slide up animation */
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Bounce in animation */
@keyframes bounceIn {
0% {
opacity: 0;
transform: scale(0.3);
}
50% {
opacity: 1;
transform: scale(1.05);
}
70% {
transform: scale(0.9);
}
100% {
opacity: 1;
transform: scale(1);
}
}
/* Pulse animation */
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
/* Shimmer effect for loading states */
@keyframes shimmer {
0% {
background-position: -200px 0;
}
100% {
background-position: calc(200px + 100%) 0;
}
}
/* Floating animation */
@keyframes float {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
}
/* Gradient animation */
@keyframes gradientShift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/* Typing animation */
@keyframes typing {
from {
width: 0;
}
to {
width: 100%;
}
}
/* Blink animation for cursor */
@keyframes blink {
0%, 50% {
opacity: 1;
}
51%, 100% {
opacity: 0;
}
}
/* Utility classes for animations */
.animate-fade-in {
animation: fadeIn 0.6s ease-out;
}
.animate-slide-up {
animation: slideUp 0.8s ease-out;
}
.animate-bounce-in {
animation: bounceIn 1s ease-out;
}
.animate-pulse {
animation: pulse 2s infinite;
}
.animate-float {
animation: float 3s ease-in-out infinite;
}
.animate-gradient {
background-size: 200% 200%;
animation: gradientShift 3s ease infinite;
}
.animate-shimmer {
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
background-size: 200px 100%;
animation: shimmer 1.5s infinite;
}
/* Staggered animations for lists */
.stagger-animation > * {
opacity: 0;
animation: slideUp 0.6s ease-out forwards;
}
.stagger-animation > *:nth-child(1) { animation-delay: 0.1s; }
.stagger-animation > *:nth-child(2) { animation-delay: 0.2s; }
.stagger-animation > *:nth-child(3) { animation-delay: 0.3s; }
.stagger-animation > *:nth-child(4) { animation-delay: 0.4s; }
.stagger-animation > *:nth-child(5) { animation-delay: 0.5s; }
.stagger-animation > *:nth-child(6) { animation-delay: 0.6s; }
/* Hover animations */
.hover-lift {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-lift:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}
.hover-scale {
transition: transform 0.3s ease;
}
.hover-scale:hover {
transform: scale(1.05);
}
.hover-glow {
transition: box-shadow 0.3s ease;
}
.hover-glow:hover {
box-shadow: 0 0 20px rgba(79, 172, 254, 0.4);
}
/* Loading spinner */
.spinner {
width: 40px;
height: 40px;
border: 4px solid rgba(0, 0, 0, 0.1);
border-left-color: #4facfe;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
/* Text reveal animation */
.text-reveal {
overflow: hidden;
position: relative;
}
.text-reveal::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--bg-primary);
animation: textReveal 1.5s ease-out forwards;
}
@keyframes textReveal {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100%);
}
}
/* Parallax effect */
.parallax {
transform: translateZ(0);
will-change: transform;
}
/* Smooth scrolling */
html {
scroll-behavior: smooth;
}
/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}

306
projects/challenge 11/portifolio(work_in_progress)/css/styles.css Normal file
View File

@@ -0,0 +1,306 @@
/* Custom CSS for enhanced styling with dark/light theme support */
/* Custom properties for theme colors */
:root {
--primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
--accent-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
--success-gradient: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
/* Light theme colors */
--bg-primary: #ffffff;
--bg-secondary: #f8fafc;
--bg-card: #ffffff;
--text-primary: #1e293b;
--text-secondary: #64748b;
--border-color: #e2e8f0;
--shadow-color: rgba(0, 0, 0, 0.1);
--shadow-hover: rgba(0, 0, 0, 0.15);
/* Animation variables */
--transition-fast: 0.2s ease;
--transition-normal: 0.3s ease;
--transition-slow: 0.5s ease;
}
/* Dark theme colors */
.dark {
--bg-primary: #0f172a;
--bg-secondary: #1e293b;
--bg-card: #334155;
--text-primary: #f1f5f9;
--text-secondary: #94a3b8;
--border-color: #475569;
--shadow-color: rgba(0, 0, 0, 0.3);
--shadow-hover: rgba(0, 0, 0, 0.4);
}
/* Global styles */
* {
box-sizing: border-box;
}
body {
background: var(--bg-primary);
color: var(--text-primary);
transition: background-color var(--transition-normal), color var(--transition-normal);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6;
}
/* Enhanced header with gradient and animation */
header {
background: var(--primary-gradient) !important;
position: relative;
overflow: hidden;
}
header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
animation: float 20s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-20px) rotate(180deg); }
}
/* Enhanced project cards */
.project-card {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: 16px;
box-shadow: 0 4px 6px var(--shadow-color);
transition: all var(--transition-normal);
position: relative;
overflow: hidden;
}
.project-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--accent-gradient);
transform: scaleX(0);
transition: transform var(--transition-normal);
}
.project-card:hover::before {
transform: scaleX(1);
}
.project-card:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 20px 25px var(--shadow-hover);
border-color: transparent;
}
/* Enhanced images */
.project-image {
border-radius: 12px;
transition: transform var(--transition-normal);
position: relative;
overflow: hidden;
}
.project-card:hover .project-image {
transform: scale(1.05);
}
.project-image::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%);
transform: translateX(-100%);
transition: transform var(--transition-slow);
}
.project-card:hover .project-image::after {
transform: translateX(100%);
}
/* Enhanced tags */
.tag {
background: var(--accent-gradient);
color: white;
font-weight: 500;
border-radius: 20px;
padding: 4px 12px;
font-size: 0.75rem;
transition: all var(--transition-fast);
position: relative;
overflow: hidden;
}
.tag::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
transition: left var(--transition-slow);
}
.tag:hover::before {
left: 100%;
}
.tag:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
/* Enhanced buttons */
.btn-primary {
background: var(--primary-gradient);
color: white;
border: none;
border-radius: 12px;
padding: 12px 24px;
font-weight: 600;
transition: all var(--transition-normal);
position: relative;
overflow: hidden;
}
.btn-primary::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: left var(--transition-slow);
}
.btn-primary:hover::before {
left: 100%;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}
/* Enhanced modal */
.modal-overlay {
backdrop-filter: blur(8px);
background: rgba(0, 0, 0, 0.6);
}
.modal-content {
background: var(--bg-card);
border-radius: 20px;
border: 1px solid var(--border-color);
box-shadow: 0 25px 50px var(--shadow-hover);
}
/* Enhanced theme toggle */
.theme-toggle {
background: var(--bg-card);
border: 2px solid var(--border-color);
border-radius: 50%;
box-shadow: 0 4px 12px var(--shadow-color);
transition: all var(--transition-normal);
}
.theme-toggle:hover {
transform: scale(1.1) rotate(180deg);
box-shadow: 0 8px 20px var(--shadow-hover);
}
/* Loading animation */
.loading {
display: inline-block;
width: 20px;
height: 20px;
border: 3px solid var(--border-color);
border-radius: 50%;
border-top-color: var(--primary-gradient);
animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* Enhanced typography */
h1, h2, h3 {
background: var(--primary-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
header h1 {
color: #f0f6ff;
background: none;
-webkit-background-clip: initial;
-webkit-text-fill-color: initial;
}
/* Scrollbar styling */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: var(--bg-secondary);
}
::-webkit-scrollbar-thumb {
background: var(--accent-gradient);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--secondary-gradient);
}
/* Responsive enhancements */
@media (max-width: 768px) {
.project-card:hover {
transform: translateY(-4px) scale(1.01);
}
.theme-toggle:hover {
transform: scale(1.05) rotate(90deg);
}
}
/* Focus states for accessibility */
button:focus,
a:focus {
outline: 2px solid var(--accent-gradient);
outline-offset: 2px;
}
/* Print styles */
@media print {
.theme-toggle,
.modal-overlay {
display: none !important;
}
.project-card {
break-inside: avoid;
box-shadow: none;
border: 1px solid #ccc;
}
}

159
projects/challenge 11/portifolio(work_in_progress)/db/add_project.php Normal file
View File

@@ -0,0 +1,159 @@
<?php
require_once '../php/config.php';
$message = '';
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$title = $_POST['title'] ?? '';
$description = $_POST['description'] ?? '';
$long_description = $_POST['long_description'] ?? '';
$project_url = $_POST['project_url'] ?? '';
$tags = $_POST['tags'] ?? '';
$image_url = '';
// Handle image upload
if (isset($_FILES['image_file']) && $_FILES['image_file']['error'] === UPLOAD_ERR_OK) {
$ext = pathinfo($_FILES['image_file']['name'], PATHINFO_EXTENSION);
$filename = uniqid('img_', true) . '.' . strtolower($ext);
$target = '/var/www/alvnx.xyz/public_html/assets/' . $filename;
if (move_uploaded_file($_FILES['image_file']['tmp_name'], $target)) {
$image_url = 'assets/' . $filename;
} else {
$message = '<div class="bg-red-100 text-red-800 p-3 rounded mb-4">Image upload failed.</div>';
}
} else if (!empty($_POST['image_url'])) {
$image_url = $_POST['image_url'];
}
if (!$message) {
try {
$pdo = get_pdo();
$stmt = $pdo->prepare('INSERT INTO projects (title, description, long_description, image_url, project_url, tags) VALUES (?, ?, ?, ?, ?, ?)');
$stmt->execute([$title, $description, $long_description, $image_url, $project_url, $tags]);
$message = '<div class="bg-green-100 text-green-800 p-3 rounded mb-4">Project added successfully!</div>';
} catch (Exception $e) {
$message = '<div class="bg-red-100 text-red-800 p-3 rounded mb-4">Error: ' . htmlspecialchars($e->getMessage()) . '</div>';
}
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Add Project</title>
<!-- Google Fonts -->
<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@300;400;500;600;700&display=swap" rel="stylesheet">
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
dark: {
bg: '#0f172a',
card: '#334155',
text: '#f1f5f9'
}
},
fontFamily: {
'sans': ['Inter', 'system-ui', 'sans-serif'],
}
}
}
}
</script>
<!-- Custom CSS -->
<link rel="stylesheet" href="../css/styles.css">
<link rel="stylesheet" href="../css/animations.css">
<!-- Favicon -->
<link rel="icon" type="image/svg+xml" href="../assets/favicon.svg">
</head>
<body class="min-h-screen flex items-center justify-center transition-colors duration-200">
<!-- Back to home button -->
<a href="../index.php" class="fixed top-6 left-6 btn-primary inline-flex items-center space-x-2 z-50 animate-bounce-in">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
</svg>
<span>Back to Home</span>
</a>
<div class="bg-white dark:bg-dark-card p-8 rounded-2xl shadow-xl w-full max-w-2xl mx-4 transition-colors duration-200 border border-gray-200 dark:border-gray-600">
<div class="flex justify-between items-center mb-8">
<div>
<h1 class="text-3xl font-bold mb-2 text-gray-800 dark:text-white">Add New Project</h1>
<p class="text-gray-600 dark:text-gray-400">Create a new project for your portfolio</p>
</div>
<a href="index.php" class="text-gray-600 dark:text-gray-400 hover:underline font-medium px-4 py-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
<svg class="w-5 h-5 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
</svg>
Back to Projects
</a>
</div>
<?= $message ?>
<form method="post" enctype="multipart/form-data" class="space-y-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label class="block font-medium mb-3 text-gray-700 dark:text-gray-300">Title *</label>
<input type="text" name="title" class="w-full border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-lg px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" required>
</div>
<div>
<label class="block font-medium mb-3 text-gray-700 dark:text-gray-300">Project URL</label>
<input type="text" name="project_url" class="w-full border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-lg px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" placeholder="https://example.com">
</div>
</div>
<div>
<label class="block font-medium mb-3 text-gray-700 dark:text-gray-300">Short Description</label>
<textarea name="description" class="w-full border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-lg px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" rows="3" placeholder="Brief description of your project"></textarea>
</div>
<div>
<label class="block font-medium mb-3 text-gray-700 dark:text-gray-300">Long Description</label>
<textarea name="long_description" class="w-full border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-lg px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" rows="6" placeholder="Detailed description of your project, technologies used, challenges faced, etc."></textarea>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label class="block font-medium mb-3 text-gray-700 dark:text-gray-300">Image Upload</label>
<input type="file" name="image_file" accept="image/*" class="w-full border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-lg px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors">
<p class="text-sm text-gray-500 dark:text-gray-400 mt-2">Upload an image file (JPG, PNG, GIF)</p>
</div>
<div>
<label class="block font-medium mb-3 text-gray-700 dark:text-gray-300">Or Image URL</label>
<input type="text" name="image_url" class="w-full border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-lg px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" placeholder="assets/myimg.jpg">
<p class="text-sm text-gray-500 dark:text-gray-400 mt-2">Or provide a URL to an image</p>
</div>
</div>
<div>
<label class="block font-medium mb-3 text-gray-700 dark:text-gray-300">Tags</label>
<input type="text" name="tags" class="w-full border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-lg px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" placeholder="HTML, CSS, JavaScript, React">
<p class="text-sm text-gray-500 dark:text-gray-400 mt-2">Separate tags with commas (e.g., HTML, CSS, JavaScript)</p>
</div>
<div class="flex gap-4 pt-4">
<button type="submit" class="btn-primary px-8 py-3">
<svg class="w-5 h-5 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
</svg>
Add Project
</button>
<a href="index.php" class="text-gray-600 dark:text-gray-400 hover:underline font-medium px-8 py-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">Cancel</a>
</div>
</form>
</div>
<!-- Scripts -->
<script src="../js/dark-mode.js"></script>
</body>
</html>

255
projects/challenge 11/portifolio(work_in_progress)/db/index.php Normal file
View File

@@ -0,0 +1,255 @@
<?php
session_start();
if (!isset($_SESSION['logged_in']) || !$_SESSION['logged_in']) {
header('Location: login.php');
exit;
}
if (isset($_GET['logout'])) {
session_destroy();
header('Location: login.php');
exit;
}
require_once '../php/config.php';
// Handle delete
if (isset($_GET['delete'])) {
$id = intval($_GET['delete']);
try {
$pdo = get_pdo();
$pdo->prepare('DELETE FROM projects WHERE id = ?')->execute([$id]);
$message = '<div class="bg-green-100 text-green-800 p-3 rounded mb-4">Project deleted.</div>';
} catch (Exception $e) {
$message = '<div class="bg-red-100 text-red-800 p-3 rounded mb-4">Error: ' . htmlspecialchars($e->getMessage()) . '</div>';
}
}
// Handle update
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['edit_id'])) {
$id = intval($_POST['edit_id']);
$title = $_POST['title'] ?? '';
$description = $_POST['description'] ?? '';
$long_description = $_POST['long_description'] ?? '';
$project_url = $_POST['project_url'] ?? '';
$tags = $_POST['tags'] ?? '';
$image_url = $_POST['image_url'] ?? '';
// Handle image upload
if (isset($_FILES['image_file']) && $_FILES['image_file']['error'] === UPLOAD_ERR_OK) {
$ext = pathinfo($_FILES['image_file']['name'], PATHINFO_EXTENSION);
$filename = uniqid('img_', true) . '.' . strtolower($ext);
$target = '/var/www/alvnx.xyz/public_html/assets/' . $filename;
if (move_uploaded_file($_FILES['image_file']['tmp_name'], $target)) {
$image_url = 'assets/' . $filename;
} else {
$message = '<div class="bg-red-100 text-red-800 p-3 rounded mb-4">Image upload failed.</div>';
}
}
if (!$message) {
try {
$pdo = get_pdo();
$stmt = $pdo->prepare('UPDATE projects SET title=?, description=?, long_description=?, image_url=?, project_url=?, tags=? WHERE id=?');
$stmt->execute([$title, $description, $long_description, $image_url, $project_url, $tags, $id]);
$message = '<div class="bg-green-100 text-green-800 p-3 rounded mb-4">Project updated.</div>';
} catch (Exception $e) {
$message = '<div class="bg-red-100 text-red-800 p-3 rounded mb-4">Error: ' . htmlspecialchars($e->getMessage()) . '</div>';
}
}
}
// Fetch all projects
try {
$pdo = get_pdo();
$projects = $pdo->query('SELECT * FROM projects ORDER BY created_at DESC')->fetchAll();
} catch (Exception $e) {
$projects = [];
$message = '<div class="bg-red-100 text-red-800 p-3 rounded mb-4">Error: ' . htmlspecialchars($e->getMessage()) . '</div>';
}
// If editing, fetch project
$edit_project = null;
if (isset($_GET['edit'])) {
$id = intval($_GET['edit']);
foreach ($projects as $p) {
if ($p['id'] == $id) {
$edit_project = $p;
break;
}
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Manage Projects</title>
<!-- Google Fonts -->
<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@300;400;500;600;700&display=swap" rel="stylesheet">
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
dark: {
bg: '#0f172a',
card: '#334155',
text: '#f1f5f9'
}
},
fontFamily: {
'sans': ['Inter', 'system-ui', 'sans-serif'],
}
}
}
}
</script>
<!-- Custom CSS -->
<link rel="stylesheet" href="../css/styles.css">
<link rel="stylesheet" href="../css/animations.css">
<!-- Favicon -->
<link rel="icon" type="image/svg+xml" href="../assets/favicon.svg">
</head>
<body class="min-h-screen transition-colors duration-200">
<!-- Back to home button -->
<a href="../index.php" class="fixed top-6 left-6 btn-primary inline-flex items-center space-x-2 z-50 animate-bounce-in">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
</svg>
<span>Back to Home</span>
</a>
<div class="max-w-7xl mx-auto p-6 relative">
<!-- Header -->
<div class="flex justify-between items-center mb-8">
<div>
<h1 class="text-4xl font-bold mb-2 text-gray-800 dark:text-white">Manage Projects</h1>
<p class="text-gray-600 dark:text-gray-400">Add, edit, and manage your portfolio projects</p>
</div>
<div class="flex gap-4">
<a href="add_project.php" class="btn-primary inline-flex items-center space-x-2">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
</svg>
<span>Add New Project</span>
</a>
<a href="?logout=1" class="bg-white dark:bg-dark-card text-gray-700 dark:text-gray-300 px-6 py-3 rounded-lg shadow-lg hover:shadow-xl font-medium transition-all duration-200 border border-gray-200 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700">
<svg class="w-5 h-5 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path>
</svg>
Logout
</a>
</div>
</div>
<!-- Messages -->
<?= $message ?? '' ?>
<!-- Edit Form -->
<?php if ($edit_project): ?>
<div class="mb-8 bg-white dark:bg-dark-card p-8 rounded-2xl shadow-xl transition-colors duration-200 border border-gray-200 dark:border-gray-600">
<h2 class="text-2xl font-semibold mb-6 text-gray-800 dark:text-white flex items-center">
<svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
</svg>
Edit Project
</h2>
<form method="post" enctype="multipart/form-data" class="space-y-6">
<input type="hidden" name="edit_id" value="<?= $edit_project['id'] ?>">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label class="block font-medium mb-3 text-gray-700 dark:text-gray-300">Title</label>
<input type="text" name="title" class="w-full border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-lg px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" value="<?= htmlspecialchars($edit_project['title']) ?>" required>
</div>
<div>
<label class="block font-medium mb-3 text-gray-700 dark:text-gray-300">Project URL</label>
<input type="text" name="project_url" class="w-full border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-lg px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" value="<?= htmlspecialchars($edit_project['project_url']) ?>">
</div>
</div>
<div>
<label class="block font-medium mb-3 text-gray-700 dark:text-gray-300">Short Description</label>
<textarea name="description" class="w-full border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-lg px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" rows="2"><?= htmlspecialchars($edit_project['description']) ?></textarea>
</div>
<div>
<label class="block font-medium mb-3 text-gray-700 dark:text-gray-300">Long Description</label>
<textarea name="long_description" class="w-full border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-lg px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" rows="4"><?= htmlspecialchars($edit_project['long_description'] ?? '') ?></textarea>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label class="block font-medium mb-3 text-gray-700 dark:text-gray-300">Current Image</label>
<?php if ($edit_project['image_url']): ?>
<img src="../<?= htmlspecialchars($edit_project['image_url']) ?>" alt="" class="h-32 w-32 object-cover rounded-lg mb-2 border border-gray-200 dark:border-gray-600">
<?php else: ?>
<div class="h-32 w-32 bg-gray-100 dark:bg-gray-700 rounded-lg flex items-center justify-center border border-gray-200 dark:border-gray-600">
<span class="text-gray-500 dark:text-gray-400 text-sm">No image</span>
</div>
<?php endif; ?>
</div>
<div>
<label class="block font-medium mb-3 text-gray-700 dark:text-gray-300">Upload New Image</label>
<input type="file" name="image_file" accept="image/*" class="w-full border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-lg px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors">
</div>
</div>
<div>
<label class="block font-medium mb-3 text-gray-700 dark:text-gray-300">Or Image URL</label>
<input type="text" name="image_url" class="w-full border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-lg px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" value="<?= htmlspecialchars($edit_project['image_url']) ?>">
</div>
<div>
<label class="block font-medium mb-3 text-gray-700 dark:text-gray-300">Tags</label>
<input type="text" name="tags" class="w-full border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-lg px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" value="<?= htmlspecialchars($edit_project['tags']) ?>">
<p class="text-sm text-gray-500 dark:text-gray-400 mt-2">Separate tags with commas</p>
</div>
<div class="flex gap-4">
<button type="submit" class="btn-primary px-6 py-3">
<svg class="w-5 h-5 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
Save Changes
</button>
<a href="index.php" class="text-gray-600 dark:text-gray-400 hover:underline font-medium px-6 py-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">Cancel</a>
</div>
</form>
</div>
<?php endif; ?>
<!-- Projects Grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<?php foreach ($projects as $project): ?>
<div class="project-card p-6 transition-all duration-200 hover-lift">
<?php if ($project['image_url']): ?>
<img src="../<?= htmlspecialchars($project['image_url']) ?>" alt="" class="project-image h-48 w-full object-cover rounded-lg mb-4">
<?php endif; ?>
<h3 class="text-xl font-semibold mb-2 text-gray-800 dark:text-white"><?= htmlspecialchars($project['title']) ?></h3>
<p class="text-gray-700 dark:text-gray-300 mb-4 line-clamp-2"><?= htmlspecialchars($project['description']) ?></p>
<?php if ($project['tags']): ?>
<div class="mb-4 flex flex-wrap gap-2">
<?php foreach (explode(',', $project['tags']) as $tag): ?>
<span class="tag text-xs"><?= htmlspecialchars(trim($tag)) ?></span>
<?php endforeach; ?>
</div>
<?php endif; ?>
<div class="flex justify-between items-center">
<?php if ($project['project_url']): ?>
<a href="<?= htmlspecialchars($project['project_url']) ?>" target="_blank" class="text-blue-600 dark:text-blue-400 hover:underline text-sm font-medium">View Project →</a>
<?php endif; ?>
<div class="flex gap-3">
<a href="?edit=<?= $project['id'] ?>" class="bg-blue-600 dark:bg-blue-700 text-white px-4 py-2 rounded-lg hover:bg-blue-700 dark:hover:bg-blue-800 transition-colors text-sm font-medium">Edit</a>
<a href="?delete=<?= $project['id'] ?>" class="bg-red-600 dark:bg-red-700 text-white px-4 py-2 rounded-lg hover:bg-red-700 dark:hover:bg-red-800 transition-colors text-sm font-medium" onclick="return confirm('Delete this project?');">Delete</a>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
<!-- Scripts -->
<script src="../js/dark-mode.js"></script>
</body>
</html>

129
projects/challenge 11/portifolio(work_in_progress)/db/login.php Normal file
View File

@@ -0,0 +1,129 @@
<?php
session_start();
// Change these credentials as needed
$USERNAME = 'admin';
$PASSWORD = 'password123';
$error = '';
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$user = $_POST['username'] ?? '';
$pass = $_POST['password'] ?? '';
if ($user === $USERNAME && $pass === $PASSWORD) {
$_SESSION['logged_in'] = true;
header('Location: index.php');
exit;
} else {
$error = 'Invalid username or password.';
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login - Manage Projects</title>
<!-- Google Fonts -->
<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@300;400;500;600;700&display=swap" rel="stylesheet">
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
dark: {
bg: '#0f172a',
card: '#334155',
text: '#f1f5f9'
}
},
fontFamily: {
'sans': ['Inter', 'system-ui', 'sans-serif'],
}
}
}
}
</script>
<!-- Custom CSS -->
<link rel="stylesheet" href="../css/styles.css">
<link rel="stylesheet" href="../css/animations.css">
<!-- Favicon -->
<link rel="icon" type="image/svg+xml" href="../assets/favicon.svg">
</head>
<body class="min-h-screen flex items-center justify-center transition-colors duration-200">
<!-- Back to home button -->
<a href="../index.php" class="fixed top-6 left-6 btn-primary inline-flex items-center space-x-2 z-50 animate-bounce-in">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
</svg>
<span>Back to Home</span>
</a>
<!-- Login form container -->
<div class="bg-white dark:bg-dark-card p-8 rounded-2xl shadow-xl w-full max-w-md mx-4 transition-colors duration-200 border border-gray-200 dark:border-gray-600">
<div class="text-center mb-8">
<h1 class="text-3xl font-bold mb-2 text-gray-800 dark:text-white">Sign In</h1>
<p class="text-gray-600 dark:text-gray-400">Access your project management dashboard</p>
</div>
<?php if ($error): ?>
<div class="bg-red-100 dark:bg-red-900/50 text-red-800 dark:text-red-200 p-4 rounded-lg mb-6 border border-red-200 dark:border-red-800 animate-bounce-in">
<div class="flex items-center space-x-2">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<span><?= htmlspecialchars($error) ?></span>
</div>
</div>
<?php endif; ?>
<form method="post" class="space-y-6">
<div>
<label class="block font-medium mb-3 text-gray-700 dark:text-gray-300">Username</label>
<div class="relative">
<svg class="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
</svg>
<input type="text" name="username"
class="w-full pl-10 pr-4 py-3 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"
placeholder="Enter your username"
required autofocus>
</div>
</div>
<div>
<label class="block font-medium mb-3 text-gray-700 dark:text-gray-300">Password</label>
<div class="relative">
<svg class="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
</svg>
<input type="password" name="password"
class="w-full pl-10 pr-4 py-3 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"
placeholder="Enter your password"
required>
</div>
</div>
<button type="submit" class="btn-primary w-full py-3 text-lg font-semibold">
<svg class="w-5 h-5 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"></path>
</svg>
Sign In
</button>
</form>
</div>
<!-- Scripts -->
<script src="../js/dark-mode.js"></script>
</body>
</html>

136
projects/challenge 11/portifolio(work_in_progress)/index.php Normal file
View File

@@ -0,0 +1,136 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="My School Projects Portfolio - A showcase of all my academic work">
<title>My School Projects Portfolio</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@300;400;500;600;700&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
dark: {
bg: '#0f172a',
card: '#334155',
text: '#f1f5f9'
}
},
fontFamily: {
'sans': ['Inter', 'system-ui', 'sans-serif'],
},
animation: {
'fade-in': 'fadeIn 0.5s ease-in-out',
'slide-up': 'slideUp 0.6s ease-out',
'bounce-in': 'bounceIn 0.8s ease-out',
}
}
}
}
</script>
<!-- Custom CSS -->
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/animations.css">
<!-- Favicon -->
<link rel="icon" type="image/svg+xml" href="assets/favicon.svg">
<!-- Prevent source map errors -->
<script>
window.addEventListener('error', function(e) {
if (e.filename && e.filename.includes('source-map')) {
e.preventDefault();
}
});
</script>
</head>
<body class="min-h-screen transition-colors duration-200">
<!-- Enhanced header with gradient and animations -->
<header class="relative overflow-hidden mb-8 shadow-lg bg-gradient-to-r from-blue-600 to-indigo-700">
<div class="relative z-10 p-8 text-white">
<div class="container mx-auto">
<div class="flex justify-between items-start">
<div class="flex-1">
<h1 class="text-5xl md:text-6xl font-extrabold mb-3 leading-tight animate-slide-up text-white">
My School Projects Portfolio
</h1>
<p class="text-xl text-blue-100 dark:text-blue-200 mb-6 leading-relaxed animate-slide-up" style="animation-delay: 0.2s;">
A showcase of all my school projects, loaded from a database.
</p>
<div class="flex items-center space-x-4 animate-slide-up" style="animation-delay: 0.4s;">
<div class="flex items-center space-x-2 text-blue-100">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<span class="text-sm">Dynamic content</span>
</div>
<div class="flex items-center space-x-2 text-blue-100">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zM21 5a2 2 0 00-2-2h-4a2 2 0 00-2 2v12a4 4 0 004 4h4a2 2 0 002-2V5z"></path>
</svg>
<span class="text-sm">Responsive design</span>
</div>
</div>
</div>
<a href="db/login.php" class="btn-primary hidden md:inline-flex items-center space-x-2 animate-bounce-in" style="animation-delay: 0.6s;">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
</svg>
<span>Manage</span>
</a>
</div>
</div>
</div>
<!-- Mobile manage button -->
<div class="md:hidden absolute top-4 right-4 z-20">
<a href="db/login.php" class="btn-primary text-sm px-4 py-2">
Manage
</a>
</div>
</header>
<!-- Main content -->
<main class="container mx-auto px-4 pb-20">
<!-- Projects grid with enhanced styling -->
<div id="projects" class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 stagger-animation"></div>
</main>
<!-- Enhanced footer -->
<footer class="bg-gray-50 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700 mt-20">
<div class="container mx-auto px-4 py-8">
<div class="text-center text-gray-600 dark:text-gray-400">
<p>&copy; 2025 School Projects Portfolio. Built with modern web technologies.</p>
<!--<div class="mt-4 flex justify-center space-x-6">
<a href="php/test_db.php" class="text-sm text-blue-600 dark:text-blue-400 hover:underline transition-colors">Test DB Connection</a>
<a href="php/phpinfo.php" class="text-sm text-blue-600 dark:text-blue-400 hover:underline transition-colors">PHP Info</a>
</div>-->
</div>
</div>
</footer>
<!-- Scripts -->
<script src="js/main.js"></script>
<script src="js/dark-mode.js"></script>
<!-- Ensure dark mode works -->
<script>
// Force dark mode initialization
setTimeout(() => {
if (typeof initDarkMode === 'function') {
initDarkMode();
} else {
console.error('initDarkMode function not found');
}
}, 500);
</script>
</body>
</html>

143
projects/challenge 11/portifolio(work_in_progress)/js/dark-mode.js Normal file
View File

@@ -0,0 +1,143 @@
// Dark mode functionality with enhanced animations
function initDarkMode() {
// Check for saved theme preference or use system preference
const savedTheme = localStorage.getItem('theme');
const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
if (savedTheme === 'dark' || (!savedTheme && systemPrefersDark)) {
document.documentElement.classList.add('dark');
} else {
}
// Remove existing toggle button if it exists
const existingButton = document.getElementById('theme-toggle');
if (existingButton) {
existingButton.remove();
}
// Create and add the theme toggle button with fallback styling
const toggleButton = document.createElement('button');
toggleButton.id = 'theme-toggle';
toggleButton.setAttribute('aria-label', 'Toggle dark mode');
// Use inline styles as fallback
const isDark = document.documentElement.classList.contains('dark');
toggleButton.style.cssText = `
position: fixed;
bottom: 1rem;
left: 1rem;
z-index: 9999;
background: ${isDark ? '#334155' : '#ffffff'};
border: 2px solid ${isDark ? '#475569' : '#e2e8f0'};
border-radius: 50%;
padding: 0.75rem;
box-shadow: 0 4px 12px ${isDark ? 'rgba(0,0,0,0.3)' : 'rgba(0,0,0,0.1)'};
transition: all 0.3s ease;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
`;
toggleButton.innerHTML = `
<svg class="w-6 h-6 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="color: ${isDark ? '#f1f5f9' : '#1e293b'}">
<path class="sun-icon" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
<path class="moon-icon" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" style="display: ${isDark ? 'block' : 'none'}" />
</svg>
`;
document.body.appendChild(toggleButton);
// Add click handler with enhanced animation
toggleButton.addEventListener('click', () => {
// Add click animation
toggleButton.style.transform = 'scale(0.9)';
setTimeout(() => {
toggleButton.style.transform = '';
}, 150);
// Toggle theme
const newIsDark = document.documentElement.classList.toggle('dark');
localStorage.setItem('theme', newIsDark ? 'dark' : 'light');
// Update button styles
toggleButton.style.background = newIsDark ? '#334155' : '#ffffff';
toggleButton.style.borderColor = newIsDark ? '#475569' : '#e2e8f0';
toggleButton.style.boxShadow = newIsDark ? '0 4px 12px rgba(0,0,0,0.3)' : '0 4px 12px rgba(0,0,0,0.1)';
const svg = toggleButton.querySelector('svg');
svg.style.color = newIsDark ? '#f1f5f9' : '#1e293b';
const sunIcon = toggleButton.querySelector('.sun-icon');
const moonIcon = toggleButton.querySelector('.moon-icon');
if (newIsDark) {
sunIcon.style.display = 'none';
moonIcon.style.display = 'block';
} else {
sunIcon.style.display = 'block';
moonIcon.style.display = 'none';
}
// Add theme transition effect
addThemeTransitionEffect();
});
// Listen for system theme changes
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
if (!localStorage.getItem('theme')) {
if (e.matches) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
}
});
}
function addThemeTransitionEffect() {
// Create a temporary overlay for smooth transition
const overlay = document.createElement('div');
overlay.style.cssText = `
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: ${document.documentElement.classList.contains('dark') ? '#0f172a' : '#ffffff'};
z-index: 9998;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
`;
document.body.appendChild(overlay);
// Fade in and out
requestAnimationFrame(() => {
overlay.style.opacity = '0.1';
setTimeout(() => {
overlay.style.opacity = '0';
setTimeout(() => {
if (document.body.contains(overlay)) {
document.body.removeChild(overlay);
}
}, 300);
}, 150);
});
}
// Initialize dark mode when the DOM is loaded
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initDarkMode);
} else {
// DOM is already loaded
initDarkMode();
}
// Also try to initialize after a short delay to ensure everything is ready
setTimeout(initDarkMode, 100);

188
projects/challenge 11/portifolio(work_in_progress)/js/main.js Normal file
View File

@@ -0,0 +1,188 @@
document.addEventListener('DOMContentLoaded', () => {
const container = document.getElementById('projects');
// Add loading state with enhanced spinner
container.innerHTML = '<div class="col-span-full text-center p-8"><div class="spinner mx-auto mb-4"></div><p class="text-gray-500 dark:text-gray-400">Loading projects...</p></div>';
// Create modal element with enhanced styling
const modal = document.createElement('div');
modal.className = 'modal-overlay fixed inset-0 hidden items-center justify-center z-50 transition-opacity duration-300';
modal.innerHTML = `
<div class="modal-content max-w-4xl w-full mx-4 max-h-[90vh] overflow-y-auto transform transition-all duration-300 scale-95 opacity-0">
<div class="p-8">
<div class="flex justify-between items-start mb-6">
<h2 class="text-3xl font-bold"></h2>
<button class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700" onclick="closeModal()">
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<div class="modal-content">
<div class="modal-image mb-6"></div>
<div class="modal-description text-gray-700 dark:text-gray-300 mb-6 text-lg"></div>
<div class="modal-tags mb-6"></div>
<div class="modal-links"></div>
</div>
</div>
</div>
`;
document.body.appendChild(modal);
// Add modal functions to window
window.openModal = (project) => {
const modalTitle = modal.querySelector('h2');
const modalImage = modal.querySelector('.modal-image');
const modalDescription = modal.querySelector('.modal-description');
const modalTags = modal.querySelector('.modal-tags');
const modalLinks = modal.querySelector('.modal-links');
const modalContent = modal.querySelector('.modal-content');
modalTitle.textContent = project.title;
if (project.image_url) {
modalImage.innerHTML = `<img src="${project.image_url}" alt="${project.title}" class="project-image w-full h-96 object-cover shadow-lg">`;
} else {
modalImage.innerHTML = '<div class="w-full h-96 bg-gradient-to-br from-blue-100 to-purple-100 dark:from-blue-900 dark:to-purple-900 rounded-lg flex items-center justify-center"><svg class="w-24 h-24 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg></div>';
}
modalDescription.innerHTML = `
<p class="text-lg mb-4 leading-relaxed">${project.description || ''}</p>
${project.long_description ? `<p class="mt-6 leading-relaxed text-gray-600 dark:text-gray-400">${project.long_description}</p>` : ''}
`;
if (project.tags) {
modalTags.innerHTML = `
<div class="flex flex-wrap gap-2">
${project.tags.split(',').map(tag =>
`<span class="tag">${tag.trim()}</span>`
).join('')}
</div>
`;
} else {
modalTags.innerHTML = '';
}
modalLinks.innerHTML = project.project_url ?
`<a href="${project.project_url}" target="_blank" class="btn-primary inline-block">View Project →</a>` : '';
// Show modal with animation
modal.classList.remove('hidden');
modal.classList.add('flex');
document.body.style.overflow = 'hidden';
// Trigger animation
requestAnimationFrame(() => {
modalContent.classList.remove('scale-95', 'opacity-0');
modalContent.classList.add('scale-100', 'opacity-100');
});
};
window.closeModal = () => {
const modalContent = modal.querySelector('.modal-content');
// Start closing animation
modalContent.classList.remove('scale-100', 'opacity-100');
modalContent.classList.add('scale-95', 'opacity-0');
// Wait for animation to finish before hiding
setTimeout(() => {
modal.classList.add('hidden');
modal.classList.remove('flex');
document.body.style.overflow = '';
}, 300);
};
// Close modal when clicking outside
modal.addEventListener('click', (e) => {
if (e.target === modal) {
closeModal();
}
});
// Close modal with Escape key
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && !modal.classList.contains('hidden')) {
closeModal();
}
});
// Enhanced project fetching with error handling
fetch('php/get_projects.php')
.then(res => {
if (!res.ok) {
throw new Error(`HTTP error! status: ${res.status}`);
}
return res.json();
})
.then(projects => {
if (!Array.isArray(projects) || projects.length === 0) {
container.innerHTML = `
<div class="col-span-full text-center p-8">
<div class="w-24 h-24 mx-auto mb-4 text-gray-400">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
</svg>
</div>
<p class="text-gray-500 dark:text-gray-400 text-lg">No projects found.</p>
<p class="text-sm text-gray-400 dark:text-gray-500 mt-2">Projects will appear here once added.</p>
</div>`;
return;
}
container.innerHTML = '';
// Add projects with CSS animations
projects.forEach((project) => {
const card = document.createElement('div');
card.className = 'project-card p-5 flex flex-col cursor-pointer hover-lift';
card.onclick = () => openModal(project);
if (project.image_url) {
card.innerHTML += `<img src="${project.image_url}" alt="${project.title}" class="project-image mb-4 h-40 object-cover w-full">`;
} else {
card.innerHTML += `<div class="project-image mb-4 h-40 bg-gradient-to-br from-blue-100 to-purple-100 dark:from-blue-900 dark:to-purple-900 rounded-lg flex items-center justify-center"><svg class="w-16 h-16 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg></div>`;
}
card.innerHTML += `
<h2 class="text-xl font-semibold mb-2">${project.title}</h2>
<p class="text-gray-700 dark:text-gray-300 mb-3 flex-grow">${project.description || ''}</p>
${project.tags ? `<div class="mb-3 flex flex-wrap gap-1">${project.tags.split(',').map(tag => `<span class="tag text-xs">${tag.trim()}</span>`).join('')}</div>` : ''}
${project.project_url ? `<a href="${project.project_url}" target="_blank" class="mt-auto inline-block text-blue-600 dark:text-blue-400 hover:underline font-medium transition-colors" onclick="event.stopPropagation()">View Project →</a>` : ''}
`;
container.appendChild(card);
});
})
.catch(err => {
console.error('Error fetching projects:', err);
container.innerHTML = `
<div class="col-span-full text-center p-8">
<div class="w-24 h-24 mx-auto mb-4 text-red-400">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<p class="text-red-500 dark:text-red-400 mb-2 text-lg">Failed to load projects.</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Error: ${err.message}</p>
<button onclick="location.reload()" class="btn-primary mt-4">Try Again</button>
</div>`;
});
});
// Add fadeInUp animation
const style = document.createElement('style');
style.textContent = `
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
`;
document.head.appendChild(style);

18
projects/challenge 11/portifolio(work_in_progress)/php/config.php Normal file
View File

@@ -0,0 +1,18 @@
<?php
// config.php
$host = '100.125.62.25'; // Change if your MySQL server is elsewhere
$db = 'portfolio'; // Change to your database name
$user = 'portifolio'; // Change to your MySQL username
$pass = 'S](L8WpeW_(EGyBP'; // Change to your MySQL password
$charset = 'utf8mb4';
$dsn = "mysql:host=$host;dbname=$db;charset=$charset";
$options = [
PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
PDO::ATTR_EMULATE_PREPARES => false,
];
function get_pdo() {
global $dsn, $user, $pass, $options;
return new PDO($dsn, $user, $pass, $options);
}

21
projects/challenge 11/portifolio(work_in_progress)/php/get_projects.php Normal file
View File

@@ -0,0 +1,21 @@
<?php
// Enable error reporting
error_reporting(E_ALL);
ini_set('display_errors', 1);
// Add CORS headers
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET');
header('Content-Type: application/json');
require_once 'config.php';
try {
$pdo = get_pdo();
$stmt = $pdo->query('SELECT id, title, description, long_description, image_url, project_url, tags, created_at FROM projects ORDER BY created_at DESC');
$projects = $stmt->fetchAll(PDO::FETCH_ASSOC);
echo json_encode($projects);
} catch (Exception $e) {
http_response_code(500);
echo json_encode(['error' => $e->getMessage()]);
}

1
projects/challenge 11/portifolio(work_in_progress)/php/phpinfo.php Normal file
View File

@@ -0,0 +1 @@
<?php phpinfo();

17
projects/challenge 11/portifolio(work_in_progress)/php/test_db.php Normal file
View File

@@ -0,0 +1,17 @@
<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);
require_once 'config.php';
try {
$pdo = get_pdo();
echo "Database connection successful!<br>";
// Test query
$stmt = $pdo->query('SELECT COUNT(*) as count FROM projects');
$result = $stmt->fetch();
echo "Number of projects in database: " . $result['count'];
} catch (Exception $e) {
echo "Error: " . $e->getMessage();
}

160
projects/challenge 11/portifolio(work_in_progress)/robots.txt Normal file
View File

@@ -0,0 +1,160 @@
# Allow all well-behaved bots
User-agent: *
Disallow:
# Block specific bots
User-agent: AI2Bot
Disallow: /db
User-agent: Ai2Bot-Dolma
Disallow: /db
User-agent: aiHitBot
Disallow: /db
User-agent: Amazonbot
Disallow: /db
User-agent: anthropic-ai
Disallow: /db
User-agent: Applebot
Disallow: /db
User-agent: Applebot-Extended
Disallow: /db
User-agent: Brightbot 1.0
Disallow: /db
User-agent: Bytespider
Disallow: /db
User-agent: CCBot
Disallow: /db
User-agent: ChatGPT-User
Disallow: /db
User-agent: Claude-Web
Disallow: /db
User-agent: ClaudeBot
Disallow: /db
User-agent: cohere-ai
Disallow: /db
User-agent: cohere-training-data-crawler
Disallow: /db
User-agent: Cotoyogi
Disallow: /db
User-agent: Crawlspace
Disallow: /db
User-agent: Diffbot
Disallow: /db
User-agent: DuckAssistBot
Disallow: /db
User-agent: FacebookBot
Disallow: /db
User-agent: Factset_spyderbot
Disallow: /db
User-agent: FirecrawlAgent
Disallow: /db
User-agent: FriendlyCrawler
Disallow: /db
User-agent: GPTBot
Disallow: /db
User-agent: iaskspider/2.0
Disallow: /db
User-agent: ICC-Crawler
Disallow: /db
User-agent: ImagesiftBot
Disallow: /db
User-agent: img2dataset
Disallow: /db
User-agent: imgproxy
Disallow: /db
User-agent: ISSCyberRiskCrawler
Disallow: /db
User-agent: Kangaroo Bot
Disallow: /db
User-agent: Meta-ExternalAgent
Disallow: /db
User-agent: Meta-ExternalFetcher
Disallow: /db
User-agent: NovaAct
Disallow: /db
User-agent: OAI-SearchBot
Disallow: /db
User-agent: omgili
Disallow: /db
User-agent: omgilibot
Disallow: /db
User-agent: Operator
Disallow: /db
User-agent: PanguBot
Disallow: /db
User-agent: Perplexity-User
Disallow: /db
User-agent: PerplexityBot
Disallow: /db
User-agent: PetalBot
Disallow: /db
User-agent: Scrapy
Disallow: /db
User-agent: SemrushBot-OCOB
Disallow: /db
User-agent: SemrushBot-SWA
Disallow: /db
User-agent: Sidetrade indexer bot
Disallow: /db
User-agent: TikTokSpider
Disallow: /db
User-agent: Timpibot
Disallow: /db
User-agent: VelenPublicWebCrawler
Disallow: /db
User-agent: Webzio-Extended
Disallow: /db
User-agent: YouBot
Disallow: /db
# Sitemap location
Sitemap: https://alvnx.xyz/sitemap.xml