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)

546

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 Content
Dashboard Table Content, with Sidebar Reusable for any window

Author:
Ameth Galarcio

10 months ago

2.2k
Elegant NavBar + Drawer
A NavBar, a responsive drawer/sidebar, and other useful Tailwind components to get started creating an app. Pure CSS, no JavaScript needed (although this example uses a bit of JS).

Author:
Nick Girga

7 months ago

1.2k
OTP Verification Page
A responsive and interactive OTP verification page built with Tailwind CSS. The page features a gradient background, hover effects, and animations to enhance user experience. It includes input fields for the OTP, a resend OTP link, and a verify button. The design is optimized for both light and dark modes.

Author:
Mohit Prajapat

8 months ago

662
Periodic Table with Tailwind CSS

Author:
Michael Andreuzza

1 year ago

2.6k
Feeds
This is a responsive social media feed interface built with Tailwind CSS that features a clean, modern design with excellent color contrast and visual hierarchy. Here's a detailed breakdown of its components and layout:

Author:
ishimwe shadad

7 months ago

736
authentication form terminal
authentication form with zsh on mac terminal looks

Author:
ardianhu

1 year ago

2.7k
Tailwind Google Map widget

Author:
Dung Vuong

6 months ago

299
Chatbox template

Author:
Lucas Martinez

2 years ago

12.4k
Moving Background Animation

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

11 months ago

3k
Snake Game tailwind
snake game

Author:
QQ-VVN

7 months ago

618
LinkedIn Post UI Mockup
A static HTML and Tailwind CSS component designed to replicate the user interface of a LinkedIn post. This mockup accurately represents the post structure including the header (avatar, name, headline, timestamp), content area (text, optional media), engagement statistics (likes, comments, reposts), and the action bar (Like, Comment, Repost, Send). It's fully responsive, supports light and dark themes, and uses appropriate iconography and styling to closely mimic the LinkedIn feed experience.

Author:
Hamza Atig

8 months ago

1.1k
Heading

Author:
KULDEEP

6 months ago

994

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components