Mirrors/overte
3
0
Fork 0
mirror of https://github.com/overte-org/overte.git synced 2025-08-08 13:18:38 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

marketplaces html

Browse source
This commit is contained in:
James B. Pollack 2016-08-29 17:27:39 -07:00
parent 95c627aa71
commit 2a12f2feae
8 changed files with 80 additions and 94 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

133
scripts/system/html/css/marketplaces.css
View file

@ -5,70 +5,79 @@
// Distributed under the Apache License, Version 2.0. // Distributed under the Apache License, Version 2.0.
// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html // See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
*/ */
body {
background: white;
padding: 0 0 0 0;
}
.marketplaces-container { .marketplaces-container {
width: 100%; color: black;
}
.marketplace-tile {
text-align: center;
float: left;
width: 25%;
margin: 10%;
}
.marketplace-tile-title {
width: 100%;
white-space: nowrap;
font-size: 2em;
margin-bottom: 2%;
}
.marketplace-tile-image-container {
}
.marketplace-tile-image {
height: auto;
max-width: 100%;
}
.marketplace-tile-description {
margin-top: 2%;
font-size: 1.2em;
margin-bottom: 5%;
}
@media only screen and (max-width:768px) {
.marketplace-tile {
text-align: center;
float: left;
width: 100%;
margin: 0 0 0 0%;
}
}
/*.clara-image {
cursor: pointer;
}
*/
.claraHowTo {
background-color: rgba(0,0,0,0.7);
width:94%;
height:auto;
margin-top:6%;
margin-left:3%;
clear: both;
}
.clara-title-slug{
padding-top:20px;
text-align: center
}
.clara-list{
margin:20px 0 20px 7.5%;
}
.clara-list > li{
margin-bottom: 10px;
}
#goToClara{
width: 94%; width: 94%;
margin-left: 3%; margin-left: 3%;
height: 100%;
}
.marketplaces-title {
margin-top: 45px;
margin-bottom: 20px; margin-bottom: 20px;
} }
.marketplaces-intro-text {
margin-bottom: 60px;
}
.marketplace-tile {
width: 100%;
}
.marketplace-tile-first-column {
text-align: center;
float: left;
width: 34%;
}
.marketplace-tile-second-column {
float: left;
width: 66%;
}
.exploreButton {
width: 200px !important;
height: 45px !important;
margin-top: 20px;
margin-bottom: 30px;
}
.tile-divider {
width: 90%;
margin-left: 5%;
display: block;
height: 1px;
border: 0;
border-top: 1px solid lightgrey;
margin: 1em 0;
padding: 0;
margin-bottom: 30px;
}
.marketplace-tile-description {
margin-top: 15px;
margin-bottom: 50px;
}
.marketplace-tile-image {
max-width: 256px;
height: 128px;
-webkit-box-shadow: -1px 4px 16px 0px rgba(0, 0, 0, 0.48);
-moz-box-shadow: -1px 4px 16px 0px rgba(0, 0, 0, 0.48);
box-shadow: -1px 4px 16px 0px rgba(0, 0, 0, 0.48);
}
.marketplace-clara-steps {
padding-left: 15px;
}
.marketplace-clara-steps > li {
margin-top: 5px;
}
@media (max-width:768px) {
.marketplace-tile-first-column {
float: left;
width: 100%;
}
.marketplace-tile-second-column {
float: left;
width: 100%;
}
.exploreButton {
margin-left: 25%;
}
}

BIN
scripts/system/html/img/clara-tile.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 7.9 KiB

BIN
scripts/system/html/img/hifi-marketplace-tile.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 6.7 KiB

BIN
scripts/system/html/img/marketplaceClara.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 6.5 KiB

BIN
scripts/system/html/img/marketplaceHifi.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 9.5 KiB

35
scripts/system/html/js/marketplaces.js
View file

@ -1,35 +1,12 @@
function loaded() { function loaded() {
bindClaraImage(); bindExploreButtons();
bindClaraButton();
} }
function hideList() { function bindExploreButtons() {
$('.marketplace-tile').hide(); $('#exploreClaraMarketplace').on('click', function() {
}
function showList() {
$('.marketplace-tile').show();
}
function showClaraHowTo() {
$('.claraHowTo').show();
}
function hideClaraHowTo() {
$('.claraHowTo').hide();
}
var claraVisible = false;
function bindClaraImage() {
$('.clara-image').on('click', function() {
showClaraHowTo();
// hideList();
})
}
function bindClaraButton() {
$('#goToClara').on('click', function() {
window.location = "http://www.clara.io" window.location = "http://www.clara.io"
}) })
$('#exploreHifiMarketplace').on('click', function() {
window.location = "http://www.highfidelity.com/marketplace"
})
} }

26
scripts/system/html/marketplaces.html
View file

@ -19,9 +19,9 @@
</head> </head>
<body onload='loaded();'> <body onload='loaded();'>
<div class="marketplaces-container"> <div class="marketplaces-container">
<div class="marketplaces-title"> <h2 class="marketplaces-title">
Marketplaces
</div> </h2>
<div class="marketplaces-intro-text"> <div class="marketplaces-intro-text">
<p> <p>
You can bring content into High Fidelity forom anywhere you want. Here are a few places that support direct import of content right now. If you'd like to suggest a Market to include here, <a href="mailto:contact@highfidelity.io">let us know.</a> You can bring content into High Fidelity forom anywhere you want. Here are a few places that support direct import of content right now. If you'd like to suggest a Market to include here, <a href="mailto:contact@highfidelity.io">let us know.</a>
@ -29,29 +29,29 @@
</div> </div>
<div class="marketplace-tile"> <div class="marketplace-tile">
<div class="marketplace-tile-first-column"> <div class="marketplace-tile-first-column">
<img class="marketplace-tile-image" src="img/marketplaceHifi.png"> <img class="marketplace-tile-image" src="img/hifi-marketplace-tile.png">
</div>
<div class="marketplace-tile-second-column"> <div class="marketplace-tile-second-column">
<p class="marketplace-tile-description">This is the default High Fidelity marketplace. Viewing and downloading content from here is fully supported in Interface.</p> <p class="marketplace-tile-description">This is the default High Fidelity marketplace. Viewing and downloading content from here is fully supported in Interface.</p>
<input class="blue" type="button" value="Explore" id="exploreHifiMarketplace"></input> <input class="blue exploreButton" type="button" value="Explore" id="exploreHifiMarketplace"></input>
</div> </div>
<hr> <hr class="tile-divider">
</div> </div>
<div class="marketplace-tile"> <div class="marketplace-tile">
<div class="marketplace-tile-first-column"> <div class="marketplace-tile-first-column">
<img class="marketplace-tile-image" src="img/marketplaceClara.png"> <img class="marketplace-tile-image" src="img/clara-tile.png">
</div>
<div class="marketplace-tile-second-column"> <div class="marketplace-tile-second-column">
<p class="marketplace-tile-description">Clara.io has thousands of models available for importing into High Fidelity. Follow these steps for the best experience:</p> <p class="marketplace-tile-description">Clara.io has thousands of models available for importing into High Fidelity. Follow these steps for the best experience:</p>
<ol> <ol class="marketplace-clara-steps">
<li><a href="http://www.clara.io/signup">Create an account here </a>or log in as an existing user.</li> <li><a href="http://www.clara.io/signup">Create an account here </a>or log in as an existing user.</li>
<li>Choose a model from the list and click Download -> Autodesk FBX.</li> <li>Choose a model from the list and click Download -> Autodesk FBX.</li>
<li>After the file processes, click download.</li> <li>After the file processes, click download.</li>
<li>Add the model to your asset server, then find it from the list and choose Add To World</li> <li>Add the model to your asset server, then find it from the list and choose Add To World.</li>
</ol> </ol>
<input class="blue" type="button" value="Explore" id="exploreClaraMarketplace"></input> <input class="blue exploreButton" type="button" value="Explore" id="exploreClaraMarketplace"></input>
</div> </div>
<hr> <hr class="tile-divider">
</div> </div>
</div> </div>

BIN
scripts/system/html/test.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 147 KiB