demo.py GITHUB_RELEASE_GUIDE.md index.html RELEASE_NOTES.md .gitignore README.md LICENSE

index.html

<!--
  Created by: Molla Samser & Rima Khatun
  Website: https://rskworld.in/contact.php
  Emails: help@rskworld.in, support@rskworld.in
  Phone: +91 93305 39277
  Year: 2026
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic Form - Web Development</title>
    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&family=Poppins:wght@300;400;500;600&display=swap"
        rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Custom CSS -->
    <link rel="stylesheet" href="css/style.css">
</head>

<body>

    <div class="container">
        <div class="form-wrapper">
            <div class="row">
                <!-- Contact Info Column (Visible on Desktop) -->
                <div class="col-left contact-info">
                    <div class="info-box">
                        <i class="fas fa-map-marker-alt"></i>
                        <h3>Our Location</h3>
                        <p>Kolkata, India</p>
                    </div>
                    <div class="info-box">
                        <i class="fas fa-phone-alt"></i>
                        <h3>Call Us</h3>
                        <p>+91 93305 39277</p>
                    </div>
                    <div class="info-box">
                        <i class="fas fa-envelope"></i>
                        <h3>Email Us</h3>
                        <p>help@rskworld.in<br>support@rskworld.in</p>
                    </div>
                </div>

                <!-- Form Column -->
                <div class="col-right">
                    <header>
                        <button id="themeToggle" class="theme-toggle" aria-label="Toggle Dark Mode">
                            <i class="fas fa-moon"></i>
                        </button>
                        <div class="icon-container">
                            <i class="fas fa-edit text-success"></i>
                        </div>
                        <h1>Get in Touch</h1>
                        <p>We'd love to hear from you. Send us a message!</p>
                    </header>

                    <form id="contactForm" novalidate>
                        <div class="input-group">
                            <div class="input-field">
                                <i class="fas fa-user"></i>
                                <input type="text" id="name" name="name" placeholder=" " autocomplete="name">
                                <label for="name">Full Name</label>
                                <span class="error-message"></span>
                            </div>
                        </div>

                        <div class="input-group">
                            <div class="input-field">
                                <i class="fas fa-envelope"></i>
                                <input type="email" id="email" name="email" placeholder=" " autocomplete="email">
                                <label for="email">Email Address</label>
                                <span class="error-message"></span>
                            </div>
                        </div>

                        <div class="input-group">
                            <div class="input-field textarea-field">
                                <i class="fas fa-comment-alt"></i>
                                <textarea id="message" name="message" placeholder=" " rows="5"
                                    maxlength="500"></textarea>
                                <label for="message">Message</label>
                                <span class="error-message"></span>
                                <div class="char-counter">0 / 500</div>
                            </div>
                        </div>

                        <button type="submit" class="submit-btn">
                            <span>Send Message</span>
                            <i class="fas fa-paper-plane"></i>
                        </button>
                    </form>

                    <div class="faq-section">
                        <h2>Frequently Asked Questions</h2>
                        <details>
                            <summary>How long does it take to get a response?</summary>
                            <p>We typically respond to all inquiries within 24-48 hours during business days.</p>
                        </details>
                        <details>
                            <summary>Is my data secure?</summary>
                            <p>Yes, we take data security seriously. Please review our Privacy Policy for more details.
                            </p>
                        </details>
                        <details>
                            <summary>Can I request a call back?</summary>
                            <p>Yes, simply mention your preferred time in the message box, and we'll try our best.</p>
                        </details>
                    </div>

                    <div class="form-footer">
                        <p>&copy; 2026 Basic Form Project. <br>Designed with <i class="fas fa-heart"
                                style="color: #e74c3c;"></i> by Molla Samser & Rima Khatun.</p>
                        <p class="footer-links">
                            <a href="privacy.html">Privacy Policy</a> | <a
                                href="https://rskworld.in/contact.php">Contact Us</a>
                        </p>
                    </div>
                </div>
            </div>

            <!-- Custom JS -->
            <script src="js/script.js"></script>
</body>

</html>

132 lines•5.9 KB

markup

RELEASE_NOTES.md

Raw Download

RELEASE_NOTES.md

# Release Notes - v1.0.0

## 🚀 Launch (v1.0.0)

We are excited to announce the first release of the **Basic Form** project!

### ✨ Key Features
- **Modern Glassmorphism UI**: A stunning, responsive design with frosted glass effects and animated gradients.
- **Dark/Light Mode**: Seamless theme switching with persistent user preference (LocalStorage).
- **Robust Validation**: Real-time input validation with visual feedback for Name, Email, and Message fields.
- **Auto-Save**: Never lose your draft; form data is automatically saved to your browser.
- **Simulation Mode**: Smart backend simulation for local testing without a server.

### 🛠 Technical Highlights
- Built with semantic HTML5 and vanilla CSS3 (no external frameworks).
- Pure JavaScript (ES6+) for all logic and interactions.
- PHP backend handler (`submit.php`) included for production readiness.
- Fully documented with `README.md` and MIT License.

### Contributors
- **Molla Samser**
- **Rima Khatun**

README.md

Raw Download

README.md

# Basic Form Project

A modern, responsive, and feature-rich Contact Form application built with HTML5, CSS3, and JavaScript. This project demonstrates best practices in web development, including form validation, local storage autosave, theme toggle (dark/light mode), and a glassmorphism design.

## Features

* **Responsive Design:** Fully responsive layout that adapting to desktops, tablets, and mobile devices.
* **Modern UI/UX:**
* Glassmorphism effect.
* Gradient background with animation.
* Floating labels and animated underlines for inputs.
* Smooth transitions and micro-interactions.
* **Dark/Light Mode:** Toggleable theme with persistence using LocalStorage.
* **Form Validation:**
* Real-time client-side validation for Name, Email, and Message.
* Visual feedback (green/red borders and error messages).
* **Auto-Save:** Drafts are automatically saved to LocalStorage, preventing data loss on page refresh.
* **Simulation Mode:**
* Simulates a backend request if running locally (file protocol) or if `submit.php` is unreachable.
* Includes a simulated delay and loading state.
* **Privacy Policy Page:** Dedicated page for privacy information.

## Technologies Used

* **HTML5:** Semantic structure.
* **CSS3:** Custom styles, Flexbox, Grid, CSS Variables, Animations.
* **JavaScript (ES6+):** DOM manipulation, Fetch API, LocalStorage, Event handling.
* **PHP:** Simple backend script (`submit.php`) to handle form submission (returns JSON).
* **Font Awesome:** For icons.
* **Google Fonts:** Poppins and Montserrat.

## File Structure

```
basic-form/
├── css/
│ └── style.css # Main stylesheet
├── js/
│ └── script.js # Application logic
├── index.html # Main contact form page
├── privacy.html # Privacy Policy page
├── submit.php # Backend handler
├── LICENSE # License file
└── README.md # Project documentation
```

## How to Run

1. **Clone the repository:**
```bash
git clone <repository-url>
```
2. **Open in Browser:**
* You can simply open `index.html` in any modern web browser.
* **Note:** The PHP backend (`submit.php`) requires a server environment (like Apache, Nginx, or PHP built-in server) to work strictly as intended. However, the JavaScript includes a **Simulation Mode** that intercepts the request if it fails or if run from the file system, allowing you to test the UI flow without a backend.

3. **Run with PHP (Optional):**
If you have PHP installed, you can run a local server:
```bash
php -S localhost:8000
```
Then visit `http://localhost:8000` in your browser.

## Authors

* **Molla Samser**
* **Rima Khatun**

## License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

LICENSE

Raw Download

MIT License

Copyright (c) 2026 Molla Samser & Rima Khatun

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

22 lines•1.1 KB

text

Theme Settings

Color Scheme

Display Options

Font Size

RELEASE_NOTES.md

README.md

Theme Settings

Color Scheme

Display Options

Font Size

RELEASE_NOTES.md

README.md

🚀 Support RSK World