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)

215

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

google meet clone
Meeting application with fully responsive connect my web for jsx https://abhirajk.vercel.app/

Author:
Abhiraj

7 months ago

1.1k
Privacy policy page template

Author:
Anonymous

1 year ago

2.4k
SocialSphere: A Full-Stack Social Media Platform
SocialSphere is a full-stack social media platform inspired by Facebook, built using HTML CSS

Author:
Code Master(Mfuranziza Dusabe Hamza)

3 months ago

448
Typewriter effect in tailwindcss with this simple trick
source: https://dev.to/lazysock/make-a-typewriter-effect-with-tailwindcss-in-5-minutes-dc

Author:
Anonymous

2 years ago

11.2k
Comparison Pricing Table Component
A responsive pricing table built with HTML and Tailwind CSS, comparing two plans (Free and Unlimited) with a clear feature checklist. Includes distinct styling for the premium plan and a toggle for monthly/annual pricing display.

Author:
Hamza Atig

4 months ago

621
Forgot password?
you can change password an time

Author:
gidy

3 months ago

395
walletp2p

Author:
Anonymous

8 months ago

1k
Life Tree
by salvator

Author:
Baraka Salvator

3 months ago

348
Contact Form Component
A multi-step, responsive contact form with a modern dark-themed design. The form includes four steps: name, email, phone number, and message. It features a side panel with contact information and a sleek, gradient-styled interface using Tailwind CSS.

Author:
Muhammad Umair Arshad

5 months ago

591
hello world
by salvator

Author:
Anonymous

3 months ago

235
Interactive Game Flip Card – Pure HTML & CSS Component
An elegant and interactive game info flip card built purely with HTML and CSS. This component flips smoothly on hover to reveal detailed game information on the back, providing a modern and engaging way to showcase your games without using JavaScript. Perfect for gaming websites wanting sleek animations and clean design.

Author:
Code Master(Mfuranziza Dusabe Hamza)

3 months ago

519
trusted by
1. Color Scheme: 1. Updated the background to a gradient from Indigo-800 to Blue-900 2. Changed text colors to use Indigo-800 and Blue-900 shades 3. Updated ring colors on avatar images to match the new scheme 2. Enhanced Design: 1. Added a containing card with white background (dark gray in dark mode) 2. Increased the size of avatar images for better visibility 3. Added a shadow effect to the card that changes color on hover 3. Responsiveness: 1. Maintained the responsive layout, stacking vertically on smaller screens 4. Animations and Interactions: 1. Added a fade-in animation for the entire component 2. Enhanced hover effects on avatar images (scale and z-index change) 3. Added a ring effect on hover for each avatar 5. Accessibility: 1. Maintained alt text for images 2. Ensured proper color contrast for text readability 6. Dark Mode: 1. Implemented dark mode support 2. Adjusted colors and ring effects for dark mode 7. Additional Enhancements: 1. Increased font sizes for better readability 2. Added font weight variations to emphasize important text 3. Improved spacing and alignment This updated component maintains the original functionality while incorporating the Indigo-800 and Blue-900 color scheme and adding enhanced visual effects and interactions.

Author:
nejaa badr

10 months ago

1.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components