Skeuomorphic_Jewel_Tone_Rating_System_Simple
Un componente del sistema di valutazione semplice e reattivo con un design scheumorfico, una combinazione di colori dei toni gioiello e il supporto della modalità scura, adatto per siti Web senza scopo di lucro/beneficenza.
Codice HTML
<div class="flex items-center justify-center p-4 min-h-screen bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-900 dark:to-gray-800 font-sans">
<div class="w-full max-w-sm p-6 rounded-3xl shadow-xl bg-gradient-to-br from-emerald-500 to-teal-600 dark:from-emerald-800 dark:to-teal-900 border-4 border-emerald-400 dark:border-emerald-700
transform transition-all duration-300 hover:scale-[1.01] hover:shadow-2xl
relative overflow-hidden group">
<!-- Background Glow Effect (Skeuomorphic Detail) -->
<div class="absolute -inset-1 rounded-3xl bg-gradient-to-br from-rose-500 to-purple-600 opacity-0 blur-md group-hover:opacity-30 transition-opacity duration-500"></div>
<div class="relative z-10 flex flex-col items-center space-y-6">
<h2 class="text-3xl font-extrabold text-white text-shadow tracking-tight text-center">
Rate Our Impact
</h2>
<p class="text-sm text-emerald-100/90 text-center mb-4 leading-relaxed max-w-xs">
Your feedback helps us grow and serve our community better.
</p>
<div class="flex space-x-2 sm:space-x-4">
<!-- Star 1 -->
<button aria-label="1 star rating" class="relative w-14 h-14 sm:w-16 sm:h-16 rounded-full bg-gradient-to-br from-yellow-400 to-yellow-600 dark:from-yellow-600 dark:to-yellow-800 shadow-md
flex items-center justify-center transform transition-transform duration-200 hover:scale-110
focus:outline-none focus:ring-4 focus:ring-yellow-300 focus:ring-opacity-75 dark:focus:ring-yellow-700
group-active:scale-95
active:bg-gradient-to-br active:from-yellow-600 active:to-yellow-800 dark:active:from-yellow-800 dark:active:to-yellow-900">
<svg class="w-8 h-8 sm:w-10 sm:h-10 text-yellow-100 group-hover:text-white transition-colors duration-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
</svg>
<!-- Inner Shadow (Skeuomorphic Detail) -->
<div class="absolute inset-1 rounded-full shadow-inner opacity-20 bg-black dark:bg-white blur-[1px]"></div>
</button>
<!-- Star 2 -->
<button aria-label="2 star rating" class="relative w-14 h-14 sm:w-16 sm:h-16 rounded-full bg-gradient-to-br from-yellow-400 to-yellow-600 dark:from-yellow-600 dark:to-yellow-800 shadow-md
flex items-center justify-center transform transition-transform duration-200 hover:scale-110
focus:outline-none focus:ring-4 focus:ring-yellow-300 focus:ring-opacity-75 dark:focus:ring-yellow-700
group-active:scale-95
active:bg-gradient-to-br active:from-yellow-600 active:to-yellow-800 dark:active:from-yellow-800 dark:active:to-yellow-900">
<svg class="w-8 h-8 sm:w-10 sm:h-10 text-yellow-100 group-hover:text-white transition-colors duration-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
</svg>
<div class="absolute inset-1 rounded-full shadow-inner opacity-20 bg-black dark:bg-white blur-[1px]"></div>
</button>
<!-- Star 3 -->
<button aria-label="3 star rating" class="relative w-14 h-14 sm:w-16 sm:h-16 rounded-full bg-gradient-to-br from-yellow-400 to-yellow-600 dark:from-yellow-600 dark:to-yellow-800 shadow-md
flex items-center justify-center transform transition-transform duration-200 hover:scale-110
focus:outline-none focus:ring-4 focus:ring-yellow-300 focus:ring-opacity-75 dark:focus:ring-yellow-700
group-active:scale-95
active:bg-gradient-to-br active:from-yellow-600 active:to-yellow-800 dark:active:from-yellow-800 dark:active:to-yellow-900">
<svg class="w-8 h-8 sm:w-10 sm:h-10 text-yellow-100 group-hover:text-white transition-colors duration-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
</svg>
<div class="absolute inset-1 rounded-full shadow-inner opacity-20 bg-black dark:bg-white blur-[1px]"></div>
</button>
<!-- Star 4 -->
<button aria-label="4 star rating" class="relative w-14 h-14 sm:w-16 sm:h-16 rounded-full bg-gradient-to-br from-yellow-400 to-yellow-600 dark:from-yellow-600 dark:to-yellow-800 shadow-md
flex items-center justify-center transform transition-transform duration-200 hover:scale-110
focus:outline-none focus:ring-4 focus:ring-yellow-300 focus:ring-opacity-75 dark:focus:ring-yellow-700
group-active:scale-95
active:bg-gradient-to-br active:from-yellow-600 active:to-yellow-800 dark:active:from-yellow-800 dark:active:to-yellow-900">
<svg class="w-8 h-8 sm:w-10 sm:h-10 text-yellow-100 group-hover:text-white transition-colors duration-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
</svg>
<div class="absolute inset-1 rounded-full shadow-inner opacity-20 bg-black dark:bg-white blur-[1px]"></div>
</button>
<!-- Star 5 -->
<button aria-label="5 star rating" class="relative w-14 h-14 sm:w-16 sm:h-16 rounded-full bg-gradient-to-br from-yellow-400 to-yellow-600 dark:from-yellow-600 dark:to-yellow-800 shadow-md
flex items-center justify-center transform transition-transform duration-200 hover:scale-110
focus:outline-none focus:ring-4 focus:ring-yellow-300 focus:ring-opacity-75 dark:focus:ring-yellow-700
group-active:scale-95
active:bg-gradient-to-br active:from-yellow-600 active:to-yellow-800 dark:active:from-yellow-800 dark:active:to-yellow-900">
<svg class="w-8 h-8 sm:w-10 sm:h-10 text-yellow-100 group-hover:text-white transition-colors duration-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
</svg>
<div class="absolute inset-1 rounded-full shadow-inner opacity-20 bg-black dark:bg-white blur-[1px]"></div>
</button>
</div>
<button class="mt-6 w-full py-3 px-6 bg-gradient-to-br from-pink-500 to-purple-600 dark:from-pink-700 dark:to-purple-800
text-white font-bold rounded-xl shadow-lg
transform transition-all duration-300 hover:scale-[1.01] hover:shadow-xl
focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-700 focus:ring-opacity-75
active:from-pink-600 active:to-purple-700 dark:active:from-pink-800 dark:active:to-purple-900 border-2 border-pink-400 dark:border-pink-600
text-shadow-sm">
Submit Rating
</button>
</div>
<!-- Subtle outer glow effect (skeuomorphic detail) -->
<div class="absolute -bottom-2 -left-2 w-16 h-16 bg-pink-300 dark:bg-pink-600 rounded-full mix-blend-multiply filter blur-xl opacity-30 group-hover:bottom-0 transition-all duration-500"></div>
<div class="absolute -top-2 -right-2 w-16 h-16 bg-cyan-300 dark:bg-cyan-600 rounded-full mix-blend-multiply filter blur-xl opacity-30 group-hover:top-0 transition-all duration-500"></div>
</div>
</div>
<style>
/* Custom text-shadow for skeuomorphism */
.text-shadow {
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4),
-1px -1px 2px rgba(255, 255, 255, 0.2);
}
.dark .text-shadow {
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6),
-1px -1px 2px rgba(255, 255, 255, 0.1);
}
.text-shadow-sm {
text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.3);
}
.dark .text-shadow-sm {
text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.5);
}
</style>Componenti correlati
Componente del sistema di classificazione
Un componente di valutazione dal design minimalista e piatto adatto per applicazioni sul cruscotto, caratterizzato da toni gioiello e piena reattività con supporto della modalità oscura.
Componente del sistema di classificazione
Un componente del sistema di valutazione reattivo con supporto per il tema scuro, progettato in uno stile minimalista/piatto con una combinazione di colori pastello per le interfacce dei social media. Si tratta di un componente complesso con più elementi interattivi.
Bauhaus_Music_Rating_System
Un componente del sistema di classificazione musica/audio reattivo con un design ispirato al Bauhaus, che utilizza una combinazione di colori viola/viola. Include il supporto per la modalità oscura e la funzionalità di valutazione interattiva a stelle (solo visiva, senza JS).