Home

w21gm

Favorites

7 Views

0 Likes

0 Dislikes

Description

TEST

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>StudioPro – Video Production Management</title>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css”>
<style>
:root {
–primary: #6a3093;
–secondary: #f9f5ff;
–accent1: #a044ff;
–accent2: #4a00e0;
–dark: #2c0039;
–light: #fdfcff;
–gray: #7b7b7b;
–light-gray: #e6e6e6;
–success: #38b000;
–warning: #ffbe0b;
–danger: #ff006e;
–available: #9d4edd;
–in-use: #ff6d00;
–maintenance: #5a189a;
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: ‘Poppins’, ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
}

body {
background-color: #f8f5ff;
color: var(–dark);
line-height: 1.6;
}

.container {
max-width: 1400px;
margin: 0 auto;
padding: 20px;
}

header {
background: linear-gradient(135deg, var(–primary), var(–accent2));
color: white;
padding: 20px;
border-radius: 10px;
margin-bottom: 30px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.header-content {
display: flex;
justify-content: space-between;
align-items: center;
}

.logo {
font-size: 28px;
font-weight: 700;
display: flex;
align-items: center;
}

.logo i {
margin-right: 10px;
}

.user-info {
display: flex;
align-items: center;
gap: 15px;
}

.user-avatar {
width: 45px;
height: 45px;
border-radius: 50%;
background-color: white;
display: flex;
align-items: center;
justify-content: center;
color: var(–primary);
font-weight: bold;
font-size: 20px;
}

.dashboard {
display: grid;
grid-template-columns: 300px 1fr;
gap: 25px;
}

.sidebar {
background-color: white;
border-radius: 10px;
padding: 25px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.nav-item {
display: flex;
align-items: center;
padding: 15px;
margin-bottom: 10px;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s;
}

.nav-item:hover, .nav-item.active {
background-color: var(–secondary);
color: var(–primary);
}

.nav-item i {
margin-right: 10px;
font-size: 20px;
}

.stats {
background: linear-gradient(135deg, var(–accent2), var(–dark));
color: white;
border-radius: 10px;
padding: 20px;
margin-top: 20px;
}

.stat-item {
display: flex;
justify-content: space-between;
margin-bottom: 15px;
}

.main-content {
background-color: white;
border-radius: 10px;
padding: 25px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.content-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 25px;
padding-bottom: 15px;
border-bottom: 2px solid var(–light-gray);
}

.view-options {
display: flex;
gap: 10px;
}

.view-options button {
padding: 8px 15px;
background-color: var(–light);
border: 1px solid var(–light-gray);
border-radius: 5px;
cursor: pointer;
transition: all 0.3s;
}

.view-options button.active {
background-color: var(–primary);
color: white;
}

.studio-layout {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-bottom: 30px;
}

.control-room {
grid-column: 1 / 4;
background: linear-gradient(135deg, var(–accent1), var(–primary));
color: white;
padding: 20px;
border-radius: 8px;
text-align: center;
margin-bottom: 20px;
}

.equipment-item {
background-color: var(–light);
border-radius: 8px;
padding: 15px;
text-align: center;
position: relative;
transition: transform 0.3s, box-shadow 0.3s;
cursor: pointer;
min-height: 200px;
display: flex;
flex-direction: column;
justify-content: space-between;
}

.equipment-item:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.equipment-item.available {
border-left: 5px solid var(–available);
}

.equipment-item.in-use {
border-left: 5px solid var(–in-use);
}

.equipment-item.maintenance {
border-left: 5px solid var(–maintenance);
opacity: 0.7;
}

.equipment-name {
font-size: 18px;
font-weight: 700;
margin-bottom: 10px;
color: var(–dark);
}

.equipment-icon {
width: 60px;
height: 60px;
border-radius: 50%;
background: linear-gradient(135deg, var(–accent1), var(–primary));
margin: 0 auto 10px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 24px;
}

.equipment-specs {
color: var(–gray);
font-size: 13px;
margin-bottom: 10px;
}

.equipment-status {
display: inline-block;
padding: 5px 10px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
margin-bottom: 15px;
}

.status-available {
background-color: rgba(157, 78, 221, 0.2);
color: var(–available);
}

.status-in-use {
background-color: rgba(255, 109, 0, 0.2);
color: var(–in-use);
}

.status-maintenance {
background-color: rgba(90, 24, 154, 0.2);
color: var(–maintenance);
}

.btn {
padding: 8px 15px;
border: none;
border-radius: 5px;
cursor: pointer;
font-weight: 600;
transition: all 0.3s;
}

.btn-primary {
background-color: var(–primary);
color: white;
}

.btn-primary:hover {
background-color: var(–accent2);
}

.equipment-details {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 15px;
}

.booking-info {
font-size: 13px;
color: var(–gray);
}

.tabs {
display: flex;
border-bottom: 2px solid var(–light-gray);
margin-bottom: 20px;
}

.tab {
padding: 10px 20px;
cursor: pointer;
transition: all 0.3s;
}

.tab.active {
border-bottom: 3px solid var(–primary);
color: var(–primary);
font-weight: 600;
}

.tab-content {
display: none;
}

.tab-content.active {
display: block;
}

.bookings-table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}

.bookings-table th, .bookings-table td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid var(–light-gray);
}

.bookings-table th {
background-color: var(–secondary);
color: var(–dark);
}

.bookings-table tr:hover {
background-color: rgba(160, 68, 255, 0.1);
}

.booking-status {
padding: 5px 10px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
}

.status-scheduled {
background-color: rgba(157, 78, 221, 0.2);
color: var(–available);
}

.status-in-progress {
background-color: rgba(255, 109, 0, 0.2);
color: var(–in-use);
}

.status-completed {
background-color: rgba(56, 176, 0, 0.2);
color: var(–success);
}

.status-cancelled {
background-color: rgba(255, 0, 110, 0.2);
color: var(–danger);
}

.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
justify-content: center;
align-items: center;
z-index: 1000;
}

.modal-content {
background-color: white;
padding: 30px;
border-radius: 10px;
width: 90%;
max-width: 500px;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
}

.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}

.close-modal {
font-size: 24px;
cursor: pointer;
color: var(–gray);
}

.form-group {
margin-bottom: 20px;
}

.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 500;
}

.form-group input, .form-group select, .form-group textarea {
width: 100%;
padding: 12px;
border: 1px solid var(–light-gray);
border-radius: 5px;
}

.btn-block {
width: 100%;
}

@media (max-width: 1200px) {
.studio-layout {
grid-template-columns: repeat(2, 1fr);
}
}

@media (max-width: 992px) {
.dashboard {
grid-template-columns: 1fr;
}

.studio-layout {
grid-template-columns: repeat(2, 1fr);
}
}

@media (max-width: 768px) {
.studio-layout {
grid-template-columns: 1fr;
}

.header-content {
flex-direction: column;
text-align: center;
gap: 15px;
}

.content-header {
flex-direction: column;
gap: 15px;
}

.view-options {
width: 100%;
justify-content: center;
}
}

@media (max-width: 576px) {
.bookings-table {
display: block;
overflow-x: auto;
}
}
</style>
</head>
<body>
<div class=”container”>
<header>
<div class=”header-content”>
<div class=”logo”>
<i class=”fas fa-video”></i>
StudioPro Manager
</div>
<div class=”user-info”>
<div class=”user-avatar”>PM</div>
<div>
<div>Production Manager</div>
<small>Creative Media Studio</small>
</div>
</div>
</div>
</header>

<div class=”dashboard”>
<div class=”sidebar”>
<h3>Navigation</h3>
<div class=”nav-item active”>
<i class=”fas fa-film”></i>
<span>Equipment Management</span>
</div>
<div class=”nav-item”>
<i class=”fas fa-calendar-check”></i>
<span>Bookings</span>
</div>
<div class=”nav-item”>
<i class=”fas fa-video”></i>
<span>Studio Spaces</span>
</div>
<div class=”nav-item”>
<i class=”fas fa-clipboard-list”></i>
<span>Projects</span>
</div>
<div class=”nav-item”>
<i class=”fas fa-chart-line”></i>
<span>Production Analytics</span>
</div>
<div class=”nav-item”>
<i class=”fas fa-cog”></i>
<span>Settings</span>
</div>

<div class=”stats”>
<h3>Today’s Stats</h3>
<div class=”stat-item”>
<span>Equipment Usage:</span>
<span>65%</span>
</div>
<div class=”stat-item”>
<span>Bookings:</span>
<span>8</span>
</div>
<div class=”stat-item”>
<span>Active Projects:</span>
<span>5</span>
</div>
<div class=”stat-item”>
<span>Revenue:</span>
<span>$3,450.00</span>
</div>
</div>
</div>

<div class=”main-content”>
<div class=”content-header”>
<h2>Production Equipment Management</h2>
<div class=”view-options”>
<button class=”active”>Equipment View</button>
<button>Calendar View</button>
<button class=”btn btn-primary” id=”addEquipmentBtn”>
<i class=”fas fa-plus”></i> Add Equipment
</button>
</div>
</div>

<div class=”tabs”>
<div class=”tab active” data-tab=”all-equipment”>All Equipment</div>
<div class=”tab” data-tab=”available”>Available</div>
<div class=”tab” data-tab=”in-use”>In Use</div>
<div class=”tab” data-tab=”studios”>Studio Spaces</div>
</div>

<div class=”tab-container”>
<div class=”tab-content active” id=”all-equipment-content”>
<div class=”control-room”>
<i class=”fas fa-sliders-h”></i>
<h3>Control Room</h3>
<p>Main Production Control Center</p>
</div>

<div class=”studio-layout”>
<!– Camera 1 –>
<div class=”equipment-item in-use”>
<div>
<div class=”equipment-name”>RED Komodo 6K</div>
<div class=”equipment-icon”><i class=”fas fa-video”></i></div>
<div class=”equipment-specs”>Cinema Camera • 6K Super 35mm</div>
<div class=”equipment-status status-in-use”>In Use</div>
</div>
<div class=”equipment-details”>
<div class=”booking-info”>Project: Commercial Shoot<br>Time: 9:00 AM – 5:00 PM</div>
<button class=”btn btn-primary”>Details</button>
</div>
</div>

<!– Camera 2 –>
<div class=”equipment-item available”>
<div>
<div class=”equipment-name”>Sony FX6</div>
<div class=”equipment-icon”><i class=”fas fa-video”></i></div>
<div class=”equipment-specs”>Cinema Camera • 4K Full Frame</div>
<div class=”equipment-status status-available”>Available</div>
</div>
<div class=”equipment-details”>
<div class=”booking-info”>Next available: Now</div>
<button class=”btn btn-primary”>Book</button>
</div>
</div>

<!– Lens 1 –>
<div class=”equipment-item in-use”>
<div>
<div class=”equipment-name”>Canon Cine-Servo</div>
<div class=”equipment-icon”><i class=”fas fa-camera”></i></div>
<div class=”equipment-specs”>Zoom Lens • 17-120mm T2.95</div>
<div class=”equipment-status status-in-use”>In Use</div>
</div>
<div class=”equipment-details”>
<div class=”booking-info”>With RED Komodo<br>Time: 9:00 AM – 5:00 PM</div>
<button class=”btn btn-primary”>Details</button>
</div>
</div>

<!– Audio Equipment –>
<div class=”equipment-item available”>
<div>
<div class=”equipment-name”>Sound Devices MixPre-6</div>
<div class=”equipment-icon”><i class=”fas fa-microphone”></i></div>
<div class=”equipment-specs”>Audio Recorder • 6-Track</div>
<div class=”equipment-status status-available”>Available</div>
</div>
<div class=”equipment-details”>
<div class=”booking-info”>Next available: Now</div>
<button class=”btn btn-primary”>Book</button>
</div>
</div>

<!– Lighting –>
<div class=”equipment-item maintenance”>
<div>
<div class=”equipment-name”>Aputure 600D Pro</div>
<div class=”equipment-icon”><i class=”fas fa-lightbulb”></i></div>
<div class=”equipment-specs”>LED Light • 600W</div>
<div class=”equipment-status status-maintenance”>Maintenance</div>
</div>
<div class=”equipment-details”>
<div class=”booking-info”>Scheduled repair</div>
<button class=”btn btn-primary”>Details</button>
</div>
</div>

<!– Gimbal –>
<div class=”equipment-item available”>
<div>
<div class=”equipment-name”>DJI Ronin 4D</div>
<div class=”equipment-icon”><i class=”fas fa-camera-retro”></i></div>
<div class=”equipment-specs”>Stabilization System • 6K</div>
<div class=”equipment-status status-available”>Available</div>
</div>
<div class=”equipment-details”>
<div class=”booking-info”>Next available: Now</div>
<button class=”btn btn-primary”>Book</button>
</div>
</div>
</div>
</div>

<div class=”tab-content” id=”available-content”>
<p>Available equipment would be displayed here.</p>
</div>

<div class=”tab-content” id=”in-use-content”>
<p>Equipment currently in use would be displayed here.</p>
</div>

<div class=”tab-content” id=”studios-content”>
<div class=”studio-layout”>
<!– Studio A –>
<div class=”equipment-item in-use”>
<div>
<div class=”equipment-name”>Studio A</div>
<div class=”equipment-icon”><i class=”fas fa-photo-video”></i></div>
<div class=”equipment-specs”>Main Stage • 1200 sq ft • Cyc Wall</div>
<div class=”equipment-status status-in-use”>In Use</div>
</div>
<div class=”equipment-details”>
<div class=”booking-info”>Project: Commercial Shoot<br>Time: 9:00 AM – 5:00 PM</div>
<button class=”btn btn-primary”>Details</button>
</div>
</div>

<!– Studio B –>
<div class=”equipment-item available”>
<div>
<div class=”equipment-name”>Studio B</div>
<div class=”equipment-icon”><i class=”fas fa-photo-video”></i></div>
<div class=”equipment-specs”>Interview Stage • 800 sq ft</div>
<div class=”equipment-status status-available”>Available</div>
</div>
<div class=”equipment-details”>
<div class=”booking-info”>Next available: Now</div>
<button class=”btn btn-primary”>Book</button>
</div>
</div>

<!– Editing Suite –>
<div class=”equipment-item in-use”>
<div>
<div class=”equipment-name”>Editing Suite 1</div>
<div class=”equipment-icon”><i class=”fas fa-desktop”></i></div>
<div class=”equipment-specs”>Mac Pro • 32″ 4K Display</div>
<div class=”equipment-status status-in-use”>In Use</div>
</div>
<div class=”equipment-details”>
<div class=”booking-info”>Editor: Michael<br>Time: 10:00 AM – 6:00 PM</div>
<button class=”btn btn-primary”>Details</button>
</div>
</div>
</div>
</div>
</div>

<div class=”content-header” style=”margin-top: 40px;”>
<h2>Today’s Bookings</h2>
<div class=”view-options”>
<button class=”active”>Today</button>
<button>This Week</button>
<button>This Month</button>
</div>
</div>

<table class=”bookings-table”>
<thead>
<tr>
<th>Booking ID</th>
<th>Client</th>
<th>Project</th>
<th>Equipment/Studio</th>
<th>Time</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>#BK-5045</td>
<td>NexGen Media</td>
<td>Product Commercial</td>
<td>Studio A, RED Komodo</td>
<td>9:00 AM – 5:00 PM</td>
<td><span class=”booking-status status-in-progress”>In Progress</span></td>
<td><button class=”btn btn-primary”>View</button></td>
</tr>
<tr>
<td>#BK-5046</td>
<td>TechVision</td>
<td>Interview Series</td>
<td>Studio B, Sony FX6</td>
<td>2:00 PM – 4:00 PM</td>
<td><span class=”booking-status status-scheduled”>Scheduled</span></td>
<td><button class=”btn btn-primary”>View</button></td>
</tr>
<tr>
<td>#BK-5047</td>
<td>Creative Minds</td>
<td>Documentary</td>
<td>DJI Ronin 4D, Sound Devices</td>
<td>10:00 AM – 4:00 PM</td>
<td><span class=”booking-status status-scheduled”>Scheduled</span></td>
<td><button class=”btn btn-primary”>View</button></td>
</tr>
<tr>
<td>#BK-5048</td>
<td>Visionary Films</td>
<td>Short Film</td>
<td>Editing Suite 1</td>
<td>10:00 AM – 6:00 PM</td>
<td><span class=”booking-status status-in-progress”>In Progress</span></td>
<td><button class=”btn btn-primary”>View</button></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

<!– Add Equipment Modal –>
<div class=”modal” id=”addEquipmentModal”>
<div class=”modal-content”>
<div class=”modal-header”>
<h3>Add New Equipment</h3>
<span class=”close-modal”>×</span>
</div>
<form id=”addEquipmentForm”>
<div class=”form-group”>
<label for=”equipmentName”>Equipment Name</label>
<input type=”text” id=”equipmentName” placeholder=”e.g., Sony FX6″ required>
</div>
<div class=”form-group”>
<label for=”equipmentType”>Equipment Type</label>
<select id=”equipmentType” required>
<option value=”camera”>Camera</option>
<option value=”lens”>Lens</option>
<option value=”audio”>Audio Equipment</option>
<option value=”lighting”>Lighting</option>
<option value=”support”>Support Equipment</option>
<option value=”other”>Other</option>
</select>
</div>
<div class=”form-group”>
<label for=”equipmentSpecs”>Specifications</label>
<textarea id=”equipmentSpecs” placeholder=”Enter equipment specifications…”></textarea>
</div>
<div class=”form-group”>
<label for=”equipmentStatus”>Status</label>
<select id=”equipmentStatus” required>
<option value=”available”>Available</option>
<option value=”maintenance”>Maintenance</option>
<option value=”reserved”>Reserved</option>
</select>
</div>
<button type=”submit” class=”btn btn-primary btn-block”>Add Equipment</button>
</form>
</div>
</div>

addEquipmentBtn.addEventListener(‘click’, () => {
addEquipmentModal.style.display = ‘flex’;
});

closeModal.addEventListener(‘click’, () => {
addEquipmentModal.style.display = ‘none’;
});

window.addEventListener(‘click’, (e) => {
if (e.target === addEquipmentModal) {
addEquipmentModal.style.display = ‘none’;
}
});

// Form submission
document.getElementById(‘addEquipmentForm’).addEventListener(‘submit’, function(e) {
e.preventDefault();
alert(‘Equipment added successfully!’);
addEquipmentModal.style.display = ‘none’;
});

// Tab functionality
const tabs = document.querySelectorAll(‘.tab’);
const tabContents = document.querySelectorAll(‘.tab-content’);

tabs.forEach(tab => {
tab.addEventListener(‘click’, () => {
const tabId = tab.getAttribute(‘data-tab’);

// Remove active class from all tabs and contents
tabs.forEach(t => t.classList.remove(‘active’));
tabContents.forEach(c => c.classList.remove(‘active’));

// Add active class to current tab and content
tab.classList.add(‘active’);
document.getElementById(`${tabId}-content`).classList.add(‘active’);
});
});

// Navigation items
const navItems = document.querySelectorAll(‘.nav-item’);
navItems.forEach(item => {
item.addEventListener(‘click’, () => {
navItems.forEach(i => i.classList.remove(‘active’));
item.classList.add(‘active’);
});
});

// Equipment click functionality
const equipmentItems = document.querySelectorAll(‘.equipment-item’);
equipmentItems.forEach(item => {
item.addEventListener(‘click’, () => {
const equipmentName = item.querySelector(‘.equipment-name’).textContent;
alert(`${equipmentName} clicked. Would you like to manage this equipment?`);
});
});
</script>
</body>
</html>

User Reviews

Be the first to write a review

Members Only

Upgrade Now

Example Video 2

33655 Views

Example Video 9

64774 Views

Example Video 3

47772 Views

Example Video 6

58127 Views