diff --git a/scripts/system/html/css/marketplaces.css b/scripts/system/html/css/marketplaces.css index c38b4185f4..9f86c5fb06 100644 --- a/scripts/system/html/css/marketplaces.css +++ b/scripts/system/html/css/marketplaces.css @@ -5,21 +5,70 @@ // Distributed under the Apache License, Version 2.0. // See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html */ - .marketplaces-container { width: 100%; } .marketplace-tile { + text-align: center; float: left; - width: 50%; + width: 25%; + margin: 10%; } .marketplace-tile-title { width: 100%; - height: 10%; + 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%; + margin-left:3%; + margin-bottom:20px; } \ No newline at end of file diff --git a/scripts/system/html/img/marketplaceClara.png b/scripts/system/html/img/marketplaceClara.png new file mode 100644 index 0000000000..e696237023 Binary files /dev/null and b/scripts/system/html/img/marketplaceClara.png differ diff --git a/scripts/system/html/img/marketplaceHifi.png b/scripts/system/html/img/marketplaceHifi.png new file mode 100644 index 0000000000..f4bc31df6a Binary files /dev/null and b/scripts/system/html/img/marketplaceHifi.png differ diff --git a/scripts/system/html/js/marketplaces.js b/scripts/system/html/js/marketplaces.js index 06cc05c6b9..f902e3e4fc 100644 --- a/scripts/system/html/js/marketplaces.js +++ b/scripts/system/html/js/marketplaces.js @@ -1,3 +1,35 @@ -function loaded(){ - +function loaded() { + bindClaraImage(); + bindClaraButton(); +} + +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() { + window.location = "http://www.clara.io" + }) } \ No newline at end of file diff --git a/scripts/system/html/marketplaces.html b/scripts/system/html/marketplaces.html index 27c6d34876..aa8ca2fd98 100644 --- a/scripts/system/html/marketplaces.html +++ b/scripts/system/html/marketplaces.html @@ -19,27 +19,44 @@
+ 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, let us know. +
This is the default High Fidelity marketplace. Viewing and downloading content from here is fully supported in Interface.
+Clara.io has thousands of models available for importing into High Fidelity. Follow these steps for the best experience:
+