Composants Composants de rétroaction Cyberpunk_CRM_Feedback_Component
Cyberpunk_CRM_Feedback_Component

Un composant de feedback complexe et réactif pour les outils CRM/Business avec une esthétique cyberpunk utilisant le blues de l’entreprise. Comprend plusieurs onglets, un formulaire et une liste de commentaires récents, prenant en charge le mode sombre.
Aperçu

HTML Code

<div class="font-sans text-blue-100 bg-gradient-to-br from-blue-950 via-blue-900 to-blue-800 min-h-screen p-4 sm:p-8 md:p-12 dark:from-gray-950 dark:via-gray-900 dark:to-gray-800 transition-colors duration-500">
  <div class="max-w-7xl mx-auto backdrop-blur-sm bg-blue-900/40 border border-blue-700/50 rounded-2xl shadow-2xl overflow-hidden animate-fade-in-up dark:bg-gray-800/40 dark:border-gray-700/50">
    <div class="p-6 sm:p-8 md:p-10 border-b border-blue-700/50 flex flex-col sm:flex-row items-start sm:items-center justify-between">
      <h2 class="text-3xl sm:text-4xl font-bold text-blue-200 tracking-tight glow-text-blue dark:text-gray-200">
        <span class="text-blue-400">//</span> Feedback Nexus
      </h2>
      <div class="flex items-center space-x-4 mt-4 sm:mt-0">
        <button class="relative group text-blue-300 hover:text-blue-100 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-blue-900 dark:focus:ring-offset-gray-900">
          <svg class="w-6 h-6" 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 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
          </svg>
          <span class="absolute -top-1 -right-1 flex h-3 w-3">
            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75"></span>
            <span class="relative inline-flex rounded-full h-3 w-3 bg-blue-500"></span>
          </span>
        </button>
        <img src="https://randomuser.me/api/portraits/men/84.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-blue-500 shadow-md transform hover:scale-110 transition duration-300">
      </div>
    </div>

    <div class="flex flex-col md:flex-row">
      <div class="w-full md:w-1/4 p-4 sm:p-6 border-b md:border-b-0 md:border-r border-blue-700/50">
        <nav class="flex flex-col space-y-2">
          <a href="#" class="flex items-center p-3 rounded-md text-blue-200 bg-blue-700/60 hover:bg-blue-600/80 transition duration-300 dark:bg-gray-700/60 dark:hover:bg-gray-600/80 border border-blue-600 dark:border-gray-600 shadow-lg">
            <svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
              <path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"></path>
            </svg>
            <span class="font-medium">Overview</span>
          </a>
          <a href="#" class="flex items-center p-3 rounded-md text-blue-300 hover:bg-blue-800/50 transition duration-300 dark:hover:bg-gray-800/50">
            <svg class="w-5 h-5 mr-3" 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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
            </svg>
            <span class="font-medium">Feedback List</span>
          </a>
          <a href="#" class="flex items-center p-3 rounded-md text-blue-300 hover:bg-blue-800/50 transition duration-300 dark:hover:bg-gray-800/50">
            <svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" d="M6 2a2 2 0 00-2 2v12a2 2 0 002 2h8a2 2 0 002-2V7.414A2 2 0 0015.414 6L12 2.586A2 2 0 0010.586 2H6zm5 6a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V8z" clip-rule="evenodd"></path>
            </svg>
            <span class="font-medium">New Submission</span>
          </a>
          <a href="#" class="flex items-center p-3 rounded-md text-blue-300 hover:bg-blue-800/50 transition duration-300 dark:hover:bg-gray-800/50">
            <svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" d="M11.49 3.17c-.381-.433-.622-.433-.872 0l-5.46 7.64C4.33 11.21 4 11.66 4 12.1v2.5a1.5 1.5 0 001.5 1.5h.5a.5.5 0 00.5-.5V14a.5.5 0 00-.5-.5h-1V12h8v.5h-1a.5.5 0 00-.5.5v2.5a.5.5 0 00.5.5h.5a1.5 1.5 0 001.5-1.5V12.1c0-.44-.33-.89-.66-1.39l-5.46-7.64z" clip-rule="evenodd"></path>
            </svg>
            <span class="font-medium">Analytics</span>
          </a>
        </nav>
      </div>

      <div class="w-full md:w-3/4 p-4 sm:p-6 md:p-8 space-y-8">
        <!-- Overview Section -->
        <section class="bg-blue-800/30 rounded-lg p-6 border border-blue-700/50 shadow-inner-xl dark:bg-gray-700/30 dark:border-gray-700/50">
          <h3 class="text-2xl font-bold text-blue-200 mb-6 glow-text-blue dark:text-gray-200">Feedback Overview</h3>
          <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            <div class="bg-blue-700/60 p-5 rounded-lg border border-blue-600 flex flex-col items-center justify-center text-center shadow-lg transform hover:scale-105 transition duration-300 dark:bg-gray-700/60 dark:border-gray-600">
              <div class="text-4xl font-bold text-blue-300 glow-text-blue dark:text-gray-300">1,234</div>
              <p class="text-blue-200 text-sm mt-1">Total Received</p>
            </div>
            <div class="bg-blue-700/60 p-5 rounded-lg border border-blue-600 flex flex-col items-center justify-center text-center shadow-lg transform hover:scale-105 transition duration-300 dark:bg-gray-700/60 dark:border-gray-600">
              <div class="text-4xl font-bold text-green-400 glow-text-green dark:text-green-400">89%</div>
              <p class="text-blue-200 text-sm mt-1">Positive Sentiment</p>
            </div>
            <div class="bg-blue-700/60 p-5 rounded-lg border border-blue-600 flex flex-col items-center justify-center text-center shadow-lg transform hover:scale-105 transition duration-300 dark:bg-gray-700/60 dark:border-gray-600">
              <div class="text-4xl font-bold text-yellow-400 glow-text-yellow dark:text-yellow-400">127</div>
              <p class="text-blue-200 text-sm mt-1">Open Issues</p>
            </div>
            <div class="bg-blue-700/60 p-5 rounded-lg border border-blue-600 flex flex-col items-center justify-center text-center shadow-lg transform hover:scale-105 transition duration-300 dark:bg-gray-700/60 dark:border-gray-600">
              <div class="text-4xl font-bold text-purple-400 glow-text-purple dark:text-purple-400">4.7</div>
              <p class="text-blue-200 text-sm mt-1">Average Rating</p>
            </div>
          </div>
        </section>

        <!-- Recent Feedback Section -->
        <section class="bg-blue-800/30 rounded-lg p-6 border border-blue-700/50 shadow-inner-xl dark:bg-gray-700/30 dark:border-gray-700/50">
          <h3 class="text-2xl font-bold text-blue-200 mb-6 glow-text-blue dark:text-gray-200">Recent Feedback</h3>
          <div class="space-y-4">
            <!-- Feedback Item 1 -->
            <div class="p-4 bg-blue-700/40 rounded-lg border border-blue-600 flex items-start space-x-4 animate-fade-in dark:bg-gray-700/40 dark:border-gray-600">
              <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-blue-500 shadow-md">
              <div class="flex-1">
                <div class="flex justify-between items-center mb-1">
                  <h4 class="font-semibold text-lg text-blue-200">Sarah J. - <span class="text-yellow-300">⭐ 5</span></h4>
                  <span class="text-sm text-blue-400">2 hours ago</span>
                </div>
                <p class="text-blue-100 text-sm mb-2">"The new dashboard is incredibly intuitive! It has significantly streamlined our reporting process. Excellent work!"</p>
                <div class="flex space-x-2">
                  <span class="px-2 py-1 bg-green-600/70 text-green-100 text-xs rounded-full border border-green-500">Feature Request</span>
                  <span class="px-2 py-1 bg-purple-600/70 text-purple-100 text-xs rounded-full border border-purple-500">UX/UI</span>
                </div>
              </div>
            </div>
            <!-- Feedback Item 2 -->
            <div class="p-4 bg-blue-700/40 rounded-lg border border-blue-600 flex items-start space-x-4 animate-fade-in animation-delay-100 dark:bg-gray-700/40 dark:border-gray-600">
              <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-blue-500 shadow-md">
              <div class="flex-1">
                <div class="flex justify-between items-center mb-1">
                  <h4 class="font-semibold text-lg text-blue-200">Michael T. - <span class="text-orange-300">⭐ 3</span></h4>
                  <span class="text-sm text-blue-400">1 day ago</span>
                </div>
                <p class="text-blue-100 text-sm mb-2">"Experiencing occasional lags when loading large datasets in the analytics module. Otherwise, great tool!"</p>
                <div class="flex space-x-2">
                  <span class="px-2 py-1 bg-red-600/70 text-red-100 text-xs rounded-full border border-red-500">Bug Report</span>
                  <span class="px-2 py-1 bg-blue-600/70 text-blue-100 text-xs rounded-full border border-blue-500">Performance</span>
                </div>
              </div>
            </div>
            <!-- Feedback Item 3 -->
            <div class="p-4 bg-blue-700/40 rounded-lg border border-blue-600 flex items-start space-x-4 animate-fade-in animation-delay-200 dark:bg-gray-700/40 dark:border-gray-600">
              <img src="https://randomuser.me/api/portraits/women/22.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-blue-500 shadow-md">
              <div class="flex-1">
                <div class="flex justify-between items-center mb-1">
                  <h4 class="font-semibold text-lg text-blue-200">Emily R. - <span class="text-yellow-300">⭐ 4</span></h4>
                  <span class="text-sm text-blue-400">3 days ago</span>
                </div>
                <p class="text-blue-100 text-sm mb-2">"Would be great to have an export to PDF option for custom reports. Current functionality is good though."</p>
                <div class="flex space-x-2">
                  <span class="px-2 py-1 bg-green-600/70 text-green-100 text-xs rounded-full border border-green-500">Enhancement</span>
                  <span class="px-2 py-1 bg-cyan-600/70 text-cyan-100 text-xs rounded-full border border-cyan-500">Reporting</span>
                </div>
              </div>
            </div>
          </div>
        </section>

        <!-- Submit Feedback Form Section -->
        <section class="bg-blue-800/30 rounded-lg p-6 border border-blue-700/50 shadow-inner-xl dark:bg-gray-700/30 dark:border-gray-700/50">
          <h3 class="text-2xl font-bold text-blue-200 mb-6 glow-text-blue dark:text-gray-200">Submit New Feedback</h3>
          <form class="space-y-4">
            <div>
              <label for="feedback-type" class="block text-blue-200 text-sm font-medium mb-1">
                Feedback Type <span class="text-red-400">*</span>
              </label>
              <select id="feedback-type" name="feedback-type" required
                class="w-full p-3 rounded-md bg-blue-900/60 border border-blue-700 text-blue-100 placeholder-blue-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 shadow-custom-inner transition-all duration-300 dark:bg-gray-900/60 dark:border-gray-700 dark:text-gray-100 dark:focus:ring-gray-500">
                <option value="">Select a type</option>
                <option value="bug">Bug Report</option>
                <option value="feature">Feature Request</option>
                <option value="enhancement">Enhancement</option>
                <option value="general">General Comment</option>
                <option value="other">Other</option>
              </select>
            </div>
            <div>
              <label for="subject" class="block text-blue-200 text-sm font-medium mb-1">
                Subject <span class="text-red-400">*</span>
              </label>
              <input type="text" id="subject" name="subject" required placeholder="Summarize your feedback" 
                class="w-full p-3 rounded-md bg-blue-900/60 border border-blue-700 text-blue-100 placeholder-blue-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 shadow-custom-inner transition-all duration-300 dark:bg-gray-900/60 dark:border-gray-700 dark:text-gray-100 dark:focus:ring-gray-500">
            </div>
            <div>
              <label for="details" class="block text-blue-200 text-sm font-medium mb-1">
                Details <span class="text-red-400">*</span>
              </label>
              <textarea id="details" name="details" rows="5" required placeholder="Provide detailed information about your feedback..."
                class="w-full p-3 rounded-md bg-blue-900/60 border border-blue-700 text-blue-100 placeholder-blue-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 shadow-custom-inner resize-y transition-all duration-300 dark:bg-gray-900/60 dark:border-gray-700 dark:text-gray-100 dark:focus:ring-gray-500"></textarea>
            </div>
            <div>
              <label for="screenshot" class="block text-blue-200 text-sm font-medium mb-1">
                Attach Screenshot / File (Optional)
              </label>
              <input type="file" id="screenshot" name="screenshot" accept="image/*,application/pdf" 
                class="block w-full text-sm text-blue-300 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0
                file:text-sm file:font-semibold file:bg-blue-600/70 file:text-blue-100 hover:file:bg-blue-500/70 transition duration-300
                dark:file:bg-gray-600/70 dark:file:text-gray-100 dark:hover:file:bg-gray-500/70">
            </div>
            <div class="pt-4">
              <button type="submit" 
                class="w-full inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-lg 
                text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transform hover:scale-105 transition-all duration-300 
                glow-on-hover-blue dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-500">
                Submit Feedback <span class="ml-2">&rarr;</span>
              </button>
            </div>
          </form>
        </section>
      </div>
    </div>
  </div>
</div>

<style>
/* Define a custom glow effect for text and buttons */
.glow-text-blue {
  text-shadow: 0 0 5px rgba(59, 130, 246, 0.6), 0 0 10px rgba(59, 130, 246, 0.4), 0 0 15px rgba(59, 130, 246, 0.2);
}

.glow-text-green {
  text-shadow: 0 0 5px rgba(34, 197, 94, 0.6), 0 0 10px rgba(34, 197, 94, 0.4), 0 0 15px rgba(34, 197, 94, 0.2);
}

.glow-text-yellow {
  text-shadow: 0 0 5px rgba(234, 179, 8, 0.6), 0 0 10px rgba(234, 179, 8, 0.4), 0 0 15px rgba(234, 179, 8, 0.2);
}

.glow-text-purple {
  text-shadow: 0 0 5px rgba(168, 85, 247, 0.6), 0 0 10px rgba(168, 85, 247, 0.4), 0 0 15px rgba(168, 85, 247, 0.2);
}

.glow-on-hover-blue {
  box-shadow: 0 0 5px rgba(59, 130, 246, 0.7), 0 0 15px rgba(59, 130, 246, 0.5);
}

.glow-on-hover-blue:hover {
  box-shadow: 0 0 10px rgba(59, 130, 246, 1), 0 0 25px rgba(59, 130, 246, 0.8);
}

/* Custom inner shadow for inputs */
.shadow-custom-inner {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.dark .shadow-custom-inner {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
}

.shadow-inner-xl {
  box-shadow: inset 0 5px 10px rgba(0, 0, 0, 0.2);
}

.dark .shadow-inner-xl {
  box-shadow: inset 0 5px 10px rgba(0, 0, 0, 0.4);
}

/* Custom keyframes for animations */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.animate-fade-in-up {
  animation: fade-in-up 0.8s ease-out forwards;
}

.animate-fade-in {
  animation: fade-in 0.5s ease-out forwards;
}

.animation-delay-100 {
  animation-delay: 0.1s;
}

.animation-delay-200 {
  animation-delay: 0.2s;
}
</style>
Composants associés

Composant Composants de rétroaction

Composant de retour d’information Glassmorphism simple pour les médias sociaux, doté d’une palette de couleurs triadique, d’un design réactif et d’une prise en charge du thème sombre. Aucun JavaScript n’est requis.
Ouvrir
Composant Composants de rétroaction

Un composant de feedback simple et réactif adapté aux sites Web de conseil/services, avec une palette de couleurs triadique et des principes de conception de micro-interaction. Inclut la prise en charge du mode sombre.
Ouvrir
Organic_Nature_Inspired_Food_Feedback_Component

Un composant de retour d’information de complexité modérée pour les sites Web d’alimentation/restaurant, avec un design organique/inspiré de la nature avec des tons de terre et une réactivité totale, y compris la prise en charge du mode sombre.
Ouvrir