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)

361

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

News feed

Author:
Bunny

2 years ago

13.4k
joker
joker cyber punk

Author:
Baraka Salvator

3 months ago

766
Skill Cards with Tailwind CSS
A responsive and modern card section designed with Tailwind CSS to showcase professional skills. Each card features a smooth fade-in animation and hover scaling effect for an engaging user experience. Ideal for portfolio websites, developer profiles, and personal branding pages. Fully customizable and mobile-friendly.

Author:
irahoza daniel

4 months ago

370
Show credit card details

Author:
Manuela Bianka

2 years ago

11.9k
Concert ticket

Author:
Elijah Davis

2 years ago

13.1k
google clone page
This HTML page includes: The Google logo with the correct colors A search input field with microphone and camera icons "Google Search" and "Win Freeing Lucky" buttons The text "With new The ZGS Breakthrough Plus cabinets today's where business ?" Footer with all the links shown in the image: Advertising, Business, New Search works, Privacy, Terms, Settings The climate action text in the footer The layout is responsive and uses Tailwind CSS for styling. The colors match Google's brand colors, and the overall structure matches what's shown in the image.

Author:
Bishnu Thapa

5 months ago

367
delivery
It will help us get our stuff delivered to your home in a way that your ordered items are delivered to your home.

Author:
Nishimwe Jeanine

3 months ago

294
Apple Dock Navigation Bar

Author:
Cristian

8 months ago

1.3k
Profile Card with Transparent
Dynamic Background: Darker gradient background for better contrast Floating colored blobs for visual interest Profile Image Glow: Added a gradient glow effect behind the profile picture Smoother hover transition Typography Improvements: Larger, bolder name text Subtle hover underline animation for the name Better spacing and hierarchy

Author:
KULDEEP

2 months ago

280
Card pricing section
Absolutely! Here's a beautiful 3-card pricing section using Tailwind CSS, with animations, dark mode support, and clearly differentiated plans (Free, Pro, and Enterprise).

Author:
Rathanak Phan

3 months ago

329
Skill showcase section for resume / porfolio website
show skill progression

Author:
Ava Brown

2 years ago

13.2k
hello world
by salvator

Author:
Anonymous

4 months ago

367

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components