<div class="font-sans bg-gray-100 dark:bg-gray-900 min-h-screen p-4 sm:p-6 md:p-8 flex items-start justify-center">
<div class="w-full max-w-6xl bg-red-600 dark:bg-red-800 border-4 border-solid border-amber-900 dark:border-amber-700 shadow-brutal dark:shadow-brutal-dark p-4 sm:p-6 md:p-8 relative overflow-hidden">
<!-- Top brutalist border/bar -->
<div class="absolute top-0 left-0 w-full h-4 bg-orange-700 dark:bg-orange-900 border-b-4 border-solid border-amber-900 dark:border-amber-700 transform skew-y-2"></div>
<div class="absolute bottom-0 left-0 w-full h-4 bg-orange-700 dark:bg-orange-900 border-t-4 border-solid border-amber-900 dark:border-amber-700 transform -skew-y-2"></div>
<h2 class="text-3xl sm:text-4xl md:text-5xl font-extrabold uppercase text-amber-100 dark:text-amber-200 mb-6 sm:mb-8 tracking-wider text-shadow-brutal dark:text-shadow-brutal-darker pt-4">
<span class="block transform -skew-x-6 inline-block bg-amber-900 dark:bg-red-900 px-4 py-2 border-2 border-amber-500 dark:border-amber-600">System Alerts</span>
</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 sm:gap-8 md:gap-10 pb-4">
<!-- Left Filter/Controls Panel -->
<div class="md:col-span-1 bg-amber-900 dark:bg-red-900 p-4 sm:p-6 border-4 border-solid border-amber-700 dark:border-amber-600 space-y-6">
<div class="flex items-center justify-between text-amber-100 dark:text-amber-200 mb-4">
<h3 class="text-xl md:text-2xl font-bold uppercase tracking-wider">Filter</h3>
<button class="px-3 py-1 bg-red-800 dark:bg-orange-700 text-amber-100 dark:text-amber-200 border-2 border-amber-100 dark:border-amber-200 uppercase font-bold text-sm transform -skew-x-6 hover:bg-orange-600 dark:hover:bg-amber-600 transition-colors duration-200">
Reset
</button>
</div>
<!-- Filter Options -->
<div>
<label for="alert-type" class="block text-amber-200 dark:text-amber-300 text-sm font-bold mb-2 uppercase tracking-wide">Severity:</label>
<select id="alert-type" class="w-full p-2 bg-amber-800 dark:bg-red-800 text-amber-100 dark:text-amber-200 border-2 border-amber-500 dark:border-amber-600 rounded-none focus:ring focus:ring-amber-400 dark:focus:ring-orange-500 focus:border-amber-400 dark:focus:border-orange-500 appearance-none">
<option value="all">All</option>
<option value="critical">Critical</option>
<option value="warning">Warning</option>
<option value="info">Info</option>
</select>
</div>
<div>
<label for="status" class="block text-amber-200 dark:text-amber-300 text-sm font-bold mb-2 uppercase tracking-wide">Status:</label>
<select id="status" class="w-full p-2 bg-amber-800 dark:bg-red-800 text-amber-100 dark:text-amber-200 border-2 border-amber-500 dark:border-amber-600 rounded-none focus:ring focus:ring-amber-400 dark:focus:ring-orange-500 focus:border-amber-400 dark:focus:border-orange-500 appearance-none">
<option value="all">All</option>
<option value="new">New</option>
<option value="acknowledged">Acknowledged</option>
<option value="resolved">Resolved</option>
</select>
</div>
<div class="flex items-center">
<input id="show-archived" type="checkbox" class="h-5 w-5 text-amber-500 dark:text-orange-500 bg-amber-800 dark:bg-red-800 border-2 border-amber-500 dark:border-amber-600 rounded-none focus:ring-amber-400 dark:focus:ring-orange-500">
<label for="show-archived" class="ml-2 text-amber-200 dark:text-amber-300 uppercase text-sm font-bold">Show Archived</label>
</div>
<button class="w-full px-4 py-2 bg-red-800 dark:bg-orange-700 text-amber-100 dark:text-amber-200 border-2 border-amber-100 dark:border-amber-200 uppercase font-bold text-lg transform skew-x-6 hover:bg-orange-600 dark:hover:bg-amber-600 transition-colors duration-200 mt-4 md:mt-6">
Apply Filters
</button>
</div>
<!-- Main Notifications List -->
<div class="md:col-span-2 space-y-6 sm:space-y-8">
<!-- Notification Card 1: Critical -->
<div class="bg-orange-400 dark:bg-orange-600 p-4 sm:p-5 border-4 border-solid border-red-900 dark:border-red-700 transform rotate-1 shadow-brutal-inner dark:shadow-brutal-inner-dark relative hover:scale-[1.01] transition-transform duration-200 ease-out">
<div class="absolute -top-3 -right-3 text-red-900 dark:text-red-950 text-6xl opacity-20 transform rotate-45 font-black z-0">!</div>
<div class="relative z-10">
<h4 class="text-xl sm:text-2xl font-bold uppercase text-red-900 dark:text-red-950 mb-2 border-l-4 border-red-900 dark:border-red-950 pl-3 leading-tight">CRITICAL: Machine ID 789-A Shutdown</h4>
<p class="text-red-800 dark:text-red-900 text-sm sm:text-base mb-3">Main hydraulic pump pressure failure detected. Immediate attention required to prevent further system damage.</p>
<div class="flex flex-wrap items-center justify-between text-sm text-red-700 dark:text-red-800 mb-3">
<span class="font-semibold">Source: Assembly Line 3</span>
<span class="truncate">Timestamp: 2024-07-26 14:35 UTC</span>
</div>
<div class="flex flex-col sm:flex-row items-stretch sm:items-center gap-3">
<a href="#" class="inline-block px-4 py-2 bg-red-700 dark:bg-red-800 text-amber-100 dark:text-amber-200 font-bold uppercase text-sm border-2 border-red-900 dark:border-red-950 transform skew-x-3 hover:bg-red-600 dark:hover:bg-red-700 transition-colors duration-200 flex-grow text-center">
Acknowledge
</a>
<a href="#" class="inline-block px-4 py-2 bg-amber-900 dark:bg-red-900 text-amber-100 dark:text-amber-200 font-bold uppercase text-sm border-2 border-amber-700 dark:border-amber-600 transform -skew-x-3 hover:bg-amber-800 dark:hover:bg-red-800 transition-colors duration-200 flex-grow text-center">
View Details
</a>
</div>
</div>
</div>
<!-- Notification Card 2: Warning -->
<div class="bg-amber-500 dark:bg-amber-700 p-4 sm:p-5 border-4 border-solid border-orange-900 dark:border-orange-700 transform -rotate-1 shadow-brutal-inner dark:shadow-brutal-inner-dark relative hover:scale-[1.01] transition-transform duration-200 ease-out">
<div class="absolute -bottom-3 -left-3 text-orange-900 dark:text-orange-950 text-6xl opacity-20 transform -rotate-45 font-black z-0">☣</div>
<div class="relative z-10">
<h4 class="text-xl sm:text-2xl font-bold uppercase text-orange-900 dark:text-orange-950 mb-2 border-l-4 border-orange-900 dark:border-orange-950 pl-3 leading-tight">WARNING: Conveyor Belt 2 Speed Anomaly</h4>
<p class="text-orange-800 dark:text-orange-900 text-sm sm:text-base mb-3">Fluctuations detected in Conveyor Belt 2 speed. Potential for material backlog. Monitor closely.</p>
<div class="flex flex-wrap items-center justify-between text-sm text-orange-700 dark:text-orange-800 mb-3">
<span class="font-semibold">Source: Logistics Hub</span>
<span>Timestamp: 2024-07-26 15:10 UTC</span>
</div>
<div class="flex flex-col sm:flex-row items-stretch sm:items-center gap-3">
<a href="#" class="inline-block px-4 py-2 bg-red-700 dark:bg-red-800 text-amber-100 dark:text-amber-200 font-bold uppercase text-sm border-2 border-red-900 dark:border-red-950 transform skew-x-3 hover:bg-red-600 dark:hover:bg-red-700 transition-colors duration-200 flex-grow text-center">
Acknowledge
</a>
<a href="#" class="inline-block px-4 py-2 bg-amber-900 dark:bg-red-900 text-amber-100 dark:text-amber-200 font-bold uppercase text-sm border-2 border-amber-700 dark:border-amber-600 transform -skew-x-3 hover:bg-amber-800 dark:hover:bg-red-800 transition-colors duration-200 flex-grow text-center">
View Details
</a>
</div>
</div>
</div>
<!-- Notification Card 3: Info (Acknowledged/Resolved style) -->
<div class="bg-red-700 dark:bg-red-900 p-4 sm:p-5 border-4 border-solid border-amber-800 dark:border-amber-600 filter grayscale opacity-75 transform rotate-2 shadow-brutal-inner dark:shadow-brutal-inner-dark relative">
<div class="absolute -top-3 -left-3 text-amber-900 dark:text-orange-950 text-6xl opacity-20 transform rotate-12 font-black z-0">i</div>
<div class="relative z-10">
<h4 class="text-xl sm:text-2xl font-bold uppercase text-amber-100 dark:text-amber-200 mb-2 border-l-4 border-amber-100 dark:border-amber-200 pl-3 leading-tight">INFO: Firmware Update Completed for Robot Arm 5</h4>
<p class="text-amber-200 dark:text-amber-300 text-sm sm:text-base mb-3">Scheduled firmware update for Robot Arm 5 in Welding Station 1 completed successfully.</p>
<div class="flex flex-wrap items-center justify-between text-sm text-amber-300 dark:text-amber-400">
<span class="font-semibold">Source: IT Department</span>
<span>Timestamp: 2024-07-25 09:00 UTC</span>
</div>
<div class="mt-4 flex flex-col sm:flex-row items-stretch sm:items-center gap-3">
<span class="inline-block px-4 py-2 bg-orange-800 dark:bg-amber-900 text-amber-100 dark:text-amber-200 font-bold uppercase text-sm border-2 border-amber-100 dark:border-amber-200 transform -skew-x-3 flex-grow text-center">Status: Resolved</span>
</div>
</div>
</div>
<!-- Empty State / Load More -->
<div class="text-center py-8 bg-amber-900 dark:bg-red-900 border-4 border-solid border-amber-700 dark:border-amber-600 text-amber-100 dark:text-amber-200 font-bold uppercase tracking-widest text-lg sm:text-xl transform skew-y-1 mt-8">
<button class="px-6 py-3 bg-red-800 dark:bg-orange-700 text-amber-100 dark:text-amber-200 border-2 border-amber-100 dark:border-amber-200 uppercase font-bold text-base sm:text-lg transform -skew-x-6 hover:bg-orange-600 dark:hover:bg-amber-600 transition-colors duration-200">
Load More Alerts
</button>
</div>
</div>
</div>
<!-- Bottom brutalist border/bar -->
<div class="absolute bottom-0 left-0 w-full h-4 bg-orange-700 dark:bg-orange-900 border-t-4 border-solid border-amber-900 dark:border-amber-700 transform skew-y-2"></div>
<div class="absolute top-0 left-0 w-full h-4 bg-orange-700 dark:bg-orange-900 border-b-4 border-solid border-amber-900 dark:border-amber-700 transform -skew-y-2"></div>
</div>
</div>
<style>
/* Custom shadow for brutalism effect */
.shadow-brutal {
box-shadow: 12px 12px 0px rgba(120, 53, 15, 0.8);
}
.dark\:shadow-brutal-dark {
box-shadow: 12px 12px 0px rgba(69, 21, 21, 0.8);
}
.shadow-brutal-inner {
box-shadow: inset 5px 5px 0px rgba(120, 53, 15, 0.6);
}
.dark\:shadow-brutal-inner-dark {
box-shadow: inset 5px 5px 0px rgba(69, 21, 21, 0.6);
}
/* Text shadow for brutalism */
.text-shadow-brutal {
text-shadow: 4px 4px 0px rgba(120, 53, 15, 0.6);
}
.dark\:text-shadow-brutal-darker {
text-shadow: 4px 4px 0px rgba(69, 21, 21, 0.6);
}
</style>
