Home
Tanvir Hasan Bappy (Tanvir)
Fake Medicine Detector

Fake Medicine Detector

This tailwind example is contributed by Tanvir Hasan Bappy (Tanvir), on 20-May-2025. Component is made with Tailwind CSS v3. It is responsive.

Other

Author Tanvir Hasan Bappy (Tanvir)

Fork Fullscreen

<!DOCTYPE html>
<html lang="en" x-data="medicineScanner()">
<head>
  <meta charset="UTF-8" />
  <title>Fake Medicine Detector</title>
  <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 min-h-screen flex items-center justify-center p-4">
  <div class="bg-white shadow-lg rounded-lg p-8 max-w-md w-full">
    <h1 class="text-2xl font-semibold mb-6 text-center text-indigo-700">Fake Medicine Detector</h1>

<form @submit.prevent="submitForm" class="space-y-4" enctype="multipart/form-data" novalidate>
      <div>
        <label for="imageInput" class="block text-gray-700 font-medium mb-2">Upload medicine package image:</label>
        <input
          type="file"
          id="imageInput"
          name="image"
          accept="image/*"
          @change="fileChosen"
          class="block w-full text-sm text-gray-600
                 file:mr-4 file:py-2 file:px-4
                 file:rounded file:border-0
                 file:text-sm file:font-semibold
                 file:bg-indigo-100 file:text-indigo-700
                 hover:file:bg-indigo-200
                 cursor-pointer"
          :disabled="cameraActive"
          required
        />
      </div>

<div x-show="cameraActive" class="mt-6 text-center">
      <video
        id="video"
        autoplay
        playsinline
        class="mx-auto rounded-md border border-gray-300 shadow-md max-w-full"
        style="max-height: 300px;"
      ></video>

<div class="mt-2">
        <button
          @click="capturePhoto"
          class="bg-blue-600 text-white font-semibold py-2 px-4 rounded-md hover:bg-blue-700"
          :disabled="loading"
        >
          Capture Photo
        </button>
      </div>
    </div>

<template x-if="result">
      <div
        x-text="result.message"
        :class="{
          'bg-green-100 text-green-800 border-green-400': result.status === 'genuine',
          'bg-yellow-100 text-yellow-800 border-yellow-400': result.status === 'expired',
          'bg-red-100 text-red-800 border-red-400': result.status === 'fake',
        }"
        class="mt-6 p-4 border rounded-md font-semibold"
      ></div>
    </template>

<template x-if="result">
      <div class="mt-4 text-gray-700 space-y-1">
        <p><strong>Batch No:</strong> <span x-text="result.data.batch"></span></p>
        <p><strong>Expiry Date:</strong> <span x-text="result.data.expiry"></span></p>
        <p><strong>Medicine Code:</strong> <span x-text="result.data.code"></span></p>
      </div>
    </template>
  </div>

fileChosen(event) {
          this.file = event.target.files[0] || null;
          this.result = null;
          if (this.cameraActive) this.stopCamera();
        },

toggleCamera() {
          if (this.cameraActive) {
            this.stopCamera();
          } else {
            this.startCamera();
          }
        },

async startCamera() {
          this.result = null;
          this.file = null;

if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
            alert('Camera API not supported in this browser.');
            return;
          }

try {
            this.videoStream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } });
            this.cameraActive = true;
            const video = document.getElementById('video');
            video.srcObject = this.videoStream;
            await video.play();
          } catch (error) {
            alert('Unable to access camera: ' + error.message);
          }
        },

stopCamera() {
          if (this.videoStream) {
            this.videoStream.getTracks().forEach(track => track.stop());
            this.videoStream = null;
          }
          this.cameraActive = false;
          const video = document.getElementById('video');
          if (video) video.srcObject = null;
        },

capturePhoto() {
          if (!this.cameraActive) return;

const video = document.getElementById('video');
          const canvas = document.createElement('canvas');
          canvas.width = video.videoWidth;
          canvas.height = video.videoHeight;

const ctx = canvas.getContext('2d');
          ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

canvas.toBlob(blob => {
            this.file = new File([blob], 'capture.png', { type: 'image/png' });
            this.result = null;
            this.stopCamera();
            this.submitForm();
          }, 'image/png');
        },

async submitForm() {
          if (!this.file) return;

this.loading = true;
          this.result = null;

const formData = new FormData();
          formData.append('image', this.file);

try {
            const response = await fetch('/scan', {
              method: 'POST',
              body: formData,
            });

if (!response.ok) throw new Error('Network error');

const data = await response.json();
            this.result = data;

} catch (error) {
            this.result = {
              status: 'fake',
              message: 'Error scanning medicine. Please try again.',
              data: { batch: '', expiry: '', code: '' }
            };
          } finally {
            this.loading = false;
          }
        }
      }
    }
  </script>
</body>
</html>

Related Examples

Table
Table with image and status with pagination buttons

Author:
Abhiraj

4 months ago

1.4k
Floating "Go to Top" Button with Tailwind CSS
🚀 Boost your website’s user experience with a sleek floating "Go to Top" button! This easy-to-implement solution uses Tailwind CSS for styling. ✔️ Smooth scroll to top ✔️ Clean and modern design ✔️ Responsive and animated effects Perfect for any website or portfolio! Add it today and make navigation effortless! 🔝💻

Author:
Abdul Baset Bappy

2 months ago

321
Live Chat Component using Tailwind Alpine JS
Live Chat Component using Tailwind Alpine JS

Author:
Ahita Bisma Adlula

3 months ago

244
Best Chatting dashboard
create a modern WhatsApp-like chat dashboard with 3D effects, animations, and a sleek design. This will be a static view showcasing the interface with Nicole Shalom as the developer.

Author:
Nicole Shalom

6 days ago

35
Chat Bot
Simulation of a chat bot that can be used for conversations as a sketch idea

Author:
Ameth Galarcio

10 months ago

2.5k
Spinner
The Spinner is a simple and visually appealing component that indicates ongoing processes like loading or data fetching. It's a great way to improve user engagement and reduce frustration during wait times. Different styles and animations (circular, dots, pulsating). Customizable size, color, and speed. Easy to integrate with loading states in any app. Lightweight and responsive.

Author:
Abhiraj

4 months ago

1.2k
chat bar
live chat

Author:
gidy

5 days ago

14
Table Content
Dashboard Table Content, with Sidebar Reusable for any window

Author:
Ameth Galarcio

3 months ago

1.1k
Age verification 18+

Author:
Maxim

5 months ago

479
Updated customer details page
Customer details page

Author:
Olivia Smith

1 year ago

2.8k
Payment Cards

Author:
Shammi Nethupul

10 months ago

2k
Twitter Post (Tweet) UI Mockup
A detailed static HTML and Tailwind CSS component replicating the user interface of a single Twitter post (Tweet). This mockup includes the user avatar, tweet header (name, handle, timestamp), tweet text with styled hashtags/mentions, optional media display, and the action bar with icons and counts (Reply, Retweet, Like, Views, Share). It is responsive, supports light and dark modes, and uses accurate iconography and hover states to closely resemble the real Twitter UI.

Author:
Hamza Atig

1 month ago

157

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components