aframe-babia-components
Version:
A data visualization set of components for A-Frame.
304 lines (265 loc) • 7.33 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>A-Frame Data visualization Components</title>
<meta name="description" content="A Data visualization components for A-Frame.">
</meta>
<style>
html {
background: #33425B;
color: #FAFAFA;
font-family: monospace;
font-size: 20px;
padding: 10px 20px;
}
h1 {
font-weight: 300;
}
a {
color: #FAFAFA;
display: block;
padding: 15px 0;
background-position: center;
}
img {
max-width: 320px;
}
ul {
display: flex;
list-style: none;
flex-wrap: wrap;
padding: 5px 0 0;
}
ul li {
margin-right: 30px;
padding: 5px 0 30px;
}
ul a {
background-size: cover;
display: block;
padding: 0;
height: 320px;
width: 320px;
}
ul h3,
ul p {
max-width: 320px;
}
</style>
</head>
<body>
<h1> Boats Component Examples</h1>
<h2>Basic Examples</h2>
<ul>
<li>
<a href="boats/"
style="background-image: url(../../tests/screenshots/other_snapshots.js/boats.png)"></a>
<h3>babia-boats</h3>
</li>
<li>
<a href="boats_plan_view/"
style="background-image: url(../../tests/screenshots/other_snapshots.js/boats_plan_view.png)"></a>
<h3>babia-boats (Plan View)</h3>
</li>
<li>
<a href="boats2/"
style="background-image: url(../../tests/screenshots/other_snapshots.js/boats2.png)"></a>
<h3>babia-boats with more quaters</h3>
</li>
<li>
<a href="boats_plan_view2/"
style="background-image: url(../../tests/screenshots/other_snapshots.js/boats_plan_view2.png)"></a>
<h3>babia-boats with more quaters (Plan View)</h3>
</li>
<li>
<a href="boats_treegenerator/"
style="background-image: url(../../tests/screenshots/other_snapshots.js/boats_treegenerator.png)"></a>
<h3>babia-boats with more quaters and treegenerator</h3>
</li>
</ul>
<h2>Boats with Changes Examples</h2>
<ul>
<li>
<a href="boats_new_element/"
style="background-image: url(../../tests/screenshots/other_snapshots.js/boats_new_element.png)"></a>
<h3>Add a new element</h3>
</li>
<li>
<a href="boats_new_quarter/"
style="background-image: url(../../tests/screenshots/other_snapshots.js/boats_new_quarter.png)"></a>
<h3>Add a new quarter</h3>
</li>
<li>
<a href="boats_resize/"
style="background-image: url(../../tests/screenshots/other_snapshots.js/boats_resize.png)"></a>
<h3>Two elements resize</h3>
</li>
<li>
<a href="boats_quarter_resize/"
style="background-image: url(../../tests/screenshots/other_snapshots.js/boats_quarter_resize.png)"></a>
<h3>Add new elements into a quarter (the quarter resizes)</h3>
</li>
<li>
<a href="boats_quarter_resize2/"
style="background-image: url(../../tests/screenshots/other_snapshots.js/boats_quarter_resize2.png)"></a>
<h3>Elements change their height</h3>
</li>
<li>
<a href="boats_temporal/"
style="background-image: url(../../tests/screenshots/other_snapshots.js/boats_temporal.png)"></a>
<h3>All changes</h3>
</li>
</ul>
<h2>With City Examples</h2>
<ul>
<li>
<a href="boats_city_plan_view/"
style="background-image: url(../../tests/screenshots/other_snapshots.js/boats_city_plan_view.png)"></a>
<h3>babia-boats with babia-city (Plan View)</h3>
<p>Perceval Data</p>
</li>
<li>
<a href="boats_city/"
style="background-image: url(../../tests/screenshots/other_snapshots.js/boats_city.png)"></a>
<h3>babia-boats with babia-city data</h3>
<p>Perceval Data</p>
</li>
</ul>
<style>
.gitlab-corner-wrapper {
overflow: hidden;
width: 150px;
height: 150px;
position: absolute ;
top: 0;
right: 0
}
.gitlab-corner {
position: absolute;
top: -30px;
right: -65px;
transform: rotate(45deg);
background: #548;
border: 60px solid #548;
border-bottom: none;
border-top: #548 solid 16px
}
.gitlab-corner svg {
width: 60px;
height: 60px;
margin-bottom: -4px
}
.cls-1 {
fill: #fc6d26
}
.cls-2 {
fill: #e24329
}
.cls-3 {
fill: #fca326
}
.gitlab-corner:hover .cls-1 {
animation: cycle .6s
}
.gitlab-corner:hover .cls-2 {
animation: cycleMid .6s
}
.gitlab-corner:hover .cls-3 {
animation: cycleEnd .6s
}
@keyframes cycle {
100%,
15%,
60% {
fill: #fc6d26
}
30%,
75% {
fill: #e24329
}
45%,
90% {
fill: #fca326
}
}
@keyframes cycleMid {
100%,
15%,
60% {
fill: #e24329
}
30%,
75% {
fill: #fca326
}
45%,
90% {
fill: #fc6d26
}
}
@keyframes cycleEnd {
100%,
15%,
60% {
fill: #fca326
}
30%,
75% {
fill: #fc6d26
}
45%,
90% {
fill: #e24329
}
}
@media (max-width:500px) {
.gitlab-corner:hover .cls-1,
.gitlab-corner:hover .cls-2,
.gitlab-corner:hover .cls-3 {
animation: none
}
.gitlab-corner .cls-1 {
animation: cycle .6s
}
.gitlab-corner .cls-2 {
animation: cycleMid .6s
}
.gitlab-corner .cls-3 {
animation: cycleEnd .6s
}
}
</style>
<div class="gitlab-corner-wrapper"><a href="https://gitlab.com/babiaxr/aframe-babia-components" class="gitlab-corner"
aria-label="View source on GitLab"><svg id="logo_art" data-name="logo art" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 586 559">
<g id="g44">
<path id="path46" class="cls-1"
d="M461.17,301.83l-18.91-58.12L404.84,128.43a6.47,6.47,0,0,0-12.27,0L355.15,243.64H230.82L193.4,128.43a6.46,6.46,0,0,0-12.26,0L143.78,243.64l-18.91,58.19a12.88,12.88,0,0,0,4.66,14.39L293,435,456.44,316.22a12.9,12.9,0,0,0,4.73-14.39" />
</g>
<g id="g48">
<path id="path50" class="cls-2" d="M293,434.91h0l62.16-191.28H230.87L293,434.91Z" />
</g>
<g id="g56">
<path id="path58" class="cls-1" d="M293,434.91,230.82,243.63h-87L293,434.91Z" />
</g>
<g id="g64">
<path id="path66" class="cls-3"
d="M143.75,243.69h0l-18.91,58.12a12.88,12.88,0,0,0,4.66,14.39L293,435,143.75,243.69Z" />
</g>
<g id="g72">
<path id="path74" class="cls-2" d="M143.78,243.69h87.11L193.4,128.49a6.47,6.47,0,0,0-12.27,0l-37.35,115.2Z" />
</g>
<g id="g76">
<path id="path78" class="cls-1" d="M293,434.91l62.16-191.28H442.3L293,434.91Z" />
</g>
<g id="g80">
<path id="path82" class="cls-3"
d="M442.24,243.69h0l18.91,58.12a12.85,12.85,0,0,1-4.66,14.39L293,434.91l149.2-191.22Z" />
</g>
<g id="g84">
<path id="path86" class="cls-2" d="M442.28,243.69h-87.1l37.42-115.2a6.46,6.46,0,0,1,12.26,0l37.42,115.2Z" />
</g>
</svg></a></div>
</body>
</html>