Mobile App Design

Developer
Aaron Levine
Size
9,243 Kb
Views
4,048
  1. Mobile App Design Previews
  2. Mobile App Design HTML Codes
  3. Mobile App Design CSS Codes
  4. Mobile App Design JS Codes

How do I make an mobile app design?

What is a mobile app design? How do you make a mobile app design? This script and codes were developed by Aaron Levine on 30 January 2023, Monday.

Mobile App Design Previews
IQ Test

Mobile App Design - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Mobile App Design</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1, minimal-ui"/> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<element data-render="app"></element>
<script id="App" type="template"> <div class="app"> <element data-render="body"></element> <element data-render="footer"></element> <element data-render="header"></element> </div>
</script>
<!--BODY-->
<script id="Body" type="template"> <div class="bodyWrap"> <div class="body"> <element data-list="BodyTab:[$root.tabs]"></element> </div> </div>
</script>
<script id="BodyTab" type="template"> <div class="bodyTab" data-css="css"> <element data-list="pages"></element> </div> <!--Body Pages should match the Page klass -->
</script>
<script id="Page" type="template"> <div class="bodyPage scroll"> <element data-list="items"></element> </div>
</script>
<script id="Feed" type="template"> <div class="feed scroll"> <element data-list="items"></element> </div>
</script>
<script id="Post" type="template"> <div class="item-wrap"> <div class="post"> <div class="postHeader"> <div class="col"> <div class="profilePhoto" data-style="backgroundImage:photoUrl"></div> </div> <div class="col"> <div class="name" data-text="name"></div> <div class="place" data-text="place"></div> </div> </div> <div class="content" data-text="content"></div> </div> </div>
</script>
<!--HEADER-->
<script id="Header" type="template"> <div class="header"> <element data-list="HeaderTab:[$root.tabs]"></element> <element data-render="offCanvas"></element> </div>
</script>
<script id="HeaderTab" type="template"> <div class="headerTab"> <element data-list="HeaderPage:pages"></element> </div>
</script>
<script id="HeaderPage" type="template"> <div class="headerPage"></div>
</script>
<script id="OffCanvas" type="template"> <element data-render="button"></element> <div class="offCanvasExit" data-click="toggle" data-css="css"></div> <aside class="offCanvasMenu scroll" data-css="css"> <element data-list="menuItems"></element> </aside> <aside class="offCanvasMenuExtension"></aside>
</script>
<script id="HeaderButton" type="template"> <div class="headerButton" data-click="click" data-css="css" data-html="content"></div>
</script>
<script id="MenuItem" type="template"> <div class="menuItem" data-html="content" data-click="click"></div>
</script>
<script id="MenuHeader" type="template"> <div class="menuItem menuHeader" data-html="content"></div>
</script>
<!--FOOTER-->
<script id="Footer" type="template"> <div class="footer"> <element data-list="FooterTab:[$root.tabs]"></element> </div>
</script>
<script id="FooterTab" type="template"> <div class="footerTab" data-html="icon" data-style="width:[$root.tabWidth]" data-click="click" data-css="css"></div>
</script> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://codepen.io/Aldlevine/pen/a21574ada7e037cf8f51eef41812b14e.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.2/fastclick.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Mobile App Design - Script Codes CSS Codes

/*$c1-light: #EFEFEF;
$c1-mid-light: #CD9788;
$c1-mid: #AA5039;
$c1-mid-dark: #871C00;
$c1-dark: #651500;
$c2-light: #CFCFCF;
$c2-mid-light: #B1768D;
$c2-mid: #933157;
$c2-mid-dark: #75002D;
$c2-dark: #570022;
$c3-light: #EFEFEF;
$c3-mid-light: #CDAD88;
$c3-mid: #AA7539;
$c3-mid-dark: #874900;
$c3-dark: #653600;*/
.app { /***************General**************/ color: #222; /****************Body****************/ /****************Header**************/ /****************Footer***************/ /********************Item**********************/
}
.app * { box-sizing: border-box;
}
.app .scroll { overflow: auto; -webkit-overflow-scrolling: touch;
}
.app .bodyWrap { position: fixed; top: 0; left: 0; display: inline-block; width: 100%; height: 100%; padding: 3rem 0 3rem 0; background-color: #6480AD; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjAlIiBjeT0iMTAwJSIgcj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzU5OTRhMiIgc3RvcC1vcGFjaXR5PSIwLjQiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmUyYzYiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'), url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuMCIgeDI9IjEuMCIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY0ODBhZCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2IwYzJkZSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -moz-radial-gradient(0% 100%, circle, rgba(89, 148, 162, 0.4) 0%, rgba(255, 226, 198, 0) 100%), -moz-linear-gradient(315deg, #6480ad 0%, #b0c2de 100%); background-image: -webkit-radial-gradient(0% 100%, circle, rgba(89, 148, 162, 0.4) 0%, rgba(255, 226, 198, 0) 100%), -webkit-linear-gradient(315deg, #6480ad 0%, #b0c2de 100%); background-image: radial-gradient(circle at 0% 100%, rgba(89, 148, 162, 0.4) 0%, rgba(255, 226, 198, 0) 100%), linear-gradient(135deg, #6480ad 0%, #b0c2de 100%); background-attachment: fixed;
}
.app .bodyWrap .body { position: relative; display: inline-block; width: 100%; height: 100%; border-top: solid 1px #6480AD; border-bottom: solid 1px #6480AD;
}
.app .bodyWrap .body .bodyTab { position: absolute; display: inline-block; width: 100%; height: 100%; -moz-transition: all 500ms cubic-bezier(0.545, 1.65, 0.225, 0.8); -o-transition: all 500ms cubic-bezier(0.545, 1.65, 0.225, 0.8); -webkit-transition: all 500ms cubic-bezier(0.545, 1.65, 0.225, 0.8); transition: all 500ms cubic-bezier(0.545, 1.65, 0.225, 0.8);
}
.app .bodyWrap .body .bodyTab .bodyPage, .app .bodyWrap .body .bodyTab .feed { position: absolute; display: inline-block; width: 100%; height: 100%;
}
.app .bodyWrap .body .bodyTab .feed { border-collapse: collapse;
}
.app .bodyWrap .body .bodyTab { opacity: 0; -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -webkit-transform: translateX(-100%); transform: translateX(-100%);
}
.app .bodyWrap .body .bodyTab.selected ~ .bodyTab { -moz-transform: translateX(100%); -ms-transform: translateX(100%); -webkit-transform: translateX(100%); transform: translateX(100%);
}
.app .bodyWrap .body .bodyTab.selected { opacity: 1; -moz-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0);
}
.app .header { position: fixed; left: 0; top: 0; display: inline-block; width: 100%; height: 3rem; line-height: 3rem; cursor: default; -moz-user-select: -moz-none; -ms-user-select: none; -webkit-user-select: none; user-select: none; font-size: 0; text-align: center;
}
.app .header .headerButton { display: inline-block; width: 3rem; height: 3rem; line-height: 3rem; font-size: 2rem; text-align: center; color: #1D3D6F;
}
.app .header .headerButton.left { float: left;
}
.app .header .headerButton.right { float: right;
}
.app .header .offCanvasExit { position: fixed; display: inline-block; left: 0; top: 0; width: 100%; height: 100%; height: 100vh; background: #B0C2DE;
}
.app .header .offCanvasExit.open { opacity: 0.75; visibility: visible; -moz-transition: opacity 500ms 0, visibility 0 0; -o-transition: opacity 500ms 0, visibility 0 0; -webkit-transition: opacity 500ms 0, visibility 0 0; transition: opacity 500ms 0, visibility 0 0;
}
.app .header .offCanvasExit.closed { opacity: 0; visibility: hidden; -moz-transition: opacity 500ms 0, visibility 0 500ms; -o-transition: opacity 500ms 0, visibility 0 500ms; -webkit-transition: opacity 500ms 0, visibility 0 500ms; transition: opacity 500ms 0, visibility 0 500ms; pointer-events: none;
}
.app .header .offCanvasMenu { position: fixed; top: 0; right: 0; display: inline-block; width: 15rem; max-width: 80%; height: 100%; height: 100vh; border-left: solid 1px rgba(34, 34, 34, 0.1); background: rgba(29, 61, 111, 0.5); -moz-transform-origin: 100% 0; -ms-transform-origin: 100% 0; -webkit-transform-origin: 100% 0; transform-origin: 100% 0; -moz-transition: all 500ms cubic-bezier(0.545, 1.65, 0.225, 0.8); -o-transition: all 500ms cubic-bezier(0.545, 1.65, 0.225, 0.8); -webkit-transition: all 500ms cubic-bezier(0.545, 1.65, 0.225, 0.8); transition: all 500ms cubic-bezier(0.545, 1.65, 0.225, 0.8); /*&:after { content: ''; position: absolute; left: 100%; display: inline-block; width: 5%; height: 100%; background: $offCanvas-bg; }*/
}
.app .header .offCanvasMenu + .offCanvasMenuExtension { position: fixed; top: 0; right: 0; display: inline-block; width: 15rem; max-width: 80%; height: 100%; height: 100vh; background: rgba(29, 61, 111, 0.5); -moz-transform-origin: 100% 0; -ms-transform-origin: 100% 0; -webkit-transform-origin: 100% 0; transform-origin: 100% 0; -moz-transition: all 500ms cubic-bezier(0.545, 1.65, 0.225, 0.8); -o-transition: all 500ms cubic-bezier(0.545, 1.65, 0.225, 0.8); -webkit-transition: all 500ms cubic-bezier(0.545, 1.65, 0.225, 0.8); transition: all 500ms cubic-bezier(0.545, 1.65, 0.225, 0.8);
}
.app .header .offCanvasMenu.open { -moz-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0);
}
.app .header .offCanvasMenu.open + .offCanvasMenuExtension { -moz-transform: translateX(100%); -ms-transform: translateX(100%); -webkit-transform: translateX(100%); transform: translateX(100%);
}
.app .header .offCanvasMenu.closed, .app .header .offCanvasMenu.closed + .offCanvasMenuExtension { -moz-transform: translateX(100%); -ms-transform: translateX(100%); -webkit-transform: translateX(100%); transform: translateX(100%);
}
.app .header .offCanvasMenu.closed + .offCanvasMenuExtension { -moz-transform: translateX(200%); -ms-transform: translateX(200%); -webkit-transform: translateX(200%); transform: translateX(200%);
}
.app .header .offCanvasMenu .menuItem { margin: 2rem 0; color: #FFF; font-size: 1.5rem;
}
.app .header .offCanvasMenu .menuItem.menuHeader { margin: 0; color: #B0C2DE; border-bottom: solid 1px #B0C2DE;
}
.app .footer { position: fixed; left: 0; bottom: 0; display: inline-block; width: 100%; height: 3rem; line-height: 3rem; font-size: 0; cursor: default; -moz-user-select: -moz-none; -ms-user-select: none; -webkit-user-select: none; user-select: none;
}
.app .footer .footerTab { display: inline-block; font-size: 2.9985rem; text-align: center; -moz-transform: scale(0.667); -ms-transform: scale(0.667); -webkit-transform: scale(0.667); transform: scale(0.667); -moz-transition: all 500ms cubic-bezier(0.545, 1.65, 0.225, 0.8); -o-transition: all 500ms cubic-bezier(0.545, 1.65, 0.225, 0.8); -webkit-transition: all 500ms cubic-bezier(0.545, 1.65, 0.225, 0.8); transition: all 500ms cubic-bezier(0.545, 1.65, 0.225, 0.8);
}
.app .footer .footerTab .icon { color: #38588B; -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; background-image: -webkit-linear-gradient(0deg, #38588B 0%, #38588B 100%); -webkit-text-fill-color: transparent; -webkit-text-stroke-color: #FFF; -webkit-text-stroke-width: 0px; -webkit-background-clip: text;
}
.app .footer .footerTab.selected { -moz-transform: scale(1) translate(0, -25%); -ms-transform: scale(1) translate(0, -25%); -webkit-transform: scale(1) translate(0, -25%); transform: scale(1) translate(0, -25%);
}
.app .footer .footerTab.selected .icon { color: #1D3D6F; background-image: -webkit-linear-gradient(-66.7deg, #6480ad 0%, #38588b 50%, #1d3d6f 50%, #061e44 100%); -webkit-text-fill-color: transparent; -webkit-background-clip: text; -webkit-text-stroke-width: 1px;
}
.app .item-wrap { display: table-row; padding: 1rem;
}
.app .item-wrap:not(:first-child) { padding-top: 0;
}
.app .item-wrap > .item, .app .item-wrap > .post { display: table-cell; width: 100%; width: 100vw; padding: 1rem; color: #222; background: rgba(255, 255, 255, 0.9); border-bottom: solid 1px #B0C2DE; font-weight: 100;
}
.app .item-wrap:last-child > .item, .app .item-wrap:last-child > .post { border-bottom: none;
}
.app .post .postHeader { display: table-row; color: #1D3D6F; line-height: 1.5rem; cursor: default; -moz-user-select: -moz-none; -ms-user-select: none; -webkit-user-select: none; user-select: none;
}
.app .post .postHeader .col { display: table-cell; vertical-align: top;
}
.app .post .postHeader .col .profilePhoto { display: inline-block; width: 3rem; height: 3rem; margin-right: 1rem; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; background-size: cover;
}
.app .post > .content { margin-top: 1rem;
}

Mobile App Design - Script Codes JS Codes

/*******************************Body***************************/
var Body = $k.klass('Body', {});
/*******************************Header***************************/
var HeaderButton = $k.klass('HeaderButton', { content: '', click: function(){}, css: []
});
var MenuItem = $k.klass('MenuItem', { content: 'TITLE', click: function(){}
});
var MenuHeader = MenuItem.$extend('MenuHeader', { click: function(){return false;}
});
var OffCanvas = $k.klass('OffCanvas', { menuItems: new $k.List([ new MenuHeader({ content: 'Aaron Levine' }), new MenuItem({ content: '<span class="fa fa-cogs"></span> Settings' }), new MenuItem({ content: '<span class="fa fa-smile-o"></span> Profile' }), new MenuItem({ content: '<span class="fa fa-camera"></span> Photos' }), new MenuItem({ content: '<span class="fa fa-users"></span> Find Friends' }), new MenuItem({ content: '<span class="fa fa-times-circle"></span> Logout' }) ]), open: false, css: new $k.Routine(function(){ return this.$parent.open ? ['open'] : ['closed'] }), button: new HeaderButton({ content: '<span class="fa fa-bars"></span>', css: ['right'], click: function(){ this.$parent.toggle(); } }), toggle: function(){ this.open = !this.open; }
});
var Header = $k.klass('Header', { offCanvas: new OffCanvas()
});
/*******************************Footer***************************/
var Footer = $k.klass('Footer', {});
/*******************************Item***************************/
var Item = $k.klass('Item', { content: ''
});
var Post = Item.$extend('Post', { content: 'The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother\'s keeper and the finder of lost children. And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee.', name: 'Aaron Levine', place: '@Somewhere Bar and Grille', photoUrl: 'url(http://placekitten.com/400/400)'
});
/*******************************Page***************************/
var Page = $k.klass('Page', { items: new $k.List([]), init: function(){ for(var i=0; i<20; i++){ this.items.$push( new Post() ); } }
});
var Feed = Page.$extend('Feed', {});
/*******************************Tab***************************/
var Tab = $k.klass('Tab', { icon: '', pages: new $k.List([ new Feed() ]), selected: false, css: new $k.Routine(function(){ return this.$parent.selected ? ['selected'] : []; }), click: function(){ for(var i=0, len=Tab.tabs.length; i<len; i++){ if(Tab.tabs[i] !== this) Tab.tabs[i].selected = false; } this.selected = true; }, init: function(){ Tab.tabs.add(this); }
},{ tabs: []
});
/*******************************App***************************/
var App = $k.klass('App', { body: new Body(), header: new Header(), footer: new Footer(), tabWidth: new $k.Routine(function(){ return ((100 / this.$parent.tabs.array.length) + '%'); }), tabs: new $k.List([ new Tab({icon: '<span class="icon fa fa-clock-o">', selected:true}), new Tab({icon: '<span class="icon fa fa-map-marker">'}), new Tab({icon: '<span class="icon fa fa-exclamation-circle">'}), new Tab({icon: '<span class="icon fa fa-star">'}) ])
});
var app = new App();
$k.attach({app:app});
FastClick.attach(document.body);
/* * Fun little extra JS for iOS. Prevents Rubberband on body, but allows it on scrollable divs! */
$('.scroll').on('touchstart', function(){ var $this = $(this); if($this.scrollTop() === 0){ $this.scrollTop(1); }else if($this.scrollTop() === $this[0].scrollHeight-$this.outerHeight()){ $this.scrollTop( $this.scrollTop()-1 ); }
});
$('body').on('touchmove', function(e){ var target = e.originalEvent.srcElement || e.originalEvent.originalTarget, scroll = $(target).closest('.scroll'); if(!scroll.length || scroll[0].scrollHeight <= $(scroll).outerHeight()){ e.preventDefault(); }
});
/* * Fixes iOS orientation change bug where content is scrolled up waaaaay too far. */
$(window).on('orientationchange', function(){ $('body').scrollTop(0);
});
Mobile App Design - Script Codes
Mobile App Design - Script Codes
Home Page Home
Developer Aaron Levine
Username Aldlevine
Uploaded January 30, 2023
Rating 3
Size 9,243 Kb
Views 4,048
Do you need developer help for Mobile App Design?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Aaron Levine (Aldlevine) Script Codes
Name
Touch Hover
Random Gradients - JS
CRT TV Page Load Animation
Popup Modal
Kaskade 0.3 - Desktop Demo
Flashy Rating Page
A Pen by Aaron Levine
Price is Right Wheel - Better Inertia
Pure CSS Rating Scale
Colored Rain
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!