@gobistories/gobi-web-integration
Version:
This library will let you put your Gobi stories on your site.
108 lines (94 loc) • 3.24 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, maximum-scale=1">
<meta content="Gobi Stories" property="og:title" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://gobistories.com">
<meta
content="Help your visitors make better choices. Easily share more video on your page with our Story tools. Upload short videos to our platform and publish stories on your page within minutes."
name="description" />
<meta
content="Help your visitors make better choices. Easily share more video on your page with our Story tools. Upload short videos to our platform and publish stories on your page within minutes."
property="og:description" />
<meta content="https://res.cloudinary.com/gobi-static/image/upload/v1649667490/shared/gobi-share-preview.png"
property="og:image" />
<link href="https://res.cloudinary.com/gobi-static/image/upload/v1649667629/shared/favicon.png" rel="shortcut icon" />
<link href="https://res.cloudinary.com/gobi-static/image/upload/v1649667629/shared/touchicon.png"
rel="apple-touch-icon" />
<meta content="Gobi Stories" property="twitter:title" />
<meta
content="Help your visitors make better choices. Easily share more video on your page with our Story tools. Upload short videos to our platform and publish stories on your page within minutes."
property="twitter:description" />
<meta content="https://res.cloudinary.com/gobi-static/image/upload/v1649667490/shared/gobi-share-preview.png"
property="twitter:image" />
<meta content="summary_large_image" name="twitter:card" />
<title>Gobi Stories</title>
<style>
html,
body {
background: black;
width: 100%;
height: 60%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
width: 120px;
}
form {
flex-grow: 1;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.inset {
display: flex;
align-items: stretch;
height: 48px;
width: 360px;
}
input,
button {
font-style: normal;
font-weight: normal;
font-size: 20px;
line-height: 27px;
display: flex;
align-items: center;
}
input {
background: white;
border: 2px solid #0093FF;
box-shadow: 0px 5px 20px 5px rgba(0, 0, 0, 0.05);
border-radius: 10px;
color: #011C39;
padding: 8px;
}
button {
margin-left: 8px;
background: #0093FF;
border-radius: 10px;
color: white;
font-weight: bold;
border-width: 0;
}
</style>
<script type="text/javascript" src="/dist/run-config.js"></script>
<script type="text/javascript" src="index.js?v=d85e77"></script></head>
<body>
<a class="logo" href="https://www.gobistories.com">
<img src="/gobi-logo.svg" loading="lazy" alt="Gobi" />
</a>
<form action="/watch" method="GET">
<div class="inset">
<input type="text" name="storyId" placeholder="Enter a viewkey..." />
<button type="submit">Watch</button>
</div>
</form>
</body>
</html>