Skip to content

Instantly share code, notes, and snippets.

@argelius

argelius/ios-version.html

Last active January 24, 2016 16:10
Show Gist options
  • Save argelius/765c41cea27c70349a51 to your computer and use it in GitHub Desktop.
Save argelius/765c41cea27c70349a51 to your computer and use it in GitHub Desktop.
Download ZIP
Same app on iOS
Raw
ios-version.html
<!doctype html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300italic,300,500,400italic,500italic,700,700italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/OnsenUI/OnsenUI-dist/2.0.0-beta.5/css/onsenui.css">
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/OnsenUI/OnsenUI-dist/2.0.0-beta.5/css/onsen-css-components.css">
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI-dist/2.0.0-beta.5/js/onsenui.js"></script>
</head>
<body>
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button>
<ons-icon icon="md-menu"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">
Fish tank
</div>
<div class="right">
<ons-toolbar-button>
<ons-icon icon="md-search"></ons-icon>
</ons-toolbar-button>
<ons-toolbar-button>
<ons-icon icon="md-more-vert"></ons-icon>
</ons-toolbar-button>
</div>
</ons-toolbar>
<ons-tabbar>
<ons-tab label="Animals" active page="animals.html" persistent></ons-tab>
<ons-tab label="Water" page="water.html" persistent></ons-tab>
</ons-tabbar>
</ons-page>
<ons-template id="animals.html">
<ons-list>
<ons-list-header>Guppies</ons-list-header>
<ons-list-item>
<div class="list__item__center">
<div class="list__item__title">
Elsa
</div>
<div class="list__item__subtitle">
Female
</div>
</div>
</ons-list-item>
<ons-list-item>
<div class="list__item__center">
<div class="list__item__title">
Anna
</div>
<div class="list__item__subtitle">
Female
</div>
</div>
</ons-list-item>
<ons-list-item>
<div class="list__item__center">
<div class="list__item__title">
Olaf
</div>
<div class="list__item__subtitle">
Male
</div>
</div>
</ons-list-item>
<ons-list-header>
Shrimp
</ons-list-header>
<ons-list-item>
<div class="list__item__center">
<div class="list__item__title">
Steve
</div>
<div class="list__item__subtitle">
Male
</div>
</div>
</ons-list-item>
<ons-list-item>
<div class="list__item__center">
<div class="list__item__title">
Grace
</div>
<div class="list__item__subtitle">
Female
</div>
</div>
</ons-list-item>
<ons-list-item>
<div class="list__item__center">
<div class="list__item__title">
Rachel
</div>
<div class="list__item__subtitle">
Female
</div>
</div>
</ons-list-item>
<ons-list-item>
<div class="list__item__center">
<div class="list__item__title">
Dave
</div>
<div class="list__item__subtitle">
Male
</div>
</div>
</ons-list-item>
<ons-list-item>
<div class="list__item__center">
<div class="list__item__title">
Amy
</div>
<div class="list__item__subtitle">
Female
</div>
</div>
</ons-list-item>
<ons-list-header>
Cory catfish
</ons-list-header>
<ons-list-item>
<div class="list__item__center">
<div class="list__item__title">
Edward
</div>
<div class="list__item__subtitle">
Male
</div>
</div>
</ons-list-item>
</ons-list>
<p>
<ons-button modifier="large--cta">
Add
</ons-button>
</p>
</ons-template>
<ons-template id="water.html">
</ons-template>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment