@thebigcrunch/sdk
Version:
The big crunch SDK library
398 lines (346 loc) • 12.4 kB
HTML
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="/tbc_sdk.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<title>The Big Crunch</title>
<link id="CanonicalUrl" rel="canonical" />
<!-- Javascript is injected via web pack. -->
<style>
#error {
display: none;
}
/* Cell Display styles */
body {
margin: 0px;
padding: 0px;
font-family: sans-serif;
overflow: hidden;
display: flex;
justify-content: center;
flex-direction: column;
height: calc(100vh - 3px);
}
iframe {
border: none;
overflow: hidden;
}
.container-center {
display: flex;
justify-content: center;
width: 100%;
height: 100%;
overflow: hidden;
}
#container {
overflow: hidden;
}
.blur-container {
filter: blur(5px);
}
#canvas {
width: 100%;
height: 100%;
overflow: hidden;
}
#container>img {
max-width: 100%;
max-height: 100%;
}
/* Waffle title bar */
.detail-row {
display: none;
background-color: rgba(255, 255, 255, 0.5);
flex-direction: row;
justify-content: space-between;
padding: 5px;
padding-left: 10px;
padding-right: 10px;
height: 30px;
border: 1px solid rgba(127, 127, 127, 0.19);
border-bottom: none;
opacity: 0.8;
transition: opacity 1s cubic-bezier(0.23, 1, 0.32, 1);
}
body:hover .detail-row {
opacity: 1;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.15);
transition: opacity 1s cubic-bezier(0.23, 1, 0.32, 1);
}
.detail-row button {
border: none;
padding-left: 4px;
padding-right: 0px;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(255, 255, 255, 0);
}
.detail-row button:hover {
cursor: pointer;
}
.detail-row button:hover img {
opacity: 1;
}
.icons-share,
.space-link {
display: flex;
flex-direction: row;
}
.space-link {
align-items: flex-end;
text-decoration: none;
max-width: calc(100% - 25px);
}
.icons-share button {
opacity: 0;
transition: opacity 1s cubic-bezier(0.23, 1, 0.32, 1);
}
body:hover .icons-share button {
opacity: 1;
transition: opacity 1s cubic-bezier(0.23, 1, 0.32, 1);
}
.detail-row img {
max-height: 30px;
opacity: 0.5;
}
.waffle-image,
.profile-picture-container {
display: flex;
align-items: center;
}
.waffle-image {
margin-left: 8px;
}
.waffle-image img,
.profile-picture-container img {
max-height: 22px;
opacity: 1;
}
.profile-picture-container img {
border-radius: 3px;
}
.space-link img {
height: 8px;
margin-bottom: 3px;
padding-left: 5px;
}
.user-row {
display: flex;
align-items: center;
}
.user-row {
max-width: calc(100% - 100px);
white-space: nowrap;
color: black;
text-decoration: none;
}
.user-row:hover {
cursor: pointer;
text-decoration: underline;
}
.user-row p {
margin: 0px;
overflow: hidden;
text-overflow: ellipsis;
color: black;
text-decoration: none;
}
#ShareButton img {
margin-bottom: -1px;
}
.user-row .profile-picture {
height: 100%;
opacity: 1;
margin-right: 10px;
}
/* Share modal styles */
.share-modal {
display: none;
position: absolute;
left: 0px;
top: 0px;
width: 100vw;
height: 100vh;
z-index: 1;
justify-content: center;
align-items: center;
}
.share-modal-box {
background-color: rgba(255, 255, 255, 0.85);
max-width: 400px;
padding: 25px 25px 0 25px;
width: 100%;
position: relative;
border-radius: 5px;
}
.titled-area {
margin-bottom: 25px;
}
.share-modal-box p {
margin-top: 0px;
margin-bottom: 10px;
}
.share-modal-box input {
border: 1px solid #E0E0E0;
padding: 10px;
background-color: transparent;
border-radius: 3px;
}
.flex-row {
display: flex;
}
.btn-small {
font-family: Roboto;
font-style: normal;
font-weight: 500;
font-size: 11.5733px;
line-height: 13px;
padding: 8px;
letter-spacing: 0.3px;
color: #474747;
}
.copy-row input {
flex-grow: 1;
min-width: 0;
}
.btn-small:hover {
cursor: pointer;
color: #3418DE;
font-weight: 700;
}
.btn-small:focus {
outline: none;
}
.share-row div {
margin-right: 10px;
}
.close-btn {
position: absolute;
right: 0;
top: 0;
cursor: pointer;
padding: 10px;
opacity: 0.7;
}
.close-btn:hover {
opacity: 1;
}
.no-btn-default {
background-color: transparent;
border: none;
cursor: pointer;
}
.no-btn-default:focus {
outline: none;
}
.share-icon {
padding: 1px 6px 1px 6px;
}
@media screen and (max-width: 250px) {
.space-link,
#Twitter,
#Embed {
display: none;
}
.share-modal-box {
width: calc(100vw - 50px);
}
}
</style>
</head>
<body>
<div id="error">
<h1>Sorry we can't find that cell.</h1>
</div>
<div class="share-modal" id="ShareModal">
<div class="share-modal-box">
<button id="ModalClose" class="close-btn no-btn-default">
<img src="/images/3ad59f4eb58ab7a4c3daf3fbe7a14646-close.svg" />
</button>
<div class="titled-area">
<p>Share</p>
<div class="flex-row share-row">
<button class="share-icon no-btn-default" id="Facebook" title="Share on Facebook">
<svg viewBox="0 0 64 64" width="32" height="32" class="social-icon social-icon--facebook ">
<g>
<circle cx="32" cy="32" r="31" fill="#3b5998"></circle>
</g>
<g>
<path
d="M34.1,47V33.3h4.6l0.7-5.3h-5.3v-3.4c0-1.5,0.4-2.6,2.6-2.6l2.8,0v-4.8c-0.5-0.1-2.2-0.2-4.1-0.2 c-4.1,0-6.9,2.5-6.9,7V28H24v5.3h4.6V47H34.1z"
fill="white"></path>
</g>
</svg>
</button>
<button class="share-icon no-btn-default" id="LinkedIn" title="Share on LinkedIn">
<svg viewBox="0 0 64 64" width="32" height="32" class="social-icon social-icon--linkedin ">
<g>
<circle cx="32" cy="32" r="31" fill="#007fb1"></circle>
</g>
<g>
<path
d="M20.4,44h5.4V26.6h-5.4V44z M23.1,18c-1.7,0-3.1,1.4-3.1,3.1c0,1.7,1.4,3.1,3.1,3.1 c1.7,0,3.1-1.4,3.1-3.1C26.2,19.4,24.8,18,23.1,18z M39.5,26.2c-2.6,0-4.4,1.4-5.1,2.8h-0.1v-2.4h-5.2V44h5.4v-8.6 c0-2.3,0.4-4.5,3.2-4.5c2.8,0,2.8,2.6,2.8,4.6V44H46v-9.5C46,29.8,45,26.2,39.5,26.2z"
fill="white"></path>
</g>
</svg>
</button>
<button class="share-icon no-btn-default" id="Twitter" title="Share on Twitter">
<svg viewBox="0 0 64 64" width="32" height="32" class="social-icon social-icon--twitter ">
<g>
<circle cx="32" cy="32" r="31" fill="#00aced"></circle>
</g>
<g>
<path
d="M48,22.1c-1.2,0.5-2.4,0.9-3.8,1c1.4-0.8,2.4-2.1,2.9-3.6c-1.3,0.8-2.7,1.3-4.2,1.6 C41.7,19.8,40,19,38.2,19c-3.6,0-6.6,2.9-6.6,6.6c0,0.5,0.1,1,0.2,1.5c-5.5-0.3-10.3-2.9-13.5-6.9c-0.6,1-0.9,2.1-0.9,3.3 c0,2.3,1.2,4.3,2.9,5.5c-1.1,0-2.1-0.3-3-0.8c0,0,0,0.1,0,0.1c0,3.2,2.3,5.8,5.3,6.4c-0.6,0.1-1.1,0.2-1.7,0.2c-0.4,0-0.8,0-1.2-0.1 c0.8,2.6,3.3,4.5,6.1,4.6c-2.2,1.8-5.1,2.8-8.2,2.8c-0.5,0-1.1,0-1.6-0.1c2.9,1.9,6.4,2.9,10.1,2.9c12.1,0,18.7-10,18.7-18.7 c0-0.3,0-0.6,0-0.8C46,24.5,47.1,23.4,48,22.1z"
fill="white"></path>
</g>
</svg>
</button>
<a class="share-icon no-btn-default" id="Embed" target="_blank" title="Embed on your website">
<img src="/images/d96b6ca2acb107d9544382e322fe01ca-embed-icon.svg" />
</a>
<a class="share-icon no-btn-default" id="Weblink" target="_blank" title="More">
<img src="/images/6a4b14e1919dcd0a02cea3333399e445-waffle-link-icon.svg" />
</a>
</div>
</div>
<div class="titled-area">
<p>Link</p>
<div class="copy-row flex-row">
<input type="text" id="LinkText" />
<button class="copy-btn btn-small no-btn-default" id="CopyLinkText">
Copy
</button>
</div>
</div>
</div>
</div>
<div class="detail-row" id="WaffleBar">
<div class="user-row">
<a class="profile-picture-container" id="ProfilePictureLink" target="_blank">
<img class="profile-picture" id="ProfilePicture" src="/images/4f296c47ba4e8be2167e74a1178af504-bcppsmile.png" />
</a>
<a class="space-link" id="SpaceLink" target="_blank">
<!-- <img class="profile-image" src="../images/waffle.svg" /> -->
<p id="SpaceName"></p>
<img src="/images/62dbabc91cf177f7a31c0db4ecb22dfc-openInNewTab.svg" alt="open in new tab" />
</a>
</div>
<div class="icons-share">
<button id="ShareButton" class="share-button" title="Share this chart">
<img src="/images/ff28d5c1303918675b5e290828015bbd-shareicon.svg" alt="share" />
</button>
<div class="waffle-image">
<a href="https://bigcrunch.io" target="_blank"
title="Make your own chart at the Big Crunch (bigcrunch.io)">
<img src="/images/f252d3ab7c22833c54523f2d0f85beac-waffle.svg" alt="The Big Crunch" />
</a>
</div>
</div>
</div>
<div class="container-center">
<div id="container"></div>
</div>
<script type="text/javascript" src="/tbc_odo.js"></script></body>
</html>