Skip to content

Instantly share code, notes, and snippets.

@sauliuz

sauliuz/index.html

Created March 1, 2015 20:00
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save sauliuz/bcf53cc4a48fb101f0e0 to your computer and use it in GitHub Desktop.
Save sauliuz/bcf53cc4a48fb101f0e0 to your computer and use it in GitHub Desktop.
Download ZIP
main index.html file for Framework7 tutorial on HTMLCenter
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>HTMLCenter</title>
<!-- Path to Framework7 Library CSS-->
<link rel="stylesheet" href="css/framework7/framework7.min.css">
<!-- Path to your custom app styles-->
<link rel="stylesheet" href="css/my-app.css">
</head>
<body>
<!-- Status bar overlay for fullscreen mode-->
<div class="statusbar-overlay"></div>
<!-- Panels overlay-->
<div class="panel-overlay"></div>
<!-- Left panel with reveal effect-->
<div class="panel panel-left panel-reveal">
<div class="content-block">
<p>Left pannel can have custom content.<br />
Another line<br />
Yet another line<br />
</p>
</div>
</div>
<!-- Right panel with cover effect-->
<div class="panel panel-right panel-cover">
<div class="content-block">
<p>Right pannel can have custom content.<br />
Another line<br />
Yet another line<br />
</p>
</div>
</div>
<!-- Views-->
<div class="views">
<!-- Your main view, should have "view-main" class-->
<div class="view view-main">
<!-- Top Navbar-->
<div class="navbar">
<!-- Navbar inner for Index page-->
<div data-page="index" class="navbar-inner">
<!-- We have home navbar without left link-->
<div class="center sliding">Tutorial</div>
<div class="right">
<!-- Right link contains only icon - additional "icon-only" class-->
<a href="#" class="link icon-only open-panel"><i class="icon icon-bars"></i></a>
</div>
</div>
<!-- Navbar inner for Login page-->
<div data-page="form" class="navbar-inner cached">
<div class="left sliding"><a href="#" class="back link"> <i class="icon icon-back"></i><span>Back</span></a></div>
<div class="center sliding">Login</div>
</div>
<!-- Navbar inner for Services page-->
<div data-page="about" class="navbar-inner cached">
<div class="left sliding"><a href="#" class="back link"> <i class="icon icon-back"></i><span>Back</span></a></div>
<div class="center sliding">About</div>
</div>
</div>
<!-- Pages, because we need fixed-through navbar and toolbar, it has additional appropriate classes-->
<div class="pages navbar-through toolbar-through">
<!-- Index Page-->
<div data-page="index" class="page">
<!-- Scrollable page content-->
<div class="page-content">
<div class="content-block-title">Example Application</div>
<div class="content-block">
<div class="content-block-inner">
<p>Very simple HTML5 mobile web app.</p>
<p>With the help of Framework7.<br />
Framework7 has bunch of pre built generic UI elements</p>
</div>
</div>
<div class="content-block-title">Example Menu</div>
<div class="list-block">
<ul>
<li>
<a href="#form" class="item-link">
<div class="item-content">
<div class="item-inner">
<div class="item-title">Login</div>
</div>
</div>
</a>
</li>
<li>
<a href="#about" class="item-link">
<div class="item-content">
<div class="item-inner">
<div class="item-title">About</div>
</div>
</div>
</a>
</li>
</ul>
</div>
<div class="content-block-title">Side panel tests</div>
<div class="content-block">
<div class="row">
<div class="col-50"><a href="#" data-panel="left" class="button open-panel">Test Left Panel</a></div>
<div class="col-50"><a href="#" data-panel="right" class="button open-panel">Test Right Panel</a></div>
</div>
</div>
</div>
</div>
<!-- About Page-->
<div data-page="about" class="page cached">
<div class="page-content">
<div class="content-block">
<p>
In order to go back to main page, you can click <strong>Back</strong> button on the left side of Top menu.<br />
Or simply use this link to <a href="#" class="back">go back</a>.</p>
<p>
In fact you can load any page from this application, with the simple HTML link. <a href="#form">Load login page</a>.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel commodo massa, eu adipiscing mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus ultricies dictum neque, non varius tortor fermentum at. Curabitur auctor cursus imperdiet. Nam molestie nisi nec est lacinia volutpat in a purus. Maecenas consectetur condimentum viverra. Donec ultricies nec sem vel condimentum. Phasellus eu tincidunt enim, sit amet convallis orci. Vestibulum quis fringilla dolor.</p>
<p>Thanks,<br />
HTMLCenter team</p>
</div>
</div>
</div>
<!-- Form Page-->
<div data-page="form" class="page cached">
<div class="page-content">
<div class="content-block">
<p>
Please login to HTMLCenter app.<br />
Once authenticated, you can access all the amazing tutorials, and books this site has to offer.<br /></p>
</div>
<div class="content-block-title"></div>
<div class="list-block">
<ul>
<li>
<div class="item-content">
<div class="item-media"><i class="icon icon-form-email"></i></div>
<div class="item-inner">
<div class="item-title label">E-mail</div>
<div class="item-input">
<input type="email" placeholder="E-mail">
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-media"><i class="icon icon-form-password"></i></div>
<div class="item-inner">
<div class="item-title label">Password</div>
<div class="item-input">
<input type="password" placeholder="Password">
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="content-block">
<div class="row">
<div class="col-50"><a href="#" class="button button-big button-fill color-red">Cancel</a></div>
<div class="col-50">
<input type="submit" value="Submit" class="button button-big button-fill color-green">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bottom Toolbar-->
<div class="toolbar">
<div class="toolbar-inner"><a href="#" class="link">Bottom Toolbar y</a><a href="#" class="link">Bottom Toolbar x</a></div>
</div>
</div>
</div>
<!-- Path to Framework7 Library JS-->
<script type="text/javascript" src="js/framework7/framework7.min.js"></script>
<!-- Path to your app js-->
<script type="text/javascript" src="js/my-app.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment