🎖️ Indian Army Portal

A modern, responsive web application built for the Web Worriers hackathon

Service Before Self | सेवा परमो धर्मः

📋 Table of Contents

About
Features
Tech Stack
Installation
File Structure
Usage Guide
Competition Requirements
Deployment
Screenshots
Credits

🎯 About

The Indian Army Portal is a fully functional frontend web application designed with a military/army theme. Built for the Web Worriers hackathon, this project showcases modern UI/UX design principles, responsive layouts, and interactive features without requiring a backend.

🎪 Event Details

Event: Web Worriers
Date: February 12, 2026
Mode: Online
Theme: Army/Military

✨ Features

🔐 Authentication System

Sign Up - Complete user registration with validation
Sign In/Login - Secure login with username/email support
Session Management - Persistent login state using localStorage
Profile Protection - Restricted access to profile pages

👤 User Profile Section

Profile Card - Display with image, name, role, and bio
Editable Bio - Character-limited bio editor (200 chars)
Profile Image - Customizable profile picture via URL
Role Display - User role badge (Officer, Soldier, Cadet, etc.)

🎨 Customization Features

Profile Theme Selector - 4 army-themed color schemes:
- Army Green (Default)
- Camouflage
- Tactical Black
- Desert Sand
Social Link Manager - Customizable links for:
- LinkedIn
- Instagram
- Facebook
- X (Twitter)

🌓 Smart UI Features

Theme Switcher - Light/Dark mode toggle
Welcome Messages - Personalized greetings on sign-in
Responsive Navigation - Mobile-friendly hamburger menu
Form Validation - Real-time error handling

📄 Mandatory Pages

✅ Home - Hero section, features, statistics
✅ Sign In/Login - Authentication page
✅ Sign Up - User registration
✅ About - Indian Army history and mission
✅ Contact Us - Contact form with localStorage
✅ Profile - User dashboard with customization

🎖️ Army Theme Elements

Military green color palette with gold accents
Indian Army official logo integration
Tactical patterns and military typography
Army-inspired UI components
Patriotic color schemes

📱 Responsive Design

Mobile-first approach
Tablet-optimized layouts
Desktop-enhanced experience
Cross-browser compatibility

🛠️ Tech Stack

Technology	Purpose
HTML5	Structure and semantic markup
CSS3	Styling, animations, and responsive design
JavaScript (ES6+)	Interactivity and data management
localStorage	Client-side data persistence
Google Fonts	Custom typography (Rajdhani, Teko)

Design Principles

Clean, modern UI/UX
Consistent color schemes
Proper spacing and typography
Accessible design patterns
Smooth transitions and animations

📦 Installation

Prerequisites

A modern web browser (Chrome, Firefox, Safari, Edge)
A text editor (VS Code, Sublime Text, etc.)
Basic knowledge of HTML/CSS/JavaScript

Steps

Download the Project

# Clone or download all project files
git clone https://github.com/Devanshuhc29/indian-army-portal.git
cd indian-army-portal

Verify File Structure Ensure all files are present:

├── index.html
├── signup.html
├── signin.html
├── profile.html
├── about.html
├── contact.html
├── styles.css
├── script.js
├── auth.js
├── profile.js
├── contact.js
└── README.md

Open in Browser
- Double-click index.html to open in your default browser
- Or use a local server:
```
# Python 3
python -m http.server 8000

# Or use VS Code Live Server extension
```
Access the Application
- Navigate to http://localhost:8000 (if using local server)
- Or simply open the HTML file directly

📁 File Structure

indian-army-portal/
│
├── 📄 index.html              # Home page with hero section
├── 📄 signup.html             # User registration page
├── 📄 signin.html             # User login page
├── 📄 profile.html            # User profile dashboard
├── 📄 about.html              # About Indian Army
├── 📄 contact.html            # Contact form page
│
├── 🎨 styles.css              # Complete styling (Army theme)
│
├── 📜 script.js               # Main JavaScript
│   ├── Mobile navigation
│   ├── Theme switcher
│   ├── Auth status check
│   └── Page protection
│
├── 📜 auth.js                 # Authentication logic
│   ├── Sign up handler
│   ├── Sign in handler
│   ├── Form validation
│   └── User data management
│
├── 📜 profile.js              # Profile management
│   ├── Profile data loader
│   ├── Bio editor
│   ├── Theme selector
│   ├── Social link manager
│   └── Image uploader
│
├── 📜 contact.js              # Contact form handler
│   ├── Form submission
│   └── Message storage
│
└── 📖 README.md               # Project documentation

📖 Usage Guide

1️⃣ Creating an Account

Navigate to the Sign Up page
Fill in all required fields:
- Full Name
- Email Address
- Username (unique)
- Role (Officer, Soldier, Cadet, etc.)
- Password (min 6 characters)
- Confirm Password
Click SIGN UP
You'll be automatically logged in and redirected to your profile

2️⃣ Signing In

Go to the Sign In page
Enter your username or email
Enter your password
Click SIGN IN
You'll see a welcome message and be redirected to your profile

3️⃣ Customizing Your Profile

Edit Bio

Navigate to your profile
Scroll to "Edit Bio" section
Type your bio (max 200 characters)
Click SAVE BIO

Change Profile Theme

Choose from 4 army-themed color schemes
Click on any theme preview
Your profile header will update instantly

Update Social Links

Add URLs for LinkedIn, Instagram, Facebook, Twitter
Click SAVE SOCIAL LINKS
Links will appear in your profile card

Change Profile Image

Enter an image URL in the "Change Profile Image" section
Click UPDATE IMAGE
Or click the camera icon on your profile picture

4️⃣ Contacting Support

Visit the Contact Us page
Fill in your details and message
Click SEND MESSAGE
Your message will be stored locally

5️⃣ Switching Themes

Click the theme button in the navigation (🌙 DARK / ☀️ LIGHT)
Your preference is saved automatically

✅ Competition Requirements

Mandatory Requirements

Requirement	Status
Working frontend application	✅ Complete
Sign up functionality	✅ Complete
Sign in/Login	✅ Complete
Profile related interactions	✅ Complete
UI based features	✅ Complete
Backend implementation (not required)	❌ Not implemented
Real application behavior	✅ Complete

Main Theme

Element	Status
Army theme throughout UI	✅ Complete
Military colors	✅ Complete
Army-relevant content	✅ Complete
Tactical layout design	✅ Complete

Mandatory Website Sections

✅ Home
✅ Sign In / Login
✅ About
✅ Contact Us

User Profile Section

✅ Profile card with image
✅ Name and role display
✅ Short bio
✅ Social links (LinkedIn, Instagram, Facebook, Twitter)

UI/UX Requirements

✅ Clean layout
✅ Responsive design
✅ Consistent colors
✅ Proper spacing
✅ Readable typography

Profile Customization

✅ Editable bio
✅ Profile theme selector
✅ Social link manager

Smart UI Feature

✅ Theme switcher (Light/Dark mode)
✅ Welcome message based on username

Technology Rules

✅ Frontend technology (HTML/CSS/JS)
✅ Ready for hosting
✅ Publicly accessible (no localhost dependency)

🚀 Deployment

Option 1: Netlify (Recommended)

Via Drag & Drop
- Go to netlify.com
- Sign up or log in
- Drag your project folder to the deployment area
- Your site will be live in seconds!

Via Git

# Initialize git repository
git init
git add .
git commit -m "Initial commit"

# Push to GitHub
git remote add origin <https://github.com/Devanshuhc29/Army-Portal-2026>
git push -u origin main

# Connect to Netlify
# Go to Netlify Dashboard > New site from Git
# Select your repository
# Deploy!

Option 2: Vercel

# Install Vercel CLI
npm install -g vercel

# Deploy
vercel

Option 3: GitHub Pages

Push code to GitHub repository
Go to repository Settings > Pages
Select branch (main) and folder (root)https://github.com/Devanshuhc29/Army-Portal-2026
Click Save
Your site will be live at https://github.com/Devanshuhc29/Army-Portal-2026

Option 4: Manual Hosting

Upload all files to any web hosting service:

Upload via FTP/SFTP
Ensure all files are in the root directory
Access via your domain

🔐 Data Storage

All user data is stored in browser localStorage:

Stored Data

User credentials (username, email, password)
Profile information (name, role, bio)
Profile customization (theme, image URL)
Social media links
Contact form messages

Data Structure

// Users Array
[
  {
    fullName: "John Doe",
    email: "john@example.com",
    username: "johndoe",
    role: "Officer",
    password: "hashed_password",
    bio: "Serving the nation...",
    profileTheme: "default",
    profileImage: "https://...",
    socialLinks: {
      linkedin: "https://...",
      instagram: "https://...",
      facebook: "https://...",
      twitter: "https://..."
    },
    createdAt: "2026-02-12T..."
  }
]

// Current User
"currentUser": "johndoe"

// Contact Messages
[
  {
    name: "User Name",
    email: "user@example.com",
    subject: "Query",
    message: "Message content...",
    timestamp: "2026-02-12T..."
  }
]

🎨 Color Palette

Primary Colors

--army-green: #4a5d23
--army-dark: #2d3a1a
--army-light: #6b7f3a
--accent-gold: #d4af37

Theme Variations

/* Default - Army Green */
--primary: #4a5d23

/* Camouflage */
--primary: #6b5d4f

/* Tactical Black */
--primary: #1a1a1a

/* Desert Sand */
--primary: #c19a6b

🔧 Browser Support

Browser	Version	Status
Chrome	90+	✅ Fully Supported
Firefox	88+	✅ Fully Supported
Safari	14+	✅ Fully Supported
Edge	90+	✅ Fully Supported
Opera	76+	✅ Fully Supported

🐛 Known Issues

⚠️ Data persists only in localStorage (cleared on cache clear)
⚠️ No real authentication (frontend only)
⚠️ Profile images must be valid URLs
⚠️ No password recovery mechanism

Future Enhancements

Backend integration with Node.js/Express
Database storage (MongoDB/PostgreSQL)
Real authentication with JWT
File upload for profile images
Email notifications
Password encryption (bcrypt)
Admin dashboard

📚 Documentation

Key Functions

`auth.js`

signupForm.submit() - Handles user registration
signinForm.submit() - Handles user login

`profile.js`

getCurrentUser() - Retrieves current logged-in user
updateUser() - Updates user data in localStorage
loadProfile() - Loads profile data on page load
updateSocialLinks() - Updates social media links

`script.js`

checkAuth() - Checks authentication status
protectPage() - Restricts access to protected pages

🤝 Contributing

Contributions are welcome! If you'd like to improve this project:

Fork the repository
Create a feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request

📝 License

This project is created for educational purposes as part of the Web Worriers hackathon.

Disclaimer: This is a demonstration project and not affiliated with the official Indian Army.

👨‍💻 Author

Devanshu Hemant Chheda

🎓 B.Tech CSE-AI Student, Parul University
💼 LinkedIn: Your LinkedIn
🐦 Twitter: @yourhandle

🙏 Acknowledgments

Indian Army - For the inspiration and logo
Web Worriers Team - For organizing the competition
Google Fonts - For Rajdhani and Teko fonts

📞 Support

If you encounter any issues or have questions:

Check the Known Issues section
Review the Usage Guide
Open an issue on GitHub
Contact via the Contact Us page in the application

⭐ If you found this project helpful, please give it a star! ⭐

Made with ❤️ for Web Worriers 2026

सेवा परमो धर्मः

Name		Name	Last commit message	Last commit date
Latest commit History 3 Commits
README.md		README.md
about.html		about.html
auth.js		auth.js
contact.html		contact.html
contact.js		contact.js
index.html		index.html
indian-army_logo.webp		indian-army_logo.webp
profile.html		profile.html
profile.js		profile.js
script.js		script.js
signin.html		signin.html
signup.html		signup.html
styles.css		styles.css

Devanshuhc29/Army-Portal-2026

Folders and files

Latest commit

History

Repository files navigation