Skip to content

Instantly share code, notes, and snippets.

@thinkphp

thinkphp/gist:e22f74c595d25a90d47f98e76b27f79f

Created August 16, 2025 20:24
Show Gist options
  • Save thinkphp/e22f74c595d25a90d47f98e76b27f79f to your computer and use it in GitHub Desktop.
Save thinkphp/e22f74c595d25a90d47f98e76b27f79f to your computer and use it in GitHub Desktop.
Download ZIP
codul Manager Gallery
Raw
gistfile1.txt
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Add to Gallery</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 20px;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
overflow: hidden;
}
.header {
background: linear-gradient(135deg, #ff6b6b, #ee5a24);
color: white;
padding: 30px;
text-align: center;
}
.header h1 {
font-size: 2.5rem;
margin-bottom: 10px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.header p {
font-size: 1.1rem;
opacity: 0.9;
}
.form-container {
padding: 40px;
}
.form-group {
margin-bottom: 25px;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #333;
font-size: 1.1rem;
}
.form-group input,
.form-group textarea,
.form-group select {
width: 100%;
padding: 15px;
border: 2px solid #e1e8ed;
border-radius: 10px;
font-size: 16px;
transition: all 0.3s ease;
background: #f8f9fa;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
transform: translateY(-2px);
}
.form-group textarea {
resize: vertical;
min-height: 120px;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.file-upload {
position: relative;
display: inline-block;
width: 100%;
}
.file-upload input[type=file] {
opacity: 0;
position: absolute;
z-index: -1;
}
.file-upload-label {
display: block;
padding: 15px;
border: 2px dashed #667eea;
border-radius: 10px;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
background: #f8f9fa;
}
.file-upload-label:hover {
background: #e3f2fd;
border-color: #2196F3;
}
.file-upload-label i {
font-size: 2rem;
color: #667eea;
margin-bottom: 10px;
display: block;
}
.submit-btn {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
padding: 18px 40px;
border: none;
border-radius: 50px;
font-size: 1.2rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
width: 100%;
margin-top: 20px;
text-transform: uppercase;
letter-spacing: 1px;
}
.submit-btn:hover {
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
}
.submit-btn:active {
transform: translateY(-1px);
}
.success-message, .error-message {
padding: 15px;
border-radius: 10px;
margin-bottom: 20px;
font-weight: 600;
}
.success-message {
background: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.error-message {
background: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
@media (max-width: 768px) {
.form-row {
grid-template-columns: 1fr;
}
.container {
margin: 10px;
}
.form-container {
padding: 20px;
}
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
<div class="container">
<div class="header">
<h1><i class="fas fa-palette"></i> Gallery Manager</h1>
<p>Add beautiful artworks to your collection</p>
</div>
<div class="form-container">
<?php
$host = 'localhost';
$username = 'lizard';
$password = "adidas88";
$database_name = 'gallery_database';
$message = '';
$messageType = '';
// Process form submission
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
try {
$mysqli = new mysqli($host, $username, $password, $database_name);
if ($mysqli->connect_error) {
throw new Exception('Connection failed: ' . $mysqli->connect_error);
}
$mysqli->set_charset('utf8');
// Get form data
$filename = $_POST['filename'] ?? '';
$title = $_POST['title'] ?? '';
$size = $_POST['size'] ?? '';
$price = "£". $_POST['price'] ?? '';
$caption = $_POST['caption'] ?? '';
// Validate required fields
if (empty($filename) || empty($title) || empty($size) || empty($price)) {
throw new Exception('Please fill in all required fields.');
}
// Prepare and execute insert statement
$stmt = $mysqli->prepare("INSERT INTO gallery (filename, title, size, price, caption) VALUES (?, ?, ?, ?, ?)");
if (!$stmt) {
throw new Exception('Prepare failed: ' . $mysqli->error);
}
$stmt->bind_param("sssss", $filename, $title, $size, $price, $caption);
if ($stmt->execute()) {
$message = "Gallery item added successfully! ID: " . $mysqli->insert_id;
$messageType = 'success';
// Clear form data after successful submission
$_POST = [];
} else {
throw new Exception('Error adding gallery item: ' . $stmt->error);
}
$stmt->close();
$mysqli->close();
} catch(Exception $e) {
$message = $e->getMessage();
$messageType = 'error';
}
}
// Display message
if (!empty($message)) {
echo "<div class='{$messageType}-message'>";
echo "<i class='fas " . ($messageType == 'success' ? 'fa-check-circle' : 'fa-exclamation-triangle') . "'></i> ";
echo htmlspecialchars($message);
echo "</div>";
}
?>
<form method="POST" action="" enctype="multipart/form-data">
<div class="form-group">
<label for="filename">
<i class="fas fa-image"></i> Filename *
</label>
<input type="text"
id="filename"
name="filename"
placeholder="e.g., painting_001.jpg"
value="<?php echo htmlspecialchars($_POST['filename'] ?? ''); ?>"
required>
</div>
<div class="form-group">
<label for="title">
<i class="fas fa-heading"></i> Artwork Title *
</label>
<input type="text"
id="title"
name="title"
placeholder="e.g., Sunset Over Mountains"
value="<?php echo htmlspecialchars($_POST['title'] ?? ''); ?>"
required>
</div>
<div class="form-row">
<div class="form-group">
<label for="size">
<i class="fas fa-expand-arrows-alt"></i> Size *
</label>
<input type="text"
id="size"
name="size"
placeholder="e.g., 500x500"
value="<?php echo htmlspecialchars($_POST['size'] ?? ''); ?>"
required>
</div>
<div class="form-group">
<label for="price">
<i class="fas fa-pound-sign"></i> Price *
</label>
<input type="text"
id="price"
name="price"
placeholder="e.g., £150"
value="<?php echo htmlspecialchars($_POST['price'] ?? ''); ?>"
required>
</div>
</div>
<div class="form-group">
<label for="caption">
<i class="fas fa-comment-alt"></i> Caption/Description
</label>
<textarea id="caption"
name="caption"
placeholder="e.g., Painting by RogerFox Code 12345678"
rows="4"><?php echo htmlspecialchars($_POST['caption'] ?? ''); ?></textarea>
</div>
<button type="submit" class="submit-btn">
<i class="fas fa-plus-circle"></i> Add to Gallery
</button>
</form>
<div style="margin-top: 40px; padding-top: 30px; border-top: 2px solid #eee; text-align: center;">
<p style="color: #666; font-size: 0.9rem;">
<i class="fas fa-info-circle"></i>
Fields marked with * are required
</p>
</div>
</div>
</div>
<script>
// Add some interactive effects
document.addEventListener('DOMContentLoaded', function() {
const inputs = document.querySelectorAll('input, textarea, select');
inputs.forEach(input => {
input.addEventListener('focus', function() {
this.parentElement.style.transform = 'scale(1.02)';
});
input.addEventListener('blur', function() {
this.parentElement.style.transform = 'scale(1)';
});
});
// Auto-hide success/error messages after 5 seconds
const messages = document.querySelectorAll('.success-message, .error-message');
messages.forEach(message => {
setTimeout(() => {
message.style.opacity = '0';
message.style.transform = 'translateY(-20px)';
setTimeout(() => {
message.style.display = 'none';
}, 300);
}, 5000);
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment