OrganicNatureFeedbackコンポーネント
ゲーム Web サイト向けに設計された、自然にインスパイアされた複雑なフィードバック コンポーネントで、流れるようなライン、クールなニュートラル、ダーク モードをサポートする完全な応答性が特徴です。
HTMLコード
<div class="font-sans bg-gradient-to-br from-gray-100 to-blue-50 dark:from-gray-900 dark:to-blue-950 min-h-screen p-4 sm:p-8 flex items-center justify-center">
<div class="w-full max-w-4xl bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-300 ease-in-out scale-95 md:scale-100 group" style="box-shadow: 0 10px 40px -10px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.05);">
<!-- Organic Top Border -->
<div class="h-4 sm:h-6 bg-gradient-to-r from-blue-300 to-blue-400 dark:from-blue-600 dark:to-blue-700 relative overflow-hidden">
<svg class="absolute w-full h-full" viewBox="0 0 100 10" preserveAspectRatio="none">
<path d="M0,5 Q25,0 50,5 T100,5" stroke="currentColor" stroke-width="0.5" fill="none" class="text-blue-200 dark:text-blue-800"></path>
<path d="M0,6 Q25,1 50,6 T100,6" stroke="currentColor" stroke-width="0.5" fill="none" class="text-blue-100 dark:text-blue-700"></path>
</svg>
</div>
<div class="p-6 sm:p-10">
<div class="flex flex-col md:flex-row items-start md:items-center justify-between mb-8 pb-6 border-b border-gray-200 dark:border-gray-700">
<div>
<h2 class="text-3xl sm:text-4xl font-extrabold text-gray-900 dark:text-white leading-tight mb-2">
Your Game, Your Voice
</h2>
<p class="text-gray-600 dark:text-gray-400 text-lg sm:text-xl font-light">
Help us shape the future of our game universe.
</p>
</div>
<button class="mt-6 md:mt-0 px-6 py-3 bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white font-semibold rounded-full shadow-lg transform transition-all duration-300 ease-in-out hover:-translate-y-1 hover:scale-105 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800">
Submit Feedback
</button>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-10">
<!-- Interactive Rating Section -->
<div class="bg-gray-50 dark:bg-gray-850 p-6 rounded-2xl border border-gray-100 dark:border-gray-700 shadow-inner overflow-hidden relative">
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
<svg class="w-6 h-6 mr-2 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.536 4.736h4.982c.969 0 1.371 1.246.588 1.81l-4.04 2.936 1.536 4.736c.3.921-.755 1.688-1.536 1.12L12 16.03l-4.04 2.936c-.78.568-1.835-.199-1.536-1.12l1.536-4.736-4.04-2.936c-.782-.564-.38-1.81.588-1.81h4.982L11.049 2.927z"></path></svg>
Overall Satisfaction
</h3>
<div class="flex justify-center sm:justify-start space-x-2 sm:space-x-4 mb-4 select-none">
<button class="rating-btn p-3 sm:p-4 rounded-full bg-transparent hover:bg-blue-100 dark:hover:bg-gray-700 text-gray-500 hover:text-blue-500 dark:text-gray-400 dark:hover:text-blue-400 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-700 flex items-center justify-center">
<span class="text-3xl sm:text-4xl">😒</span>
</button>
<button class="rating-btn p-3 sm:p-4 rounded-full bg-transparent hover:bg-blue-100 dark:hover:bg-gray-700 text-gray-500 hover:text-blue-500 dark:text-gray-400 dark:hover:text-blue-400 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-700 flex items-center justify-center">
<span class="text-3xl sm:text-4xl">😐</span>
</button>
<button class="rating-btn p-3 sm:p-4 rounded-full bg-transparent hover:bg-blue-100 dark:hover:bg-gray-700 text-gray-500 hover:text-blue-500 dark:text-gray-400 dark:hover:text-blue-400 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-700 flex items-center justify-center">
<span class="text-3xl sm:text-4xl">😊</span>
</button>
<button class="rating-btn p-3 sm:p-4 rounded-full bg-blue-100 dark:bg-blue-700 text-blue-600 dark:text-blue-200 ring-2 ring-blue-300 dark:ring-blue-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-700 flex items-center justify-center">
<span class="text-3xl sm:text-4xl">😍</span>
</button>
</div>
<p class="text-sm text-gray-500 dark:text-gray-400 mt-2 text-center sm:text-left">Click to select your experience.</p>
<!-- Organic Shape (SVG) as background element -->
<svg class="absolute bottom-0 right-0 w-32 h-32 opacity-10 blur-sm transform translate-x-1/4 translate-y-1/4 -rotate-12 pointer-events-none" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M50 0C68.45 0 83.21 17.55 79.9 35.85C77.41 49.33 65.65 60 50 60C34.35 60 22.59 49.33 20.1 35.85C16.79 17.55 31.55 0 50 0Z" fill="url(#paint0_linear_organic)" />
<defs>
<linearGradient id="paint0_linear_organic" x1="50" y1="0" x2="50" y2="60" gradientUnits="userSpaceOnUse">
<stop stop-color="#8DCBF7"/>
<stop offset="1" stop-color="#428DFF"/>
</linearGradient>
</defs>
</svg>
</div>
<!-- Feature Feedback Tabs -->
<div class="bg-gray-50 dark:bg-gray-850 p-6 rounded-2xl border border-gray-100 dark:border-gray-700 shadow-inner">
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
<svg class="w-6 h-6 mr-2 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
Specific Areas
</h3>
<div class="flex flex-wrap gap-2 text-sm">
<button class="px-4 py-2 rounded-full border border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-700 dark:bg-blue-900 dark:text-blue-200 transition-colors duration-200 hover:bg-blue-100 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-700">
Gameplay Mechanics
</button>
<button class="px-4 py-2 rounded-full border border-gray-200 bg-white text-gray-800 dark:border-gray-700 dark:bg-gray-700 dark:text-gray-200 transition-colors duration-200 hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-700">
Graphics & Art
</button>
<button class="px-4 py-2 rounded-full border border-gray-200 bg-white text-gray-800 dark:border-gray-700 dark:bg-gray-700 dark:text-gray-200 transition-colors duration-200 hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-700">
User Interface
</button>
<button class="px-4 py-2 rounded-full border border-gray-200 bg-white text-gray-800 dark:border-gray-700 dark:bg-gray-700 dark:text-gray-200 transition-colors duration-200 hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-700">
Story & Lore
</button>
<button class="px-4 py-2 rounded-full border border-gray-200 bg-white text-gray-800 dark:border-gray-700 dark:bg-gray-700 dark:text-gray-200 transition-colors duration-200 hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-700">
Performance
</button>
</div>
<p class="text-sm text-gray-500 dark:text-gray-400 mt-3">Select areas you want to provide feedback on.</p>
</div>
</div>
<!-- Detailed Feedback Section -->
<div class="mb-8">
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
<svg class="w-6 h-6 mr-2 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h10M7 16h10M14 6H10a2 2 0 00-2 2v6L5 21l3-3h11a2 2 0 002-2V8a2 2 0 00-2-2z"></path></svg>
Your Thoughts
</h3>
<textarea class="w-full p-4 rounded-xl border border-gray-200 dark:border-gray-600 focus:border-blue-500 focus:ring-blue-500 dark:focus:border-blue-400 dark:focus:ring-blue-400 bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 transition-all duration-200 leading-relaxed resize-y" rows="6" placeholder="Tell us what you love, what could be better, or any new ideas..."></textarea>
</div>
<!-- User Info & Consent -->
<div class="flex flex-col sm:flex-row items-center justify-between pt-6 border-t border-gray-200 dark:border-gray-700">
<div class="flex items-center mb-4 sm:mb-0">
<img class="w-12 h-12 rounded-full border-2 border-blue-300 dark:border-blue-600 mr-4 shadow-md" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
<div>
<p class="text-gray-800 dark:text-white font-medium">Player 'Phoenix'</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Connected via GameID #123456</p>
</div>
</div>
<div class="flex items-center">
<input type="checkbox" id="consent" class="h-5 w-5 rounded form-checkbox text-blue-600 dark:text-blue-400 focus:ring-blue-500 dark:focus:ring-blue-400 border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-700 transition-colors duration-200">
<label for="consent" class="ml-2 text-gray-700 dark:text-gray-300 select-none text-sm">
Allow us to contact you for clarification.
</label>
</div>
</div>
</div>
<!-- Organic Bottom Border -->
<div class="h-4 sm:h-6 bg-gradient-to-r from-blue-400 to-blue-300 dark:from-blue-700 dark:to-blue-600 relative overflow-hidden">
<svg class="absolute w-full h-full" viewBox="0 0 100 10" preserveAspectRatio="none">
<path d="M0,5 Q25,10 50,5 T100,5" stroke="currentColor" stroke-width="0.5" fill="none" class="text-blue-100 dark:text-blue-700"></path>
<path d="M0,4 Q25,9 50,4 T100,4" stroke="currentColor" stroke-width="0.5" fill="none" class="text-blue-200 dark:text-blue-800"></path>
</svg>
</div>
</div>
</div>関連コンポーネント
Vibrant_Dark_Mode_Feedback_Component
エンターテインメント/メディアプラットフォーム向けに設計されたシンプルで鮮やかなフィードバックコンポーネントで、目の疲れを軽減するダークモードUIを備えています。目立つタイトル、サブディスクリプション、コールトゥアクションボタンが特徴で、すべて完全にレスポンシブです。
フィードバックコンポーネント
レスポンシブデザイン、ダークテーマのサポート、JavaScriptなしを特徴とするミニマリストフィードバックコンポーネント。アバター、ユーザーフィードバックテキスト、星で表される評価が含まれます。