IBM PureSystems - PureApp Emulator

Developer
Daniel Yuschick
Size
10,595 Kb
Views
12,144
  1. IBM PureSystems - PureApp Emulator Previews
  2. IBM PureSystems - PureApp Emulator HTML Codes
  3. IBM PureSystems - PureApp Emulator CSS Codes
  4. IBM PureSystems - PureApp Emulator JS Codes

How do I make an ibm puresystems - pureapp emulator?

A linear, self-contained experience emulating the PureApp software workflow.. What is a ibm puresystems - pureapp emulator? How do you make a ibm puresystems - pureapp emulator? This script and codes were developed by Daniel Yuschick on 25 September 2022, Sunday.

IBM PureSystems - PureApp Emulator Previews
IQ Test

IBM PureSystems - PureApp Emulator - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>IBM PureSystems - PureApp Emulator</title> <link type="text/css" rel="stylesheet" href="https://fast.fonts.net/cssapi/a2ba08fa-d065-423f-b037-3aee5bcf1831.css"/> <link rel='stylesheet prefetch' href='http://centerlinebeta.net/4850/css/main.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <header class="dark-header"> <a href="http://www.ibm.com" title="IBM"><img class="logo" src="https://www.danyuschick.com/codepen/pure-app/ibm-logo.jpg" /></a> <span class="helvbold">IBM PureApplication Tutorial</span> </header> <section class="scene one active"> <section class="blue-nav"> <div class="step-back"> <svg version="1.1" class="back-arrow" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="22px" height="22px" viewBox="0 0 22 22" xml:space="preserve"> <g> <path fill="#ffffff" d="M11,0c6.075,0,11,4.925,11,11s-4.925,11-11,11S0,17.075,0,11S4.925,0,11,0L11,0z M11,21 c5.523,0,10-4.477,10-10c0-5.523-4.477-10-10-10S1,5.477,1,11C1,16.523,5.477,21,11,21L11,21z M5.5,11l3,4h1l-2.75-3.501h9.75 V10.5H6.75L9.5,7h-1L5.5,11L5.5,11z" /> </g> <g> <path fill="#ffffff" d="M11,0c6.075,0,11,4.925,11,11s-4.925,11-11,11S0,17.075,0,11S4.925,0,11,0L11,0z M11,21 c5.523,0,10-4.477,10-10c0-5.523-4.477-10-10-10S1,5.477,1,11C1,16.523,5.477,21,11,21L11,21z M5.5,11l3,4h1l-2.75-3.501h9.75 V10.5H6.75L9.5,7h-1L5.5,11L5.5,11z" /> </g> </svg> </div> <span class="step lubalin strong">Step 1:</span><span class="instruction helv"> Click "Create New" to start a Mobile Application Pattern</span> </section> <section class="content-container"> <button type="button">Create New</button> <table class="pattern-list"> <thead> <tr> <td>Name</td> <td>Created By</td> <td>Updated By</td> <td>Created On</td> <td>Updated On</td> <td>Actions</td> </tr> </thead> <tr> <td>&nbsp;</td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>&nbsp;</td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>&nbsp;</td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>&nbsp;</td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>&nbsp;</td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>&nbsp;</td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> </section> </section> <section class="scene two"> <section class="blue-nav"> <div class="step-back active"> <svg version="1.1" class="back-arrow" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="22px" height="22px" viewBox="0 0 22 22" enable-background="new 0 0 22 22" xml:space="preserve"> <g> <path fill="#ffffff" d="M11,0c6.075,0,11,4.925,11,11s-4.925,11-11,11S0,17.075,0,11S4.925,0,11,0L11,0z M11,21 c5.523,0,10-4.477,10-10c0-5.523-4.477-10-10-10S1,5.477,1,11C1,16.523,5.477,21,11,21L11,21z M5.5,11l3,4h1l-2.75-3.501h9.75 V10.5H6.75L9.5,7h-1L5.5,11L5.5,11z" /> </g> <g> <path fill="#ffffff" d="M11,0c6.075,0,11,4.925,11,11s-4.925,11-11,11S0,17.075,0,11S4.925,0,11,0L11,0z M11,21 c5.523,0,10-4.477,10-10c0-5.523-4.477-10-10-10S1,5.477,1,11C1,16.523,5.477,21,11,21L11,21z M5.5,11l3,4h1l-2.75-3.501h9.75 V10.5H6.75L9.5,7h-1L5.5,11L5.5,11z" /> </g> </svg> </div> <span class="step lubalin strong">Step 2: </span><span class="instruction helv">Select your Mobile Application Platform</span> </section> <section class="save-bar"> <img src="https://www.danyuschick.com/codepen/pure-app/save-icon.jpg" alt="Save" /> <span>Save</span> </section> <section class="left-section"> <nav class="tab-bar"> <ul> <li class="active">Diagram</li> <li>List View</li> <li>Source</li> </ul> </nav> <section class="components-section"> <div class="assets-bar"> <span>Assets</span> </div> <div class="components-bar"> <span>Worklight Components</span> </div> <div class="components-container"> <div> <img src="https://www.danyuschick.com/codepen/pure-app/adapter-icon.png" alt="Worklight Adapter" /> <span>Worklight Adapter</span> </div> <div class="application-item active"> <img src="https://www.danyuschick.com/codepen/pure-app/application-icon.png" alt="Worklight Application" /> <span>Worklight Application</span> </div> <div> <img src="https://www.danyuschick.com/codepen/pure-app/config-icon.png" alt="Worklight Configuration" /> <span>Worklight Configuration</span> </div> </div> </section> </section> <section class="right-section"> <div class="top"></div> <section class="application-container"> <div class="application-container-inner"> <div class="item configuration"></div> <div class="item admin-db"></div> <div class="item runtime-db"></div> <div class="item reports-db"></div> <div class="item server"></div> <div class="item starter-adapter"></div> <div class="item tds"></div> <div id="application-zone" class="item application"></div> <canvas id="the-line" width="100" height="30"></canvas> </div> </section> </section> </section> <footer> <div class="push-left"> <span class="helvlight"><a class="fountain-blue" href="https://www14.software.ibm.com/webapp/iwm/web/preLogin.do?source=swg-pureapsaassl" target="_blank" title="IBM - Hybrid Cloud Apps">Interactive Trial</a></span> </div> <div class="push-right"> <span class="helvlight">For more information: <a href="http://ibm.com/hybridcloudapps" title="IBM - Hybrid Cloud Apps">ibm.com/hybridcloudapps</a></span> <span><a class="exit" href="http://www.ibm.com/" title="Exit Emulator">Close</a></span> </div> </footer>
</div>
<script id="list-row" type="text/x-handlebars-template"> <td><span class="helvbold">{{appName}}</span></td> <td><span>{{username}}</span></td> <td><span>{{username}}</span></td> <td><span>{{{date}}}</span></td> <td><span>{{{date}}}</span></td> <td class="deploy"> <span id="deploy-text" class="helvbold blue">Deploy</span> <img id="deploy-icon" src="https://www.danyuschick.com/codepen/pure-app/deploy-icon.png" alt="Deploy"> </td>
</script>
<script id="overlay-enter" type="text/x-handlebars-template"> <h1>Deploy applications faster with IBM PureApplication</h1> <div class="overlay-inner"> <h2>Get a glimpse of how simple and fast you can deploy 200+ enterprise<br />applications using Patterns.</h2> <h2>This tool guides you through the process of building a Virtual Application using the IBM Mobile Application Pattern as an example.</h2> </div> <button type="button" id="overlay-button">{{buttonText}}</button>
</script>
<script id="overlay-create" type="text/x-handlebars-template"> <h1>Here is your Mobile<br>Application Template</h1> <h2>Start building your Mobile Application</h2> <img src="https://www.danyuschick.com/codepen/pure-app/pattern01.jpg" alt="Create" class="img-create active" /> <img src="https://www.danyuschick.com/codepen/pure-app/pattern02.jpg" alt="Create" class="img-create" /> <img src="https://www.danyuschick.com/codepen/pure-app/pattern03.jpg" alt="Create" class="img-create" /> <button type="button" id="overlay-button">{{buttonText}}</button>
</script>
<script id="overlay-save" type="x-handlebars-template"> <h1>Your pattern has been saved as<br>"IBM PureApp Demo"</h1> <h2>The last step is to deploy your app</h2> <button type="button" id="overlay-button">{{buttonText}}</button>
</script>
<script id="overlay-exit" type="x-handlebars-template"> <h1>Congratulations! You've successfully deployed your virtual application with IBM PureApplication</h1> <h2>For a deeper look at how you can cut time to deployment and save money</h2> <div class="exit-overlay-container"> <div class="exit-overlay-main"> <h2>Click the button below to join an interactive trial</h2> <span><a class="final-button" href="#" target="_blank" title="IBM - Join the Trial">Join the trial</a></span> </div> <div class="exit-overlay-mid"> <h1>OR</h1> </div> <div class="exit-overlay-main"> <h2>If you're ready to buy, click the button below</h2> <span><a class="final-button" href="#" target="_blank" title="IBM - Purchasing Information">Purchasing Information</a></span> </div> </div>
</script> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src='http://centerlinebeta.net/4850/js/freedrawing.min.js'></script>
<script src='http://centerlinebeta.net/4850/js/handlebars-v2.0.0.js'></script>
<script src='http://centerlinebeta.net/4850/js/moment.js'></script> <script src="js/index.js"></script>
</body>
</html>

IBM PureSystems - PureApp Emulator - Script Codes CSS Codes

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section { display: block
}
body { line-height: 1
}
ol,
ul { list-style: none
}
blockquote,
q { quotes: none
}
blockquote:before,
blockquote:after,
q:before,
q:after { content: ''; content: none
}
table { border-collapse: collapse; border-spacing: 0
}
.clearfix:after { content: ""; display: table; clear: both
}
*,
*:before,
*:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box
}
::-moz-selection { background: transparent
}
::selection { background: transparent
}
html,
body { margin: auto; width: 100%; height: 100%; position: relative; background: #eee; -webkit-backface-visibility: hidden
}
body { font-size: 87.5%; line-height: 1.45em
}
p { display: block; -webkit-margin-before: 10px; -webkit-margin-after: 10px; -webkit-margin-start: 0; -webkit-margin-end: 0; margin: 10px 0
}
.divsplitter { display: block; clear: both
}
.hidden { display: none
}
.lubalin,
h1 { font-family: 'ITCLubalinGraphW01-Demi'
}
.helv,
.container,
.overlay-full .overlay-content.exit span,
footer,
.scene.two .left-section .tab-bar ul li { font-family: 'HelveticaNeueW01-55Roma'
}
.helvlight,
h2 { font-family: 'HelveticaNeueW01-45Ligh'
}
.helvbold,
.tool-tip,
footer a,
footer a:visited,
footer a:active,
footer a:hover,
footer .exit,
footer .exit:visited,
footer .exit:active,
.scene.one .content-container .pattern-list thead,
.scene.two .save-bar span,
.scene.two .left-section .components-section .components-bar { font-family: 'HelveticaNeueW01-75Bold'
}
.strong { font-weight: bold
}
.blue { color: #1b8fc2
}
.fountain-blue,
.overlay-full .overlay-content.enter h2,
.overlay-full .overlay-content.save h2,
.overlay-full .overlay-content.exit h2 { color: #59a4c7
}
.grey,
.overlay-full .overlay-content.create h2 { color: #aaa9ab
}
h1 { font-size: 2.35714em; line-height: 1.15152em
}
h2 { font-size: 1.71429em; line-height: 1.16667em
}
.final-button { padding: 5px; border: 1px solid #fff; display: block
}
.push-left { float: left
}
.push-right { float: right
}
.container { position: relative; width: 70em; height: 39.28571em; margin: 1.78571em auto 0; background: #fff; border: 1px solid #2e2f33
}
.overlay-full { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 5; background: rgba(255, 255, 255, 0.8); display: none
}
.overlay-full .overlay-content { width: 43.57143em; height: 29.28571em; background: #161618; color: #fff; text-align: center; margin: 5em auto 0 auto; padding: 1.78571em 2.14286em
}
.overlay-full .overlay-content.enter h1 { margin-bottom: 0.71429em
}
.overlay-full .overlay-content.enter h2 { margin-bottom: 0.85714em
}
.overlay-full .overlay-content.create { height: 31.57143em; margin-top: 2.71429em; padding: 1.42857em 2.14286em
}
.overlay-full .overlay-content.create h1 { margin-bottom: 0.14286em
}
.overlay-full .overlay-content.create h2 { margin-bottom: 0.71429em
}
.overlay-full .overlay-content.create .img-create { display: none; width: 34.57143em; height: 14.78571em; border: 5px solid #48a5ce; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px
}
.overlay-full .overlay-content.create .img-create.active { display: inline-block
}
.overlay-full .overlay-content.save h1 { margin-bottom: 0.71429em; font-size: 3.42857em; line-height: 1.14583em
}
.overlay-full .overlay-content.save h2 { margin-bottom: 0.85714em; font-size: 2.42857em; line-height: 1.61765em
}
.overlay-full .overlay-content.exit h1 { margin-bottom: 0.71429em; font-size: 2.28571em; line-height: 1.21875em
}
.overlay-full .overlay-content.exit h2 { margin-bottom: 1.07143em; font-size: 1.57143em; line-height: 1.22727em
}
.overlay-full .overlay-content.exit span { color: #fff; font-size: 1.21429em; line-height: 1.23529em
}
.overlay-full .overlay-content.exit .exit-overlay-container { padding: 0 0.71429em; clear: both; overflow: hidden
}
.overlay-full .overlay-content.exit .exit-overlay-main { float: left; width: 17.5em; font-size: 0.85714em; line-height: 1.5em
}
.overlay-full .overlay-content.exit .exit-overlay-mid { float: left; width: 5.35714em; margin: 0 1.07143em; padding-top: 1.78571em; text-align: center
}
.overlay-full .overlay-content.exit a,
.overlay-full .overlay-content.exit a:active,
.overlay-full .overlay-content.exit a:visited { color: #fff; text-decoration: none
}
.overlay-full .overlay-content.exit a:hover { text-decoration: underline
}
.overlay-full .overlay-content button { margin-top: 1.42857em; padding: 0.71429em 1.42857em; background: #1b8fc2; color: #fff; border: 0; cursor: pointer; font-size: 1.14286em; line-height: 1.25em; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; -webkit-transition: background 0.25s ease-in-out; -moz-transition: background 0.25s ease-in-out; transition: background 0.25s ease-in-out
}
.overlay-full .overlay-content button:hover { background: #1079ba
}
.overlay-full .overlay-content button.disabled { background: #aaa; opacity: .3; cursor: default
}
.overlay-full .overlay-content .overlay-inner { padding: 0 3.57143em
}
.dark-header { width: 100%; height: 2em; background: #2e2f33; padding: 0 0.92857em; color: #fff
}
.dark-header .logo { float: right; width: 3.21429em; height: 1.14286em; margin-top: 0.42857em; border: 0
}
.dark-header span { font-size: 1em; line-height: 2em
}
.blue-nav { height: 3.57143em; background: #1b8fc2; padding: 0 0.92857em; color: #fff
}
.blue-nav span { font-size: 1.64286em; line-height: 2.17391em
}
.blue-nav .step-back { display: none; float: right; margin-top: 0.85714em
}
.blue-nav .step-back.active { display: block
}
.blue-nav .step-back svg { cursor: pointer
}
.scene { position: relative; width: 100%; height: 35.07143em; display: none; overflow: hidden
}
.scene.active { display: block
}
.tool-tip { position: absolute; padding: 0.71429em 1.42857em; width: 13.07692em; background: #2e2f33; box-shadow: 0 2px 5px 1px #333; -moz-box-shadow: 0 2px 5px 1px #333; -webkit-box-shadow: 0 2px 5px 1px #333; color: #fff; z-index: 3; font-size: 0.92857em; line-height: 1.30769em; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px
}
.tool-tip::before { content: url(https://www.danyuschick.com/codepen/pure-app/tool-tip-arrow.png); position: relative; top: -1.57143em; left: 0.85714em
}
.tool-tip.right-arrow::before { left: 6.53846em
}
.tool-tip span { float: left; margin-top: -1.07143em
}
footer { height: 2.21429em; background: #2e2f33; text-align: right; color: #fff; padding: 0 1.42857em; font-size: 1em; line-height: 2.21429em
}
footer a,
footer a:visited,
footer a:active,
footer a:hover { color: #fff; text-decoration: none
}
footer a.fountain-blue { color: #59a4c7
}
footer .exit,
footer .exit:visited,
footer .exit:active { margin-left: 1.78571em; color: #1b8fc2; text-transform: uppercase
}
footer .exit:hover { color: #1079ba
}
.scene.one .content-container { position: relative; padding: 1.42857em 1.42857em
}
.scene.one .content-container button { padding: 0.85714em 1.14286em; background: #1b8fc2; color: #fff; border: 0; cursor: pointer; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; -webkit-transition: background 0.25s ease-in-out; -moz-transition: background 0.25s ease-in-out; transition: background 0.25s ease-in-out
}
.scene.one .content-container button:hover { background: #1079ba
}
.scene.one .content-container button.disabled { background: #aaa; opacity: .3; cursor: default
}
.scene.one .content-container .pattern-list { margin-top: 20px; width: 100%; border: 1px solid #aaa
}
.scene.one .content-container .pattern-list thead { background: #f3f3f3; border-bottom: 1px solid #aaa; color: #000; font-size: 0.92857em; line-height: 1.53846em
}
.scene.one .content-container .pattern-list tr:nth-child(even) { background: #f3f3f3
}
.scene.one .content-container .pattern-list td { padding: 0.5em 0.85714em; border-right: 1px solid #aaa; border-bottom: 1px solid #aaa; font-size: 0.85714em; line-height: 1.5em
}
.scene.one .content-container .pattern-list td.deploy { width: 90px
}
.scene.one .content-container .pattern-list td.deploy img { float: right; width: 2em; height: 1.57143em; border: 0; cursor: pointer
}
.scene.one .content-container .pattern-list td.deploy span { cursor: pointer
}
.scene.two .save-bar { padding: 0.71429em 1.42857em; height: 2.64286em; opacity: .3; -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; transition: opacity 0.5s
}
.scene.two .save-bar img { float: left; margin-right: 0.71429em
}
.scene.two .save-bar span { float: left; color: #333; font-size: 0.85714em; line-height: 1.33333em
}
.scene.two .save-bar.active { opacity: 1
}
.scene.two .save-bar.active span,
.scene.two .save-bar.active img { cursor: pointer
}
.scene.two .left-section { float: left; width: 17.42857em; height: 32.42857em; margin-right: 1.42857em
}
.scene.two .left-section .tab-bar { height: 1.85714em; overflow: hidden; box-shadow: inset 0 -10px 10px -10px #d4d4d4; -moz-box-shadow: inset 0 -10px 10px -10px #d4d4d4; -webkit-box-shadow: inset 0 -10px 10px -10px #d4d4d4
}
.scene.two .left-section .tab-bar ul li { float: left; margin-top: 2px; height: 2.16667em; margin-left: 0.71429em; padding: 0.28571em 0.92857em; background: #e8e8e8; color: #777; font-size: 0.85714em; line-height: 2.16667em/12em
}
.scene.two .left-section .tab-bar ul li.active { background: #c4c4c4; color: #000; margin-top: 0
}
.scene.two .left-section .components-section { height: 30.57143em; border-top: 1px solid #d4d4d4; border-right: 1px solid #d4d4d4; box-shadow: 5px 0px 5px -3px #d4d4d4; -moz-box-shadow: 5px 0px 5px -3px #d4d4d4; -webkit-box-shadow: 5px 0px 5px -3px #d4d4d4
}
.scene.two .left-section .components-section .assets-bar { height: 1.92857em; padding: 0.35714em 1.42857em
}
.scene.two .left-section .components-section .components-bar { height: 2.64286em; padding: 0.71429em 1.42857em; background: #f3f3f3
}
.scene.two .left-section .components-section .components-container div { height: 2.14286em; padding: 0 1.42857em; color: #d3d3d3; background: #fff; border-bottom: 1px solid #d3d3d3; font-size: 1em; line-height: 2.14286em
}
.scene.two .left-section .components-section .components-container div img { width: 1.71429em; height: 1.64286em; border: 0; margin-top: 0.21429em; float: left; margin-right: 0.71429em
}
.scene.two .left-section .components-section .components-container div.active { color: #000; -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out
}
.scene.two .left-section .components-section .components-container div.active img { opacity: 1
}
.scene.two .left-section .components-section .components-container div.active:hover { background: #0579af; color: #fff; cursor: move
}
.scene.two .left-section .components-section .components-container div.active.dropped:hover { cursor: default
}
.scene.two .left-section .components-section .components-container .application-drag { width: 11.21429em; height: 5.64286em; background: url(https://www.danyuschick.com/codepen/pure-app/application-items.png) no-repeat; background-position: left -480px; border: 0
}
.scene.two .right-section { float: left; width: 51em; height: 32.42857em
}
.scene.two .right-section .top { height: 0.28571em; border-bottom: 1px solid #d3d3d3; background-color: #d4d4d4; background-image: -webkit-linear-gradient(bottom, #d4d4d4, #fff); background-image: linear-gradient(to top, #d4d4d4, #fff)
}
.scene.two .right-section .application-container { border-left: 1px solid #d4d4d4; height: 32.14286em; box-shadow: -5px 0 5px -3px #d4d4d4; -moz-box-shadow: -5px 0 5px -3px #d4d4d4; -webkit-box-shadow: -5px 0 5px -3px #d4d4d4
}
.scene.two .right-section .application-container .application-container-inner { position: relative; height: 32.14286em; padding: 1.42857em; background: url(https://www.danyuschick.com/codepen/pure-app/arrows.jpg) no-repeat center top 35px
}
.scene.two .right-section .application-container .application-container-inner .item { position: absolute; width: 11.21429em; height: 5.64286em; background: url(https://www.danyuschick.com/codepen/pure-app/application-items.png) no-repeat
}
.scene.two .right-section .application-container .application-container-inner .item.dropped { z-index: 2
}
.scene.two .right-section .application-container .application-container-inner .item.configuration { background-position: left top; top: 8px; left: 261px
}
.scene.two .right-section .application-container .application-container-inner .item.configuration:hover { background-position: -165px top
}
.scene.two .right-section .application-container .application-container-inner .item.admin-db { top: 14px; left: 503px; background-position: left -80px
}
.scene.two .right-section .application-container .application-container-inner .item.admin-db:hover { background-position: -165px -80px
}
.scene.two .right-section .application-container .application-container-inner .item.runtime-db { top: 115px; left: 498px; background-position: left -160px
}
.scene.two .right-section .application-container .application-container-inner .item.runtime-db:hover { background-position: -165px -160px
}
.scene.two .right-section .application-container .application-container-inner .item.reports-db { top: 249px; left: 487px; background-position: left -240px
}
.scene.two .right-section .application-container .application-container-inner .item.reports-db:hover { background-position: -165px -240px
}
.scene.two .right-section .application-container .application-container-inner .item.server { top: 129px; left: 282px; background-position: left -320px
}
.scene.two .right-section .application-container .application-container-inner .item.server:hover { background-position: -165px -320px
}
.scene.two .right-section .application-container .application-container-inner .item.server.dropped { background-position: right -320px
}
.scene.two .right-section .application-container .application-container-inner .item.server.dropped:hover { background-position: -165px -320px
}
.scene.two .right-section .application-container .application-container-inner .item.starter-adapter { top: 215px; left: 63px; background-position: left -400px
}
.scene.two .right-section .application-container .application-container-inner .item.starter-adapter:hover { background-position: -165px -400px
}
.scene.two .right-section .application-container .application-container-inner .item.application { top: 50px; left: 60px; background-position: -165px -480px
}
.scene.two .right-section .application-container .application-container-inner .item.application.active { background-position: left -480px
}
.scene.two .right-section .application-container .application-container-inner .item.tds { top: 300px; left: 288px; width: 8.85714em; background-position: left bottom
}
.scene.two .right-section .application-container .application-container-inner .item.tds:hover { background-position: -194px bottom
}
.scene.two .right-section .application-container .application-container-inner .item .dot-start { position: absolute; bottom: -0.85714em; right: -0.85714em; width: 2.14286em; height: 2.14286em; background: url(https://www.danyuschick.com/codepen/pure-app/dot-glow.png) no-repeat
}
.scene.two .right-section .application-container .application-container-inner .item .dot-end { position: absolute; top: -0.21429em; left: -0.21429em; width: 2.14286em; height: 2.14286em; background: url(https://www.danyuschick.com/codepen/pure-app/dot-plain.png) no-repeat
}
.scene.two .right-section .application-container .application-container-inner .item .dot-end.dropped { background: url(https://www.danyuschick.com/codepen/pure-app/dot-glow.png) no-repeat; top: -0.42857em; left: -0.42857em
}
.scene.two .right-section .application-container .application-container-inner .canvas-container { position: absolute; z-index: 1; top: 90px; left: 177px
}
.scene.two .right-section .application-container .application-container-inner .canvas-container #the-line { width: 7.85714em; height: 2.85714em
}

IBM PureSystems - PureApp Emulator - Script Codes JS Codes

/** * IBM PureSystems - PureApp * Centerline Digital - www.centerline.net * Interactive Developer * February 2015 **/
(function(window, document, $) { var isConnected = false, imageCounter = 0, theInterval; var theEmulator = { init: function() { theEmulator.overlayBuild("enter"); theEmulator.buildTableRows("step-one"); $(".scene.one button").click(function() { theEmulator.drag(); theEmulator.drop(); theEmulator.toggleScene(); theEmulator.overlayBuild("create"); theEmulator.updateStepBackLink(2); theInterval = setInterval(function() { theEmulator.rotateImages(imageCounter); }, 1000); if ($(".canvas-container").length < 1) { theEmulator.activateCanvas(); } }); }, buildTableRows: function(type) { var theDate = moment().format('MMMM Do YYYY, h:mm a', "America/New_York"); var source = $("#list-row").html(); var template = Handlebars.compile(source); var context; if (type == "step-one") { for (var i = 1; i < 4; i++) { var context = { appName: "Sample " + i, username: "PureAppUser", date: theDate }; var theNewRow = template(context); $(".scene.one .pattern-list tr").eq(i).html(theNewRow); } } else { for (var i = 0; i < 4; i++) { if (i == 0) { context = { appName: "IBM PureApp Demo", username: "PureAppUser", date: theDate }; } else { context = { appName: "Sample " + i, username: "PureAppUser", date: theDate }; } var theNewRow = template(context); $(".scene.one .pattern-list tr").eq(i + 1).html(theNewRow); } } }, drag: function() { /** * Initialize the drag functionality */ $(".application-item").draggable({ revert: true, cursorAt: { top: 55, left: 75 }, snap: "#application-zone", zIndex: 2, helper: "clone", start: function(event, ui) { $(ui.helper).attr('class', 'application-drag').empty(); theEmulator.tooltipDestroy(); } }); }, drop: function() { /** * Initialize the drop functionality */ $("#application-zone").droppable({ addClass: false, drop: function(event, ui) { $(ui.helper).remove(); $(this).addClass("active"); $(".application-item").draggable({ disabled: true }).addClass("dropped"); $startDot = $(document.createElement('div')); $startDot.attr("class", "dot-start").appendTo(this); $endDot = $(document.createElement('div')); $endDot.attr("class", "dot-end").appendTo(".item.server"); theEmulator.updateStepBackLink(3); theEmulator.updateInstructions(3); theEmulator.tooltipBuild("drop"); } }); }, activateCanvas: function() { /** * Initialize the drawing canvas functionality */ var canvas = new fabric.Canvas('the-line', { selection: false }); var line, isDown, targetX, targetY; canvas.on('mouse:down', function draw(o) { if (!isConnected) { theEmulator.tooltipDestroy(); isDown = true; var pointer = canvas.getPointer(o.e); var points = [pointer.x, pointer.y, pointer.x, pointer.y]; line = new fabric.Line(points, { strokeWidth: 2, fill: '#1b8fc2', stroke: '#1b8fc2', originX: 'center', originY: 'center' }); canvas.add(line); } }); canvas.on('mouse:move', function(o) { if (!isDown) return; if (!isConnected) { var pointer = canvas.getPointer(o.e); line.set({ x2: pointer.x, y2: pointer.y }); canvas.renderAll(); } }); canvas.on('mouse:up', function(o) { if (!isConnected) { var pointer = canvas.getPointer(o.e); targetX = pointer.x; targetY = pointer.y; isDown = false; // If the drawn line successfully connects to the Server element if (targetX > 86 && (targetY > 15 && targetY < 38)) { $(".item, .dot-end, .item.server").addClass("dropped"); theEmulator.enableSave(); theEmulator.tooltipBuild("save"); $(".canvas-container, #the-line").find("*").off(); $(".canvas-container, #the-line").find("*").off(); isConnected = true; theEmulator.updateStepBackLink(4); } else { canvas.clear(); } } }); }, resetCanvas: function() { /** * Removes and recreates the canvas element when stepping back */ $(".canvas-container").remove(); $newCanvas = $(document.createElement('canvas')); $newCanvas.attr({ "id": "the-line", "width": 100, "height": 30 }).appendTo(".application-container-inner"); theEmulator.activateCanvas(); }, toggleScene: function() { /** * Transfers the user to Step 2 to begin building their pattern */ $(".scene").toggleClass("active"); }, updateInstructions: function(theStep) { /** * Update the Step # and Instructions per action * @param {Integer} theStep - the step currently being triggered */ var theScene; var theInstructions = { 1: { step: "Step 1:", instruction: "Click \"Create New\" to start a mobile application pattern" }, 2: { step: "Step 2:", instruction: "Select your mobile application platform" }, 3: { step: "Step 3:", instruction: "Connect the dot to the Worklight Server to complete" }, 4: { step: "Step 4:", instruction: "Save your new Worklight Application" }, 5: { step: "Step 5:", instruction: "Deploy your new Mobile Application Pattern" } }; if (theStep > 1 && theStep < 5) { theScene = "two"; } else { theScene = "one"; } $(".scene." + theScene + " .step").text(theInstructions[theStep]["step"]); $(".scene." + theScene + " .instruction").text(" " + theInstructions[theStep]["instruction"]); }, rotateImages: function(i) { var count = $(".img-create").length; $(".img-create.active").toggleClass("active"); $(".img-create").eq(i).toggleClass("active"); imageCounter++; if (i === count - 1) { imageCounter = 0; } }, clearInterval: function() { clearInterval(theInterval); }, enableSave: function() { /** * Enables the Save button for Step 5 */ theEmulator.updateInstructions(4); $(".save-bar").addClass("active"); $(".save-bar img, .save-bar span").click(function() { theEmulator.saveApplication(); }); }, disableSave: function() { /** * Disables the Save button when stepping back from Step 5 */ $(".save-bar").unbind().removeClass("active"); $(".save-bar img, .save-bar span").unbind(); }, saveApplication: function() { /** * 'Saves' the created pattern and progresses the user to Step 6 */ theEmulator.toggleScene(); theEmulator.buildStepSix(); theEmulator.updateInstructions(5); theEmulator.overlayBuild("save"); theEmulator.tooltipDestroy(); theEmulator.updateStepBackLink(5); }, buildStepSix: function() { /** * Creates the list entry for the 'saved' pattern from Step 5 */ theEmulator.buildTableRows("scene-six"); $(".scene.one .pattern-list tr:last").remove(); $(".scene.one button").addClass("disabled"); document.getElementById("deploy-text").addEventListener("click", function() { theEmulator.overlayBuild("exit"); theEmulator.tooltipDestroy(); }); document.getElementById("deploy-icon").addEventListener("click", function() { theEmulator.overlayBuild("exit"); theEmulator.tooltipDestroy(); }); }, overlayBuild: function(theAction) { /** * Builds and displays the step overlays * @param {String} theAction - the function that triggers the overlay */ var theActionHTML = { "enter": { button: "Get Started", callback: "" }, "create": { button: "Start Building", callback: "theEmulator.tooltipBuild('worklight')" }, "save": { button: "Continue", callback: "theEmulator.tooltipBuild('deploy')" }, "exit": { button: "", callback: "" } }; var source = $("#overlay-" + theAction).html(); var template = Handlebars.compile(source); var context = { buttonText: theActionHTML[theAction]["button"] }; var theHTML = template(context); $theFullOverlay = $(document.createElement('div')); $theFullOverlay.attr("class", "overlay-full"); $theContentOverlay = $(document.createElement('div')); $theContentOverlay.attr("class", "overlay-content " + theAction); $theContentOverlay.html(theHTML); $theContentOverlay.appendTo($theFullOverlay); $theFullOverlay.appendTo(".container").fadeIn("fast"); if (theActionHTML[theAction]["button"] !== "") { document.getElementById("overlay-button").addEventListener("click", function() { if (theActionHTML[theAction]["callback"] !== "") { theEmulator.overlayDestroy(theActionHTML[theAction]["callback"]); } else { theEmulator.overlayDestroy(null); } }); } }, overlayDestroy: function(theCallback) { /** * Closes and removes the overlay * @param {String} theCallback - The function that should run upon closing the overlay */ $(".overlay-full").fadeOut(400, function() { $(this).remove(); if (theCallback) { eval(theCallback); } }); }, tooltipBuild: function(theAction) { /** * Builds, displays, and animates the tool tip element * @param {String} theAction - the function the tool tip is highlighting */ var theToolTips = { "worklight": { x: 55, y: 270, text: "Drag the Worklight Application onto the stage.", scene: "two", arrow: "left" }, "drop": { x: 436, y: 254, text: "Click and drag to connect the blue dots.", scene: "two", arrow: "left" }, "save": { x: "10", y: "105", text: "Click to save this Pattern.", scene: "two", arrow: "left" }, "deploy": { x: "800", y: "205", text: "Click to deploy the Pattern.", scene: "one", arrow: "right" } }; $theToolTip = $(document.createElement('div')); if (theToolTips[theAction]["arrow"] == "left") { $theToolTip.attr("class", "tool-tip"); } else { $theToolTip.attr("class", "tool-tip right-arrow"); } if (theAction == "worklight") { theEmulator.clearInterval(); } $theToolTip.html("<span>" + theToolTips[theAction]["text"] + "</span>"); $theToolTip.css({ top: theToolTips[theAction]["y"] + "px", left: theToolTips[theAction]["x"] + "px" }); $theToolTip.appendTo(".scene." + theToolTips[theAction]["scene"]).animate({ top: theToolTips[theAction]["y"] - 20 + "px" }, 1500, "easeOutBounce"); }, tooltipDestroy: function() { /** * Destroys the active tooltip */ setTimeout(function() { $(".tool-tip").each(function() { $(this).fadeOut("fast", function() { $(this).remove(); }); }); }, 100); }, updateStepBackLink: function(theStep) { /** * Updates the click event for the step back link * @param {Integer} theStep - the current step being stepped back from */ var theScene = "one"; if (theStep > 1 && theStep < 5) { theScene = "two"; } else { theScene = "one"; $(".scene." + theScene + " .step-back").addClass("active"); } $(".scene." + theScene + " .step-back svg").unbind().click(function() { theEmulator.stepBackFrom(theStep); }); }, stepBackFrom: function(theStep) { /** * Processes the request of stepping backwards, resets functionality and settingsas needed * @param {Integer} theStep - the current step being stepped back from */ if (theStep == 2) { theEmulator.overlayBuild("enter"); theEmulator.toggleScene(); theEmulator.tooltipDestroy(); theEmulator.updateInstructions(1); theEmulator.buildTableRows("step-one"); $(".scene.one .step-back").removeClass("active"); //$(".scene.one .pattern-list tr").eq(1).children("td").html("&nbsp;"); $(".scene.one button").removeClass("disabled"); } else if (theStep == 3) { theEmulator.overlayBuild("create"); theEmulator.tooltipDestroy(); theEmulator.updateInstructions(2); $("#application-zone").removeClass("active"); $(".dot-start, .dot-end").remove(); $(".application-item").draggable({ disabled: false }).removeClass("dropped"); theEmulator.updateStepBackLink(2); } else if (theStep == 4) { theEmulator.tooltipDestroy(); theEmulator.updateInstructions(3); theEmulator.disableSave(); theEmulator.tooltipBuild("drop"); theEmulator.resetCanvas(); $(".item, .dot-end, .item.server").removeClass("dropped"); isConnected = false; theEmulator.updateStepBackLink(3); } else if (theStep == 5) { theEmulator.toggleScene(); theEmulator.tooltipBuild("save"); } } }; $(document).ready(function() { theEmulator.init(); });
}(this, this.document, this.jQuery));
IBM PureSystems - PureApp Emulator - Script Codes
IBM PureSystems - PureApp Emulator - Script Codes
Home Page Home
Developer Daniel Yuschick
Username Yuschick
Uploaded September 25, 2022
Rating 3
Size 10,595 Kb
Views 12,144
Do you need developer help for IBM PureSystems - PureApp Emulator?

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!

Daniel Yuschick (Yuschick) Script Codes
Name
Ripples on the Water - Website Design
Interactive HTML5 Video Demo
Pac Manufacturing Ghost Generator
SnapFoo v2 Demo - Loop a Group of Elements Along a Path
Responsive Diamond Navigation
Archer Pirate Virus - Snap SVG Demo
Flat Surface Shader Earth
Perrelet Turbine in SVGs
Create amazing captions 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!