Building a QR Code Based Cybersecurity Information Collection System Using HTML, CSS, JavaScript…

Introduction

In this project, I developed a QR Code Based Cybersecurity Information Collection System that demonstrates ethical information gathering techniques. The system collects browser, operating system, device, and location information only after obtaining user consent.

Project Objective

The primary goal of this project is to:

Generate a QR code that opens a cybersecurity webpage.
Obtain user consent before collecting information.
Request location access from the user.
Collect browser and device details.
Store collected information in Google Sheets.
Demonstrate ethical cybersecurity practices.

Technologies Used

HTML5
CSS3
JavaScript
Google Sheets
Google Apps Script
GitHub
GitHub Pages
QR Code Generator

Project Architecture

User
   ↓
Scan QR Code
   ↓
Consent Page
   ↓
Location Permission
   ↓
Collect Information
   ↓
Display Results
   ↓
Store in Google Sheets

User
   ↓
Scan QR Code
   ↓
Consent Page
   ↓
Location Permission
   ↓
Collect Information
   ↓
Display Results
   ↓
Store in Google Sheets

User Interface Design

Describe:

Modern cybersecurity theme
Responsive design
Consent mechanism
Privacy notice

Add screenshots:

Homepage

Consent page

Information Collected

The system collects:

Browser Information
Operating System
Device Type
Screen Resolution
GPS Location (with permission)

Access Time

Location Permission Handling

The application requests location access using the browser's Geolocation API.

If Allowed

Displays coordinates
Generates Google Maps link

Saves data to Google Sheets

If Denied

Displays:

USER NOT ALLOWED TO SHARE THE LOCATION

USER NOT ALLOWED TO SHARE THE LOCATION

No location information is stored

Google Sheets Integration

The collected information is stored automatically using:

Google Sheets
Google Apps Script
JavaScript Fetch API

Include a screenshot of:

Google Sheet data

GitHub Deployment

The project was uploaded to GitHub and published using GitHub Pages. https://challanarendra03.github.io/cybersecurity-qr-project/

Benefits:

Free hosting
HTTPS support
Easy QR code integration

Include:

GitHub repository screenshot
Live website screenshot

QR Code Generation

The GitHub Pages URL was converted into a QR code, allowing users to access the application directly from their mobile devices.