### Leaflet Map Examples

Source: https://github.com/goodyttoor/csc_travel_template/blob/main/apps/maps/templates/maps_leaflet.html

Demonstrates various Leaflet map functionalities including basic map setup, adding markers, circles, polygons, handling user location, custom icons, GeoJSON layers, and layer controls.

```django
{% extends layout\_path %} {% load static %} {% load i18n %} {% block title %}Leaflet - Maps{% endblock %} {% block vendor\_css %} {{ block.super }}  {% endblock vendor\_css %} {% block vendor\_js %} {{ block.super }} {% endblock vendor\_js %} {% block page\_js %} {{ block.super }} {% endblock page\_js %} {% block content %} ... {% endblock %}
```

--------------------------------

### Basic Footer Example

Source: https://github.com/goodyttoor/csc_travel_template/blob/main/apps/ui/templates/ui_footer.html

Demonstrates a simple footer structure with copyright information and links to license, help, contact, and terms.

```html
{% extends layout_path %} {% load static %} {% load i18n %} {% block title %}Footer - UI elements{% endblock %} {% block content %}

##### Basic Footer

[{% get_theme_variables 'template_name' %}]({% get_theme_variables 'live_preview' %}) ©

[License]({% get_theme_variables 'license_url' %}) [Help](javascript:void(0)) [Contact](javascript:void(0)) [Terms & Conditions](javascript:void(0))

* * *

##### Footer with Elements

[{% get_theme_variables 'template_name' %}]({% get_theme_variables 'live_preview' %}) ©

 Show

Currency

[USD](javascript:void(0);) [Euro](javascript:void(0);) [Pound](javascript:void(0);)

[Bitcoin](javascript:void(0))

[Logout](javascript:void(0))

* * * 

##### Color Schema

[{% get_theme_variables 'template_name' %}]({% get_theme_variables 'live_preview' %}) ©

[License]({% get_theme_variables 'license_url' %}) [Help](javascript:void(0)) [Contact](javascript:void(0)) [Terms & Conditions](javascript:void(0))

[{% get_theme_variables 'template_name' %}]({% get_theme_variables 'live_preview' %}) ©

[License]({% get_theme_variables 'license_url' %}) [Help](javascript:void(0)) [Contact](javascript:void(0)) [Terms & Conditions](javascript:void(0))

[{% get_theme_variables 'template_name' %}]({% get_theme_variables 'live_preview' %}) ©

[License]({% get_theme_variables 'license_url' %}) [Help](javascript:void(0)) [Contact](javascript:void(0)) [Terms & Conditions](javascript:void(0))

[{% get_theme_variables 'template_name' %}]({% get_theme_variables 'live_preview' %}) ©

[License]({% get_theme_variables 'license_url' %}) [Help](javascript:void(0)) [Contact](javascript:void(0)) [Terms & Conditions](javascript:void(0))

[{% get_theme_variables 'template_name' %}]({% get_theme_variables 'live_preview' %}) ©

[License]({% get_theme_variables 'license_url' %}) [Help](javascript:void(0)) [Contact](javascript:void(0)) [Terms & Conditions](javascript:void(0))

[{% get_theme_variables 'template_name' %}]({% get_theme_variables 'live_preview' %}) ©

[License]({% get_theme_variables 'license_url' %}) [Help](javascript:void(0)) [Contact](javascript:void(0)) [Terms & Conditions](javascript:void(0))

[{% get_theme_variables 'template_name' %}]({% get_theme_variables 'live_preview' %}) ©

[License]({% get_theme_variables 'license_url' %}) [Help](javascript:void(0)) [Contact](javascript:void(0)) [Terms & Conditions](javascript:void(0))

[{% get_theme_variables 'template_name' %}]({% get_theme_variables 'live_preview' %}) ©

[License]({% get_theme_variables 'license_url' %}) [Help](javascript:void(0)) [Contact](javascript:void(0)) [Terms & Conditions](javascript:void(0))

[{% get_theme_variables 'template_name' %}]({% get_theme_variables 'live_preview' %}) ©

[License]({% get_theme_variables 'license_url' %}) [Help](javascript:void(0)) [Contact](javascript:void(0)) [Terms & Conditions](javascript:void(0))

* * *

##### Footer Theme

[{% get_theme_variables 'template_name' %}]({% get_theme_variables 'live_preview' %}) ©

[License]({% get_theme_variables 'license_url' %}) [Help](javascript:void(0)) [Contact](javascript:void(0)) [Terms & Conditions](javascript:void(0))

* * *

##### Advanced Footer

#### [{% get_theme_variables 'template_name' %}]({% get_theme_variables 'live_preview' %})

Get ready for better world

[](javascript:void(0))[](javascript:void(0))[](javascript:void(0))[](javascript:void(0))

document.write(new Date().getFullYear()) © {% get_theme_variables 'creator_name' %}

##### Company

*   [About](javascript:void(0))
*   [Career We're hiring](javascript:void(0))
*   [Blog](javascript:void(0))
*   [Customers](javascript:void(0))
*   [Hire us](javascript:void(0))
*   [FAQs](javascript:void(0))

##### Products

*   [Admin Template](javascript:void(0))
*   [UI Kit](javascript:void(0))
*   [Styleguide](javascript:void(0))
*   [API](javascript:void(0))
*   [Documentation](javascript:void(0))
*   [Changelog](javascript:void(0))

##### Features

*   [Affiliate Program](javascript:void(0))
*   [Integration](javascript:void(0))
*   [Support](javascript:void(0))
*   [Special Offers](javascript:void(0))
*   [Page Builder](javascript:void(0))
*   [Plans & Pricing](javascript:void(0))

{% endblock %}
```

--------------------------------

### Course Listing with Details

Source: https://github.com/goodyttoor/csc_travel_template/blob/main/apps/academy/templates/app_academy_course.html

Displays individual courses with images, titles, ratings, descriptions, duration, and action buttons like 'Start Over' or 'Continue'.

```HTML
[Basics of Angular]({% url 'app-academy-course-details' %})

Introductory course for Angular and framework basics in web development.

30 minutes

[Start Over]({% url 'app-academy-course-details' %}) [Continue]({% url 'app-academy-course-details' %})
```

```HTML
[Figma & More]({% url 'app-academy-course-details' %})

Introductory course for design and framework basics in web development.

16 hours

[Start Over]({% url 'app-academy-course-details' %}) [Continue]({% url 'app-academy-course-details' %})
```

```HTML
[Keyword Research]({% url 'app-academy-course-details' %})

Keyword suggestion tool provides comprehensive details & keyword suggestions.

7 hours

[Start Over]({% url 'app-academy-course-details' %}) [Continue]({% url 'app-academy-course-details' %})
```

```HTML
[Basics to Advanced]({% url 'app-academy-course-details' %})

20 more lessons like this about music production, writing, mixing, mastering

30 minutes

[Start Over]({% url 'app-academy-course-details' %}) [Continue]({% url 'app-academy-course-details' %})
```

```HTML
[Art & Drawing]({% url 'app-academy-course-details' %})

Easy-to-follow video & guides show you how to draw animals, people & more.

Completed

[Start Over]({% url 'app-academy-course-details' %})
```

```HTML
[Basics Fundamentals]({% url 'app-academy-course-details' %})

This guide will help you develop a systematic approach user interface.

16 hours

[Start Over]({% url 'app-academy-course-details' %}) [Continue]({% url 'app-academy-course-details' %})
```

--------------------------------

### Free Trial and Guarantee Information

Source: https://github.com/goodyttoor/csc_travel_template/blob/main/apps/front_pages/templates/pricing_page.html

This snippet highlights a 14-day free trial offer and a money-back guarantee, encouraging users to try the service. It includes a call-to-action button to start the trial.

```HTML
![Api Key Image]({% static 'img/illustrations/girl-with-laptop.png' %})

### Pick a plan that works best for you

Stay cool, we have a 48-hour money back guarantee!

[Start 14-day free trial]({% url 'payment-page' %})
```

--------------------------------

### Collapsible Card Example

Source: https://github.com/goodyttoor/csc_travel_template/blob/main/apps/cards/templates/cards_actions.html

Shows how to create a collapsible card using the `.card-collapsible` class. It includes an example of how to make the content visible by default using the `.show` class.

```html
<div class="card card-collapsible">
  <div class="card-header">
    <div class="card-title">Collapsible Card</div>
    <div class="actions">
      <a href="javascript:void(0);" data-toggle="collapse" data-target="#collapsibleCard" aria-expanded="true" aria-controls="collapsibleCard"><i class="la la-chevron-down"></i></a>
    </div>
  </div>
  <div id="collapsibleCard" class="collapse show">
    <div class="card-body">
      Collapse card content using collapse action.
    </div>
  </div>
</div>
```

--------------------------------

### Two-Step Verification Setup

Source: https://github.com/goodyttoor/csc_travel_template/blob/main/apps/users/templates/app_user_view_security.html

Section for setting up two-step verification (authentication). Explains the security benefit and provides options for SMS-based verification. Includes links for learning more.

```html
<!DOCTYPE html>
<html>
<head>
    <title>Two-Step Verification</title>
</head>
<body>
    <h2>Two-steps verification</h2>
    <p>Keep your account secure with authentication step.</p>
    <h3>SMS</h3>
    <button>Enable SMS Verification</button>
    <p>Two-factor authentication adds an additional layer of security to your account by requiring more than just a password to log in. <a href="javascript:void(0);">Learn more.</a></p>
</body>
</html>
```

--------------------------------

### Navigation Links Example

Source: https://github.com/goodyttoor/csc_travel_template/blob/main/apps/ui/templates/ui_navbar.html

Demonstrates a common set of navigation links used across different color schemes and the navbar theme. These links are placeholders and do not perform any action.

```javascript
["Home"](javascript:void(0))
["About"](javascript:void(0))
["Contact"](javascript:void(0))
["Disabled"](javascript:void(0))
```

--------------------------------

### Navbar with Supported Content Examples

Source: https://github.com/goodyttoor/csc_travel_template/blob/main/apps/ui/templates/ui_navbar.html

Illustrates how different content types like text, input groups, and buttons can be integrated into a navbar.

```HTML
<!-- Text Example -->
<nav>
  <a href="javascript:void(0)">Navbar</a>
  <a href="javascript:void(0)">Home</a>
  <a href="javascript:void(0)">About</a>
  <a href="javascript:void(0)">Contact</a>
</nav>

<!-- Input Group Example -->
<nav>
  <a href="javascript:void(0)">Navbar</a>
  <a href="javascript:void(0)">Home</a>
  <a href="javascript:void(0)">About</a>
  <a href="javascript:void(0)">Contact</a>
  <div>
    <input type="text" placeholder="Input Group">
  </div>
</nav>

<!-- Button Example -->
<nav>
  <a href="javascript:void(0)">Navbar</a>
  <a href="javascript:void(0)">Home</a>
  <a href="javascript:void(0)">About</a>
  <a href="javascript:void(0)">Contact</a>
  <button>Buy Now</button>
</nav>
```

--------------------------------

### SweetAlert2 Basic Examples

Source: https://github.com/goodyttoor/csc_travel_template/blob/main/apps/extended_ui/templates/extended_ui_sweetalert2.html

Demonstrates the basic usage of SweetAlert2, including alerts with titles, footers, and HTML content. SweetAlert2 is designed to be responsive and visually appealing across different devices.

```HTML
{% extends layout_path %} {% load static %} {% load i18n %} {% block title %}SweetAlert2 - Extended UI{% endblock %} {% block vendor_css %} {{ block.super }}   {% endblock vendor_css %} {% block vendor_js %} {{ block.super }} {% endblock vendor_js %} {% block page_js %} {{ block.super }} {% endblock page_js %} {% block content %}

##### Basic Examples

SweetAlert automatically centers itself on the page and looks great no matter if you're using a desktop computer, mobile or tablet. It's even highly customizable, as you can see below!

Basic With Title With Footer HTML

{% endblock %}
```

--------------------------------

### User Profile Links Example

Source: https://github.com/goodyttoor/csc_travel_template/blob/main/apps/ui/templates/ui_navbar.html

Shows a list of user-specific links, such as Profile, Settings, and Logout, which are repeated for each color scheme and navbar theme. These are also placeholder links.

```javascript
*   [Profile](javascript:void(0);)
*   [Settings](javascript:void(0);)
*   [Logout](javascript:void(0);)
```

--------------------------------

### Small Table Example

Source: https://github.com/goodyttoor/csc_travel_template/blob/main/apps/tables/templates/tables_basic.html

Illustrates a compact table design, suitable for displaying project information with reduced spacing. Includes project name, client, users (via avatars), status, and action links.

```HTML
<table class="table table-sm">
  <thead>
    <tr>
      <th>Project</th>
      <th>Client</th>
      <th>Users</th>
      <th>Status</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Angular Project</td>
      <td>Albert Cook</td>
      <td>
        <img src="{% static 'img/avatars/5.png' %}" alt="Avatar">
        <img src="{% static 'img/avatars/6.png' %}" alt="Avatar">
        <img src="{% static 'img/avatars/7.png' %}" alt="Avatar">
      </td>
      <td>Active</td>
      <td>
        <a href="javascript:void(0);">Edit</a>
        <a href="javascript:void(0);">Delete</a>
      </td>
    </tr>
    <tr>
      <td>React Project</td>
      <td>Barry Hunter</td>
      <td>
        <img src="{% static 'img/avatars/5.png' %}" alt="Avatar">
        <img src="{% static 'img/avatars/6.png' %}" alt="Avatar">
        <img src="{% static 'img/avatars/7.png' %}" alt="Avatar">
      </td>
      <td>Completed</td>
      <td>
        <a href="javascript:void(0);">Edit</a>
        <a href="javascript:void(0);">Delete</a>
      </td>
    </tr>
    <tr>
      <td>VueJs Project</td>
      <td>Trevor Baker</td>
      <td>
        <img src="{% static 'img/avatars/5.png' %}" alt="Avatar">
        <img src="{% static 'img/avatars/6.png' %}" alt="Avatar">
        <img src="{% static 'img/avatars/7.png' %}" alt="Avatar">
      </td>
      <td>Scheduled</td>
      <td>
        <a href="javascript:void(0);">Edit</a>
        <a href="javascript:void(0);">Delete</a>
      </td>
    </tr>
    <tr>
      <td>Bootstrap Project</td>
      <td>Jerry Milton</td>
      <td>
        <img src="{% static 'img/avatars/5.png' %}" alt="Avatar">
        <img src="{% static 'img/avatars/6.png' %}" alt="Avatar">
        <img src="{% static 'img/avatars/7.png' %}" alt="Avatar">
      </td>
      <td>Pending</td>
      <td>
        <a href="javascript:void(0);">Edit</a>
        <a href="javascript:void(0);">Delete</a>
      </td>
    </tr>
  </tbody>
</table>
```

--------------------------------

### Borderless Table Example

Source: https://github.com/goodyttoor/csc_travel_template/blob/main/apps/tables/templates/tables_basic.html

Demonstrates a table with no visible borders, presenting project data in a clean and minimalist layout. Includes project name, client, users (via avatars), status, and action links.

```HTML
<table class="table">
  <thead>
    <tr>
      <th>Project</th>
      <th>Client</th>
      <th>Users</th>
      <th>Status</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Angular Project</td>
      <td>Albert Cook</td>
      <td>
        <img src="{% static 'img/avatars/5.png' %}" alt="Avatar">
        <img src="{% static 'img/avatars/6.png' %}" alt="Avatar">
        <img src="{% static 'img/avatars/7.png' %}" alt="Avatar">
      </td>
      <td>Active</td>
      <td>
        <a href="javascript:void(0);">Edit</a>
        <a href="javascript:void(0);">Delete</a>
      </td>
    </tr>
    <tr>
      <td>React Project</td>
      <td>Barry Hunter</td>
      <td>
        <img src="{% static 'img/avatars/5.png' %}" alt="Avatar">
        <img src="{% static 'img/avatars/6.png' %}" alt="Avatar">
        <img src="{% static 'img/avatars/7.png' %}" alt="Avatar">
      </td>
      <td>Completed</td>
      <td>
        <a href="javascript:void(0);">Edit</a>
        <a href="javascript:void(0);">Delete</a>
      </td>
    </tr>
    <tr>
      <td>VueJs Project</td>
      <td>Trevor Baker</td>
      <td>
        <img src="{% static 'img/avatars/5.png' %}" alt="Avatar">
        <img src="{% static 'img/avatars/6.png' %}" alt="Avatar">
        <img src="{% static 'img/avatars/7.png' %}" alt="Avatar">
      </td>
      <td>Scheduled</td>
      <td>
        <a href="javascript:void(0);">Edit</a>
        <a href="javascript:void(0);">Delete</a>
      </td>
    </tr>
    <tr>
      <td>Bootstrap Project</td>
      <td>Jerry Milton</td>
      <td>
        <img src="{% static 'img/avatars/5.png' %}" alt="Avatar">
        <img src="{% static 'img/avatars/6.png' %}" alt="Avatar">
        <img src="{% static 'img/avatars/7.png' %}" alt="Avatar">
      </td>
      <td>Pending</td>
      <td>
        <a href="javascript:void(0);">Edit</a>
        <a href="javascript:void(0);">Delete</a>
      </td>
    </tr>
  </tbody>
</table>
```

--------------------------------

### Promo Code Application

Source: https://github.com/goodyttoor/csc_travel_template/blob/main/apps/form_layouts/templates/form_layouts_sticky.html

This section enables users to apply promotional codes to their order. It lists several example codes with their respective discounts and provides an 'Apply' button for each.

```html
##### 3. Apply Promo code

Apply

OR

*   TAKEITALL
    
    Apply this code to get 15% discount on orders above 20$.
    
    Apply
    
*   FESTIVE10
    
    Apply this code to get 10% discount on all orders.
    
    Apply
    
*   MYSTERYDEAL
    
    Apply this code to get discount between 10% - 50%.
    
    Apply
    

* * *
```

--------------------------------

### Numeral.js Formatting Examples

Source: https://github.com/goodyttoor/csc_travel_template/blob/main/apps/extended_ui/templates/extended_ui_misc.html

Demonstrates various formatting capabilities of the Numeral.js library for numbers, including abbreviations (e.g., '1.2a'), currency, binary prefixes, percentages, time formats, and scientific notation.

```javascript
numeral(974)

numeral(1230974).format('0.0a')

numeral(1000.234).format('$0,0.00')

numeral(3467479682787).format('0.000 ib')

numeral(0.974878234).format('0.000%')

numeral(63846).format('00:00:00')

numeral(1123456789).format('0,0e+0')
```

--------------------------------

### DataTables - Column Search Example

Source: https://github.com/goodyttoor/csc_travel_template/blob/main/apps/tables/templates/tables_datatables_advanced.html

Illustrates a table setup for column-specific searching, with input fields for Name, Email, Post, City, and Date, followed by the table headers and data rows.

```html
##### Column Search

Name

Email

Post

City

Date

Salary

Name

Email

Post

City

Date

Salary
```

--------------------------------

### Deal Creation Wizard Steps

Source: https://github.com/goodyttoor/csc_travel_template/blob/main/apps/wizard_examples/templates/wizard_ex_create_deal.html

This snippet outlines the main steps involved in the deal creation wizard, from choosing the deal type to reviewing and completing the process. It highlights the user flow and key information captured at each stage.

```html
{% extends layout_path %}
{% load static %}
{% load i18n %}

{% block title %}Create Deal - Wizard Examples{% endblock %}

{% block vendor_css %}
    {{ block.super }}
{% endblock vendor_css %}

{% block vendor_js %}
    {{ block.super }}
{% endblock vendor_js %}

{% block page_js %}
    {{ block.super }}
{% endblock page_js %}

{% block content %}

Deal Type
Choose type of deal

Deal Details
Provide deal details

Deal Usage
Limitations & Offers

Review & Complete
Launch a deal!

![wizard-create-deal]({% static 'img/illustrations/wizard-create-deal-girl-with-laptop-' %}{{ COOKIES.style|default:style }}.png)

Percentage
Create a deal which offer uses some % off (i.e 5% OFF) on total. 

Flat Amount
Create a deal which offer uses flat $ off (i.e $5 OFF) on the total. 

Prime Member
Create prime member only deal to encourage the prime members. 

Discount 

Enter the discount percentage. 10 = 10%

Region
Select targeted region Asia Africa Europe North America South America Australia

Select applicable regions for the deal.

Previous Next

Deal Title 

Deal Code 

Deal Description

Offered Items
Select offered item Apple iPhone 12 Pro Max (256GB) Apple iPhone 12 Pro (512GB) Apple iPhone 12 Mini (256GB) Apple iPhone 11 Pro Max (256GB) Apple iPhone 11 (64GB) OnePlus Nord CE 5G (128GB)

Cart condition
Select cart condition Cart must contain all selected Downloads Cart needs one or more of the selected Downloads

Deal Duration 

Notify Users

Email

SMS

Push Notification

Previous Next

User Type
Select user type All Registered Unregistered Prime members

Max Users 

Minimum Cart Amount 

Promotional Fee 

Payment Method
Select payment method Any Credit Card Net Banking Wallet

Deal Status
Select status Active Inactive Suspend Abandone

Limit this discount to a single-use per customer?

Previous Next

#### Almost done! 🚀

Confirm your deal details information and submit to create it.

Deal Type

Percentage

Amount

25%

Deal Code

25PEROFF

Deal Title

Black friday sale, 25% OFF

Deal Duration

2021-07-14 to 2021-07-30

![deal image cap]({% static 'img/illustrations/wizard-create-deal-confirm.png' %})

 I have confirmed the deal details.

Previous Submit

{% endblock %}
```

--------------------------------

### DataTables - Ajax Sourced Server-side Example

Source: https://github.com/goodyttoor/csc_travel_template/blob/main/apps/tables/templates/tables_datatables_advanced.html

Demonstrates a table structure for server-side processing using Ajax, displaying columns for Full name, Email, Position, Office, Start date, and Salary.

```html
##### Ajax Sourced Server-side

Full name

Email

Position

Office

Start date

Salary
```

--------------------------------

### Feature Comparison Table

Source: https://github.com/goodyttoor/csc_travel_template/blob/main/apps/front_pages/templates/pricing_page.html

This section presents a comparison of features across different pricing plans (Starter, Pro, Enterprise), including free trial availability, user limits, support options, integrations, and data storage. It uses Django template tags for generating 'Choose Plan' links.

```HTML
Features

Native front features

Starter

Free

Pro

$7.5/month

Enterprise

$16/month

14-days free trial

No user limit

Product Support

Email Support

Add-On-Available

Integrations

Removal of Front branding

Add-On-Available

Active maintenance & support

Data storage for 365 days

[Choose Plan]({% url 'payment-page' %})

[Choose Plan]({% url 'payment-page' %})

[Choose Plan]({% url 'payment-page' %})
```

--------------------------------

### Remove Card Example

Source: https://github.com/goodyttoor/csc_travel_template/blob/main/apps/cards/templates/cards_actions.html

Provides an example of a card with a remove action, implemented using the `.card-close` class. This action hides the card from the page.

```html
<div class="card">
  <div class="card-header">
    <div class="card-title">Remove Card</div>
    <div class="actions">
      <a href="javascript:void(0);" class="card-close"><i class="la la-times"></i></a>
    </div>
  </div>
  <div class="card-body">
    Remove card from page using remove card action.
  </div>
</div>
```

--------------------------------

### Frequently Asked Questions (FAQs)

Source: https://github.com/goodyttoor/csc_travel_template/blob/main/apps/front_pages/templates/pricing_page.html

This section addresses common questions about the service, including payment methods and response limits. It uses Markdown for headings and lists, and includes placeholder text for detailed answers.

```HTML
#### FAQs

Let us help answer the most common questions you might have.

What counts towards the 100 responses limit?
--------------------------------------------

We accept Visa®, MasterCard®, American Express®, and PayPal®. So you can be confident that your credit card information will be kept safe and secure.

How do you process payments?
----------------------------

Donec placerat, lectus sed mattis semper, neque lectus feugiat lectus, varius pulvinar diam eros in elit. Pellentesque convallis laoreet laoreet.Donec placerat, lectus sed mattis semper, neque lectus feugiat lectus, varius pulvinar diam eros in elit. Pellentesque convallis laoreet laoreet.

Do you have a money-back guarantee?
-----------------------------------

We count all responses submitted through all your forms in a month. If you already received 100 responses this month, you won’t be able to receive any more of them until next month when the counter resets.

###### I have more questions. Where can I get help?

2Checkout accepts all types of credit and debit cards.
```

--------------------------------

### DataTables Fixed Columns Example

Source: https://github.com/goodyttoor/csc_travel_template/blob/main/apps/tables/templates/tables_datatables_extensions.html

Illustrates a DataTables table with fixed columns. The example includes columns for Name, Position, Email, City, Date, Salary, Age, Experience, Status, and Action.

```django
##### Fixed Columns

Name

Position

Email

City

Date

Salary

Age

Experience

Status

Action

* * *

```

--------------------------------

### Plan Selection Step

Source: https://github.com/goodyttoor/csc_travel_template/blob/main/apps/authentication/templates/auth_register_multisteps.html

This section outlines the available subscription plans (Basic, Standard, Enterprise) with their respective pricing and descriptions. It's part of the multi-step sign-up process.

```html
#### Select Plan

Select plan as per your requirement

Basic A simple start for start ups & Students $ 0 /month 

Standard For small to medium businesses $ 99 /month 

Enterprise Solution for enterprise & organizations $ 499 /year 

```

--------------------------------

### Form Label Alignment

Source: https://github.com/goodyttoor/csc_travel_template/blob/main/apps/form_layouts/templates/form_layouts_horizontal.html

Demonstrates forms where labels are aligned differently, possibly to the left or right of the input fields, enhancing visual structure. Includes account and personal info sections, similar to the separator example, with options for country, language, and birth date.

```Django Template
###### 1. Account Details Username Email @example.com Password * * * ###### 2. Personal Info Full Name Country Select Australia Bangladesh Belarus Brazil Canada China France Germany India Indonesia Israel Italy Japan Korea, Republic of Mexico Philippines Russian Federation South Africa Thailand Turkey Ukraine United Arab Emirates United Kingdom United States Language English French German Portuguese Birth Date Phone No Submit Cancel
```

--------------------------------

### Basic Checkbox Example

Source: https://github.com/goodyttoor/csc_travel_template/blob/main/apps/forms/templates/forms_custom_options.html

Illustrates basic checkbox options for discounts and product updates.

```HTML
##### Basic Checkboxes

 Discount 20% Get 20% off on your next purchases!

 Updates Free Get Updates regarding related products.
```

--------------------------------

### Dropdown Menu Alignment

Source: https://github.com/goodyttoor/csc_travel_template/blob/main/apps/ui/templates/ui_dropdowns.html

Provides examples of dropdown menus with different alignment options (end-aligned, start-aligned) and responsive behavior.

```javascript
javascript:void(0);
```

--------------------------------

### Account Information Step

Source: https://github.com/goodyttoor/csc_travel_template/blob/main/apps/authentication/templates/auth_register_multisteps.html

This section defines the fields for the 'Account Information' step of the sign-up process, including username, email, password, confirm password, and profile link. It also includes navigation buttons.

```html
#### Account Information

Enter Your Account Details

Username 

Email 

Password

Confirm Password

Profile Link 

Previous Next
```

--------------------------------

### Notifications

Source: https://github.com/goodyttoor/csc_travel_template/blob/main/apps/ui/templates/ui_badges.html

Examples of notification badges, including numbered labels, pills, and dot styles, indicating counts or status.

```HTML
<p>Badge 12 Label Badge 12 Pill 12 Dot 6 5 10</p>
```

--------------------------------

### Referral Program Metrics and Instructions

Source: https://github.com/goodyttoor/csc_travel_template/blob/main/apps/ecommerce/templates/app_ecommerce_referral.html

Displays key performance indicators for the referral program, such as total earnings, unpaid earnings, signups, and conversion rate. It also provides a step-by-step guide on how to use the referral system, including creating referral links, earning rewards, and inviting friends.

```html
##### $24,983

Total Earning

##### $8,647

Unpaid Earning

##### 2,367

Signups

##### 4.5%

Conversion Rate

##### How to use

Integrate your referral code in 3 easy steps.

![Rocket]({% static 'svg/icons/rocket.svg' %})

Create & validate your referral link and get

###### $50

![user-info]({% static 'svg/icons/user-info' %}.svg)

For every new signup you get

###### 10%

![paper]({% static 'svg/icons/paper.svg' %})

Get other friends to generate link and get

###### $100

##### Invite your friends

Enter friend’s email address and invite them 

Submit

##### Share the referral link

Share referral link in social media 

Users

Referred ID

Status

Value

Earnings
```

--------------------------------

### Basic Radio Button Example

Source: https://github.com/goodyttoor/csc_travel_template/blob/main/apps/forms/templates/forms_custom_options.html

Demonstrates a basic radio button selection for project and team member allocation.

```HTML
##### Basic Radio

 Basic Free Get 1 project with 1 teams members.

 Premium $ 5.00 Get 5 projects with 5 team members.
```

--------------------------------

### My Orders FAQs

Source: https://github.com/goodyttoor/csc_travel_template/blob/main/apps/pages/templates/pages_faq.html

Addresses common queries regarding order success confirmation, promotion code issues, and order tracking for both account holders and guests.

```HTML
##### My Orders

Lorem ipsum, dolor sit amet.

Has my order been successful?
-----------------------------

All successful order transactions will receive an order confirmation email once the order has been processed. If you have not received your order confirmation email within 24 hours, check your junk email or spam folder.

Alternatively, log in to your account to check your order summary. If you do not have a account, you can contact our Customer Care Team on 1-000-000-000.

My Promotion Code is not working, what can I do?
------------------------------------------------

If you are having issues with a promotion code, please contact us at 1 000 000 000 for assistance.

How do I track my Orders?
-------------------------

If you have an account just sign into your account from [here](javascript:void(0);) and select “My Orders”.

If you have a a guest account track your order from [here](javascript:void(0);) using the order number and the email address.
```

--------------------------------

### Bootstrap Maxlength Input Examples

Source: https://github.com/goodyttoor/csc_travel_template/blob/main/apps/forms/templates/forms_extras.html

Shows how to use Bootstrap Maxlength to limit the number of characters users can enter into input fields and textareas.

```html
<input type="text" placeholder="Input" />
<textarea placeholder="Textarea"></textarea>
```

--------------------------------

### On Route Vehicles Details

Source: https://github.com/goodyttoor/csc_travel_template/blob/main/apps/logistics/templates/app_logistics_dashboard.html

Displays details for vehicles currently on route, including their location, starting and ending points, any warnings, and progress status.

```HTML
##### On route vehicles
[Select All](javascript:void(0);) [Refresh](javascript:void(0);) [Share](javascript:void(0);)

location

starting route

ending route

warnings

progress
```

--------------------------------

### Share Project Modal - Django

Source: https://github.com/goodyttoor/csc_travel_template/blob/main/apps/modal_examples/templates/modal_examples.html

An elegant modal popup for sharing project options, easily usable on any page.

```django
{% include "partials/_modals/modal_share_project.html" %}
```

--------------------------------

### Progress Indicator Example

Source: https://github.com/goodyttoor/csc_travel_template/blob/main/apps/ui/templates/ui_list_groups.html

A simple progress indicator, likely a link or button that triggers a progress-related action or displays progress information.

```html
<div>
  <h6>Bootstrap is an open source toolkit</h6>
</div>
```

--------------------------------

### Landing Page Features Section

Source: https://github.com/goodyttoor/csc_travel_template/blob/main/apps/front_pages/templates/landing_page.html

This section highlights the key features of the template, such as 'Quality Code', 'Continuous Updates', 'Starter-Kit', 'API Ready', 'Excellent Support', and 'Well Documented'. Each feature is accompanied by an icon and a brief description.

```HTML
Useful Features

#### Everything you need ![laptop charging]({% static 'img/front-pages/icons/section-title-icon.png' %})  to start your next project

Not just a set of tools, the package includes ready-to-deploy conceptual application.

![laptop charging]({% static 'img/front-pages/icons/laptop.png' %})

##### Quality Code

Code structure that all developers will easily understand and fall in love with.

![transition up]({% static 'img/front-pages/icons/rocket.png' %})

##### Continuous Updates

Free updates for the next 12 months, including new demos and features.

![edit]({% static 'img/front-pages/icons/paper.png' %})

##### Stater-Kit

Start your project quickly without having to remove unnecessary features.

![3d select solid]({% static 'img/front-pages/icons/check.png' %})

##### API Ready

Just change the endpoint and see your own data loaded within seconds.

![lifebelt]({% static 'img/front-pages/icons/user.png' %})

##### Excellent Support

An easy-to-follow doc with lots of references and code examples.

![google docs]({% static 'img/front-pages/icons/keyboard.png' %})

##### Well Documented

An easy-to-follow doc with lots of references and code examples.
```

--------------------------------

### Django Template Structure

Source: https://github.com/goodyttoor/csc_travel_template/blob/main/apps/wizard_examples/templates/wizard_ex_property_listing.html

Basic Django template structure including extending a base layout, loading static files and internationalization, and defining content blocks for title, CSS, JavaScript, and the main page content.

```django
{% extends layout\_path %}
{% load static %}
{% load i18n %}

{% block title %}Property Listing - Wizard Examples{% endblock %}

{% block vendor_css %}
 {{ block.super }}
{% endblock vendor_css %}

{% block vendor_js %}
 {{ block.super }}
{% endblock vendor_js %}

{% block page_js %}
 {{ block.super }}
{% endblock page_js %}

{% block content %}
 ... content ...
{% endblock %}
```

--------------------------------

### Payment FAQs

Source: https://github.com/goodyttoor/csc_travel_template/blob/main/apps/pages/templates/pages_faq.html

Answers common questions related to payment processing, accepted methods, and troubleshooting order placement issues.

```HTML
##### Payment

Get help with payment

When is payment taken for my order?
-----------------------------------

Payment is taken during the checkout process when you pay for your order. The order number that appears on the confirmation screen indicates payment has been successfully processed.

How do I pay for my order?
--------------------------

We accept Visa®, MasterCard®, American Express®, and PayPal®. Our servers encrypt all information submitted to them, so you can be confident that your credit card information will be kept safe and secure.

What should I do if I'm having trouble placing an order?
--------------------------------------------------------

For any technical difficulties you are experiencing with our website, please contact us at our [support portal](javascript:void(0);), or you can call us toll-free at 1-000-000-000, or email us at [order@companymail.com](javascript:void(0);)

Which license do I need for an end product that is only accessible to paying users?
-----------------------------------------------------------------------------------

If you have paying users or you are developing any SaaS products then you need an Extended License. For each products, you need a license. You can get free lifetime updates as well.

Does my subscription automatically renew?
-----------------------------------------

No, This is not subscription based item.Pastry pudding cookie toffee bonbon jujubes jujubes powder topping. Jelly beans gummi bears sweet roll bonbon muffin liquorice. Wafer lollipop sesame snaps.
```

--------------------------------

### DataTables Fixed Header Example

Source: https://github.com/goodyttoor/csc_travel_template/blob/main/apps/tables/templates/tables_datatables_extensions.html

Shows how to implement a DataTables table with a fixed header. The table includes columns for id, Name, Email, Date, Salary, Status, and Action.

```django
##### Fixed Header

id

Name

Email

Date

Salary

Status

Action

id

Name

Email

Date

Salary

Status

Action

* * *

```

--------------------------------

### DataTables Select Example

Source: https://github.com/goodyttoor/csc_travel_template/blob/main/apps/tables/templates/tables_datatables_extensions.html

Demonstrates the select functionality in DataTables, allowing rows to be selected. The table contains columns for Name, Position, Email, City, Date, Salary, and Status.

```django
##### Select

Name

Position

Email

City

Date

Salary

Status

{% endblock %}
```

--------------------------------

### Landing Page Hero Section

Source: https://github.com/goodyttoor/csc_travel_template/blob/main/apps/front_pages/templates/landing_page.html

This section displays a hero image, a main heading, a subtitle, and a call to action for early access. It also includes dynamic image loading based on user preferences (style) and links to application pages.

```HTML
{% static 'img/front-pages/backgrounds/hero-bg.png' %})

One dashboard to manage all your businesses
===========================================

Production-ready & easy to use Admin Template  
for Reliability and Customizability.
------------------------------------------------------------------------------------

Join community ![Join community arrow]({% static 'img/front-pages/icons/Join-community-arrow.png' %}) [Get early access]({% url 'landing-page' %}#landingPricing)

 [![hero dashboard]({% static 'img/front-pages/landing-page/hero-dashboard-' %}{{ COOKIES.style|default:style }}.png) ![hero elements]({% static 'img/front-pages/landing-page/hero-elements-' %}{{ COOKIES.style|default:style }}.png)]({% url 'app-ecommerce-dashboard' %})
```

--------------------------------

### Property Listing Form Sections

Source: https://github.com/goodyttoor/csc_travel_template/blob/main/apps/wizard_examples/templates/wizard_ex_property_listing.html

Sections of the property listing form, including personal details, property details, features, area, and price. It also includes CSRF token for security and options for user roles.

```html
Personal Details Your Name/Email

Property Details Property Type

Property Features Bedrooms/Floor No

Property Area Covered Area

Price Details Expected Price

{% csrf_token %}

I am the Builder List property as Builder, list your project and get highest reach. 

I am the Owner Submit property as an Individual. Lease, Rent or Sell at the best price. 

I am a Broker Earn highest commission by listing your clients properties at the best price. 

First Name 

Last Name 

Username 

Password

Email 

Contact

US (+1) 

Previous Next

Sale the property Post your property for sale.  
Unlimited free listing. 

Rent the property Post your property for rent.  
Unlimited free listing. 

Property Type Select Property Type Flat/ Apartment Residential House Villa Builder Floor Apartment Residential Land/ Plot Penthouse Studio Apartment

Zip Code 

Country Select Australia Bangladesh Belarus Brazil Canada China France Germany India Indonesia Israel Italy Japan Korea, Republic of Mexico Philippines Russian Federation South Africa Thailand Turkey Ukraine United Arab Emirates United Kingdom United States

State 

City 

Landmark 

Address

Previous Next

Bedrooms 

Floor No 

Bathrooms 

Furnished Status Select furnished status Fully furnished Furnished Semi furnished Unfurnished

Furnishing Details 

Is there any common area?

 Yes

 No

Is there any attached balcony?

 Yes

 No

Previous Next

Total Area

 sq-ft

Carpet Area

 sq-ft

Plot Area

 sq-yd

Available From 

Possession Status

 Under Construction

 Ready to Move

Transaction Type

 New Property

 Resale

Is Property Facing Main Road?

 Yes

 No

Gated Colony?

 Yes

 No

Previous Next

Expected Price

 $

Price per Sqft

 $

Maintenance Charge

 $

Maintenance Monthly Quarterly Yearly One-time Per sqft. Monthly

Booking/Token Amount

 $

Other Amount

 $

Show Price as

 Negotiable

 Call for Price

Price includes

 Car Parking

 Club Membership

 Stamp Duty & Registration charges excluded.

Previous Submit
```