Public Components
Last components generated by our users
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AUM AI Chat</title>
<link href="https://cdn.jsdelivr.net/npm/daisyui@latest/dist/full.css" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<style>
/* Smooth scroll for chat area */
#chatMessages {
scroll-behavior: smooth;
display: flex;
flex-direction: column;
}
/* Typing Indicator Animation */
.typing-indicator {
display: flex;
align-items: center;
}
.typing-dot {
width: 8px;
height: 8px;
margin: 0 4px;
background-color: #666;
border-radius: 50%;
animation: typing 1.4s infinite ease-in-out;
}
.typing-dot:nth-child(1) {
animation-delay: 0s;
}
.typing-dot:nth-child(2) {
animation-delay: 0.2s;
}
.typing-dot:nth-child(3) {
animation-delay: 0.4s;
}
@keyframes typing {
0%,
100% {
opacity: 0.4;
transform: translateY(0);
}
50% {
opacity: 1;
transform: translateY(-4px);
}
}
/* Custom scrollbar */
#chatMessages::-webkit-scrollbar {
width: 8px;
}
#chatMessages::-webkit-scrollbar-track {
background: hsl(var(--b2));
}
#chatMessages::-webkit-scrollbar-thumb {
background: hsl(var(--p));
border-radius: 4px;
}
/* Custom scrollbar for attachments */
#attachmentsPreview::-webkit-scrollbar {
height: 6px;
}
#attachmentsPreview::-webkit-scrollbar-track {
background: hsl(var(--b2));
}
#attachmentsPreview::-webkit-scrollbar-thumb {
background: hsl(var(--b3));
border-radius: 10px;
}
.file-explorer-transition {
transition: all 0.3s ease-in-out;
}
.spotlight-backdrop {
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(10px);
}
.highlight {
background-color: yellow;
font-weight: bold;
}
.file-processing-overlay {
background: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(10px);
}
/* Ensure dark mode consistency */
body {
background-color: hsl(var(--b2));
color: hsl(var(--bc));
}
.chat-bubble:before{
inset-inline-start: 0rem !important;
}
</style>
</head>
<body class="h-screen flex overflow-hidden">
<!-- Sidebar -->
<!-- Sidebar with User Icon at Bottom -->
<div class="w-16 bg-base-200 flex flex-col justify-between py-4">
<!-- Top Icons -->
<div class="flex flex-col items-center space-y-4">
<!-- File Icon with Toggle Functionality -->
<button id="folderToggle" class="btn btn-ghost btn-square" aria-label="Files">
<i class="fas fa-folder text-xl"></i>
</button>
<!-- Search Icon -->
<button id="searchToggle" class="btn btn-ghost btn-square" aria-label="Search">
<i class="fas fa-search text-xl text-yellow-500"></i>
</button>
<!-- Tasks Icon -->
<button class="btn btn-ghost btn-square" aria-label="Tasks">
<i class="fas fa-tasks text-xl"></i>
</button>
<!-- Add New Folder Icon -->
<button id="addFolderBtn" class="btn btn-ghost btn-square" aria-label="Add Folder">
<i class="fas fa-plus text-xl"></i>
</button>
</div>
<!-- User Icon at Bottom -->
<div class="flex flex-col items-center space-y-4">
<!-- Theme Toggle -->
<button id="themeToggle" class="btn btn-ghost btn-square" aria-label="Toggle Theme">
<i class="fas fa-moon text-xl"></i>
</button>
<!-- User Profile -->
<div class="dropdown dropdown-top">
<div tabindex="0" role="button" class="btn btn-ghost btn-square">
<div class="avatar">
<div class="w-10 rounded-full">
<img src="https://api.dicebear.com/7.x/avataaars/svg?seed=custom" alt="User Avatar" />
</div>
</div>
</div>
<ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52 mb-2">
<li><a><i class="fas fa-user mr-2"></i>Profile</a></li>
<li><a><i class="fas fa-cog mr-2"></i>Settings</a></li>
<li><a class="text-error"><i class="fas fa-sign-out-alt mr-2"></i>Logout</a></li>
</ul>
</div>
</div>
</div>
<!-- Main Content Area with File Explorer -->
<div id="mainContent" class="flex w-full file-explorer-transition relative">
<!-- File Explorer Sidebar (Initially Hidden) -->
<div id="fileExplorer"
class="w-0 bg-base-100 border-r border-base-300 overflow-hidden file-explorer-transition">
<div class="p-4">
<h2 class="text-xl font-bold mb-4">File Explorer</h2>
<!-- Folder Structure -->
<ul class="menu bg-base-100 w-full p-0">
<li>
<details open>
<summary class="font-semibold">
<i class="fas fa-folder mr-2 text-yellow-500"></i>
Project Root
<span class="badge badge-sm ml-2">12 files</span>
</summary>
<ul>
<li>
<details>
<summary>
<i class="fas fa-folder mr-2 text-yellow-500"></i>
src
<span class="badge badge-sm ml-2">8 files</span>
</summary>
<ul>
<li>
<a>
<i class="fas fa-file mr-2 text-blue-500"></i>
index.js
<span class="text-xs text-gray-500 ml-2">(24 KB)</span>
</a>
</li>
</ul>
</details>
</li>
</ul>
</details>
</li>
</ul>
</div>
</div>
<div id="chatContainer" class="flex-1 bg-base-100 flex flex-col file-explorer-transition relative">
<!-- Chat Header -->
<div class="navbar bg-base-300">
<div class="flex-1">
<h1 class="text-xl font-bold">AUM - Your Secure Personal Assistant</h1>
</div>
</div>
<!-- Chat Messages Area -->
<div id="chatArea" class="flex-1 overflow-y-auto p-4 flex flex-col items-center justify-center space-y-6">
<!-- Initial Welcome State -->
<div id="welcomeState" class="text-center space-y-6 max-w-2xl">
<h2 class="text-3xl font-bold text-primary">Let's get some work done while you are gone.</h2>
</div>
</div>
<!-- Chat Messages Container -->
<div id="chatMessages" class="flex-1 overflow-y-auto p-4 space-y-4 bg-base-100">
<!-- Welcome Message -->
<!-- <div class="chat chat-start">
<div class="chat-image avatar">
<div
class="w-10 rounded-full bg-secondary text-secondary-content flex items-center justify-center">
<span>AI</span>
</div>
</div>
<div class="chat-bubble chat-bubble-secondary">
Hello! I'm your AI assistant. What project would you like to work on today?
</div>
</div> -->
</div>
<!-- Attachments Preview Section -->
<div id="attachmentsPreview"
class="mb-4 bg-base-200 p-2 rounded-lg overflow-x-auto whitespace-nowrap scroll-smooth hidden">
<div id="attachmentsContainer" class="inline-flex space-x-3">
<!-- Attachment items will be dynamically added here -->
</div>
</div>
<div class="p-4 bg-base-200">
<div class="join w-full">
<input id="messageInput" type="text" placeholder="What do you want to work on?"
class="input input-bordered join-item w-full" />
<input type="file" id="fileAttachmentInput" multiple class="hidden"
accept=".doc,.docx,.xls,.xlsx,.csv,.pdf,.txt" />
<button id="attachFileButton" class="btn btn-ghost join-item">
<i class="fas fa-paperclip"></i>
</button>
<button id="sendButton" class="btn btn-primary join-item" onclick="sendMessage()">Start</button>
</div>
</div>
<!-- Minimized Chat Window -->
<div id="minimizedChat" class="hidden fixed bottom-4 right-4 z-50">
<div class="card w-72 bg-base-100 shadow-xl">
<div class="card-body p-4">
<div class="flex justify-between items-center">
<h3 class="card-title text-sm">AI Chat</h3>
<button id="maximizeChat" class="btn btn-ghost btn-sm">
<i class="fas fa-expand"></i>
</button>
</div>
<div class="overflow-y-auto max-h-40">
<!-- Minimized chat content -->
</div>
</div>
</div>
</div>
</div>
<!-- Spotlight Search Overlay - Enhanced Version -->
<div id="spotlightSearchOverlay" class="fixed inset-0 bg-black bg-opacity-50 z-[100] hidden">
<div class="container mx-auto mt-20 max-w-2xl">
<div class="bg-white rounded-xl shadow-2xl overflow-hidden">
<!-- Search Input -->
<div class="p-4 border-b">
<div class="relative">
<input type="text" id="spotlightSearchInput" placeholder="Search files, add folders..."
class="w-full p-3 pl-10 text-xl border-none focus:outline-none rounded-lg" />
<i
class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
<!-- Loader (Right) - Initially Hidden -->
<div id="searchLoader" class="absolute right-3 top-1/2 transform -translate-y-1/2 hidden">
<i class="fas fa-spinner fa-spin text-gray-400"></i>
</div>
</div>
</div>
<div class="flex p-2 bg-gray-100 space-x-2 items-center justify-between">
<span id="search-hints">Enter at least four characters and press Enter</span>
<button id="continue-files"
class="bg-green-500 text-white px-4 py-2 rounded-lg shadow hover:bg-green-600 transition hidden">
Continue
</button>
</div>
<!-- Action Buttons -->
<!-- <div class="flex p-2 bg-gray-100 space-x-2">
<button id="addFolderAction" class="btn btn-ghost btn-sm">
<i class="fas fa-folder-plus mr-2"></i> Add Folder
</button>
<button id="createFileAction" class="btn btn-ghost btn-sm">
<i class="fas fa-file-medical mr-2"></i> Create File
</button>
</div> -->
<!-- Search Results -->
<div id="searchResultsContainer" class="max-h-[500px] overflow-y-auto">
<!-- Dynamic search results will be inserted here -->
</div>
</div>
</div>
</div>
</div>
<!-- Existing Modals and Scripts -->
<dialog id="folder_modal" class="modal">
<div class="modal-box">
<h3 class="font-bold text-lg">Select Folder</h3>
<div class="py-4">
<div class="form-control">
<label class="label">
<span class="label-text">Choose a folder from your local PC</span>
</label>
<input type="file" class="file-input file-input-bordered w-full" webkitdirectory directory
multiple />
</div>
</div>
<div class="modal-action">
<form method="dialog">
<button class="btn">Close</button>
<button class="btn btn-primary ml-2">Select</button>
</form>
</div>
</div>
</dialog>
<!-- Add Folder Modal -->
<dialog id="addFolderModal" class="modal">
<div class="modal-box w-11/12 max-w-5xl">
<h3 class="font-bold text-lg mb-4">Select Folders to Add</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4" id="folderSelectionGrid">
<!-- Folder selection items will be dynamically added here -->
<div class="folder-item cursor-pointer hover:bg-base-200 p-4 rounded-lg border">
<div class="flex items-center space-x-4">
<i class="fas fa-folder text-2xl text-yellow-500"></i>
<div>
<h4 class="font-semibold">Project Folder</h4>
<p class="text-sm text-gray-500">C:\Users\YourName\Projects</p>
</div>
<input type="checkbox" class="checkbox ml-auto" />
</div>
</div>
</div>
<div class="modal-action">
<form method="dialog" class="flex space-x-2">
<button class="btn btn-ghost">Cancel</button>
<button id="confirmFolderSelection" class="btn btn-primary">Add Selected Folders</button>
</form>
</div>
</div>
</dialog>
<!-- New File Processing Overlay -->
<div id="fileProcessingOverlay"
class="fixed inset-0 z-[200] file-processing-overlay hidden flex items-center justify-center">
<div class="card w-[500px] bg-base-100 shadow-2xl border border-base-300">
<div class="card-body items-center text-center space-y-4">
<h2 class="card-title text-2xl font-bold">Processing Files</h2>
<!-- Linear Progress Bar -->
<div class="w-full">
<progress id="fileProgressBar" class="progress progress-primary w-full" value="0"
max="100"></progress>
</div>
<!-- Detailed Processing Info -->
<div class="w-full flex justify-between text-sm">
<span id="fileProcessCount" class="text-base-content/70">0/0 Files</span>
<span id="processPercentage" class="text-base-content/70">0%</span>
</div>
<!-- Detailed Status -->
<div class="w-full bg-base-300 rounded-lg p-3">
<p id="processStatus" class="text-sm text-base-content/80">
Initializing file processing...
</p>
</div>
</div>
</div>
</div>
<!-- Success Completion Popup -->
<div id="processCompletionPopup" class="fixed inset-0 z-[250] bg-black/70 hidden flex items-center justify-center">
<div class="card w-[450px] bg-base-100 shadow-2xl border border-base-300">
<div class="card-body items-center text-center space-y-4">
<div class="text-success">
<i class="fas fa-check-circle text-7xl"></i>
</div>
<h2 class="card-title text-2xl">Processing Complete</h2>
<p id="completionDetails" class="text-base-content/70">
8 files processed successfully
</p>
<div class="card-actions w-full">
<button id="continueButton" class="btn btn-primary btn-block">
Continue
<i class="fas fa-arrow-right ml-2"></i>
</button>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
console.log('DOM fully loaded and parsed');
// Search Functionality
const searchToggle = document.getElementById('searchToggle');
const spotlightSearchInput = document.getElementById('spotlightSearchInput');
const searchResultsList = document.getElementById('searchResultsList');
const totalResultsCount = document.getElementById('totalResultsCount');
const addFolderBtn = document.getElementById('addFolderBtn');
const addFolderModal = document.getElementById('addFolderModal');
const confirmFolderSelection = document.getElementById('confirmFolderSelection');
const themeToggle = document.getElementById('themeToggle');
// Theme Toggle
themeToggle.addEventListener('click', () => {
const currentTheme = document.documentElement.getAttribute('data-theme');
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
document.documentElement.setAttribute('data-theme', newTheme);
// Toggle moon/sun icon
themeToggle.innerHTML = newTheme === 'dark'
? '<i class="fas fa-moon text-xl"></i>'
: '<i class="fas fa-sun text-xl"></i>';
});
// addFolderBtn.addEventListener('click', () => {
// addFolderModal.showModal();
// });
confirmFolderSelection.addEventListener('click', (e) => {
e.preventDefault();
const selectedFolders = document.querySelectorAll('#folderSelectionGrid .checkbox:checked');
if (selectedFolders.length > 0) {
// Logic to add selected folders
const folderNames = Array.from(selectedFolders).map(checkbox =>
checkbox.closest('.folder-item').querySelector('h4').textContent
);
// Confirm dialog
const confirmAdd = confirm(`Do you want to add ${folderNames.join(', ')} to your workspace?`);
if (confirmAdd) {
addFolderModal.close();
// Additional logic to process folder addition
}
}
});
// Close add folder when clicking outside or pressing Escape
addFolderModal.addEventListener('click', (e) => {
if (e.target === addFolderModal) {
addFolderModal.classList.add('hidden');
}
});
// Mock search data (replace with actual search implementation)
const mockSearchData = [
{
filename: 'index.js',
path: '/src/components/index.js',
matches: [
{
context: "This is a sample function in the index.js file that demonstrates how to use the search functionality with multiple text matches.",
lineNumber: 10
},
{
context: "Another match in the index.js file showing different search result scenarios.",
lineNumber: 25
}
]
},
{
filename: 'app.js',
path: '/src/app.js',
matches: [
{
context: "Main application logic for handling app-wide search and content management.",
lineNumber: 15
}
]
},
{
filename: 'utils.py',
path: '/src/utils.py',
matches: [
{
context: "Utility functions for searching and processing text data efficiently.",
lineNumber: 5
}
]
}
];
// spotlightSearchOverlay
const spotlightSearchOverlay = document.getElementById('spotlightSearchOverlay');
const searchResultsContainer = document.getElementById('searchResultsContainer');
// const addFolderAction = document.getElementById('addFolderAction');
// const createFileAction = document.getElementById('createFileAction');
// Toggle Spotlight Search
function toggleSpotlightSearch() {
spotlightSearchOverlay.classList.toggle('hidden');
if (!spotlightSearchOverlay.classList.contains('hidden')) {
spotlightSearchInput.focus();
}
}
// Additional Action Buttons
// addFolderAction.addEventListener('click', () => {
// // Trigger folder selection dialog
// document.getElementById('folder_modal').showModal();
// });
// createFileAction.addEventListener('click', () => {
// // Implement file creation logic
// alert('File creation functionality to be implemented');
// });
// spotlightSearchInput.addEventListener('input', (e) => {
// performSearch(e.target.value);
// });
searchToggle.addEventListener('click', toggleSpotlightSearch);
// Close spotlight search when clicking outside or pressing Escape
spotlightSearchOverlay.addEventListener('click', (e) => {
if (e.target === spotlightSearchOverlay) {
spotlightSearchOverlay.classList.add('hidden');
}
});
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {
spotlightSearchOverlay.classList.add('hidden');
addFolderModal.classList.add('hidden');
}
});
// Close on clicking outside
spotlightSearchOverlay.addEventListener('click', (e) => {
if (e.target === spotlightSearchOverlay) {
spotlightSearchOverlay.classList.add('hidden');
}
});
function updateSearchResults(results) {
// Clear previous results
searchResultsList.innerHTML = '';
// Update total results count
totalResultsCount.textContent = `(${results.length} results)`;
// Populate results
results.forEach(result => {
const resultItem = document.createElement('div');
resultItem.className = 'p-4 hover:bg-base-200 cursor-pointer';
resultItem.innerHTML = `
<div class="flex justify-between items-center">
<div>
<h3 class="font-bold">${result.filename}</h3>
<p class="text-sm text-gray-500">${result.path}</p>
<p class="text-sm mt-2">${highlightSearchTerm(result.content)}</p>
</div>
<span class="badge badge-primary">${result.matches} matches</span>
</div>
`;
searchResultsList.appendChild(resultItem);
});
}
function highlightSearchTerm(text) {
const searchTerm = spotlightSearchInput.value.toLowerCase();
if (!searchTerm) return text;
const regex = new RegExp(`(${searchTerm})`, 'gi');
return text.replace(regex, '<mark>$1</mark>');
}
// Chat Minimization
const minimizedChat = document.getElementById('minimizedChat');
const maximizeChat = document.getElementById('maximizeChat');
const chatContainer = document.getElementById('chatContainer');
// Minimize chat function
function minimizeChat() {
chatContainer.classList.add('hidden');
minimizedChat.classList.remove('hidden');
}
// Maximize chat function
maximizeChat.addEventListener('click', () => {
minimizedChat.classList.add('hidden');
chatContainer.classList.remove('hidden');
});
// File Explorer Toggle (previous implementation remains the same)
const folderToggle = document.getElementById('folderToggle');
const fileExplorer = document.getElementById('fileExplorer');
let isFileExplorerOpen = false;
folderToggle.addEventListener('click', () => {
isFileExplorerOpen = !isFileExplorerOpen;
if (isFileExplorerOpen) {
fileExplorer.classList.remove('w-0');
fileExplorer.classList.add('w-64');
chatContainer.classList.remove('flex-1');
chatContainer.classList.add('flex-grow');
} else {
fileExplorer.classList.remove('w-64');
fileExplorer.classList.add('w-0');
chatContainer.classList.remove('flex-grow');
chatContainer.classList.add('flex-1');
}
});
});
</script>
<script src="renderer.js"></script>
</body>
</html> - on the chat window below i want two items write in notion and send email and when send email is checked it should ask for email addresses seperated by comma in a popup and show as tags and when clicking clos - in bottom should show x emails selected. make sure to include neccesary components and styling to show the functionality correct in preview start generating a blue CTA component Franz Atergo
about 1 hour ago
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FAQ</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f5f5f5;
}
header {
position: fixed;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
background-color: transparent; /* Transparent effect */
padding: 15px 30px;
top: 0;
left: 0;
width: 98%;
transition: background-color 0.3s ease; /* Smooth transition */
}
header.scrolled {
background-color: white; /* Solid color when scrolled */
}
header .logo img {
max-width: 120px;
}
nav {
flex-grow: 1;
text-align: right;
}
nav ul {
list-style: none;
display: inline-flex;
justify-content: flex-end;
margin: 0;
padding: 0;
}
nav ul li {
margin: 0 20px;
}
nav ul li a {
color: black;
text-decoration: none;
font-size: 19px;
padding: 10px 15px;
transition: color 0.3s ease, background-color 0.3s ease;
}
nav ul li a:hover {
background-color: #ec7216;
color: white;
border-radius: 5px;
}
.hero-section {
text-align: center;
background-image: url('header.jpg');
}
.hero-section h1 {
font-weight: bold;
padding: 180px 0px;
padding-bottom: 0px;
font-size: 80px;
color: #000000;
}
.hero-section p {
padding-bottom: 180px;
color: #000000;
font-size: 30px;
}
.container {
margin-top: 100px;
margin-bottom: 120px;
padding-left: 5%;
padding-right: 5%;
max-width: 1480px;
}
.faq-container {
animation: fadeIn 2s;
padding: 20px;
border-radius: 10px;
width: 80%;
display: flex;
flex-direction: column;
align-items: center;
}
.faq-question {
font-weight: bold;
font-size: 18px;
}
.accordion-item {
transition: all 0.5s;
border: none;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
margin-bottom: 10px;
}
.accordion-button {
font-size: 16px;
padding: 10px;
border: none;
border-radius: 10px;
background-color: #f5f5f5;
color: #000000;
transition: all 0.5s;
}
.accordion-button.focus {
outline: none;
box-shadow: none;
}
.accordion-button:not(.collapsed) {
background-color: #ec7216;
color: #ffffff;
}
.accordion-body {
animation: accordionExpand 1s;
padding: 20px;
font-size: 16px;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes accordionExpand {
0% {
height: 0;
padding: 0;
}
100% {
height: auto;
padding: 1rem;
}
}
.modal.fade {
transition: opacity 0.5s;
}
.modal-dialog {
transition: transform 0.5s;
max-width: 500px;
}
.modal.fade.show {
animation: modalFade 0.5s;
}
@keyframes modalFade {
0% {
opacity: 0;
transform: scale(0.5);
}
100% {
opacity: 1;
transform: scale(1);
}
}
.modal-content {
padding: 20px;
border: none;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.modal-header {
border-bottom: none;
}
.modal-title {
font-size: 24px;
font-weight: bold;
}
.modal-footer {
border-top: none;
}
.btn {
font-size: 18px;
padding: 10px 20px;
border: none;
border-radius: 10px;
background-color: #333;
color: #ffffff;
transition: all 0.5s;
}
.btn:hover {
background-color: #444;
}
.btn-primary {
background-color: #ec7216 !important;
}
.btn-primary:hover {
background-color: #ec7216 !important;
}
.faq-container h1 {
margin-bottom: 30px;
font-weight: bold;
font-size: 36px;
color: #333;
}
.faq-container .accordion {
width: 100%;
}
.faq-container button {
margin-top: 30px;
padding: 10px 20px;
background-color: #333;
color: #ffffff;
border: none;
border-radius: 10px;
cursor: pointer;
}
.faq-container button:hover {
background-color: #444;
}
@media (max-width: 768px) {
.faq-container {
width: 90%;
}
}
@media (max-width: 480px) {
.faq-container {
width: 95%;
}
.faq-container h1 {
font-size: 24px;
}
}
.footer {
background-color: #1c1d21;
color: #ffffff;
padding: 80px 20px;
padding-bottom: 10px;
margin-top: 50px;
flex-shrink: 0;
}
.footer-container{
padding-left: 5%;
padding-right: 5%;
margin-top: 100px;
max-width: 1480px;
margin: 0 auto;
}
.footer-row {
padding-top: 60px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.footer-logo {
flex: 1 1 35%;
margin-bottom: 20px;
}
.footer-logo h2 {
font-size: 35px;
margin-bottom: 25px;
}
.footer-logo p {
font-size: 20px;
margin-bottom: 20px;
}
.newsletter-form {
display: flex;
align-items: center;
}
.newsletter-form input {
padding: 20px 60px;
border: none;
font-size: large;
border-radius: 4px 0 0 4px;
outline: none;
}
.newsletter-form button {
padding: 22px 30px;
background-color: #ec7216;
color: #ffffff;
border: none;
border-radius: 0 4px 4px 0;
cursor: pointer;
}
.footer-links {
flex: 1 1 16%;
margin-bottom: 20px;
}
.footer-description {
margin-right:30px;
}
.footer-description h2{
margin-left: 50px;
margin-bottom: 35px;
font-size: 32px;
color: #ec7216;
font-weight: bold;
}
.footer-description p{
font-size: 20px;
color: white;
}
.footer-links h3 {
margin-bottom: 35px;
font-size: 32px;
color: #ec7216;
font-weight: bold;
}
.footer-links ul {
list-style: none;
padding: 0;
}
.footer-links ul li {
margin-bottom: 12px;
}
.footer-links ul li a {
color: #ffffff;
text-decoration: none;
font-size: 20px;
}
.footer-links ul li a:hover {
text-decoration: underline;
}
.footer-contact {
flex: 0 0 20%;
margin-bottom: 25px;
}
.footer-contact h3 {
color: #ec7216;
font-weight: bold;
font-size: 32px;
}
.footer-contact p {
margin-top: 20px;
font-size: 20px;
}
.footer-contact a {
color: #ffffff;
text-decoration: none;
}
.footer-contact a:hover {
text-decoration: underline;
}
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 50px;
font-size: 14px;
border-top: 1px solid #ffffff;
padding-top: 20px;
}
.social-links a {
color: #ffffff;
margin-right: 10px;
text-decoration: none;
font-size: 35px;
}
.social-links a:hover {
color: #ec7216;
}
</style>
</head>
<body>
<header>
<div class="logo">
<img src="Name Logo.png" alt="logo">
</div>
<nav>
<ul>
<li><a href="navbar.php">HOME</a></li>
<li><a href="about.php">ABOUT US</a></li>
<li><a href="truck.php">TRUCKS</a></li>
<li><a href="faq.php">FAQ</a></li>
<li><a href="contact.php">CONTACT US</a></li>
<li><a href="signin_signup.php">SIGN IN</a></li>
</ul>
</nav>
</header>
<section class="hero-section">
<h1>FAQ</h1>
<p>Home > FAQ </p>
</section>
<div class="container faq-container">
<h1 style="text-align: center;">Frequently Asked Questions</h1>
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<span class="faq-question">What are your business hours ?</span>
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
Our business hours are 24/7
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<span class="faq-question">How do I book a truck ?</span>
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
To book a ride, simply visit our website and fill out the get in touch form. You can also call us at +91 9892002243 to book over the phone.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<span class="faq-question">What is your cancellation policy?</span>
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="accordion-body">
If you need to cancel your booking, please contact us at least 24 hours in advance to avoid any cancellation fees.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingFour">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
<span class="faq-question">Do you offer discounts?</span>
</button>
</h2>
<div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#accordionExample">
<div class="accordion-body">
Yes, we offer discounts for frequent riders and students. Please contact us for more information.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingFive">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
<span class="faq-question">How do I track my ride?</span>
</button>
</h2>
<div id="collapseFive" class="accordion-collapse collapse" aria-labelledby="headingFive" data-bs-parent="#accordionExample">
<div class="accordion-body">
You can track your ride using our mobile app or by logging into your account on our website.
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
More Info
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">More Information</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
For more information, please visit our website or contact us at +91 9892002243.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="footer-container">
<div class="footer-row">
<div class="footer-logo">
<h2>Shree Dev Jom</h2>
<p>With our worldwide inclusion, strong <br> transportation organization and industry</p><br>
<p>Subscribe to our Newsletter</p>
<form class="newsletter-form">
<input type="email" placeholder="Your email address">
<button type="submit">➔</button>
</form>
</div>
<div class="footer-description">
<h2>Who we are</h2>
<p>Shree Dev Jom Transportation<br> is a trusted name in truck rental<br> and delivery services, dedicated<br> to serving businesses and<br> individuals across Mumbai</p><br>
</div>
<div class="footer-links">
<h3>Utility Pages</h3>
<ul>
<li><a href="navbar.php">Home</a></li>
<li><a href="about.php">About Us</a></li>
<li><a href="truck.php">Trucks</a></li>
<li><a href="faq.php">FAQ</a></li>
<li><a href="contact.php">Contact Us</a></li>
</ul>
</div>
<div class="footer-contact">
<h3>Contact Us</h3>
<p>Phone: <br>+91 9892002243<br> +91 9619002243</p>
<p>Email: <a href="shreedevtransport@gmail.com">shreedevtransport@gmail.com</a></p>
<p>Address: <br>2/8, Panchal Estate, Shyamnagar, Near Gupta Soap Company, Jogeshwari(E), Mumbai</br></p>
</div>
</div>
<div class="footer-bottom">
<div class="social-links">
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</div>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
the code i have given is not giving me professional output give me nice css and js Ayush Gaikwad
about 2 hours ago
create a landing page for truck transportation bussiness Ayush Gaikwad
about 2 hours ago
創建一個"top"鍵，是要放在header? 還是footer? 使用Tailwind Css + html 需RWD I want a simple one pager church website with the following:
- A wide hero, with welcome text on it.
- A welcome message.
- Brief description of the church.
- A section with the church address and service times.
- A CTA for Giving Online in both a section of the site and a link in the navigation.
- Links to Youtube and Facebook in the footer.
Additional details:
- The name of the church is "Bald Knob First Assembly of God"
- Vince and Terry Vire are the pastors.
Service Times:
Sunday Morning Sunday School: 9:45am
Sunday Morning Worship: 10:45pm
Sunday Evening Service: 5:30pm
Wednesday Night: 6:00pm
I want this script added to the header:
<script src="https://js.churchcenter.com/modal/v1"></script>
The Give Online button should be this:
https://baldknobfirst.churchcenteronline.com/giving?open-in-church-center-modal=true
The site should use some earthy brown tones mixed with some dark blues. Jonathan Motes
about 5 hours ago
estou usando tailwind css para dar estilos as minhas páginas quero um estilo para essa página aqui usando html.erb
com rails 8
<%= link_to 'Novo Serviço', new_service_path %>
<% @services.each do |service| %>
<p><%= link_to service.name, service_path(service) %></p>
<% end %>
<% if @services.empty? %>
<p>Não ha serviços cadastrados.</p>
<% end %>
aqui acima está a pagína que quero criar, só que em cada card do serviço pode ou não ter uma imagem associada, quando não tiver pode ser uma div com sem foto do mesmo tamanho que ficaria a imagem se fosse,
e quero os botões de editar e excluir com svg dentro de cada card do serviços
quero uma bonita mensagem quando ainda não tem serviços e também quero tudo pronto para eu só colocar no lugar
capriche e coloque dom_id em todos os card de serviço com service Willian Deiviti Daniel
about 5 hours ago
Create a ball element with a dynamic number in the middle, make it look like a lottery ball Don Andre Apilado
about 8 hours ago
crie um componente de uma loja feminina para um menu de botões fixados no footer (foco full mobile), usarei no astro posteriormente do just a respawn in 10 seconds text on the center and not the center of the screen make it downer Krisz221
about 10 hours ago
crie uma tela de app mobile para uma pagina com uma lista de imoveis, para o administrador gerenciar Mídia Bros
about 11 hours ago
create a app screen with property list Mídia Bros
about 11 hours ago
есть pagedone.io сделай megamenu на его основе Vlad Chirka
about 11 hours ago
Сделай mega menu на pagedone Vlad Chirka
about 11 hours ago
do an card left center that types a name a pfp a banner and some lorem ipsum and no background for the card have an gray background Krisz221
about 12 hours ago
Objective: Create a modern trading platform website targeting forex traders, featuring tools/resources and user authentication.
Pages Required:
Homepage
Login/Signup Pages
Trading Tools Section
1. Homepage Requirements
Hero Section:
Bold text: "Fsociety FX - Revolutionize Your Trading"
Subtext: "Advanced tools for forex professionals & enthusiasts"
CTA Button: "Start Free Trial"
Key Features Grid:
3-4 boxes highlighting:
Real-Time Market Data
Risk Management Calculators
AI-Powered Predictions
Community Strategies
About Section:
Short paragraph: "Fsociety FX empowers traders with cutting-edge technology and institutional-grade analytics."
Footer:
Links: Privacy Policy, Terms, Social Media Icons
2. Login/Signup Pages
Signup Page:
Form fields: Email, Password, Confirm Password
Optional: "Referral Code" field
Disclaimer: "By signing up, you agree to our terms"
Login Page:
Form fields: Email, Password
Links: "Forgot Password?", "Create Account"
Design:
Clean modern layout with dark theme (#0A0A0A background)
Neon accent colors (e.g., #00FF88 for buttons)
3. Trading Tools Menu
Navigation Bar:
Logo: "Fsociety FX" (top-left)
Menu Items: Home | Tools | Pricing | Blog | Support
Tools Dashboard:
Category filters: Technical Analysis | Risk Management | Automation
Tool Cards (example items):
Pip Calculator
Economic Calendar
Margin Simulator
Pattern Recognition Scanner Un modal para abonar dinero, con 3 secciones, tarjeta, tienda y spei Gerardo Gallegos
about 13 hours ago
i want home page for the brand fsociety and the website if for tools for trading simulation and graphy performance and calculatrice i need desine for pc and phone also have good ui ux also i can be dark and ligh can you Tawfiq Khajrou
about 13 hours ago
erstelle eine band webseite
Design und Layout:
Startseite:
Visuell ansprechend: Große, hochwertige Bilder der Band oder ein beeindruckendes Hintergrundbild.
Bandname und Logo: Prominent platziert, eventuell mit einem einprägsamen Slogan.
Navigation: Einfach zu bedienende Menüs, um zu den wichtigsten Seiten zu gelangen (Über uns, Musik, Tourdaten, Kontakt, etc.).
Über Uns:
Bandbiografie: Eine kurze Geschichte der Band, Mitgliederprofile und interessante Anekdoten.
Fotos und Videos: Professionelle Bandfotos und Videos von Live-Auftritten oder Musikvideos.
Musik:
Audio-Player: Eingebettete Musikstücke oder ein Spotify/Apple Music-Player.
Alben und Singles: Informationen zu veröffentlichten Alben, EPs und Singles mit Cover-Art und Tracklists.
Musikvideos: Eingebettete YouTube- oder Vimeo-Videos.
Tourdaten:
Kommende Shows: Eine Liste der nächsten Konzerte mit Datum, Ort und Ticketinformationen.
Vergangene Shows: Ein Archiv vergangener Auftritte mit Fotos und Videos.
Shop:
Merchandise: Eine Auswahl an Fanartikeln wie T-Shirts, Poster, Vinyls und mehr.
Einfache Navigation: Klare Kategorien, gut sichtbare Preise und ein einfacher Kaufprozess.
Galerie:
Foto- und Videogalerie: Hochwertige Bilder von Auftritten, Backstage-Momenten und Promofotos.
Benutzerfreundlich: Leicht zu durchstöbern, mit Thumbnail-Ansicht und Vollbildoption.
Kontakt und Social Media:
Kontaktformular: Für Buchungsanfragen, Presseanfragen oder Fanpost.
Social Media Links: Verknüpfungen zu den sozialen Medien der Band (Instagram, Facebook, Twitter, etc.).
Newsletter-Anmeldung: Eine Möglichkeit, sich für den Band-Newsletter anzumelden.
Zusätzliche Funktionen:
Blog: Aktuelle Neuigkeiten, Tourtagebücher oder persönliche Nachrichten der Bandmitglieder.
Interaktive Elemente: Fans könnten Kommentare hinterlassen, an Umfragen teilnehmen oder sich in ein Gästebuch eintragen.
Anonymous user
about 14 hours ago
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Eventbrite Admin - Dashboard</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<style>
.gradient-bg {
background: linear-gradient(135deg, #F05537, #F07167);
}
.logo-spin {
transition: transform 0.3s ease;
}
.logo-spin:hover {
transform: rotate(360deg);
}
.action-button {
transition: all 0.2s ease;
}
.action-button:hover {
transform: translateY(-2px);
}
.table-row-animate {
transition: all 0.2s ease;
}
.table-row-animate:hover {
background-color: #F8FAFC;
}
.nav-item {
transition: all 0.2s ease;
}
.nav-item:hover {
transform: translateY(-2px);
}
</style>
<body class="bg-gray-50">
<nav class="gradient-bg text-white p-4 shadow-lg sticky top-0 z-50">
<div class="container mx-auto flex justify-between items-center">
<div class="flex items-center space-x-2">
<a href="./dashboard" class="flex items-center space-x-4 group">
<div class="bg-white p-2.5 rounded-xl shadow-lg group-hover:shadow-2xl transition-all duration-300">
<i class="fas fa-ticket-alt text-2xl text-orange-500 logo-spin"></i>
</div>
<span class="text-2xl font-bold">Eventbrite Admin</span>
</a>
</div>
<div class="flex items-center space-x-8">
<div class="nav-item flex items-center">
<i class="fas fa-home mr-2"></i>
<a href="/dashboard" class="hover:text-orange-200">Dashboard</a>
</div>
<div class="nav-item flex items-center">
<i class="fas fa-th-large mr-2"></i>
<a href="/categories" class="hover:text-orange-200">Categories</a>
</div>
<div class="nav-item flex items-center">
<i class="fas fa-calendar-alt mr-2"></i>
<a href="/events" class="hover:text-orange-200">Events</a>
</div>
<div class="nav-item flex items-center">
<i class="fas fa-user-shield mr-2"></i>
<a href="/profile" class="hover:text-orange-200">Admin Profile</a>
</div>
<div class="flex items-center space-x-4 ml-6 border-l pl-6">
<a href="/logout" class="bg-white text-orange-500 hover:bg-orange-100 px-4 py-2 rounded-lg flex items-center action-button">
<i class="fas fa-sign-out-alt mr-2"></i>Logout
</a>
</div>
</div>
</div>
</nav>
<main class="container mx-auto p-6 space-y-8">
<!-- Event Organizer Verification Section -->
<div class="bg-white rounded-xl shadow-lg p-6 border border-gray-100">
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold text-gray-800 flex items-center">
<i class="fas fa-user-check mr-3 text-orange-500"></i>
Event Organizer Verification
</h2>
<span class="bg-orange-100 text-orange-800 px-4 py-2 rounded-lg">
Pending Requests: 0
</span>
</div>
<div class="overflow-x-auto">
<table class="min-w-full">
<thead class="bg-gradient-to-r from-orange-50 to-orange-100">
<tr>
<th class="px-6 py-3 text-left text-gray-700">Profile</th>
<th class="px-6 py-3 text-left text-gray-700">Organizer Details</th>
<th class="px-6 py-3 text-left text-gray-700">Status</th>
<th class="px-6 py-3 text-left text-gray-700">Request Date</th>
<th class="px-6 py-3 text-left text-gray-700">Actions</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<tr class="table-row-animate">
<td class="px-6 py-4">
<img src="profile-image.jpg" class="h-20 w-20 rounded-full border-2 border-orange-200 object-cover" alt="Profile">
</td>
<td class="px-6 py-4">
<div class="font-medium text-gray-800">John Doe</div>
<div class="text-sm text-gray-500">john.doe@example.com</div>
<div class="text-xs text-orange-600 mt-1">
<i class="fas fa-building mr-1"></i>
Organization: Example Corp
</div>
</td>
<td class="px-6 py-4">
<span class="px-3 py-1 bg-yellow-100 text-yellow-800 rounded-full flex items-center w-fit">
<i class="fas fa-clock mr-2"></i>Pending Verification
</span>
</td>
<td class="px-6 py-4">
<span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full flex items-center w-fit">
<i class="far fa-calendar-alt mr-2"></i>2025-02-01
</span>
</td>
<td class="px-6 py-4">
<div class="flex space-x-2">
<button class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 flex items-center action-button">
<i class="fas fa-check mr-2"></i>Approve
</button>
<button class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 flex items-center action-button">
<i class="fas fa-times mr-2"></i>Disapprove
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- All Users Management Section -->
<div class="bg-white rounded-xl shadow-lg p-6 border border-gray-100">
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold text-gray-800 flex items-center">
<i class="fas fa-users mr-3 text-orange-500"></i>
Platform Users Management
</h2>
<div class="flex space-x-4">
<div class="bg-green-100 text-green-800 px-4 py-2 rounded-lg flex items-center">
<i class="fas fa-user-check mr-2"></i>
Active Users: 10
</div>
<div class="bg-red-100 text-red-800 px-4 py-2 rounded-lg flex items-center">
<i class="fas fa-user-slash mr-2"></i>
Blocked Users: 5
</div>
</div>
</div>
<div class="overflow-x-auto">
<table class="min-w-full">
<thead class="bg-gradient-to-r from-orange-50 to-orange-100">
<tr>
<th class="px-6 py-3 text-left text-gray-700">Profile</th>
<th class="px-6 py-3 text-left text-gray-700">User Info</th>
<th class="px-6 py-3 text-left text-gray-700">Join Date</th>
<th class="px-6 py-3 text-left text-gray-700">User Type</th>
<th class="px-6 py-3 text-left text-gray-700">Status</th>
<th class="px-6 py-3 text-left text-gray-700">Actions</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<tr class="table-row-animate">
<td class="px-6 py-4">
<img src="profile-image.jpg" class="h-16 w-16 rounded-full border-2 border-orange-200 object-cover" alt="Profile">
</td>
<td class="px-6 py-4">
<div class="font-medium text-gray-800">Jane Doe</div>
<div class="text-sm text-gray-500">jane.doe@example.com</div>
<div class="text-xs text-gray-400 mt-1">
<i class="fas fa-map-marker-alt mr-1"></i>
Location: City, Country
</div>
</td>
<td class="px-6 py-4">
<span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full flex items-center w-fit">
<i class="far fa-calendar-alt mr-2"></i>2025-01-15
</span>
</td>
<td class="px-6 py-4">
<span class="px-3 py-1 bg-purple-100 text-purple-800 rounded-full flex items-center w-fit">
<i class="fas fa-user-tie mr-2"></i>Organizer
</span>
</td>
<td class="px-6 py-4">
<span class="px-3 py-1 bg-green-100 text-green-800 rounded-full flex items-center w-fit">
<i class="fas fa-check-circle mr-2"></i>Active
</span>
</td>
<td class="px-6 py-4">
<div class="flex space-x-2">
<button class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 flex items-center action-button">
<i class="fas fa-ban mr-2"></i>Block User
</button>
<button class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 flex items-center action-button">
<i class="fas fa-user-check mr-2"></i>Unblock User
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</main>
</body>
</html>
give it these two ( background: linear-gradient(90deg, rgba(17,24,39,0.8) 0%, rgba(17,24,39,0.4) 100%);
+ orange-600) John does
about 14 hours ago
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin Dashboard - EventHub</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/3.7.0/chart.min.js"></script>
</head>
<style>
.gradient-bg {
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
}
.card-hover {
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.card-hover:hover {
transform: translateY(-4px);
box-shadow: 0 12px 20px -8px rgba(99, 102, 241, 0.2);
}
.stats-card {
transition: all 0.3s ease;
border: 1px solid rgba(229, 231, 235, 0.5);
}
.stats-card:hover {
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
border-color: #6366f1;
}
.sidebar {
background: linear-gradient(135deg, #FF6A00 0%, #1E3A8A 100%); /* Orange to Blue gradient */
}
.sidebar a {
transition: background-color 0.3s;
}
.sidebar a:hover {
background-color: #ea580c; /* Darker orange when hovered */
}
.sidebar-header {
background-color: #1f2937; /* Darker header background */
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
animation: fadeIn 0.3s ease-in-out;
}
.progress-ring {
transition: stroke-dashoffset 0.35s;
transform: rotate(-90deg);
transform-origin: 50% 50%;
}
.dark-mode {
filter: invert(1) hue-rotate(180deg);
}
</style>
<body class="bg-gray-50">
<div class="flex h-screen">
<!-- Enhanced Sidebar -->
<aside class="sidebar w-64 bg-gray-900 text-white">
<div class="p-6">
<div class="flex items-center space-x-3">
<svg class="h-8 w-8 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
<h1 class="text-2xl font-bold">EventHub</h1>
</div>
</div>
<nav class="mt-6 space-y-1">
<a href="#" class="flex items-center px-6 py-3 bg-indigo-600 text-white">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
</svg>
Dashboard
</a>
<a href="#" class="flex items-center px-6 py-3 text-gray-400 hover:bg-gray-800 hover:text-white transition-colors duration-200">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
</svg>
Users
<span class="ml-auto bg-indigo-500 text-white text-xs px-2 py-1 rounded-full">New</span>
</a>
<a href="#" class="flex items-center px-6 py-3 text-gray-400 hover:bg-gray-800 hover:text-white transition-colors duration-200">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
Events
</a>
<a href="#" class="flex items-center px-6 py-3 text-gray-400 hover:bg-gray-800 hover:text-white transition-colors duration-200">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
</svg>
Analytics
</a>
</nav>
</aside>
<main class="flex-1 overflow-y-auto">
<!-- Enhanced Header -->
<header class="bg-white shadow-sm sticky top-0 z-10">
<div class="px-6 py-4">
<div class="flex justify-between items-center">
<div class="flex items-center space-x-4">
<h1 class="text-2xl font-bold text-gray-900">Dashboard Overview</h1>
<span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm">All Systems Active</span>
</div>
<div class="flex items-center space-x-4">
<button class="p-2 hover:bg-gray-100 rounded-full relative">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
</svg>
<span class="absolute top-0 right-0 h-4 w-4 bg-red-500 rounded-full text-xs text-white flex items-center justify-center">3</span>
</button>
<div class="flex items-center space-x-2">
<img src="/api/placeholder/32/32" alt="Admin" class="h-8 w-8 rounded-full ring-2 ring-indigo-500">
<div>
<span class="text-sm font-medium text-gray-700">Admin User</span>
<p class="text-xs text-gray-500">Super Admin</p>
</div>
</div>
</div>
</div>
</div>
</header>
<div class="p-6 space-y-6">
<!-- Enhanced Stats Cards -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-6">
<div class="stats-card bg-white p-6 rounded-lg shadow-sm card-hover">
<div class="flex justify-between items-start">
<div>
<h3 class="text-gray-500 text-sm font-medium">Total Users</h3>
<p class="text-3xl font-bold text-gray-900 mt-2">12,345</p>
</div>
<div class="p-2 bg-indigo-100 rounded-lg">
<svg class="h-6 w-6 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
</svg>
</div>
</div>
<div class="mt-4 flex items-center">
<span class="text-green-500 text-sm flex items-center">
<svg class="h-4 w-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
</svg>
+12% from last month
</span>
</div>
</div>
<div class="stats-card bg-white p-6 rounded-lg shadow-sm card-hover">
<div class="flex justify-between items-start">
<div>
<h3 class="text-gray-500 text-sm font-medium">Active Events</h3>
<p class="text-3xl font-bold text-gray-900 mt-2">1,234</p>
</div>
<div class="p-2 bg-purple-100 rounded-lg">
<svg class="h-6 w-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
</div>
</div>
<div class="mt-4 flex items-center">
<span class="text-green-500 text-sm flex items-center">
<svg class="h-4 w-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
</svg>
+5% from last month
</span>
</div>
</div>
<div class="stats-card bg-white p-6 rounded-lg shadow-sm card-hover">
<div class="flex justify-between items-start">
<div>
<h3 class="text-gray-500 text-sm font-medium">Total Categories</h3>
<p class="text-3xl font-bold text-gray-900 mt-2">45</p>
</div>
<div class="p-2 bg-green-100 rounded-lg">
<svg class="h-6 w-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
</div>
<div class="mt-4 flex items-center">
<span class="text-green-500 text-sm flex items-center">
<svg class="h-4 w-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
</svg>
+8% from last month
</span>
</div>
</div>
</div>
<!-- Enhanced Content Grid -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<!-- Recent Events -->
<div class="bg-white rounded-lg shadow-sm p-6">
<div class="flex justify-between items-center mb-6">
<h2 class="text-lg font-bold text-gray-900">Recent Events</h2>
<button class="text-sm text-indigo-600 hover:text-indigo-800">View All</button>
</div>
<div class="space-y-4">
<div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors duration-200">
<div class="flex items-center space-x-4">
<div class="p-2 bg-indigo-100 rounded-lg">
<svg class="h-6 w-6 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
</div>
<div>
<h3 class="font-medium text-gray-900">Tech Conference 2025</h3>
<div class="flex items-center space-x-2 mt-1">
<span class="text-sm text-gray-500">Submitted by: John Doe</span>
<span class="text-sm text-gray-500">•</span>
<span class="text-sm text-gray-500">2 hours ago</span>
</div>
</div>
</div>
</div>
<!-- Additional recent events -->
<div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors duration-200">
<div class="flex items-center space-x-4">
<div class="p-2 bg-purple-100 rounded-lg">
<svg class="h-6 w-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z" />
</svg>
</div>
<div>
<h3 class="font-medium text-gray-900">Digital Art Exhibition</h3>
<div class="flex items-center space-x-2 mt-1">
<span class="text-sm text-gray-500">Submitted by: Sarah Chen</span>
<span class="text-sm text-gray-500">•</span>
<span class="text-sm text-gray-500">5 hours ago</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Chart Section -->
<div class="bg-white rounded-lg shadow-sm p-6">
<h2 class="text-lg font-bold text-gray-900 mb-4">Event Participation</h2>
<canvas id="participationChart"></canvas>
</div>
</div>
</div>
</main>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Chart.js setup
const ctx = document.getElementById('participationChart').getContext('2d');
const participationChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
datasets: [{
label: 'Participants',
data: [120, 190, 150, 200, 220, 180, 250],
backgroundColor: 'rgba(99, 102, 241, 0.6)',
borderColor: 'rgba(99, 102, 241, 1)',
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
});
</script>
</body>
</html>
in html tailwind and css, enhance my code, give it the same colors in this (-orange-600 and background: linear-gradient(90deg, rgba(17,24,39,0.8) 0%, rgba(17,24,39,0.4) 100%);
) John does
about 15 hours ago
Please, generate a simple, but pretty html5/css landing page (without any js framework) for it/ai company Anton Dvornikov
about 15 hours ago
Generate a modern hero for a car detailing shop Сделай mega menu на всю ширину Vlad Chirka
about 16 hours ago
