Luxury_Premium_Grayscale_Dating_Social_Data_Visualization_Component
デートやソーシャルプラットフォーム向けに設計されたエレガントで洗練されたデータ視覚化コンポーネントで、グレースケールの配色とダークモードをサポートするレスポンシブレイアウトが特徴です。ユーザー統計と接続メトリックを表示します。
HTMLコード
<section class="font-sans bg-white text-gray-900 dark:bg-gray-950 dark:text-gray-50 py-12 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto">
<h2 class="text-4xl font-extrabold tracking-tight text-center mb-12 dark:text-gray-50">
Your Connection Insights
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Card 1: Matches Overview -->
<div class="bg-neutral-100 dark:bg-neutral-900 rounded-xl shadow-lg p-8 transform hover:scale-105 transition-all duration-300 ease-in-out border border-neutral-200 dark:border-neutral-800">
<div class="flex items-center mb-6">
<svg class="h-10 w-10 text-neutral-600 dark:text-neutral-400 mr-4" 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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
</svg>
<h3 class="text-2xl font-semibold text-neutral-800 dark:text-neutral-200">Total Matches</h3>
</div>
<p class="text-6xl font-bold text-neutral-900 dark:text-neutral-50 mb-4">1,245</p>
<p class="text-neutral-600 dark:text-neutral-400">You've made <span class="font-medium text-neutral-800 dark:text-neutral-200">23% more matches</span> this month than last.</p>
<div class="h-2 bg-neutral-300 dark:bg-neutral-700 rounded-full mt-6">
<div class="w-[75%] h-full bg-neutral-600 dark:bg-neutral-400 rounded-full"></div>
</div>
<p class="text-neutral-500 dark:text-neutral-500 text-sm mt-2">Match rate: 75%</p>
</div>
<!-- Card 2: Messages Sent/Received -->
<div class="bg-neutral-100 dark:bg-neutral-900 rounded-xl shadow-lg p-8 transform hover:scale-105 transition-all duration-300 ease-in-out border border-neutral-200 dark:border-neutral-800">
<div class="flex items-center mb-6">
<svg class="h-10 w-10 text-neutral-600 dark:text-neutral-400 mr-4" 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="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>
<h3 class="text-2xl font-semibold text-neutral-800 dark:text-neutral-200">Conversations</h3>
</div>
<div class="flex justify-between items-end mb-4">
<div>
<p class="text-5xl font-bold text-neutral-900 dark:text-neutral-50 leading-none">890</p>
<p class="text-lg text-neutral-600 dark:text-neutral-400">Messages Sent</p>
</div>
<div>
<p class="text-5xl font-bold text-neutral-900 dark:text-neutral-50 leading-none">785</p>
<p class="text-lg text-neutral-600 dark:text-neutral-400">Messages Received</p>
</div>
</div>
<p class="text-neutral-600 dark:text-neutral-400">You initiated <span class="font-medium text-neutral-800 dark:text-neutral-200">55% of your conversations</span> this week.</p>
<div class="flex mt-6 gap-2">
<div class="flex-1 h-3 bg-neutral-600 dark:bg-neutral-400 rounded-full"></div>
<div class="flex-1 h-3 bg-neutral-300 dark:bg-neutral-700 rounded-full"></div>
</div>
<p class="text-neutral-500 dark:text-neutral-500 text-sm mt-2 flex justify-between"><span>Your initiative</span><span>Theirs</span></p>
</div>
<!-- Card 3: Profile Views -->
<div class="bg-neutral-100 dark:bg-neutral-900 rounded-xl shadow-lg p-8 transform hover:scale-105 transition-all duration-300 ease-in-out border border-neutral-200 dark:border-neutral-800">
<div class="flex items-center mb-6">
<svg class="h-10 w-10 text-neutral-600 dark:text-neutral-400 mr-4" 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 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
</svg>
<h3 class="text-2xl font-semibold text-neutral-800 dark:text-neutral-200">Profile Activity</h3>
</div>
<div class="flex items-end mb-4">
<p class="text-6xl font-bold text-neutral-900 dark:text-neutral-50 leading-none">3,421</p>
<p class="text-xl text-neutral-600 dark:text-neutral-400 ml-3">Views</p>
</div>
<p class="text-neutral-600 dark:text-neutral-400">Your profile was viewed <span class="font-medium text-neutral-800 dark:text-neutral-200">15% more often</span> on Sundays.</p>
<div class="mt-6">
<div class="w-full bg-neutral-300 dark:bg-neutral-700 rounded-full h-8 flex items-center justify-between overflow-hidden relative">
<div class="absolute left-0 top-0 h-full w-[60%] bg-neutral-600 dark:bg-neutral-400 rounded-full"></div>
<span class="absolute text-sm font-semibold text-white dark:text-neutral-900 z-10 p-2">60% New Views</span>
<span class="absolute text-sm font-semibold text-neutral-900 dark:text-neutral-50 z-10 right-0 p-2">40% Repeat Views</span>
</div>
</div>
<p class="text-neutral-500 dark:text-neutral-500 text-sm mt-2">Views in last 30 days</p>
</div>
<!-- Card 4: Top Interests/Hobbies -->
<div class="lg:col-span-2 bg-neutral-100 dark:bg-neutral-900 rounded-xl shadow-lg p-8 transform hover:scale-105 transition-all duration-300 ease-in-out border border-neutral-200 dark:border-neutral-800">
<div class="flex items-center mb-6">
<svg class="h-10 w-10 text-neutral-600 dark:text-neutral-400 mr-4" 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="M11.049 2.17l-.768.769a9 9 0 00-6.19 6.19l-.769.769a9 9 0 000 12.728l.769.769a9 9 0 006.19 6.19l.769.768a9 9 0 0012.728 0l.768-.769a9 9 0 006.19-6.19l.769-.769a9 9 0 000-12.728l-.769-.768a9 9 0 00-6.19-6.19l-.768-.769A9 9 0 0011.049 2.17z"></path>
</svg>
<h3 class="text-2xl font-semibold text-neutral-800 dark:text-neutral-200">Shared Interests</h3>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 text-neutral-600 dark:text-neutral-400 mb-6">
<div class="flex items-center"><span class="w-3 h-3 bg-neutral-600 dark:bg-neutral-400 rounded-full mr-2"></span>Reading (<span class="font-medium text-neutral-800 dark:text-neutral-200">78%</span> matches)</div>
<div class="flex items-center"><span class="w-3 h-3 bg-neutral-500 dark:bg-neutral-500 rounded-full mr-2"></span>Traveling (<span class="font-medium text-neutral-800 dark:text-neutral-200">65%</span> matches)</div>
<div class="flex items-center"><span class="w-3 h-3 bg-neutral-400 dark:bg-neutral-600 rounded-full mr-2"></span>Cooking (<span class="font-medium text-neutral-800 dark:text-neutral-200">52%</span> matches)</div>
<div class="flex items-center"><span class="w-3 h-3 bg-neutral-300 dark:bg-neutral-700 rounded-full mr-2"></span>Hiking (<span class="font-medium text-neutral-800 dark:text-neutral-200">47%</span> matches)</div>
</div>
<p class="text-neutral-600 dark:text-neutral-400 mb-4">These are the top interests you share with your connections.</p>
<div class="flex justify-around mt-6">
<div class="text-center">
<img class="h-16 w-16 rounded-full mx-auto mb-2 border-2 border-neutral-400 dark:border-neutral-600 object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<p class="text-sm font-semibold text-neutral-800 dark:text-neutral-200">@Alex</p>
<p class="text-xs text-neutral-500 dark:text-neutral-500">Reading</p>
</div>
<div class="text-center">
<img class="h-16 w-16 rounded-full mx-auto mb-2 border-2 border-neutral-400 dark:border-neutral-600 object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
<p class="text-sm font-semibold text-neutral-800 dark:text-neutral-200">@Sarah</p>
<p class="text-xs text-neutral-500 dark:text-neutral-500">Traveling</p>
</div>
<div class="text-center">
<img class="h-16 w-16 rounded-full mx-auto mb-2 border-2 border-neutral-400 dark:border-neutral-600 object-cover" src="https://randomuser.me/api/portraits/men/50.jpg" alt="User Avatar">
<p class="text-sm font-semibold text-neutral-800 dark:text-neutral-200">@Mark</p>
<p class="text-xs text-neutral-500 dark:text-neutral-500">Cooking</p>
</div>
</div>
</div>
<!-- Card 5: Geographic Distribution (Placeholder) -->
<div class="bg-neutral-100 dark:bg-neutral-900 rounded-xl shadow-lg p-8 transform hover:scale-105 transition-all duration-300 ease-in-out border border-neutral-200 dark:border-neutral-800">
<div class="flex items-center mb-6">
<svg class="h-10 w-10 text-neutral-600 dark:text-neutral-400 mr-4" 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="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
</svg>
<h3 class="text-2xl font-semibold text-neutral-800 dark:text-neutral-200">Location Insights</h3>
</div>
<img src="https://picsum.photos/400/250?random=1" alt="Placeholder map" class="rounded-lg mb-4 w-full h-32 object-cover object-center border border-neutral-200 dark:border-neutral-800">
<p class="text-neutral-600 dark:text-neutral-400 mb-2">Most of your current matches are from <span class="font-medium text-neutral-800 dark:text-neutral-200">major metropolitan areas</span>.</p>
<a href="#" class="text-neutral-600 dark:text-neutral-400 hover:text-neutral-800 dark:hover:text-neutral-200 text-sm font-medium underline">View detailed map</a>
</div>
</div>
</div>
</section>関連コンポーネント
Social_Connection_Chart_Component
有機的で自然にインスパイアされたデザインで、黒、白、単一の明るいアクセントカラーを特徴とする、適度な複雑さのソーシャルコネクションチャートコンポーネント。デートやソーシャルプラットフォーム向けに設計されており、流れるような線とユーザーのアバターでつながりを視覚的に紹介します。ダークモードのサポートにより、完全にレスポンシブです。