Bauhaus_Grayscale_Rating_System_Component
Bauhaus 스타일로 회색조 색상으로 설계된 복잡하고 반응이 빠른 평가 시스템 구성 요소로, 이벤트 및 컨퍼런스 웹 사이트에 적합합니다. 대화형 요소와 다크 모드 지원이 특징입니다.
HTML 코드
<div class="p-4 sm:p-6 md:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
<div class="w-full max-w-4xl bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700 transition-all duration-300 ease-in-out">
<div class="p-6 sm:p-8 border-b border-gray-200 dark:border-gray-700">
<h2 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-gray-100 mb-2 leading-tight tracking-tight text-center sm:text-left">
Rate Your Experience at “FutureTech Summit 2024”
</h2>
<p class="text-md text-gray-600 dark:text-gray-400 text-center sm:text-left">
Your feedback helps us improve future events. Please select your ratings below.
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-6 sm:p-8">
<!-- Overall Satisfaction -->
<div class="flex flex-col border border-gray-300 dark:border-gray-600 rounded-md p-5 bg-gray-100 dark:bg-gray-750 transform transition-transform duration-200 hover:scale-[1.02] active:scale-100">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Overall Satisfaction</h3>
<div class="flex justify-center items-center space-x-2 sm:space-x-4 mb-4">
<!-- Star 1 -->
<div class="relative group">
<input type="radio" id="overall-star-1" name="overall-satisfaction" class="hidden peer" value="1">
<label for="overall-star-1" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100" title="Terrible">★</label>
</div>
<!-- Star 2 -->
<div class="relative group">
<input type="radio" id="overall-star-2" name="overall-satisfaction" class="hidden peer" value="2">
<label for="overall-star-2" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100" title="Poor">★</label>
</div>
<!-- Star 3 -->
<div class="relative group">
<input type="radio" id="overall-star-3" name="overall-satisfaction" class="hidden peer" value="3">
<label for="overall-star-3" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100" title="Average">★</label>
</div>
<!-- Star 4 -->
<div class="relative group">
<input type="radio" id="overall-star-4" name="overall-satisfaction" class="hidden peer" value="4">
<label for="overall-star-4" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100" title="Good">★</label>
</div>
<!-- Star 5 -->
<div class="relative group">
<input type="radio" id="overall-star-5" name="overall-satisfaction" class="hidden peer" value="5">
<label for="overall-star-5" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100" title="Excellent">★</label>
</div>
</div>
<p class="text-sm text-gray-500 dark:text-gray-400 text-center">How would you rate your overall experience?</p>
</div>
<!-- Content Quality -->
<div class="flex flex-col border border-gray-300 dark:border-gray-600 rounded-md p-5 bg-gray-100 dark:bg-gray-750 transform transition-transform duration-200 hover:scale-[1.02] active:scale-100">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Content Quality</h3>
<div class="flex justify-center items-center space-x-2 sm:space-x-4 mb-4">
<div class="relative group">
<input type="radio" id="content-star-1" name="content-quality" class="hidden peer" value="1">
<label for="content-star-1" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">★</label>
</div>
<div class="relative group">
<input type="radio" id="content-star-2" name="content-quality" class="hidden peer" value="2">
<label for="content-star-2" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">★</label>
</div>
<div class="relative group">
<input type="radio" id="content-star-3" name="content-quality" class="hidden peer" value="3">
<label for="content-star-3" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">★</label>
</div>
<div class="relative group">
<input type="radio" id="content-star-4" name="content-quality" class="hidden peer" value="4">
<label for="content-star-4" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">★</label>
</div>
<div class="relative group">
<input type="radio" id="content-star-5" name="content-quality" class="hidden peer" value="5">
<label for="content-star-5" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">★</label>
</div>
</div>
<p class="text-sm text-gray-500 dark:text-gray-400 text-center">How valuable was the session content?</p>
</div>
<!-- Speaker Engagement -->
<div class="flex flex-col border border-gray-300 dark:border-gray-600 rounded-md p-5 bg-gray-100 dark:bg-gray-750 transform transition-transform duration-200 hover:scale-[1.02] active:scale-100">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Speaker Engagement</h3>
<div class="flex justify-center items-center space-x-2 sm:space-x-4 mb-4">
<div class="relative group">
<input type="radio" id="speaker-star-1" name="speaker-engagement" class="hidden peer" value="1">
<label for="speaker-star-1" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">★</label>
</div>
<div class="relative group">
<input type="radio" id="speaker-star-2" name="speaker-engagement" class="hidden peer" value="2">
<label for="speaker-star-2" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">★</label>
</div>
<div class="relative group">
<input type="radio" id="speaker-star-3" name="speaker-engagement" class="hidden peer" value="3">
<label for="speaker-star-3" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">★</label>
</div>
<div class="relative group">
<input type="radio" id="speaker-star-4" name="speaker-engagement" class="hidden peer" value="4">
<label for="speaker-star-4" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">★</label>
</div>
<div class="relative group">
<input type="radio" id="speaker-star-5" name="speaker-engagement" class="hidden peer" value="5">
<label for="speaker-star-5" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">★</label>
</div>
</div>
<p class="text-sm text-gray-500 dark:text-gray-400 text-center">How engaging and clear were the speakers?</p>
</div>
<!-- Venue & Logistics -->
<div class="flex flex-col border border-gray-300 dark:border-gray-600 rounded-md p-5 bg-gray-100 dark:bg-gray-750 transform transition-transform duration-200 hover:scale-[1.02] active:scale-100">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Venue & Logistics</h3>
<div class="flex justify-center items-center space-x-2 sm:space-x-4 mb-4">
<div class="relative group">
<input type="radio" id="venue-star-1" name="venue-logistics" class="hidden peer" value="1">
<label for="venue-star-1" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">★</label>
</div>
<div class="relative group">
<input type="radio" id="venue-star-2" name="venue-logistics" class="hidden peer" value="2">
<label for="venue-star-2" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">★</label>
</div>
<div class="relative group">
<input type="radio" id="venue-star-3" name="venue-logistics" class="hidden peer" value="3">
<label for="venue-star-3" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">★</label>
</div>
<div class="relative group">
<input type="radio" id="venue-star-4" name="venue-logistics" class="hidden peer" value="4">
<label for="venue-star-4" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">★</label>
</div>
<div class="relative group">
<input type="radio" id="venue-star-5" name="venue-logistics" class="hidden peer" value="5">
<label for="venue-star-5" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">★</label>
</div>
</div>
<p class="text-sm text-gray-500 dark:text-gray-400 text-center">How was the venue and event organization?</p>
</div>
<!-- Networking Opportunities -->
<div class="flex flex-col border border-gray-300 dark:border-gray-600 rounded-md p-5 bg-gray-100 dark:bg-gray-750 transform transition-transform duration-200 hover:scale-[1.02] active:scale-100">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Networking Opportunities</h3>
<div class="flex justify-center items-center space-x-2 sm:space-x-4 mb-4">
<div class="relative group">
<input type="radio" id="network-star-1" name="networking-opportunities" class="hidden peer" value="1">
<label for="network-star-1" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">★</label>
</div>
<div class="relative group">
<input type="radio" id="network-star-2" name="networking-opportunities" class="hidden peer" value="2">
<label for="network-star-2" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">★</label>
</div>
<div class="relative group">
<input type="radio" id="network-star-3" name="networking-opportunities" class="hidden peer" value="3">
<label for="network-star-3" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">★</label>
</div>
<div class="relative group">
<input type="radio" id="network-star-4" name="networking-opportunities" class="hidden peer" value="4">
<label for="network-star-4" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">★</label>
</div>
<div class="relative group">
<input type="radio" id="network-star-5" name="networking-opportunities" class="hidden peer" value="5">
<label for="network-star-5" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">★</label>
</div>
</div>
<p class="text-sm text-gray-500 dark:text-gray-400 text-center">Were there sufficient networking chances?</p>
</div>
<!-- Value for Money -->
<div class="flex flex-col border border-gray-300 dark:border-gray-600 rounded-md p-5 bg-gray-100 dark:bg-gray-750 transform transition-transform duration-200 hover:scale-[1.02] active:scale-100">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Value for Money</h3>
<div class="flex justify-center items-center space-x-2 sm:space-x-4 mb-4">
<div class="relative group">
<input type="radio" id="value-star-1" name="value-for-money" class="hidden peer" value="1">
<label for="value-star-1" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">★</label>
</div>
<div class="relative group">
<input type="radio" id="value-star-2" name="value-for-money" class="hidden peer" value="2">
<label for="value-star-2" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">★</label>
</div>
<div class="relative group">
<input type="radio" id="value-star-3" name="value-for-money" class="hidden peer" value="3">
<label for="value-star-3" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">★</label>
</div>
<div class="relative group">
<input type="radio" id="value-star-4" name="value-for-money" class="hidden peer" value="4">
<label for="value-star-4" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">★</label>
</div>
<div class="relative group">
<input type="radio" id="value-star-5" name="value-for-money" class="hidden peer" value="5">
<label for="value-star-5" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">★</label>
</div>
</div>
<p class="text-sm text-gray-500 dark:text-gray-400 text-center">Did the event offer good value for its cost?</p>
</div>
</div>
<div class="p-6 sm:p-8 border-t border-gray-200 dark:border-gray-700">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Additional Feedback</h3>
<textarea class="w-full p-3 sm:p-4 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-200 placeholder-gray-500 dark:placeholder-gray-400 resize-y min-h-[100px] transition-colors duration-200" placeholder="Please share any other thoughts or suggestions..."></textarea>
<div class="mt-6 flex justify-end">
<button type="submit" class="px-6 py-3 bg-black text-white font-semibold rounded-md shadow-md hover:bg-gray-800 dark:bg-gray-200 dark:text-gray-900 dark:hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-black dark:focus:ring-gray-300 focus:ring-offset-2 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-900 transition-all duration-300 ease-in-out transform hover:scale-[1.02] active:scale-100">
Submit Feedback
</button>
</div>
</div>
</div>
</div>