Skip to content

Instantly share code, notes, and snippets.

@carlvlewis

carlvlewis/index.html

Created January 20, 2019 02:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save carlvlewis/1e2587828f8f67e5e395b690591b20cb to your computer and use it in GitHub Desktop.
Save carlvlewis/1e2587828f8f67e5e395b690591b20cb to your computer and use it in GitHub Desktop.
Download ZIP
Zircle-ui drink recipe
Raw
index.html
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/zircle"></script>
<link href="https://unpkg.com/zircle/dist/zircle.css" rel="stylesheet">
<div id="app">
<z-canvas :views='$options.components' style="background-color: #4A90E2">
</z-canvas>
<footer>C. 2018 Matt Bracco</footer>
</div>
Raw
script.js
const one = {
template:`<z-view style="background-color: white">
<img slot="image" src="https://cl.ly/c8356ef60964" width="100%" height="100%" />
<section slot="extension">
<z-spot
button
:angle="-5"
size="large">
<h1>"Over the Wall"</h1>
</z-spot>
<z-spot
:angle="180"
size="medium"
to-view="mix">
Mixing
</z-spot>
<z-spot
:angle="45"
size="medium"
to-view="recipe"
label="Ingredients">
5
</z-spot>
</section>
</z-view>`
}
const recipe = {
template:
`<z-view>
<h3>1:2:4 Ratio: Lime Juice, Pomegranate Juice, and Tequila</h3>
<h3>1 pt. Seltzer or soda water</h3>
<h3>1 pt. Ginger beer</h3>
</z-view>`
}
const mix = {
name: 'mix',
template:`<z-view>
Mix lime, pomegranate and tequila portions in tall cocktail glass filled with ice. <br>Add 1 part seltzer and 1 part ginger beer.</br>
<br> Enjoy!</br>
</z-view>`
}
new Vue({
el: '#app',
components: {
one,
mix,
recipe
},
mounted () {
this.$zircle.setView('one')
}
})
Raw
style.css
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment