Permalink
Browse files

afui

  • Loading branch information...
Ian Maffett
Ian Maffett committed May 1, 2015
1 parent fa69b57 commit 9785b57e2a71409a88a00829781b3d1803da4175
View
@@ -0,0 +1,3 @@
// Place your settings in this file to overwrite default and user settings.
{
}
View
@@ -0,0 +1,205 @@
<!DOCTYPE html>
<!--HTML5 doctype-->
<html>
<head>
<title>App Framework Kitchen Sink</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes" />
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" type="text/css" href="src/css/icons.css" />
<link rel="stylesheet" type="text/css" href="../build/af.ui.css" />
<script type="text/javascript" charset="utf-8" src="./jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="3rdparty/fastclick.js"></script>
<script type="text/javascript" charset="utf-8" src="src/af.shim.js"></script>
<script type="text/javascript" charset="utf-8" src="src/af.ui.js"></script>
<script src="src/af.desktopBrowsers.js"></script>
<script type="text/javascript" charset="utf-8" src="src/af.actionsheet.js"></script>
<script type="text/javascript" charset="utf-8" src="src/af.animation.js"></script>
<script type="text/javascript" charset="utf-8" src="src/af.touchEvents.js"></script>
<script type="text/javascript" charset="utf-8" src="src/af.popup.js"></script>
<script type="text/javascript" charset="utf-8" src="src/af.drawer.js"></script>
<script type="text/javascript" charset="utf-8" src="src/af.toast.js"></script>
<script type="text/javascript" charset="utf-8" src="src/af.animateheader.js"></script>
<script type="text/javascript" charset="utf-8" src="src/af.splashscreen.js"></script>
<script type="text/javascript" charset="utf-8" src="src/af.swipereveal.js"></script>
<script>
$.afui.useOSThemes=true;
$.afui.loadDefaultHash=true;
$(document).ready(function(){
//$.afui.splitview.enable();
})
if($.os.ios)
$.afui.animateHeader();
</script>
</head>
<body >
<div id="splashscreen" class='ui-loader heavy'>
App Framework
<br>
<br>
<span class='ui-icon ui-icon-loading spin'></span>
<h1>Starting app</h1>
</div>
<div class="view" id="mainview">
<header>
<h1>What</h1>
</header>
<div class="pages">
<div data-left-drawer="left" class="panel" id="main" data-title="Main" data-selected="true">
<ul class="list">
<li><a href="#login" data-transition="up-reveal">Login View (modal)</a></li>
<li><a href="#drawer" >Drawer</a></li>
<li><a href="ajax.html" data-refresh="true" >Ajax</a></li>
<li><a href="#toast" data-transition="flip">Toast</a></li>
<li><a href="#afforms" >Form Elements</a></li>
<li><a href="#popup">Popup</a></li>
<li><a href="#actionsheet">Actionsheet</a></li>
<li><a href="#foobar">Button Groups</a></li>
<li><a href="#cards">cards</a></li>
</ul>
</div>
<div class="panel" id="popup" data-title="Popup Plugin" data-include="partials/popup.html">
</div>
<div class="panel" id="actionsheet" data-title="Actionsheet Plugin" data-include="partials/actionsheet.html">
</div>
<div class="panel" id="toast" data-title="Toast Plugin" data-include="partials/toast.html">
</div>
<div data-left-drawer="left" class="panel" id="foobar" data-title="Foobar">
Foobar stuff goes here
<div class='button-grouped tabbed'>
<a class='button'>One</a>
<a class='button'>two</a>
<a class='button'>three</a>
</div>
</div>
<div data-left-drawer="left" class="panel" id="cards" data-title="Cards">
<br>
<div class="card">
<h1>Card One</h1>
<h2>Card Two</h2>
</div>
<div class="card">
<h1 class='info'>Meeting</h1>
<p>This is card content</p>
</div>
</div>
<div class="panel" id="drawer" data-title="Drawer">
<a href="#" class="button" onclick="$.afui.drawer.hide('#left')">Hide Left</a>
<a href="#" class="button" data-menu-close>Hide Active</a>
<a href="#" class="button" data-menu-close data-right-menu="right">Hide Right</a>
<br>
<a href="#" class="button" data-left-menu="left" >Cover Left</a>
<br>
<a href="#" class="button" onclick="$.afui.drawer.show('#right','right')">Cover Right</a>
<br>
<a href="#" class="button" data-left-menu="left" data-transition="push">Left Push</a>
<br>
<a href="#" class="button" onclick="$.afui.drawer.show('#left','left','reveal')">Left Reveal</a>
<br>
<a href="#" class="button" onclick="$.afui.drawer.show('#right','right','push')">Right Push</a>
<br>
<a href="#" class="button" onclick="$.afui.drawer.show('#right','right','reveal')">Right Reveal</a>
</div>
<div id="afforms" title="Form Styles" class="panel" data-include="partials/forms.html"></div>
</div>
<footer>
<a href="#main" class="icon home">Main</a>
<a href="#about" class="icon html5" data-transition="up-reveal">About</a>
<a href="#test" class="icon trash">test</a>
<a href="#touchevents" class="icon trash">Touch Events</a>
</footer>
<nav id="left" data-include="partials/leftnav.html">
</nav>
<nav id="right">
<div class="view active" id="navView2">
<header>
<h1>What</h1>
</header>
<div class="pages">
<div class="panel active" id="rightNav" data-title="Foobar">
This is the right nav
</div>
</div>
</div>
</nav>
</div>
<div class="view" id="touchView">
<header><h1></h1></header>
<div class="pages">
<div class="panel" data-title="touch events" id="touchevents" data-include="partials/touch.html">
</div>
</div>
</div>
<div class="view" id="aboutView">
<header>
<h1>Bar</h1>
</header>
<div class="pages">
<div class="panel" id="about" data-title="Bar">
About
</div>
</div>
<footer>
<a href="#" class="icon home" data-back >Home</a>
<a href="#test" class="icon home">Test</a>
</footer>
</div>
<div class="view" id="testView">
<header>
<h1>Bar</h1>
</header>
<div class="pages">
<div class="panel" id="test" data-title="Test Tabbar">
About
</div>
</div>
<footer>
<a class="button" href="#main">Something</a>
</footer>
</div>
<div class="view" id="loginView">
<div class="pages">
<div class="panel" id="login">
<h1>Login</h1>
<div style="height:300px">
</div>
<label>Test<input type="text" placeholder="Username">
<br>
<a class='button' href='#' data-message='Hi There' data-alert>Alert</a>
<a class='button' href='#main' data-transition='up-reveal:dismiss'>Back</a>
<div style="height:300px;background:green;">
asdf
</div>
more stuff
</div>
</div>
</div>
</body>
</html>
@@ -0,0 +1,175 @@
#lockScreen * {
padding:0;
margin:0;
box-sizing:border-box;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-user-select: none;
}
#lockScreen {
position: absolute;
top:0px;
bottom:0px;
width:100%;
height:100%;
left:0px;
z-index:99999999999999;
background: #ccc;
}
#lockScreen .flexContainer {
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;
-webkit-box-align: center;
-moz-box-align: center;
box-align: center;
-webkit-box-pack: center;
-moz-box-pack: center;
box-pack: center;
}
#lockScreen .keyboard {
width:100%;
position:absolute;
bottom:0px;
}
#lockScreen .content {
position:absolute;
top:0px;
bottom:170px;
width:100%;
text-align:center;
-moz-box-flex: 0;
-webkit-box-flex: 0;
-ms-box-flex: 0;
box-flex: 0;
-moz-box-ordinal-group: 1;
-webkit-box-ordinal-group: 1;
-ms-box-ordinal-group: 1;
box-ordinal-group: 1;
align-items: center;
justify-content: center;
}
#lockScreen .keyboard .row {
display: block;
width:100%;
text-align: center;
height:50px;
line-height:50px;
font-size:1.3em;
font-weight: bold;
}
#lockScreen .keyboard .row div {
display: block;
width:33.33%;
float:left;
border:1px solid #000;
justify-content: center;
text-align: center;
}
#lockScreen .keyboard .row div.grey {
background:white;
}
#lockScreen .touched {
background-color: white;
}
#lockScreen input[type="password"] {
height:50px;
font-size:40px;
width:200px;
text-align: center;
}
#lockScreen .icon {
font-size:50px;
color:white;
margin-bottom: 10px;
}
#lockScreen .error {
padding-top:10px;
visibility: hidden;
color:red;
font-weight:bold;
font-size:1.3em;
}
#lockScreen.round .keyboard{
bottom:10px;
}
#lockScreen.round .keyboard .row {
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-align: center;
-moz-box-align: center;
box-align: center;
-webkit-box-pack: center;
-moz-box-pack: center;
box-pack: center;
margin-bottom:20px;
}
#lockScreen.round .keyboard .row div {
-moz-box-flex: 0;
-webkit-box-flex: 0;
-ms-box-flex: 0;
box-flex: 0;
-moz-box-ordinal-group: 1;
-webkit-box-ordinal-group: 1;
-ms-box-ordinal-group: 1;
box-ordinal-group: 1;
float:none;
width:60px;
height:60px;
border-radius:60px;
line-height:60px;
margin:10px;
cursor:pointer;
}
#lockScreen.round input[type="password"] {
height:50px;
font-size:40px;
width:200px;
text-align: center;
background: transparent;
color:white;
}
#lockScreen.round input[type="password"]::-webkit-input-placeholder {
color: white;
}
#lockScreen.round input[type="password"]::-moz-placeholder { /* Firefox 19+ */
color: white;
}
#lockScreen.round input[type="password"]:-ms-input-placeholder {
color: white;
}
#lockScreen.round .keyboard .row div.grey {
background:transparent;
border:none;
}
Oops, something went wrong.

0 comments on commit 9785b57

Please sign in to comment.