earthy-military
Kanwarveer singh SinghCreate a complete, fully functional, single-file HTML/CSS/JS e-commerce website for a military equipment store named “TacticalGrid”. Core requirements: · The site must work entirely in a browser with no external backend – use JavaScript (localStorage) for the shopping cart. · All product data (name, price, category, image, description) must be stored in a JavaScript array of objects so that the site is fully self‑contained. · Include realistic placeholder images (using https://picsum.photos/... or similar) but with descriptive alt text (e.g., “M4 assault rifle product image”). Mandatory product categories (with at least 3 products per category): 1. Firearms (all types) – assault rifles, sniper rifles, pistols, shotguns, submachine guns. 2. Missiles & Launchers – anti‑tank missiles, shoulder‑fired rockets, surface‑to‑air missiles. 3. Communication Devices – tactical radios, encrypted handhelds, satellite phones, headsets. 4. Tactical Apparel – uniforms, boots, plate carriers. 5. Ballistic Protection – helmets, ballistic vests, shields. 6. Optics & Sights – scopes, red dots, night vision. 7. Firearm Accessories – grips, suppressors, magazines. 8. Survival & Field Gear – knives, first aid, NVG pouches. AI Chatbot (mandatory): · Add a floating chat icon (bottom right) that opens a chat widget when clicked. · The chatbot must simulate AI‑powered responses – it should answer basic customer questions such as: · “What firearms do you sell?” · “Do you have night vision?” · “How can I track my order?” · “Tell me about your missile systems.” · “What communication devices are in stock?” · Use a rule‑based or keyword‑matching approach (no external API required) – the bot should respond intelligently based on user input. · The chat window must include a message history, a text input, a send button, and a close button. · Style the chat to match the military theme (dark green, black, subtle glow). Pages / Sections (all must be present and linked): · Home page – hero section, featured products (mix of gun, missile, comms), call‑to‑action buttons. · All categories – show products grouped by category (filterable or separate sections). · Product detail view – click any product to see a modal or detail page with larger image, full description, price, stock, quantity selector. · Shopping cart – sidebar or separate page; add/remove items, update quantities, show subtotal, tax, total; persist cart using localStorage. · About Us – mission statement, team background (fictional). · Contact Us – form (name, email, message) with an alert on submit (no actual backend). · Services – custom fitting, maintenance, integration, training. SEO & structure: · Meta description and keywords. · Semantic HTML5 (header, nav, main, section, footer). · All images have alt attributes. · Responsive design (mobile, tablet, desktop) with CSS Grid/Flexbox and media queries. · Dark/olive green & black color scheme (military style). Legal disclaimer: · Add a small footer disclaimer: “All product images and descriptions are for demonstrative purposes only. Compliance with local laws is buyer’s responsibility.” Extra polish: · Header with logo, navigation dropdown for categories, cart icon with item count. · Footer with quick links, social icons, copyright. · Newsletter signup (alert on submit). · Back‑to‑top button. Output: Produce a single HTML file that includes <style> and <script> blocks – no external files required. The page must be fully interactive and functional immediately after opening in a browser. The AI chatbot must be fully operational, not just a visual placeholder. --- This prompt now explicitly demands a working AI chatbot alongside the full military e‑commerce site. Paste it into any modern AI coding tool (ChatGPT, Claude, Gemini, etc.) to generate the complete website.
Comments (0)
Sign in to leave a comment
System Requirements
earthy-military System Requirements Document
Introduction
The "earthy-military" project is focused on developing a comprehensive, fully functional e-commerce website for a military equipment store named "TacticalGrid". The website will be a single-file HTML/CSS/JS solution, operating entirely within a browser environment without the need for an external backend. This document outlines the system requirements to guide the development process.
System Overview
The "earthy-military" project aims to create a self-contained e-commerce platform that showcases a wide range of military equipment. The website will include features such as a shopping cart, product categories, a chatbot for customer interaction, and various informational pages. The design will reflect a military theme with a dark green and black color scheme, ensuring a cohesive and immersive user experience.
Functional Requirements
- As a User, I should be able to view a home page with a hero section, featured products, and call-to-action buttons.
- As a User, I should be able to browse products grouped by category, either filterable or in separate sections.
- As a User, I should be able to view detailed information about a product by clicking on it, including a larger image, full description, price, stock, and quantity selector.
- As a User, I should be able to add or remove items from a shopping cart, update quantities, and view subtotal, tax, and total, with persistence using localStorage.
- As a User, I should be able to read about the store's mission statement and team background on the About Us page.
- As a User, I should be able to contact the store via a form on the Contact Us page, receiving an alert upon submission.
- As a User, I should be able to learn about services offered, such as custom fitting, maintenance, integration, and training.
- As a User, I should be able to interact with an AI-powered chatbot to ask questions about products and services.
- As a User, I should be able to sign up for a newsletter and receive an alert upon submission.
- As a User, I should be able to navigate the site using a header with a logo, navigation dropdown for categories, and a cart icon with item count.
- As a User, I should be able to access quick links, social icons, and copyright information in the footer.
- As a User, I should be able to return to the top of the page using a back-to-top button.
User Personas
- General User: Interested in browsing and purchasing military equipment. Needs easy navigation and detailed product information.
- Customer Support: Uses the chatbot to assist users with inquiries about products and services.
Core User Flows
- User visits the home page -> browses featured products -> selects a category -> views product details -> adds product to cart -> proceeds to checkout.
- User interacts with the chatbot -> asks questions about products -> receives simulated AI responses -> navigates to relevant product pages.
- User fills out the contact form -> submits -> receives a confirmation alert.
Visuals Colors and Theme
- primary: #2E3B2F (dark olive green)
- primary_light: #4A5B47 (lighter olive green)
- secondary: #1C1C1C (black)
- accent: #FFD700 (gold)
- highlight: #FF4500 (orange-red)
- bg: #F5F5F5 (light grey)
- surface: rgba(46, 59, 47, 0.8)
- text: #FFFFFF (white)
- text_muted: #B0B0B0 (light grey)
- border: rgba(46, 59, 47, 0.2)
Signature Design Concept
The homepage will feature an interactive 3D military base map using @react-three/fiber and @react-three/drei. Users can explore different sections of the base, each representing a product category. Hovering over a section will display a brief description, and clicking will zoom into a detailed view of the products. The map will have dynamic lighting effects to simulate a day-night cycle, enhancing the immersive experience.
Interaction Model & Motion Direction
The landing page will use a "parallax" interaction model, with layered depth effects as users scroll. Decorative elements like military vehicles and equipment will move at different speeds, creating a sense of depth. Internal pages will maintain a "static" model for clarity and ease of navigation.
Non-Functional Requirements
- The website must be responsive and function seamlessly across mobile, tablet, and desktop devices.
- The design should adhere to semantic HTML5 standards for accessibility and SEO.
- The chatbot must operate efficiently without external APIs, using a rule-based approach.
Tech Stack
- Frontend: HTML, CSS, JavaScript
- AI Chatbot: Rule-based JavaScript logic
- Storage: localStorage for cart persistence
Assumptions and Constraints
- The website will not require a backend server; all operations are client-side.
- Product images and descriptions are for demonstration purposes only.
- Compliance with local laws regarding military equipment is the buyer's responsibility.
Glossary
- AI Chatbot: A simulated AI interface for customer interaction.
- localStorage: A web storage API for persisting data in the browser.
- Semantic HTML5: HTML markup that uses elements according to their meaning and purpose.
This document provides a comprehensive overview of the requirements for the "earthy-military" project, ensuring all aspects of the website are addressed for successful development and deployment.
Welcome to TacticalGrid
Navigate the interactive base map to deploy into our divisions. From precision optics to field-tested survival kits, earthy-military outfits operators with battle-ready gear engineered for every theater.
Featured Equipment
Hand-picked, mission-grade gear from TacticalGrid. Hover to inspect each piece in 3D, flip for full specs, and deploy straight to your cart.
Recon Plate Carrier MK-IV
Modular load-bearing vest with quick-release ballistic plates and MOLLE webbing.
Recon Plate Carrier MK-IV
Tactical Gear
- MaterialCordura 500D
- Weight1.4 kg
- ProtectionNIJ IIIA
NightHawk Thermal Scope
Long-range thermal imaging sight with 640x480 sensor and 8x digital zoom.
NightHawk Thermal Scope
Optics & Sights
- Sensor640x480
- Range1800 m
- Battery9 hrs
Terrain Assault Boots
Waterproof all-terrain combat boots with reinforced ankle and slip-grip sole.
Terrain Assault Boots
Field Apparel
- UpperFull-grain leather
- SoleVibram XT
- RatingIPX7
Vanguard 60L Field Pack
Expandable assault backpack with hydration sleeve and weather-sealed compartments.
Vanguard 60L Field Pack
Survival Kits
- Capacity60 L
- FrameAlloy stay
- FabricRipstop nylon
SignalLink Tactical Radio
Encrypted dual-band handheld transceiver with 16 channels and IP67 sealing.
SignalLink Tactical Radio
Field Gear
- BandsVHF / UHF
- Range12 km
- Battery18 hrs
GripForce Combat Gloves
Cut-resistant tactical gloves with touchscreen tips and knuckle armor.
GripForce Combat Gloves
Field Apparel
- PalmSynthetic suede
- Cut levelEN-5
- SizesS - XXL
Navigate the earthy-military category grid
Four connected divisions of mission-ready gear. Hover a node to pull it into focus, follow the supply lines, then tap to deploy into the catalog.
Mission-Grade Services for Every Operator
From custom-fitted gear to hands-on training, earthy-military backs every piece of equipment with battle-tested support that keeps you ready.
Custom Fitting
Precision-tailored plate carriers, vests, and load-bearing rigs sized to your exact body profile and mission load-out.
Learn MoreMaintenance Support
Field-grade servicing for optics, comms, and tactical hardware to keep every piece of gear deployment-ready.
Learn MoreIntegration Services
Seamless system integration that unifies sights, mounts, and accessories into one cohesive combat-ready platform.
Learn MoreTraining Programs
Hands-on instruction on gear operation, maintenance drills, and tactical readiness led by experienced specialists.
Learn MoreReady to Gear Up?
From plate carriers to precision optics, every piece of TacticalGrid gear is built to perform when it matters most. Equip your loadout today or talk to our field specialists about a custom kit.
No comments yet. Be the first!