@flourish/sdk
Version:
The Flourish SDK
97 lines (87 loc) • 3.83 kB
HTML
<html lang="en-GB">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
<title>Flourish | Data Visualisation & Storytelling</title>
<script>if ("ontouchstart" in window) { document.documentElement.classList.add("is-touch"); }</script>
<link rel="stylesheet" type="text/css" href="/sdk.css">
<script src="/script.js" charset="utf-8"></script>
</head>
<body class="sdk">
<div class="row header no-select" style="padding-left:10px">
<a href="https://app.flourish.studio" target="_blank"><img class="logo" src="/images/logo.png" alt="Flourish logo"></a><span id="sdk-tag">SDK</span>
</div>
<div class="row editor-bar">
<div id="preview-menu" class="row-menu left no-select">
<div id="editor-previews">
<span id="editor-auto" data-target="auto" class="menu-item preview-mode clickable selected popup" data-popup-head="Preview using available width">
<i class="fa fa-tv"></i>
</span>
<span id="editor-tablet" data-target="tablet" class="menu-item preview-mode clickable popup" data-popup-head="Preview at typical tablet width">
<i class="fa fa-tablet"></i>
</span>
<span id="editor-mobile" data-target="mobile" class="menu-item preview-mode clickable popup" data-popup-head="Preview at typical mobile width">
<i class="fa fa-mobile-phone"></i>
</span>
<span id="editor-custom" data-target="custom" class="menu-item preview-mode clickable popup" data-popup-head="Preview at custom size">
<i class="fa fa-cog"></i>
</span>
<span id="editor-custom-inputs">
<input id="editor-custom-width" type="number" min="100" data-target="custom" class="clickable selected"> x
<input id="editor-custom-height" type="number" min="100" data-target="custom" class="clickable selected" placeholder="auto">
</span>
</div>
</div>
</div>
<div class="content">
<div class="row editor">
<div class="row-inner">
<div id="visualisation" class="full-screen-ready">
<div id="visualisation-inner" class="editor-core">
<div class="preview-holder">
<img class="loading-spinner" src="/images/bosh.svg">
<iframe id="preview" sandbox="allow-same-origin allow-scripts" src="about:blank"></iframe>
<div id="resize-overlay"></div>
<div id="resize-handle-container">
<div id="resize-handle"></div>
</div>
</div>
</div>
<div class="side-panel">
<div class="side-panel-inner">
<div class="current-template popup" data-popup-head="Template details" data-popup-body="Add or edit thumbnail.jpg and template.yml to change">
<div class="current-template-title">
<div class="current-template-thumbnail"></div>
<h1>Selected template <span class="template-name">{{ template_name }}</span></h1>
</div>
<div class="current-template-info">
<div class="current-template-description">
<p><span class="label">Author:</span> <span class="author">{{ template_author }}</span></p>
</div>
</div>
</div>
<div class="template-settings"></div>
</div>
</div>
</div>
</div>
</div>
</div>
{{# if build_failed }}
<div class="error shown">
<h1><i class="fa fa-exclamation-triangle"></i> Template failed to build</h1>
<h2>See your terminal for details</h2>
</div>
{{/ if }}
<div id="error-server-down" class="error">
<h1><i class="fa fa-exclamation-triangle"></i> SDK server not running</h1>
<h2>Check your terminal for errors</h2>
</div>
<script>
Flourish.initSDK({{{ visualisation_js }}}, {{{ settings }}}, {{{ data_bindings }}});
Flourish.app.preview_pane.loadTemplate();
Flourish.talkToServer();
</script>
</body>
</html>