webengine: add a fencier landing page

Change-Id: I15f94d1473d4fc0a310dda138ad8c8171b15340c
Reviewed-by: Andras Becsi <andras.becsi@theqtcompany.com>

10 files changed, 228 insertions, 24 deletions

diff --git a/basicsuite/webengine/content/common/ddg.png b/basicsuite/webengine/content/common/ddg.png
new file mode 100644
index 0000000..06ebe7c
--- /dev/null
+++ b/basicsuite/webengine/content/common/ddg.png
diff --git a/basicsuite/webengine/content/common/open-sans.css b/basicsuite/webengine/content/common/open-sans.css
new file mode 100644
index 0000000..6342492
--- /dev/null
+++ b/basicsuite/webengine/content/common/open-sans.css
@@ -0,0 +1,131 @@
+/* Open Sans @font-face kit */
+
+/* BEGIN Light */
+@font-face {
+  font-family: 'Open Sans';
+  src: url('opensans/Light/OpenSans-Light.eot');
+  src: url('opensans/Light/OpenSans-Light.eot?#iefix') format('embedded-opentype'),
+       url('opensans/Light/OpenSans-Light.woff') format('woff'),
+       url('opensans/Light/OpenSans-Light.ttf') format('truetype'),
+       url('opensans/Light/OpenSans-Light.svg#OpenSansLight') format('svg');
+  font-weight: 300;
+  font-style: normal;
+}
+/* END Light */
+
+/* BEGIN Light Italic */
+@font-face {
+  font-family: 'Open Sans';
+  src: url('opensans/LightItalic/OpenSans-LightItalic.eot');
+  src: url('opensans/LightItalic/OpenSans-LightItalic.eot?#iefix') format('embedded-opentype'),
+       url('opensans/LightItalic/OpenSans-LightItalic.woff') format('woff'),
+       url('opensans/LightItalic/OpenSans-LightItalic.ttf') format('truetype'),
+       url('opensans/LightItalic/OpenSans-LightItalic.svg#OpenSansLightItalic') format('svg');
+  font-weight: 300;
+  font-style: italic;
+}
+/* END Light Italic */
+
+/* BEGIN Regular */
+@font-face {
+  font-family: 'Open Sans';
+  src: url('opensans/Regular/OpenSans-Regular.eot');
+  src: url('opensans/Regular/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
+       url('opensans/Regular/OpenSans-Regular.woff') format('woff'),
+       url('opensans/Regular/OpenSans-Regular.ttf') format('truetype'),
+       url('opensans/Regular/OpenSans-Regular.svg#OpenSansRegular') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+/* END Regular */
+
+/* BEGIN Italic */
+@font-face {
+  font-family: 'Open Sans';
+  src: url('opensans/Italic/OpenSans-Italic.eot');
+  src: url('opensans/Italic/OpenSans-Italic.eot?#iefix') format('embedded-opentype'),
+       url('opensans/Italic/OpenSans-Italic.woff') format('woff'),
+       url('opensans/Italic/OpenSans-Italic.ttf') format('truetype'),
+       url('opensans/Italic/OpenSans-Italic.svg#OpenSansItalic') format('svg');
+  font-weight: normal;
+  font-style: italic;
+}
+/* END Italic */
+
+/* BEGIN Semibold */
+@font-face {
+  font-family: 'Open Sans';
+  src: url('opensans/Semibold/OpenSans-Semibold.eot');
+  src: url('opensans/Semibold/OpenSans-Semibold.eot?#iefix') format('embedded-opentype'),
+       url('opensans/Semibold/OpenSans-Semibold.woff') format('woff'),
+       url('opensans/Semibold/OpenSans-Semibold.ttf') format('truetype'),
+       url('opensans/Semibold/OpenSans-Semibold.svg#OpenSansSemibold') format('svg');
+  font-weight: 600;
+  font-style: normal;
+}
+/* END Semibold */
+
+/* BEGIN Semibold Italic */
+@font-face {
+  font-family: 'Open Sans';
+  src: url('opensans/SemiboldItalic/OpenSans-SemiboldItalic.eot');
+  src: url('opensans/SemiboldItalic/OpenSans-SemiboldItalic.eot?#iefix') format('embedded-opentype'),
+       url('opensans/SemiboldItalic/OpenSans-SemiboldItalic.woff') format('woff'),
+       url('opensans/SemiboldItalic/OpenSans-SemiboldItalic.ttf') format('truetype'),
+       url('opensans/SemiboldItalic/OpenSans-SemiboldItalic.svg#OpenSansSemiboldItalic') format('svg');
+  font-weight: 600;
+  font-style: italic;
+}
+/* END Semibold Italic */
+
+/* BEGIN Bold */
+@font-face {
+  font-family: 'Open Sans';
+  src: url('opensans/Bold/OpenSans-Bold.eot');
+  src: url('opensans/Bold/OpenSans-Bold.eot?#iefix') format('embedded-opentype'),
+       url('opensans/Bold/OpenSans-Bold.woff') format('woff'),
+       url('opensans/Bold/OpenSans-Bold.ttf') format('truetype'),
+       url('opensans/Bold/OpenSans-Bold.svg#OpenSansBold') format('svg');
+  font-weight: bold;
+  font-style: normal;
+}
+/* END Bold */
+
+/* BEGIN Bold Italic */
+@font-face {
+  font-family: 'Open Sans';
+  src: url('opensans/BoldItalic/OpenSans-BoldItalic.eot');
+  src: url('opensans/BoldItalic/OpenSans-BoldItalic.eot?#iefix') format('embedded-opentype'),
+       url('opensans/BoldItalic/OpenSans-BoldItalic.woff') format('woff'),
+       url('opensans/BoldItalic/OpenSans-BoldItalic.ttf') format('truetype'),
+       url('opensans/BoldItalic/OpenSans-BoldItalic.svg#OpenSansBoldItalic') format('svg');
+  font-weight: bold;
+  font-style: italic;
+}
+/* END Bold Italic */
+
+/* BEGIN Extrabold */
+@font-face {
+  font-family: 'Open Sans';
+  src: url('opensans/ExtraBold/OpenSans-ExtraBold.eot');
+  src: url('opensans/ExtraBold/OpenSans-ExtraBold.eot?#iefix') format('embedded-opentype'),
+       url('opensans/ExtraBold/OpenSans-ExtraBold.woff') format('woff'),
+       url('opensans/ExtraBold/OpenSans-ExtraBold.ttf') format('truetype'),
+       url('opensans/ExtraBold/OpenSans-ExtraBold.svg#OpenSansExtrabold') format('svg');
+  font-weight: 800;
+  font-style: normal;
+}
+/* END Extrabold */
+
+/* BEGIN Extrabold Italic */
+@font-face {
+  font-family: 'Open Sans';
+  src: url('opensans/ExtraBoldItalic/OpenSans-ExtraBoldItalic.eot');
+  src: url('opensans/ExtraBoldItalic/OpenSans-ExtraBoldItalic.eot?#iefix') format('embedded-opentype'),
+       url('opensans/ExtraBoldItalic/OpenSans-ExtraBoldItalic.woff') format('woff'),
+       url('opensans/ExtraBoldItalic/OpenSans-ExtraBoldItalic.ttf') format('truetype'),
+       url('opensans/ExtraBoldItalic/OpenSans-ExtraBoldItalic.svg#OpenSansExtraboldItalic') format('svg');
+  font-weight: 800;
+  font-style: italic;
+}
+/* END Extrabold Italic */
diff --git a/basicsuite/webengine/content/common/opensans/Light/OpenSans-Light.woff b/basicsuite/webengine/content/common/opensans/Light/OpenSans-Light.woff
new file mode 100644
index 0000000..937323d
--- /dev/null
+++ b/basicsuite/webengine/content/common/opensans/Light/OpenSans-Light.woff
diff --git a/basicsuite/webengine/content/common/opensans/Regular/OpenSans-Regular.woff b/basicsuite/webengine/content/common/opensans/Regular/OpenSans-Regular.woff
new file mode 100644
index 0000000..bd0f824
--- /dev/null
+++ b/basicsuite/webengine/content/common/opensans/Regular/OpenSans-Regular.woff
diff --git a/basicsuite/webengine/content/common/osm.png b/basicsuite/webengine/content/common/osm.png
new file mode 100644
index 0000000..d6390aa
--- /dev/null
+++ b/basicsuite/webengine/content/common/osm.png
diff --git a/basicsuite/webengine/content/common/qt-io.png b/basicsuite/webengine/content/common/qt-io.png
new file mode 100644
index 0000000..1596e73
--- /dev/null
+++ b/basicsuite/webengine/content/common/qt-io.png
diff --git a/basicsuite/webengine/content/common/reddit.png b/basicsuite/webengine/content/common/reddit.png
new file mode 100644
index 0000000..5f6aaef
--- /dev/null
+++ b/basicsuite/webengine/content/common/reddit.png
diff --git a/basicsuite/webengine/content/common/style.css b/basicsuite/webengine/content/common/style.css
new file mode 100644
index 0000000..ceecf60
--- /dev/null
+++ b/basicsuite/webengine/content/common/style.css
@@ -0,0 +1,84 @@
+a, a:link, a:active, a:visited {
+    text-decoration:none;
+}
+
+body {
+    margin: 2px;
+    background-color: black;
+    font-family: "Open Sans";
+    font-weight: 300;
+    color: white;
+}
+
+h1 {
+    font-size: 56px;
+    font-weight: 500;
+    margin: 0.7em;
+    text-align: center;
+}
+
+.bookmark {
+    margin-top: 4px;
+    padding-top: 9%;
+    padding-bottom: 2%;
+    -webkit-filter: grayscale(80%);
+    transition: -webkit-filter 0.5s;
+}
+.bookmark:hover {
+/*  -webkit-filter: none;*/
+    -webkit-filter: saturate(130%);
+}
+.bookmark span{
+    font-size: 48px;
+    color: #eee;
+    margin-left: 10%;
+    text-shadow: black 6px 4px 8px ;
+    background: rgba(160, 160, 160,0.3);
+    padding: 5px;
+    border-radius: 0.2em;
+}
+/*
+ * url(attr()) is not really such a good combo. expand by hand
+ */
+#qt-io {
+    background-image: url("qt-io.png");
+    background-size: 100% auto;
+}
+#youtube-tv {
+    background-image: url("youtube-tv.png");
+    background-size: 100% auto;
+}
+#osm {
+    background-image: url("osm.png");
+    background-size: 100% auto;
+}
+#ddg {
+    background-image: url("ddg.png");
+    background-position: 0% 25%;
+    background-size: 100% auto;
+}
+#reddit {
+    background-image: url("reddit.png");
+    background-size: 100% auto;
+}
+/* Flexbox stuff */
+#links-container {
+    display:flex;
+    flex-direction: column;
+}
+#examples-container {
+    display:flex;
+    flex-direction: row;
+}
+.example {
+    flex-grow: 1;
+    transition: flex-grow 0.5s;
+    width: 15%;
+    margin:2px;
+}
+.example:hover {
+    flex-grow: 3;
+}
+.example_image{
+        width: 100%;
+}
diff --git a/basicsuite/webengine/content/common/youtube-tv.png b/basicsuite/webengine/content/common/youtube-tv.png
new file mode 100644
index 0000000..489167e
--- /dev/null
+++ b/basicsuite/webengine/content/common/youtube-tv.png
diff --git a/basicsuite/webengine/content/index.html b/basicsuite/webengine/content/index.html
index 98c6df3..9610cbf 100644
--- a/basicsuite/webengine/content/index.html
+++ b/basicsuite/webengine/content/index.html
@@ -4,34 +4,23 @@
         <meta charset=utf-8 />
         <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
         <title>Qt WebEngine Demo</title>
-        <style>
-        a, a:link, a:active, a:visited {
-            text-decoration:none;
-            font-family: "Helvetica";
-            font-size: 18px;
-            color: rgb(0,0,0)
-        }
-        .bookmark {
-            margin: 28px;
-        }
-        .example {
-            display: inline-block;
-        }
-        .example_image {
-            width: 300px;
-            height: 175px;
-        }
-        </style>
+        <link rel="stylesheet" type="text/css" href="common/open-sans.css">
+        <link rel="stylesheet" type="text/css" href="common/style.css">
     </head>
-    <body bgcolor="#AAAAAA">
-        <div style="text-align: center; padding-top: 100px;">
-            <div class="bookmark"><a href="http://www.qt.io">http://www.qt.io</a></div>
-            <div class="bookmark"><a href="http://qt-project.org/doc/qt-5">http://qt-project.org/doc/qt-5</a></div>
-            <div class="bookmark"><a href="http://www.google.com">http://www.google.com</a></div>
+    <body>
+        <div id="links-container">
+            <a href="http://www.qt.io"><div class="bookmark" id="qt-io"><span>The Qt Company</span></div></a>
+            <a href="https://www.youtube.com/tv"><div class="bookmark" id="youtube-tv"><span>YouTube TV</span></div></a>
+            <a href="http://www.openstreetmap.org"><div class="bookmark" id="osm"><span>OpenStreetMap</span></div></a>
+            <a href="http://www.duckduckgo.com"><div class="bookmark" id="ddg"><span>DuckDuckGo</span></div></a>
+            <a href="http://www.reddit.com"><div class="bookmark" id="reddit"><span>Reddit</span></div></a>
+    </div>
+    <h1>Offline demos</h1>
+    <div id="examples-container">
 <!--        <div class="example"><a href="../content/webgl/helloqt.html"><img class="example_image" src="../content/webgl/screenshot.png"></a></div> -->
             <div class="example"><a href="../content/csstetrahedron/index.html"><img class="example_image" src="../content/csstetrahedron/screenshot.png"></a></div>
             <div class="example"><a href="../content/rubiks/index.html"><img class="example_image" src="../content/rubiks/screenshot.png"></a></div>
             <div class="example"><a href="../content/morphingcubes/index.html"><img class="example_image" src="../content/morphingcubes/screenshot.png"></a></div>
-        </div>
+    </div>
     </body>
 </html>