Resolves #5

2025-06-27 10:17:41 -07:00 · 2023-03-23 00:43:02 +01:00
parent 01f9530645
commit 88c0d34409
5 changed files with 276 additions and 27 deletions
--- a/app/resources/js/app.js
+++ b/app/resources/js/app.js
@ -229,10 +229,29 @@ document.addEventListener('DOMContentLoaded', function(){
    window.hljs.highlightAll();

    window.onscroll = function() {
-        if ((document.body.scrollTop > document.getElementsByClassName('navbar')[0].offsetHeight + 100) || (document.documentElement.scrollTop > document.getElementsByClassName('navbar')[0].offsetHeight + 100)) {
+        if ((document.body.scrollTop > document.getElementsByClassName('navbar')[0].offsetHeight + 10) || (document.documentElement.scrollTop > document.getElementsByClassName('navbar')[0].offsetHeight + 10)) {
            document.getElementsByClassName('navbar')[0].classList.add('navbar-background-show');
        } else {
            document.getElementsByClassName('navbar')[0].classList.remove('navbar-background-show');
        }
    };
+
+    const obsoptions = {
+        root: null,
+        rootMargin: '0px',
+        threshold: 0.7
+    };
+
+    const obscallback = function(entries, observer) {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                entry.target.classList.replace('fade-out', 'fade-in');
+            }
+        });
+    };
+
+    const observer = new IntersectionObserver(obscallback, obsoptions);
+
+    let fadeElems = document.querySelectorAll('.fade');
+    fadeElems.forEach(elem => observer.observe(elem));
 });
--- a/app/resources/sass/app.scss
+++ b/app/resources/sass/app.scss
@ -18,6 +18,10 @@ body {
    transition: .3s ease-in-out;
 }

+.navbar-item-brand img {
+    border-radius: 50%;
+}
+
 .navbar-background-show {
    background-color: rgb(76, 76, 120);
 }
@ -67,6 +71,9 @@ a.navbar-burger:hover {
    @media screen and (max-width: 768px) {
        height: 550px;
    }
+    @media screen and (max-width: 441px) {
+        height: 685px;
+    }
    background-color: rgb(41, 52, 62);
 }

@ -197,6 +204,27 @@ a.navbar-burger:hover {
    padding: 15px;
 }

+.is-content {
+    color: rgb(200, 200, 200);
+    padding-bottom: 50px;
+}
+
+.is-content pre {
+    padding: unset;
+    margin-top: -15px;
+    margin-bottom: -61px;
+    background-color: unset;
+}
+
+.is-content code {
+    border-radius: 12px;
+    box-shadow: 0 4px 2px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.19);
+}
+
+.is-highlight {
+    font-size: 1.5em;
+}
+
 tbody {
    color: rgb(150, 150, 150);
 }
@ -342,3 +370,88 @@ tbody strong {
        display: none;
    }
 }
+
+.fade {
+    transition: opacity 0.65s ease-in;
+}
+
+.fade-in {
+    opacity: 1;
+}
+
+.fade-out {
+    opacity: 0;
+}
+
+.widget-types {
+    text-align: center;
+}
+
+.widget-type {
+    position: relative;
+    display: inline-block;
+    width: 150px;
+    height: 150px;
+    margin-left: 5px;
+    margin-right: 5px;
+    margin-bottom: 15px;
+    padding-top: 59px;
+    padding-bottom: 50px;
+    background-color: rgb(50, 51, 76);
+    border-radius: 12px;
+    border-left: 3px solid rgb(74, 123, 163);
+    box-shadow: 0 4px 2px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.19);
+    font-size: 1.2em;
+    text-align: center;
+}
+
+.is-centered {
+    text-align: center;
+}
+
+.is-sidepadding {
+    padding-left: 20px;
+    padding-right: 20px;
+}
+
+.padding-top-cdn {
+    padding-top: 48px;
+}
+
+.padding-top-npm {
+    padding-top: 45px;
+}
+
+.button-get-started {
+    margin-top: 50px;
+    margin-bottom: 50px;
+}
+
+.button-get-started a {
+    display: inline-block;
+    width: 305px;
+    height: 65px;
+    background-color: rgb(50, 115, 220);
+    color: rgb(250, 250, 250);
+    border-radius: 5px;
+    padding-top: 8px;
+    font-size: 2.0em;
+}
+
+.button-get-started a:hover {
+    background-color: rgb(63, 123, 220);
+    color: rgb(250, 250, 250);
+    text-decoration: none;
+}
+
+.is-widescreen {
+    @media screen and (max-width: 769px) {
+        display: none !important;
+    }
+}
+
+.is-smallscreen {
+    @media screen and (min-width: 768px) {
+        display: none !important;
+    }
+}
--- a/app/views/header.php
+++ b/app/views/header.php
@ -16,7 +16,7 @@
                        </div>

                        <div class="header-buttons">
-                            <span><a href="#readmore" class="button is-info is-outlined">Read More</a></span>
+                            <span><a href="#readmore" class="button is-info is-outlined" onclick="document.querySelector('[name=readmore]').scrollIntoView({behavior: 'smooth'}); return false;">Read More</a></span>
                            <span><a href="{{ url('/documentation') }}" class="button is-primary is-outlined">Documentation</a></span>
                        </div>
                    </div>
--- a/app/views/index.php
+++ b/app/views/index.php
@ -2,32 +2,149 @@
 	<a name="readmore"></a><br/><br/>
 </div>

-<div class="columns">
+<div class="columns is-content">
 	<div class="column is-half">
-		Lorem Ipsum Dolor Sit Amet.
-		Lorem Ipsum Dolor Sit Amet.
-		Lorem Ipsum Dolor Sit Amet.
-		Lorem Ipsum Dolor Sit Amet.
-		Lorem Ipsum Dolor Sit Amet.
-		Lorem Ipsum Dolor Sit Amet.
-		Lorem Ipsum Dolor Sit Amet.
-		Lorem Ipsum Dolor Sit Amet.
-		Lorem Ipsum Dolor Sit Amet.
-		Lorem Ipsum Dolor Sit Amet.
-		Lorem Ipsum Dolor Sit Amet.
+		<div class="is-highlight is-sidepadding fade fade-out">
+			Create responsive, localizable and adjustable widgets for various Steam entities
+			very easily with only few code.
+		</div>
 	</div>

 	<div class="column is-half">
-		Lorem Ipsum Dolor Sit Amet.
-		Lorem Ipsum Dolor Sit Amet.
-		Lorem Ipsum Dolor Sit Amet.
-		Lorem Ipsum Dolor Sit Amet.
-		Lorem Ipsum Dolor Sit Amet.
-		Lorem Ipsum Dolor Sit Amet.
-		Lorem Ipsum Dolor Sit Amet.
-		Lorem Ipsum Dolor Sit Amet.
-		Lorem Ipsum Dolor Sit Amet.
-		Lorem Ipsum Dolor Sit Amet.
-		Lorem Ipsum Dolor Sit Amet.
+		<div class="is-sidepadding fade fade-out">
+			<pre>
+				<code class="language-html">
+&lt;steam-app appid="{{ env('APP_EXAMPLE_APP') }}"&gt;&lt;/steam-app&gt;
+				</code>
+			</pre>
+		</div>
+	</div>
+</div>
+
+<div class="columns is-content is-widescreen">
+	<div class="column is-half">
+		<div class="is-sidepadding fade fade-out">
+			<pre>
+				<code class="language-js">
+let widget = new SteamApp('#app-widget', {
+	appid: '{{ env('APP_EXAMPLE_APP') }}',
+	//... and more
+});
+				</code>
+			</pre>
+		</div>
+	</div>
+
+	<div class="column is-half">
+		<div class="is-highlight is-sidepadding fade fade-out">
+			Use JavaScript to control your Widgets for various situations.
+			Set various options on initialization and perform operatings
+			on various events later.
+		</div>
+	</div>
+</div>
+
+<div class="columns is-content is-smallscreen">
+	<div class="column is-half">
+		<div class="is-highlight is-sidepadding fade fade-out">
+			Use JavaScript to control your Widgets for various situations.
+			Set various options on initialization and perform operatings
+			on various events later.
+		</div>
+	</div>
+
+	<div class="column is-half">
+		<div class="is-sidepadding fade fade-out">
+			<pre>
+				<code class="language-js">
+let widget = new SteamApp('#app-widget', {
+	appid: '{{ env('APP_EXAMPLE_APP') }}',
+	//... and more
+});
+				</code>
+			</pre>
+		</div>
+	</div>
+</div>
+
+<div><hr/></div>
+
+<div class="content-section">
+	<h3>Use widgets for the following Steam entities</h3>
+
+	<div class="widget-types">
+		<div class="widget-type fade fade-out">
+			Game/App
+		</div>
+
+		<div class="widget-type fade fade-out">
+			Workshop
+		</div>
+
+		<div class="widget-type fade fade-out">
+			Group
+		</div>
+
+		<div class="widget-type fade fade-out">
+			Player
+		</div>
+
+		<div class="widget-type fade fade-out">
+			Gameserver
+		</div>
+	</div>
+</div>
+
+<div><hr/></div>
+
+<div class="columns is-content">
+	<div class="column is-half">
+		<div class="is-highlight is-sidepadding fade fade-out padding-top-cdn">
+			You can use {{ env('APP_NAME') }} via our CDN for quick usages.
+		</div>
+	</div>
+
+	<div class="column is-half">
+		<div class="is-sidepadding fade fade-out is-centered">
+			<i class="fas fa-server fa-10x"></i>
+		</div>
+	</div>
+</div>
+
+@if (env('APP_SHOWNPMUSAGE', false))
+<div class="columns is-content is-widescreen">
+	<div class="column is-half">
+		<div class="is-sidepadding fade fade-out is-centered">
+			<i class="fab fa-npm fa-10x"></i>
+		</div>
+	</div>
+
+	<div class="column is-half">
+		<div class="is-highlight is-sidepadding fade fade-out padding-top-npm">
+			You can also use {{ env('APP_NAME') }} via Node.js Package Manager
+		</div>
+	</div>
+</div>
+
+<div class="columns is-content is-smallscreen">
+	<div class="column is-half">
+		<div class="is-highlight is-sidepadding fade fade-out padding-top-npm">
+			You can also use {{ env('APP_NAME') }} via Node.js Package Manager
+		</div>
+	</div>
+
+	<div class="column is-half">
+		<div class="is-sidepadding fade fade-out is-centered">
+			<i class="fab fa-npm fa-10x"></i>
+		</div>
+	</div>
+</div>
+@endif
+
+<div><hr/></div>
+
+<div class="content-section is-centered">
+	<div class="is-sidepadding button-get-started fade fade-out">
+		<a href="{{ url('/documentation') }}">Get Started!</a>
 	</div>
 </div>
--- a/public/js/app.js
+++ b/public/js/app.js