mirror of
https://github.com/overte-org/overte.git
synced 2025-04-14 07:47:30 +02:00
marketplaces html
This commit is contained in:
James B. Pollack
parent
95c627aa71
commit
2a12f2feae
8 changed files with 80 additions and 94 deletions
|
|
@ -5,70 +5,79 @@
|
|||
// Distributed under the Apache License, Version 2.0.
|
||||
// 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 {
|
||||
width: 100%;
|
||||
color: black;
|
||||
width: 94%;
|
||||
margin-left: 3%;
|
||||
height: 100%;
|
||||
}
|
||||
.marketplaces-title {
|
||||
margin-top: 45px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.marketplaces-intro-text {
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
.marketplace-tile {
|
||||
width: 100%;
|
||||
}
|
||||
.marketplace-tile-first-column {
|
||||
text-align: center;
|
||||
float: left;
|
||||
width: 25%;
|
||||
margin: 10%;
|
||||
width: 34%;
|
||||
}
|
||||
.marketplace-tile-title {
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
font-size: 2em;
|
||||
margin-bottom: 2%;
|
||||
.marketplace-tile-second-column {
|
||||
float: left;
|
||||
width: 66%;
|
||||
}
|
||||
.marketplace-tile-image-container {
|
||||
.exploreButton {
|
||||
width: 200px !important;
|
||||
height: 45px !important;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.marketplace-tile-image {
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
.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: 2%;
|
||||
font-size: 1.2em;
|
||||
margin-bottom: 5%;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
@media only screen and (max-width:768px) {
|
||||
.marketplace-tile {
|
||||
text-align: center;
|
||||
.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%;
|
||||
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%;
|
||||
margin-left:3%;
|
||||
margin-bottom:20px;
|
||||
.marketplace-tile-second-column {
|
||||
float: left;
|
||||
width: 100%;
|
||||
}
|
||||
.exploreButton {
|
||||
margin-left: 25%;
|
||||
}
|
||||
}
|
||||
BIN
scripts/system/html/img/clara-tile.png
Normal file
BIN
scripts/system/html/img/clara-tile.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.9 KiB |
BIN
scripts/system/html/img/hifi-marketplace-tile.png
Normal file
BIN
scripts/system/html/img/hifi-marketplace-tile.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.5 KiB |
|
|
@ -1,35 +1,12 @@
|
|||
function loaded() {
|
||||
bindClaraImage();
|
||||
bindClaraButton();
|
||||
bindExploreButtons();
|
||||
}
|
||||
|
||||
function hideList() {
|
||||
$('.marketplace-tile').hide();
|
||||
}
|
||||
|
||||
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() {
|
||||
function bindExploreButtons() {
|
||||
$('#exploreClaraMarketplace').on('click', function() {
|
||||
window.location = "http://www.clara.io"
|
||||
})
|
||||
$('#exploreHifiMarketplace').on('click', function() {
|
||||
window.location = "http://www.highfidelity.com/marketplace"
|
||||
})
|
||||
}
|
||||
|
|
@ -19,9 +19,9 @@
|
|||
</head>
|
||||
<body onload='loaded();'>
|
||||
<div class="marketplaces-container">
|
||||
<div class="marketplaces-title">
|
||||
|
||||
</div>
|
||||
<h2 class="marketplaces-title">
|
||||
Marketplaces
|
||||
</h2>
|
||||
<div class="marketplaces-intro-text">
|
||||
<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>
|
||||
|
|
@ -29,29 +29,29 @@
|
|||
</div>
|
||||
<div class="marketplace-tile">
|
||||
<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">
|
||||
<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>
|
||||
<hr>
|
||||
<hr class="tile-divider">
|
||||
</div>
|
||||
<div class="marketplace-tile">
|
||||
<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">
|
||||
<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>Choose a model from the list and click Download -> Autodesk FBX.</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>
|
||||
<input class="blue" type="button" value="Explore" id="exploreClaraMarketplace"></input>
|
||||
<input class="blue exploreButton" type="button" value="Explore" id="exploreClaraMarketplace"></input>
|
||||
</div>
|
||||
<hr>
|
||||
<hr class="tile-divider">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 147 KiB |
Loading…
Reference in a new issue