Documentation and HELP

Created: 23 January 2022
Last Updated: 23 January 2022
Current Version: 1.0

Introduction
1. Package files content.
2. HTML/CSS templates, definition and usage.
Editing the template
Sources and Credits

Thank you for purchasing our item. If you have any questions that are beyond the scope of this help file, please feel free to email via our profile page

1 Introduction

Cryptex is a mobile HTML/CSS template with a design dedicated to crypto projects. You can use this template as a starting point for your crypto exchange app, crypto wallet or crypto mobile website. The design is unique and contains all the required pages for a complete crypto exchange app.

1.A Package files content.

The main archive you will download will contain the following folder structure:

The main demos of the template are found inside the "cryptex" folder. Once you open it, you will see the "cryptex" folder. Inside the "cryptex" folder you will see all the main files of this template. To test the files just open the main index.html file

! IMPORTANT - please test the demo files on a web server

1.BHTML/CSS templates, definition and usage.

A HTML/CSS Template is a pre-designed layout that will help you build a final website. HTML ( HyperText Markup Language) is the basic coding to create web pages. CSS stands for Cascading Style Sheets and it's used to define and style the HTML elements.

To install a HTML/CSS template requires just to copy the template files on your webserver. This can be done using your hosting provider custom interface or a FTP (File Transfer Protocol) software. Our recommandation is FileZilla.

A regular HTML/CSS template does NOT include a CMS (Content Management System) to edit/add content of the pages. All content is edited using a HTML editor. HTML editors can be found as free and paid editors. Some modern HTML editors have included a DESIGN view mode of the code, making it easier for templates to be edited. Regular ones will let you edit the content only from the code mode, meaning you will need to have a basic HTML coding knowledge.

2 Editing the template

EDITING THIS TEMPLATE REQUIRES BASIC HTML/CSS AND JAVASCRIPT KNOWLEDGE. IF YOU DON'T HAVE A BASIC KNOWLEDGE OF THIS WE RECOMMEND HIRE A WEBDESIGNER OR LOOK FOR A FREELANCER ON ENVATO STUDIO.

EDITING THIS MOBILE TEMPLATE DO NOT REQUIRE A SERVER. YOU CAN EDIT IT USING A LOCAL HTML EDITOR SOFTWARE. ONLY TESTING IT, WILL REQUIRE TO BE UPLOADED TO A SERVER.

To edit this HTML template you will need a HTML editor. Even Notepad will do the job, but a dedicated HTML editor will work better in arranging the code structure. HTML editors are softwares that allow code editing. Some HTML editors have included a DESIGN mode, which will allow you to see the interface of the page you are editing. Editors can be found FREE or PREMIUM on the WEB.

TESTING THIS TEMPLATE MAY REQUIRE TO UPLOAD THE FILES TO A WEB SERVER. THE NEW FEATURES OF THIS TEMPLATE ARE MADE ONLY FOR THE LATEST MOBILE PHONES

2.AGeneral HTML/ CSS structure

The main HTML structure is composed from:

- the left panel

- the main content

- the right panel

Most of the pages will start with the following HTML code:

<!-- Overlay panel -->
<div class="body-overlay"></div>
<!-- Left panel -->
<div id="panel-left"></div>
<!-- Right panel -->
<div id="panel-right"></div>

The body overlay div will be used to show a black transparent overlay when the rigth or left panel is open.

The main content will start with the DIV "<div class="page page--main" data-page="main">". Each page has an unique ID called with "data-page="main". This ID will be used in jQuery code to add some extra functionality to this page only.

The HTML structure continues with the HEADER:

	<!-- HEADER -->
	<header class="header header--fixed">	
		<div class="header__inner">	
			<div class="header__logo header__logo--text"><a href="index.html">Crypt<strong>EX</strong></a></div>	
			<div class="header__icon open-panel" data-panel="left"><img src="images/icons/user.svg" alt="image" title="image"/></div>
                </div>
	</header>

	<!-- HEADER -->
	<header class="header header--fixed">	
		<div class="header__inner">	
			<div class="header__icon"><a href="details.html"><img src="images/icons/arrow-back.svg" alt="image" title="image"/></a></div>	
                </div>
	</header>

The header can contain, the logo and an icon, or just an arrow like in the below example:

The CSS structure

The main CSS structure is created using SASS . All the scss files are inside the "scss" folder. And using a custom tool like node/gulp we have exported all this files in one general style.css found in each demo main folder

At the beginning of each style.css there is a Table of Content, so you know exactly from where each section can be customized

2.BLeft and right panels

The left panel HTML is loaded into the DIV "<div id="panel-left"></div>" with Ajax, so it can be edited on all pages from the same file. See jquery.custom.js file where the panel is loaded:

	// LOAD PANEL LEFT
	$( "#panel-left" ).load( "panel-left.html", function() {
		var swipersubnav = new Swiper ('.panel__navigation', {
			direction: 'horizontal',
			effect: 'slide',
			slidesPerView: 1,
			slidesPerGroup: 1
		}); 
		swipersubnav.on('slideChangeTransitionEnd', function () {
			$(".panel").animate({ scrollTop: 0 }, "slow");
		});
		$(".opensubnav").on('click', function(e) { 
			swipersubnav.slideNext();
		});
		$(".backtonav").on('click', function(e) { 
			swipersubnav.slidePrev();
		});
	});

Inside the left panel is the main user info and the main navigation

<div class="panel panel--left">
                  <!-- Slider -->
                 <div class="panel__navigation">
                    <div class="swiper-wrapper">
			<div class="swiper-slide">
			        <div class="subnav-header closepanel"><img src="images/icons/arrow-back.svg" alt="" title="" /></div>
				<div class="user-details">
					<div class="user-details__thumb"><img src="images/photos/avatar-5.jpg" alt="" title=""/></div>
					<div class="user-details__title"><span>Hello</span> Pieter Vanderbeld</div>
				</div>
				<nav class="main-nav">
					<ul>
						<li><a href="user-profile.html"><img src="images/icons/user.svg" alt="" title="" /><span>My Account</span></a></li>
						<li><a href="forms.html"><img src="images/icons/settings.svg" alt="" title="" /><span>Settings</span></a></li>
						<li class="subnav opensubnav"><a href="#"><img src="images/icons/listing.svg" alt="" title="" /><span>More Sections</span></a></li>
						<li><a href="wallet.html"><img src="images/icons/wallet.svg" alt="" title="" /><span>My Wallet</span></a></li>
						<li><a href="contact.html"><img src="images/icons/contact.svg" alt="" title="" /><span>Help &amp; Support</span></a></li>
					</ul>
				</nav>
				<div class="buttons buttons--centered"><a href="#" class="button button--main button--small">LOGOUT</a></div>
			</div>	
			<div class="swiper-slide">		
				<div class="subnav-header backtonav"><img src="images/icons/arrow-back.svg" alt="" title="" /></div>
				<nav class="main-nav">
				<ul>
					<li><a href="cards.html"><img src="images/icons/blocks.svg" alt="" title="" /><span>Cards</span></a></li>
					<li><a href="sliders.html"><img src="images/icons/slider.svg" alt="" title="" /><span>Sliders</span></a></li>
					<li><a href="forms.html"><img src="images/icons/form.svg" alt="" title="" /><span>Forms</span></a></li>
					<li><a href="tables.html"><img src="images/icons/tables.svg" alt="" title="" /><span>Tables</span></a></li>
					<li><a href="tabs-toggles.html"><img src="images/icons/tabs.svg" alt="" title="" /><span>Tabs</span></a></li>
					<li><a href="#" data-popup="social" class="open-popup"><img src="images/icons/love.svg" alt="" title="" /><span>Social</span></a></li>
					<li><a href="#" data-popup="notifications" class="open-popup"><img src="images/icons/popup.svg" alt="" title="" /><span>Popups</span></a></li>
					<li><a href="#" data-popup="alert" class="open-popup"><img src="images/icons/notifications.svg" alt="" title="" /><span>Notifications</span></a></li>	
				</ul>
				</nav>
			</div>
		    </div>
		</div>
</div>

2.CBottom navigation

The bottom navigation is loaded with Ajax in the DIV "<div id="bottom-toolbar" class="bottom-toolbar"></div>"

The file bottom-navigation.html contains the main HTML code for the navigation. The bottom navigation can be included into a slider as seen on the main demo, or just a number fixed of icons as seen on other designs in the demos:

<div class="bottom-navigation bottom-navigation--gradient">
	<ul class="bottom-navigation__icons">
	<li><a href="main.html"><img src="images/icons/blocks.svg" alt="" title="" /></a></li>
	<li><a href="list.html"><img src="images/icons/stats.svg" alt="" title="" /></a></li>
	<li class="centered"><a href="wallet.html"><img src="images/icons/wallet.svg" alt="" title="" /></a></li>
	<li><a href="#" class="open-popup" data-popup="notifications"><img src="images/icons/notifications.svg" alt="" title="" /><i>3</i></a></li>
	<li><a href="contact.html"><img src="images/icons/contact.svg" alt="" title="" /></a></li>
	</ul>
</div>

2.DCustom secondary pages

There are included more secondary pages in the demos. Like buy, details, sliders, cards....etc

Here are some examples of secondary pages structures:

1. details.html - contains an example of a details page for a coin

2. sliders.html - contains some example of different sliders which can be used to create custom sections in pages

3. buy.html - contains the example page for buying a coin

4. contact.html - contains an example of a contact form page

2.EPopups and Alerts

Popups are added dinamically added the bottom of any page HTML code.

For example the social popup "<div id="popup-social"></div>"

To launch the social popup we use the link code like:

<a href="#" data-popup="social" class="open-popup"><img src="../../assets/images/icons/blue/more.svg" alt="" title=""/></a>

Use the data value and class like "data-popup="social" class="open-popup"" to launch any popup based on her ID name:

2.FContact Form

The template includes a functional contact form on contact.html page

The code uses email.js and send.php files to make the form functional.

To add the email adrress you want to receive the messages edit contact.html code and see the line:

<input class="" type="hidden" name="to"  value="youremail@website.com" />

2.GJavascript / jQuery files

The Javascript / jQuery files are located in 2 places:

1. In the "vendor" folder, where the general files used for all demos are. Here you can easily do the updates for this files

2. In "js" folder, where is the custom JS files

For example the jquery.custom.js file included all the main code for one demo, and use the ID of the pages to load the code especially for that page only .See for example a code that is used for "intro" page only:

 if (pageid == 'intro') {

      var swiperslider = new Swiper ('.slider-intro', {

      direction: 'horizontal',

      effect: 'slide',

      parallax: true,

      pagination: {

      el: '.swiper-pagination'

      },

      navigation: {

      nextEl: '.swiper-button-next',

      prevEl: '.swiper-button-prev',

      },

      autoplay: {

      delay: 2000,

      }

      }); 

     }

3 Sources and Credits

jQuery - from https://jquery.com/
Swiper - https://swiperjs.com/
Charts - http://chartjs.org/
Free icons - https://freeicons.io/
Free icons - https://linearicons.com/free
Demo photos - https://unsplash.com/
Demo photos - https://www.freepik.com/
Some demos includes graphics Designed by Freepik - https://www.freepik.com/

Cryptex

Table of Contents