NTARep.com Agent Resource Website Login Page
NTALife Customer Service Welcome/Category Pages
NTALife Customer Service Policy Pages
NTALife Customer Service Link Maintenance
NTALife Customer Service Link Maintenance
NTALife Customer Service Link Maintenance
NTALife Customer Service Link Maintenance
https://www.ntarep.com This site supports 1024 X 768 resolution and was made from a single psd I got from Jeremy Dennis of NTA Life. I recreated ALL gradients and round edges using CSS3 and PIE to make IE compatible and displays the same regardless of browser. I minimize my use of images in development so you'll notice either CSS linear gradients or PIE generated SVG. This Agent Resource site was written in: (X)HTML, CSS 2/3, Javascript (vanilla and ExtJS), and PHP including fPDF for all Repotrs

Slide 1 showcases the login page.

This page allows agents to securely log in and a variable quote loads using the "random" function. All gradients (including buttons) sitewide are fully compatible using CSS 3, older IE fallback to generated SVG using CSS Pie.

Slide 2 shows the Home page.

The menus are completely database fed using the structure I designed for menus, submenus, and authorization levels (there are 7 of them). Again, ALL gradients are fully compatible.

Several grids showcase the top performers by a variety of metrics and a slideshow fades in and out. As you click on images in the slideshow, videos open in a lightbox or pdfs will open depending on back end settings. All of these slides are stored in the DB2 system and the thumbs below operate on hover.

Slide 3 highlights the slide maintenance page.

The slides show a drag and drop preview on the left, and can be edited or deleted with the corresponding icons.

A preview can be seen by clicking that button in a non-modal, popunder, floating window. You can upload a slide image and/or attachment and link the image to a different html page, a video, or a pdf. Pages and videos will open in the show in a modal popunder window. There is a rich-text editor that wil convert yor slide to html and submission stores in the databse.

Slide 4 shows the Promotions page.

This page shows the approved PDF promotional materials and prompts you to add the details before the document generates in PDF format with your details.

These flyers insert your chosen parameters in a format everyone can use.

Slide 5 shows 1/2 of the mapping application.

This app uses the Bing Maps API to plot ISDs and buildings (see slide 6).

Each orange pin represents an ISD. A pin with a plus (+) means there are ISDs too close to view, when clicked, the map zooms to a center point to view closer. There is a floating div that shows brief info related to the ISD on hover. The form on the right is used to target your results. All buildings and ISDs are also limited by agent hierarchy limits (Some by state/market, some by state/market/area, and some by state/market/area/subarea).

Slide 6 shows 2/2 of the mapping application.

This is a zoomed in view of bldgs (green pins) with ISD info on the right. Clicking a bottom block or a pin, will load bldg info where isd info is now. Clicking the car icon assigns bldg/s to a route. Step by step driving directions are provided on our page and can be emailed to yourself or another agent you have auth to.

A floating div shows bldg info as you hover over pins. Clicking a pin or block will show a button to the right to add or remove a bldg from your route. The ISDs and bldgs are geocoded using an external script I made with an on file add.

Slide 7 shows the Mobile Web App page.

This app supports ALL devices including all tablets and cellular phones whether Android or IOS. If you "add to home screen" there is a custom NTA icon that will download and it opens in fullscreen rather than a browser.

This is a logged in feature but first letter capitalization is disabled and all drop down lists are generated using authoizations assigned per agent. This app is fully featured and easy to use two seperate screens are shown.