Cyberpunk_CRM_Feedback_Component
기업 블루스를 사용하여 사이버펑크 미학을 가미한 CRM/비즈니스 도구를 위한 복잡하고 반응이 빠른 피드백 구성 요소입니다. 여러 탭, 양식 및 최근 피드백 목록을 포함하여 다크 모드를 지원합니다.
HTML 코드
<div class="font-sans text-blue-100 bg-gradient-to-br from-blue-950 via-blue-900 to-blue-800 min-h-screen p-4 sm:p-8 md:p-12 dark:from-gray-950 dark:via-gray-900 dark:to-gray-800 transition-colors duration-500">
<div class="max-w-7xl mx-auto backdrop-blur-sm bg-blue-900/40 border border-blue-700/50 rounded-2xl shadow-2xl overflow-hidden animate-fade-in-up dark:bg-gray-800/40 dark:border-gray-700/50">
<div class="p-6 sm:p-8 md:p-10 border-b border-blue-700/50 flex flex-col sm:flex-row items-start sm:items-center justify-between">
<h2 class="text-3xl sm:text-4xl font-bold text-blue-200 tracking-tight glow-text-blue dark:text-gray-200">
<span class="text-blue-400">//</span> Feedback Nexus
</h2>
<div class="flex items-center space-x-4 mt-4 sm:mt-0">
<button class="relative group text-blue-300 hover:text-blue-100 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-blue-900 dark:focus:ring-offset-gray-900">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<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"></path>
</svg>
<span class="absolute -top-1 -right-1 flex h-3 w-3">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-3 w-3 bg-blue-500"></span>
</span>
</button>
<img src="https://randomuser.me/api/portraits/men/84.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-blue-500 shadow-md transform hover:scale-110 transition duration-300">
</div>
</div>
<div class="flex flex-col md:flex-row">
<div class="w-full md:w-1/4 p-4 sm:p-6 border-b md:border-b-0 md:border-r border-blue-700/50">
<nav class="flex flex-col space-y-2">
<a href="#" class="flex items-center p-3 rounded-md text-blue-200 bg-blue-700/60 hover:bg-blue-600/80 transition duration-300 dark:bg-gray-700/60 dark:hover:bg-gray-600/80 border border-blue-600 dark:border-gray-600 shadow-lg">
<svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"></path>
</svg>
<span class="font-medium">Overview</span>
</a>
<a href="#" class="flex items-center p-3 rounded-md text-blue-300 hover:bg-blue-800/50 transition duration-300 dark:hover:bg-gray-800/50">
<svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
</svg>
<span class="font-medium">Feedback List</span>
</a>
<a href="#" class="flex items-center p-3 rounded-md text-blue-300 hover:bg-blue-800/50 transition duration-300 dark:hover:bg-gray-800/50">
<svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M6 2a2 2 0 00-2 2v12a2 2 0 002 2h8a2 2 0 002-2V7.414A2 2 0 0015.414 6L12 2.586A2 2 0 0010.586 2H6zm5 6a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V8z" clip-rule="evenodd"></path>
</svg>
<span class="font-medium">New Submission</span>
</a>
<a href="#" class="flex items-center p-3 rounded-md text-blue-300 hover:bg-blue-800/50 transition duration-300 dark:hover:bg-gray-800/50">
<svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M11.49 3.17c-.381-.433-.622-.433-.872 0l-5.46 7.64C4.33 11.21 4 11.66 4 12.1v2.5a1.5 1.5 0 001.5 1.5h.5a.5.5 0 00.5-.5V14a.5.5 0 00-.5-.5h-1V12h8v.5h-1a.5.5 0 00-.5.5v2.5a.5.5 0 00.5.5h.5a1.5 1.5 0 001.5-1.5V12.1c0-.44-.33-.89-.66-1.39l-5.46-7.64z" clip-rule="evenodd"></path>
</svg>
<span class="font-medium">Analytics</span>
</a>
</nav>
</div>
<div class="w-full md:w-3/4 p-4 sm:p-6 md:p-8 space-y-8">
<!-- Overview Section -->
<section class="bg-blue-800/30 rounded-lg p-6 border border-blue-700/50 shadow-inner-xl dark:bg-gray-700/30 dark:border-gray-700/50">
<h3 class="text-2xl font-bold text-blue-200 mb-6 glow-text-blue dark:text-gray-200">Feedback Overview</h3>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="bg-blue-700/60 p-5 rounded-lg border border-blue-600 flex flex-col items-center justify-center text-center shadow-lg transform hover:scale-105 transition duration-300 dark:bg-gray-700/60 dark:border-gray-600">
<div class="text-4xl font-bold text-blue-300 glow-text-blue dark:text-gray-300">1,234</div>
<p class="text-blue-200 text-sm mt-1">Total Received</p>
</div>
<div class="bg-blue-700/60 p-5 rounded-lg border border-blue-600 flex flex-col items-center justify-center text-center shadow-lg transform hover:scale-105 transition duration-300 dark:bg-gray-700/60 dark:border-gray-600">
<div class="text-4xl font-bold text-green-400 glow-text-green dark:text-green-400">89%</div>
<p class="text-blue-200 text-sm mt-1">Positive Sentiment</p>
</div>
<div class="bg-blue-700/60 p-5 rounded-lg border border-blue-600 flex flex-col items-center justify-center text-center shadow-lg transform hover:scale-105 transition duration-300 dark:bg-gray-700/60 dark:border-gray-600">
<div class="text-4xl font-bold text-yellow-400 glow-text-yellow dark:text-yellow-400">127</div>
<p class="text-blue-200 text-sm mt-1">Open Issues</p>
</div>
<div class="bg-blue-700/60 p-5 rounded-lg border border-blue-600 flex flex-col items-center justify-center text-center shadow-lg transform hover:scale-105 transition duration-300 dark:bg-gray-700/60 dark:border-gray-600">
<div class="text-4xl font-bold text-purple-400 glow-text-purple dark:text-purple-400">4.7</div>
<p class="text-blue-200 text-sm mt-1">Average Rating</p>
</div>
</div>
</section>
<!-- Recent Feedback Section -->
<section class="bg-blue-800/30 rounded-lg p-6 border border-blue-700/50 shadow-inner-xl dark:bg-gray-700/30 dark:border-gray-700/50">
<h3 class="text-2xl font-bold text-blue-200 mb-6 glow-text-blue dark:text-gray-200">Recent Feedback</h3>
<div class="space-y-4">
<!-- Feedback Item 1 -->
<div class="p-4 bg-blue-700/40 rounded-lg border border-blue-600 flex items-start space-x-4 animate-fade-in dark:bg-gray-700/40 dark:border-gray-600">
<img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-blue-500 shadow-md">
<div class="flex-1">
<div class="flex justify-between items-center mb-1">
<h4 class="font-semibold text-lg text-blue-200">Sarah J. - <span class="text-yellow-300">⭐ 5</span></h4>
<span class="text-sm text-blue-400">2 hours ago</span>
</div>
<p class="text-blue-100 text-sm mb-2">"The new dashboard is incredibly intuitive! It has significantly streamlined our reporting process. Excellent work!"</p>
<div class="flex space-x-2">
<span class="px-2 py-1 bg-green-600/70 text-green-100 text-xs rounded-full border border-green-500">Feature Request</span>
<span class="px-2 py-1 bg-purple-600/70 text-purple-100 text-xs rounded-full border border-purple-500">UX/UI</span>
</div>
</div>
</div>
<!-- Feedback Item 2 -->
<div class="p-4 bg-blue-700/40 rounded-lg border border-blue-600 flex items-start space-x-4 animate-fade-in animation-delay-100 dark:bg-gray-700/40 dark:border-gray-600">
<img src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-blue-500 shadow-md">
<div class="flex-1">
<div class="flex justify-between items-center mb-1">
<h4 class="font-semibold text-lg text-blue-200">Michael T. - <span class="text-orange-300">⭐ 3</span></h4>
<span class="text-sm text-blue-400">1 day ago</span>
</div>
<p class="text-blue-100 text-sm mb-2">"Experiencing occasional lags when loading large datasets in the analytics module. Otherwise, great tool!"</p>
<div class="flex space-x-2">
<span class="px-2 py-1 bg-red-600/70 text-red-100 text-xs rounded-full border border-red-500">Bug Report</span>
<span class="px-2 py-1 bg-blue-600/70 text-blue-100 text-xs rounded-full border border-blue-500">Performance</span>
</div>
</div>
</div>
<!-- Feedback Item 3 -->
<div class="p-4 bg-blue-700/40 rounded-lg border border-blue-600 flex items-start space-x-4 animate-fade-in animation-delay-200 dark:bg-gray-700/40 dark:border-gray-600">
<img src="https://randomuser.me/api/portraits/women/22.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-blue-500 shadow-md">
<div class="flex-1">
<div class="flex justify-between items-center mb-1">
<h4 class="font-semibold text-lg text-blue-200">Emily R. - <span class="text-yellow-300">⭐ 4</span></h4>
<span class="text-sm text-blue-400">3 days ago</span>
</div>
<p class="text-blue-100 text-sm mb-2">"Would be great to have an export to PDF option for custom reports. Current functionality is good though."</p>
<div class="flex space-x-2">
<span class="px-2 py-1 bg-green-600/70 text-green-100 text-xs rounded-full border border-green-500">Enhancement</span>
<span class="px-2 py-1 bg-cyan-600/70 text-cyan-100 text-xs rounded-full border border-cyan-500">Reporting</span>
</div>
</div>
</div>
</div>
</section>
<!-- Submit Feedback Form Section -->
<section class="bg-blue-800/30 rounded-lg p-6 border border-blue-700/50 shadow-inner-xl dark:bg-gray-700/30 dark:border-gray-700/50">
<h3 class="text-2xl font-bold text-blue-200 mb-6 glow-text-blue dark:text-gray-200">Submit New Feedback</h3>
<form class="space-y-4">
<div>
<label for="feedback-type" class="block text-blue-200 text-sm font-medium mb-1">
Feedback Type <span class="text-red-400">*</span>
</label>
<select id="feedback-type" name="feedback-type" required
class="w-full p-3 rounded-md bg-blue-900/60 border border-blue-700 text-blue-100 placeholder-blue-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 shadow-custom-inner transition-all duration-300 dark:bg-gray-900/60 dark:border-gray-700 dark:text-gray-100 dark:focus:ring-gray-500">
<option value="">Select a type</option>
<option value="bug">Bug Report</option>
<option value="feature">Feature Request</option>
<option value="enhancement">Enhancement</option>
<option value="general">General Comment</option>
<option value="other">Other</option>
</select>
</div>
<div>
<label for="subject" class="block text-blue-200 text-sm font-medium mb-1">
Subject <span class="text-red-400">*</span>
</label>
<input type="text" id="subject" name="subject" required placeholder="Summarize your feedback"
class="w-full p-3 rounded-md bg-blue-900/60 border border-blue-700 text-blue-100 placeholder-blue-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 shadow-custom-inner transition-all duration-300 dark:bg-gray-900/60 dark:border-gray-700 dark:text-gray-100 dark:focus:ring-gray-500">
</div>
<div>
<label for="details" class="block text-blue-200 text-sm font-medium mb-1">
Details <span class="text-red-400">*</span>
</label>
<textarea id="details" name="details" rows="5" required placeholder="Provide detailed information about your feedback..."
class="w-full p-3 rounded-md bg-blue-900/60 border border-blue-700 text-blue-100 placeholder-blue-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 shadow-custom-inner resize-y transition-all duration-300 dark:bg-gray-900/60 dark:border-gray-700 dark:text-gray-100 dark:focus:ring-gray-500"></textarea>
</div>
<div>
<label for="screenshot" class="block text-blue-200 text-sm font-medium mb-1">
Attach Screenshot / File (Optional)
</label>
<input type="file" id="screenshot" name="screenshot" accept="image/*,application/pdf"
class="block w-full text-sm text-blue-300 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0
file:text-sm file:font-semibold file:bg-blue-600/70 file:text-blue-100 hover:file:bg-blue-500/70 transition duration-300
dark:file:bg-gray-600/70 dark:file:text-gray-100 dark:hover:file:bg-gray-500/70">
</div>
<div class="pt-4">
<button type="submit"
class="w-full inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-lg
text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transform hover:scale-105 transition-all duration-300
glow-on-hover-blue dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-500">
Submit Feedback <span class="ml-2">→</span>
</button>
</div>
</form>
</section>
</div>
</div>
</div>
</div>
<style>
/* Define a custom glow effect for text and buttons */
.glow-text-blue {
text-shadow: 0 0 5px rgba(59, 130, 246, 0.6), 0 0 10px rgba(59, 130, 246, 0.4), 0 0 15px rgba(59, 130, 246, 0.2);
}
.glow-text-green {
text-shadow: 0 0 5px rgba(34, 197, 94, 0.6), 0 0 10px rgba(34, 197, 94, 0.4), 0 0 15px rgba(34, 197, 94, 0.2);
}
.glow-text-yellow {
text-shadow: 0 0 5px rgba(234, 179, 8, 0.6), 0 0 10px rgba(234, 179, 8, 0.4), 0 0 15px rgba(234, 179, 8, 0.2);
}
.glow-text-purple {
text-shadow: 0 0 5px rgba(168, 85, 247, 0.6), 0 0 10px rgba(168, 85, 247, 0.4), 0 0 15px rgba(168, 85, 247, 0.2);
}
.glow-on-hover-blue {
box-shadow: 0 0 5px rgba(59, 130, 246, 0.7), 0 0 15px rgba(59, 130, 246, 0.5);
}
.glow-on-hover-blue:hover {
box-shadow: 0 0 10px rgba(59, 130, 246, 1), 0 0 25px rgba(59, 130, 246, 0.8);
}
/* Custom inner shadow for inputs */
.shadow-custom-inner {
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}
.dark .shadow-custom-inner {
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
}
.shadow-inner-xl {
box-shadow: inset 0 5px 10px rgba(0, 0, 0, 0.2);
}
.dark .shadow-inner-xl {
box-shadow: inset 0 5px 10px rgba(0, 0, 0, 0.4);
}
/* Custom keyframes for animations */
@keyframes fade-in-up {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.animate-fade-in-up {
animation: fade-in-up 0.8s ease-out forwards;
}
.animate-fade-in {
animation: fade-in 0.5s ease-out forwards;
}
.animation-delay-100 {
animation-delay: 0.1s;
}
.animation-delay-200 {
animation-delay: 0.2s;
}
</style>