Composants Système d’évaluation Bauhaus_Music_Rating_System

Bauhaus_Music_Rating_System

Un composant réactif du système d’évaluation musicale/audio avec un design inspiré du Bauhaus, utilisant une palette de couleurs violet/violet. Inclut la prise en charge du mode sombre et la fonctionnalité interactive de classement par étoiles (visuel uniquement, pas de JS).

Aperçu

HTML Code

<div class="flex items-center justify-center min-h-screen p-4 bg-gray-50 dark:bg-gray-950 font-sans">
  <div class="w-full max-w-sm p-6 rounded-lg shadow-xl bg-white dark:bg-gray-800 transition-colors duration-300 transform border-2 border-purple-300 dark:border-purple-700">
    <h2 class="text-2xl font-bold mb-4 text-purple-800 dark:text-purple-200 text-center uppercase tracking-wider">Rate This Track</h2>

    <div class="flex justify-center mb-6">
      <img src="https://picsum.photos/120/120?random=1" alt="Album Art" class="w-24 h-24 sm:w-32 sm:h-32 rounded-lg object-cover border-2 border-purple-500 dark:border-purple-400 shadow-md">
    </div>

    <div class="text-center mb-6">
      <p class="text-lg font-semibold text-gray-900 dark:text-gray-100">"Cosmic Echoes"</p>
      <p class="text-sm text-gray-600 dark:text-gray-400">AstroFunk Collective</p>
    </div>

    <div class="flex justify-center space-x-2 text-3xl sm:text-4xl text-gray-400 dark:text-gray-600 mb-6">
      <button class="star-button focus:outline-none text-purple-500 dark:text-purple-400 hover:text-purple-600 dark:hover:text-purple-300 transform hover:scale-110 active:scale-95 transition-transform duration-150" aria-label="1 star">
        &#9733;
      </button>
      <button class="star-button focus:outline-none text-purple-500 dark:text-purple-400 hover:text-purple-600 dark:hover:text-purple-300 transform hover:scale-110 active:scale-95 transition-transform duration-150" aria-label="2 stars">
        &#9733;
      </button>
      <button class="star-button focus:outline-none text-purple-500 dark:text-purple-400 hover:text-purple-600 dark:hover:text-purple-300 transform hover:scale-110 active:scale-95 transition-transform duration-150" aria-label="3 stars">
        &#9733;
      </button>
      <button class="star-button focus:outline-none text-gray-400 dark:text-gray-600 hover:text-purple-600 dark:hover:text-purple-300 transform hover:scale-110 active:scale-95 transition-transform duration-150" aria-label="4 stars">
        &#9733;
      </button>
      <button class="star-button focus:outline-none text-gray-400 dark:text-gray-600 hover:text-purple-600 dark:hover:text-purple-300 transform hover:scale-110 active:scale-95 transition-transform duration-150" aria-label="5 stars">
        &#9733;
      </button>
    </div>

    <button class="w-full py-3 bg-purple-600 hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-600 text-white font-semibold rounded-md shadow-lg transition-colors duration-200 transform focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-75 uppercase tracking-wide">
      Submit Rating
    </button>
  </div>
</div>

Composants associés

Brutalism_Travel_Rating_System

Un composant de système de notation simple, de style brutaliste, pour les sites Web de voyage et de tourisme, avec des neutres froids et une prise en charge du mode sombre.

Ouvrir

Neumorphic_Pastel_Rating_System_Component

Un composant de système d’évaluation neumorphique simple et réactif avec une palette de couleurs pastel, adapté aux sites Web de voyage et de tourisme, y compris la prise en charge du mode sombre.

Ouvrir

Monospace_Developer_Rating_System_Component

Un composant de système d’évaluation propre, inspiré du code, pour les interfaces de médias sociaux, avec des polices monospace, une esthétique terminale et des couleurs complémentaires. Il est entièrement réactif avec la prise en charge du mode sombre.

Ouvrir