Category Archives: Software Development

DTF (DeliverTheFood) – Online Food Ordering Web Application

OVERVIEW :

CLICK TO SEE DOCUMENTATION

DTF (DeliverTheFood) is an online food ordering web based platform which allows fooders to showcase their food menu online and accept online ordering.
Eaters can easily signup and order food online from their favorite fooders in just few clicks.
Administrator section allows admin or their staff to manage every order, eaters, fooders or generate reports and analyse data .
Based on Artificial Intelligence , DTF is the only online food ordering platform available in the market which allows ordering from multiple fooders in single order.

EXCLUSIVE FEATURES :

Glimpse of features ( Which No platform offers ) : 
  • It has separate logins for each restaurant so that they can manage their presence on platform
  • Various things that users will do will be stored inside database and on basis of that system will provide restaurants — their feedbacks , their most loved food item , trend of food that users love , their most selling food items, most generous food lovers region/area etc
  • Completely user oriented and can make users stay on website for a long time
  • Stable with millions of data ,search algorithm takes only micro-seconds
  • System is automatic , so you do not need to worry about anything : it does its calculation and building of data on its own
  • Helps new or existing restaurants to increase their sales
  • SEO oriented ( Data markup structure ie: new feature of google is already implemented )
  • PCI compliant
  • Image optimization technique similar to facebook that saves space
  • Able to handle billions of records
  • Searches region , delivery area , cuisine , dishes , address , restaurant name etc within micro seconds
  • Invoicing for restaurants and profile management
  • Location Tracker
  • Secure password algorithm
  • Responsive design suitable for all devices
  • Angular js based mobile design for touchscreen devices
  • Live notifications with bells and emails
  • Location generator based on google maps api
  • Beautiful charts and reports
  • Ordering from multiple fooders
  • Write your recipe section
  • Reward points based on orders
  • SEO oriented
  • Social media integration
  • Beautiful image gallery
  • Delivery radius and location marker using google maps api
  • Fast , responsive and secured
  • There’s more inside

 EATERS : REFERS TO USERS WHO ARE ORDERING FOOD ONLINE

  • Sign in/register
  • Choose multiple addresses
  • Order food with few clicks
  • Create recipes
  • Earn rewards
  • Choose favorite dish and cuisines
  • Get emails after placing an order

Demo Link CLICK HERE FOR USER LOGIN

DEMO CREDENTIALS :

User : user@deliverthefood.net
Pass : demo1234


FOODERS : REFERS TO RESTAURANTS / CATERERS / FOOD OWNERS / BAKERS / CONFECTIONERS

  • Gets a website for showcasing their dishes
  • Beautiful dashboard
  • Responsive platform for login
  • Can manage products , menus , active/deactive, prices
  • Can manage their gallery , about us, minimum order, delivery area , facilities etc
  • Easy to use delivery areas
  • Operation hours , open/close ordering
  • Live bell notifications / emails on new orders
  • Reports and charts
  • Check comments and ratings

Demo Link CLICK HERE FOR BUSINESS LOGIN

DEMO CREDENTIALS :

User : restaurant@deliverthefood.net
Pass : demo1234


ADMIN : REFERS TO ADMINISTRATOR OR STAFF THAT IS RESPONSIBLE FOR MAINTAINING THE PLATFORM

  • Manage eaters
  • Manage fooders
  • Manage orders
  • Email and live notifications
  • Beautiful dashboard
  • Send emails
  • Recipes
  • Data analysis
  • User Tracking
  • Location generator
  • Most searched items
  • What eaters are looking for
  • Support tickets
  • Reward points
  • Ratings/Comments

Demo Link CLICK HERE FOR LOGIN

DEMO CREDENTIALS :

User : admin
Pass : admin

Buy Now
2Checkout.com Inc. (Ohio, USA) is a payment facilitator for goods and services provided by Indoreators Web Creations Network Private Ltd.

WHITE LABEL CRM

OVERVIEW :

WHITE LABEL CRM : COMPLETE BUSINESS AT ONE PLACE

Unlimited users, staffs, clients , affiliates,

Completely branded for you, customize projects , categories, task etc.

Automated task, projects feeds, Admin complete tracking , leads and much more

FEATURES :

  • Complete crm
  • Clients , managers , staff admin etc
  • Projects , templates, categories , tasks etc
  • Accounting paypal and freshbooks
  • Invoices and status
  • Feeds and leads
  • Organized file system
  • Seo based tracker : serpbooks

Demo Link CLICK HERE FOR LOGIN

DEMO CREDENTIALS :

User : demo@gmail.com
Pass : demo

Buy Now
2Checkout.com Inc. (Ohio, USA) is a payment facilitator for goods and services provided by Indoreators Web Creations Network Private Ltd.

Project Management & Invoicing System Cum CRM

OVERVIEW :

WORLD’S FIRST SOFTWARE WITH IMAGES & LANGUAGE BASED INVOICES.
INTEGRATED WITH 22 MAJOR WORLD LANGUAGES

Grow your business , manage your affiliates, staff, partners and clients at one place.
Give them the freedom to login, manage projects and interact with others.
Available in 22 languages and compatible with all the devices, so never lose any client again.

FEATURES :

  • Multiple Languages
  • Secure Framework
  • 100% PHP & Compatible with all the servers
  • Beautiful Invoices
  • Automated Notifications
  • Images in invoice
  • Multiple staff , client , agent, admin login
  • Pdf and html invoice generation
  • Drag and sort image in Invoice
  • 3 Types of invoice payments including Paypal
  • Minimal Response Time
  • Hassle Free Operation
  • Language based invoices
  • Drag and sort image inside invoice
  • PDF invoice generation with images
  • Tickets number auto generation

Demo Link CLICK HERE FOR LOGIN

DEMO CREDENTIALS :

User : demo@gmail.com
Pass : demo

Buy Now
2Checkout.com Inc. (Ohio, USA) is a payment facilitator for goods and services provided by Indoreators Web Creations Network Private Ltd.

Progress Button Styles

Today we’d like to share some progress button styles with you. You surely know “Ladda” by Hakim El Hattab, a UI concept that indicates progress directly on the button that invokes a loading action. Some of the buttons have a built-in progress bar and today we’d like to explore that idea with some creative progress button styles. Using perspective will allow us to create some fun 3D effects besides the flat “filling” styles. For a complete solution, please take a better look at Ladda.

Please note that we’ll be using transitions on pseudo-elements which are still not supported in some browsers (e.g. Safari and Mobile Safari).

Also note that we need transform-style: preserve-3d support for the 3D styles, which neither IE10 nor IE11 support.

With the script that we’ve created for showing the button styles, we take a simple button markup

<button class="progress-button" data-style="rotate-angle-bottom" data-perspective data-horizontal>Submit</button>

and transform it into the following structure:

<button class="progress-button" data-style="rotate-angle-bottom" data-perspective data-horizontal>
	<span class="progress-wrap">
		<span class="content">Submit</span>
		<span class="progress">
			<span class="progress-inner"></span>
		</span>
	</span>
</button>

If we don’t set the data-perspective attribute, then we’ll make this structure:

<button class="progress-button" data-style="fill" data-horizontal>
	<span class="content">Submit</span>
	<span class="progress">
		<span class="progress-inner"></span>
	</span>
</button>

We also indicate if we have a style that needs horizontal or vertical progress bar filling. This will be used in our CSS to specify the regarding styles.
The following styles are the general and common styles for all buttons (note that perspective styles are only needed for the buttons with 3D transforms):

*, *:after, *::before { box-sizing: border-box; }

@font-face {
	font-weight: normal;
	font-style: normal;
	font-family: 'icomoon';
	src:url('../fonts/icomoon/icomoon.eot');
	src:url('../fonts/icomoon/icomoon.eot?#iefix') format('embedded-opentype'),
		url('../fonts/icomoon/icomoon.ttf') format('truetype'),
		url('../fonts/icomoon/icomoon.woff') format('woff'),
		url('../fonts/icomoon/icomoon.svg#icomoon') format('svg');
}

.progress-button {
	position: relative;
	display: inline-block;
	padding: 0 60px;
	outline: none;
	border: none;
	background: #1d9650;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 1em;
	line-height: 4;
}

.progress-button[disabled],
.progress-button[disabled].state-loading {
	cursor: default;
}

.progress-button .content {
	position: relative;
	display: block;
}

.progress-button .content::before,
.progress-button .content::after  {
	position: absolute;
	right: 20px;
	color: #0e7138;
	font-family: "icomoon";
	opacity: 0;
	transition: opacity 0.3s 0.3s;
}

.progress-button .content::before {
	content: "\e600"; /* Checkmark for success */
}

.progress-button .content::after {
	content: "\e601"; /* Cross for error */
}

.progress-button.state-success .content::before,
.progress-button.state-error .content::after {
	opacity: 1;
}

.notransition {
	transition: none !important;
}

.progress-button .progress {
	background: #148544;
}

.progress-button .progress-inner {
	position: absolute;
	left: 0;
	background: #0e7138;
}

.progress-button[data-horizontal] .progress-inner {
	top: 0;
	width: 0;
	height: 100%;
	transition: width 0.3s, opacity 0.3s;
}

.progress-button[data-vertical] .progress-inner {
	bottom: 0;
	width: 100%;
	height: 0;
	transition: height 0.3s, opacity 0.3s;
}

/* Necessary styles for buttons with 3D transforms */

.progress-button[data-perspective] {
	position: relative;
	display: inline-block;
	padding: 0;
	background: transparent;
	perspective: 900px;
}

.progress-button[data-perspective] .content {
	padding: 0 60px;
	background: #1d9650;
}

.progress-button[data-perspective] .progress-wrap {
	display: block;
	transition: transform 0.2s;
	transform-style: preserve-3d;
}

.progress-button[data-perspective] .content,
.progress-button[data-perspective] .progress {
	outline: 1px solid rgba(0,0,0,0); /* Smoothen jagged edges in FF */
}

We are using the pseudo-elements ::before and ::after for the success or error icons which we fade in once loading is finished. The span with the class progress is used as the main wrapper for the progress bar itself which is the span with class progress-inner. Sometimes we use the progress span with a background color, while other times we will just style the child span. We’ll also provide some general styles for the vertical and horizontal case.

Note that for the 3D examples, we’ll use the button as a “shell” that will serve to add the perspective value. The content span will contain the button styles like the background color and the padding, and everything will be wrapped into a span with the class progress-wrap which will be the element that we transform.

An example of an individual button style is the following:

/* Rotate bottom 3d */
/* ====================== */

.progress-button[data-style="rotate-angle-bottom"] .progress {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 20px;
	box-shadow: 0 -1px 0 #148544; /* fix the blurriness that causes a gap */
	transform: rotateX(-90deg);
	transform-origin: 50% 0%;
}

.progress-button[data-style="rotate-angle-bottom"].state-loading .progress-wrap {
	transform: rotateX(45deg);
}

The button will have one of the three states (or none): state-loading, state-success and state-error.

For browsers that don’t support necessary properties, we’ll provide the default fallback of the first style (fill horizontal).

We hope that you find these button styles inspiring and useful!