Skip to content

Instantly share code, notes, and snippets.

@saraclima
Created October 2, 2017 07:31
Show Gist options
  • Select an option

  • Save saraclima/bee5b31099fccd96a99b2ec90eb65053 to your computer and use it in GitHub Desktop.

Select an option

Save saraclima/bee5b31099fccd96a99b2ec90eb65053 to your computer and use it in GitHub Desktop.
FinThePrecious by Sara
<!DOCTYPE html>
<head>
<base href="">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MockFlow WireframePro - Viewer</title>
<!-- external css files -->
<link href="https://wireframepro.mockflow.com/css/external/bootstrap3/bootstrap-editor-min.css" rel="stylesheet" type="text/css" />
<link href="https://wireframepro.mockflow.com/css/external/bootstrap3/bootstrap-theme.css" rel="stylesheet" type="text/css" />
<link href="https://wireframepro.mockflow.com/css/external/jquery-ui-1.11.4.custom.min.css" rel="stylesheet" type="text/css" />
<link href="https://wireframepro.mockflow.com/css/external/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="https://wireframepro.mockflow.com/css/external/styles/kendo.custom.metro.css" rel="stylesheet" type="text/css" />
<link href="https://wireframepro.mockflow.com/css/external/bootstrap-toggle-buttons.css" rel="stylesheet" type="text/css" />
<link href="https://wireframepro.mockflow.com/css/external/fontawesome/css/font-awesome.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600" rel="stylesheet">
<link href="https://wireframepro.mockflow.com/css/internal/icons/style.css" rel="stylesheet" type="text/css" />
<!-- internal css files -->
<link href="css/internal/editor-min.css?v=2017_10_01_23_41_16" rel="stylesheet" type="text/css">
<!-- external js files -->
<!-- mfexternal-min.js -->
<script type="text/javascript" src="data/data.js"></script>
<script type="text/javascript" src="https://d20hhedk3h2l88.cloudfront.net/apps/wireframepro/external/js/webfont.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- <script type="text/javascript" src="js/external/jquery-2.1.4.min.js"></script>-->
<script type="text/javascript" src="https://d20hhedk3h2l88.cloudfront.net/apps/wireframepro/external/js/jquery-ui-1.11.4.custom.min.js"></script>
<script type="text/javascript" src="https://d20hhedk3h2l88.cloudfront.net/apps/wireframepro/external/js/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="https://d20hhedk3h2l88.cloudfront.net/apps/wireframepro/external/js/kendo.custom.min.js"></script>
<script type="text/javascript" src="https://d20hhedk3h2l88.cloudfront.net/apps/wireframepro/external/js/bootstrap3.min.js"></script>
<script type="text/javascript" src="https://d20hhedk3h2l88.cloudfront.net/apps/external/js/jquery.textchange.min.js"></script>
<script type="text/javascript" src="https://d20hhedk3h2l88.cloudfront.net/apps/external/js/jquery.event.drag-2.2.min.js"></script>
<script type="text/javascript" src="https://d20hhedk3h2l88.cloudfront.net/apps/external/js/arraycollection.min.js"></script>
<script type="text/javascript" src="https://d20hhedk3h2l88.cloudfront.net/apps/wireframepro/external/js/spin.min.js"></script>
<script type="text/javascript" src="https://d20hhedk3h2l88.cloudfront.net/apps/wireframepro/external/js/multiline.min.js"></script>
<script type="text/javascript" src="https://d20hhedk3h2l88.cloudfront.net/apps/wireframepro/external/js/jquery.address-1.5.min.js"></script>
<!-- internal js files -->
<script type="text/javascript" src="js/internal/mf_wireframepro-min.js?v=2017_10_01_23_41_16"></script>
<script type="text/javascript">
$(document).ready(function()
{
mf_main = new MF_Main();
mf_main.PUBLIC = true;
//when you change this make sure the same code in MF_Main is updated
mf_main.onLoadInterface();
});
</script>
<script type="text/javascript">
//create the main app instance
var mf_main = null;
$(window).resize(function()
{
if(mf_main)
{
mf_main.interfaceResize();
}
});
$(window).resize();
</script>
</head>
<body id="mainBody" class="notranslate" translate="no" style="display: none; overflow: hidden;">
<div id="mfEditorView" style="width: 100%; height: 100%; display: block; position: absolute; top: 0px; left: 0px;"" >
<div id="mfTextDummyEditable" style="position: absolute; top: -100px; left: 0px; width: 20px; height: 10px; " contenteditable="true">&nbsp;</div>
<div id="mfTextDummy" style="position: absolute; top: -100px; left: 0px; width: 20px; height: 10px;">&nbsp;</div>
<div id="mfrenderbar" data-width="600" data-height="800" data-x="0" data-y="0" style="visibility:hidden; position:absolute; top: 0px; left:0px;">&nbsp;</div>
<i id="mfDummyIconImageLoader" class="ico-angle-down-circle" style="position: absolute; top: -100px; left: 0px; z-index: -10; font-size: 10px;"></i>
<div style="width: 100%; height: 100%; background-color: #fff; position: absolute; top: 0px; left: 0px;"" >
<div id="mfPageManagerArea" style="float: left; width: 320px; height: 100%; border-right: 1px solid #ccc;" class="mfGradientBg">
<div id="mfViewerHeader" class="headerbar" style="display: none; width: 320px; position: absolute; left: 0px; top: 0px; background-color: #2196F3; color: #fff; height: 0px;">
<div style="width: 100%; height: 0px; overflow: hidden; display: block; ">
</div>
</div>
<div id="mfNavBar" style="width: 70px; position: absolute; left: 0px; top: 0px; height: 100%; float: left; background-color: #EFF1F5;">
<!-- viewr -->
<div style='height: 10px;'></div>
<div id="mfCurrentPageTitleOuter" class="mfImgLink" style=" padding: 5px; font-size: 20px; color: #ccc; text-align: left; overflow: hidden; ">
<div id="mfCurrentPageTitle" style='cursor: pointer; transform: rotate(-90deg); white-space: nowrap; height: 50px; margin-left: 20px; transform-origin: left top; overflow: hidden; text-overflow: ellipses; '>
</div>
</div>
<div id="mfNavbarZoomBtn" class="">
<span class="btn trasnparent-btn" style="font-size: 20px;"><i class="ico-zoom_in"></i></span>
</div>
<div id="mfNavbarToggleBtn" class="">
<span class="btn trasnparent-btn"><i class="ico-back"></i></span>
</div>
</div>
<div id="mfNavBarContent" style="position: absolute; width: 249px; top: 0px; left: 70px; overflow: hidden; height: 100%; background-color: #fff; color: #fff;" class="mfGradientBg">
<div id="mfContentPages" class="mfNavBarContentHolderCls" style="display: block; width: 100%; height: 100%">
<div id="mfPageSearchBar" style="float: left; width: 249px; height: 35px; padding-top: 5px; border: none; border-bottom: 1px solid #ccc; background: transparent; ">
<input placeholder="Search Pages" spellcheck=false style="width: 250px; padding-left: 10px; color: #666; height: 25px; font-size: 12px; outline: 0px; border: none; background: transparent; outline:none; border: none; box-shadow: none; outline: 0px; font-weight: normal; background-color: transparent; " id="mfPageSearchBox" type="text" />
<span id="mfToggleTreeBtn" data-toggle="tooltip" data-placement="bottom" title="Expand/Collapse SiteMap" class="fa-angle-double-down mfImgLink" style="position: absolute; top: 5px; left: 225px; color: #ccc; font-size: 24px; cursor:pointer;"></span>
</div>
<div id="mfPageList" class="mfGradientBg" >
</div>
<div id="mfPageToggleSettings" class="mfPageToolbarCls" style="width: 100%; height: 82px; margin-top: 10px; box-shadow: 0 -8px 6px -6px #ccc; color: #666; " >
<div style="width: 100%; height: 100%; position: relative; color: #666; margin-left: 10px;">
<div style="position: absolute; top: 10px; left: 10px; width: 200px;">
<strong>-</strong> Press SHIFT to Highlight Links<br/>
<strong>-</strong> To Pan hold SpaceBar &amp; drag mouse
</div>
<div class="checkbox" style="position: absolute; top: 60px; left: 10px;">
<label><input type="checkbox" checked=true id="mfToggleLinkHighlight" value="">Reveal Links</label>
</div>
<div class="checkbox" style="position: absolute; top: 75px; left: 110px;">
<label><input type="checkbox" checked=true id="mfToggleAnnotations" value="">Toggle Annotation</label>
</div>
</div>
</div>
</div>
<!-- viewer -->
</div>
</div>
<div title="Show sidebar" data-toggle="tooltip" class="mfShowSidebar"><button style="padding-top: 2px; padding-left: 2px;" class="btn trasnparent-btn"><i class="ico-forward"></i></button></div>
<div id="mfPageArea" style="float: right; width: 700px; height: 100%;" >
<div id="mfEditorHolder" unselectable="on" style="overflow: auto; background: #f0f0f0; width: 100%; height: 100%; user-select: none; -webkit-user-select: none; -moz-user-select: -moz-none; " >
<div style='overflow: hidden; position: relative; display: block; background: #fff; width: 100%; height: 100%; top: 0px; left: 0px; ' id="mfContainerPage" >
<div id="mfPanningDiv" style="top: 0px; left: 0px; background-color: rgba(255,255,255,0); display: none; width: 595px; height: 841px; position: absolute; z-index: 500; overflow: hidden; " ></div>
</div>
</div>
<div id="mfPageLoader" style='z-index: 5000000; overflow: hidden; background: #fff; position: absolute; display: block; width: 100%; height: 100%; top: 0px; left: 0px;' ><div id="mfPageLoaderImg" style='position: relative; width: 50px; height: 50px;' class="mfAjaxLoader" ></div></div>
</div>
</div>
</div>
<div id="tmDialogBackground" style="z-index: 200; display: none; background-color: rgba(0,0,0,0.6); position: absolute; top: 0px; left: 0px; overflow: hidden; height: 100%; width: 100%; " >
</div>
<div id="mfZoomPopup" class="mfPopUp2" style="border-radius: 20px; background: #444; color: #fff; text-align: center; font-size: 20px; width: 150px;height:40px;">
<div style="display: block; width: 100%; overflow: hidden; text-align: center;">
<span id="mfZoomBarPlusBtn" style="cursor: pointer;" class="mfZoomBarBtns mfImgLink ico-zoom_in" ></span> &nbsp; &nbsp;
<span id="mfZoomBar100Btn" style="cursor: pointer;" class="mfZoomBarBtns mfImgLink ico-refresh" ></span> &nbsp; &nbsp;
<span id="mfZoomBarMinusBtn" style="cursor: pointer;" class="mfZoomBarBtns mfImgLink ico-zoom_out" ></span>
</div>
</div>
<div id="mfActionIndicator" style="overflow: hidden; z-index: 10900; display: none; width: 400px; height: 25px; text-align: center; background-color: #ffffff; opacity: 1; padding-top: 2px; padding-left: 5px; padding-right: 5px;" >
&nbsp; <span id="mfActionIndicatorMessage" style="font-size: 11px; font-weight: bold; color: #666;" ></span>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment