diff options
| -rw-r--r-- | models/User.js | 0 | ||||
| -rw-r--r-- | public/css/style.css | 11 | ||||
| -rw-r--r-- | public/img/carousel/unicity.png | bin | 0 -> 187117 bytes | |||
| -rw-r--r-- | public/js/yt-list-videos.js | 44 | ||||
| -rw-r--r-- | views/404.ejs | 3 | ||||
| -rw-r--r-- | views/about.ejs | 6 | ||||
| -rw-r--r-- | views/blog.ejs | 5 | ||||
| -rw-r--r-- | views/includes/footer.ejs | 12 | ||||
| -rw-r--r-- | views/includes/scripts.ejs | 9 | ||||
| -rw-r--r-- | views/index.ejs | 33 | ||||
| -rw-r--r-- | views/projects.ejs | 34 |
11 files changed, 126 insertions, 31 deletions
diff --git a/models/User.js b/models/User.js deleted file mode 100644 index e69de29..0000000 --- a/models/User.js +++ /dev/null diff --git a/public/css/style.css b/public/css/style.css index 1067840..386343b 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -2,5 +2,14 @@ body { font-family: Play, sans-serif; background-color: #212121; color: #ffffff; - margin-bottom: 100px; +} + +ul.yt { + margin: 0 auto; + text-align: center; +} + +li.yt-vid-list { + display: inline-block; + vertical-align: top; }
\ No newline at end of file diff --git a/public/img/carousel/unicity.png b/public/img/carousel/unicity.png Binary files differnew file mode 100644 index 0000000..de29b53 --- /dev/null +++ b/public/img/carousel/unicity.png diff --git a/public/js/yt-list-videos.js b/public/js/yt-list-videos.js new file mode 100644 index 0000000..42deb0c --- /dev/null +++ b/public/js/yt-list-videos.js @@ -0,0 +1,44 @@ + + +let channelID = 'UCNRn4YDPCCWSEl3CT7eWorA'; +let apiKey = ""; // Note to hide this +let vidHeight = 400; +let vidWidth = 500; +let vidMaxResult = 5; // Maximum can be 50 + +$(document).ready(function () { + $.get("https://www.googleapis.com/youtube/v3/channels", { + part: 'contentDetails', + id: channelID, + key: apiKey //Browser API Key + }, + function (data) { + $.each(data.items, function (i, item) { + console.log(item); // See in Browser Console + pid = item.contentDetails.relatedPlaylists.uploads; + getVideos(pid); + }) + } + ); + function getVideos(pid) + { + $.get("https://www.googleapis.com/youtube/v3/playlistItems", { + part: 'snippet', + maxResults: vidMaxResult, + playlistId: pid, + key: apiKey //Browser API Key + }, + function (data) { + let outputVideo; + $.each(data.items, function (i, item) { + console.log(item); // See in Browser Console + vidId = item.snippet.resourceId.videoId; + outputVideo = '<li class="yt-vid-list"><iframe height="' + vidHeight + '" width="' + vidWidth + '" src=\"//www.youtube.com/embed/' + vidId + '"> </iframe></li>'; + + //Append to result list + $('#yt-results').append(outputVideo); + }) + } + ); + } +});
\ No newline at end of file diff --git a/views/404.ejs b/views/404.ejs index 6265009..43c308d 100644 --- a/views/404.ejs +++ b/views/404.ejs @@ -1,4 +1,5 @@ <!DOCTYPE html> +<!-- Alee Productions Website: Made by Alee and licensed with GPL-3.0 --> <html> <head> <% include ./includes/header %> @@ -10,6 +11,6 @@ <h2>Oops, seems like that page isn't found!</h2> <h3>Return to <a href="/">homepage</a>?</h3> </center> - <% include ./includes/footer %> + <% include ./includes/scripts %> </body> </html>
\ No newline at end of file diff --git a/views/about.ejs b/views/about.ejs index f00c69f..2f28498 100644 --- a/views/about.ejs +++ b/views/about.ejs @@ -1,4 +1,5 @@ <!DOCTYPE html> +<!-- Alee Productions Website: Made by Alee and licensed with GPL-3.0 --> <html> <head> @@ -27,6 +28,9 @@ <li>A: Reason why I want to create this is because I want to make my own things as a passion also sharing it to the public and to make it as a career.</li> + <br> + <li>Q: Why did you call this Alee Productions?</li> + <li>A: As you know my name is Andrew Lee and my name starts with an "A" and combine it with "Lee" you get "Alee". :)</li> </h4> </ul> <h1>Team</h1> @@ -45,6 +49,8 @@ </p> </div> </div> + </div> + <% include ./includes/scripts %> <% include ./includes/footer %> </body> diff --git a/views/blog.ejs b/views/blog.ejs index ee21e43..4572c3e 100644 --- a/views/blog.ejs +++ b/views/blog.ejs @@ -1,4 +1,5 @@ <!DOCTYPE html> +<!-- Alee Productions Website: Made by Alee and licensed with GPL-3.0 --> <html> <head> @@ -12,8 +13,8 @@ <p class="lead">Where we post updates on products, this website and etc.</p> </div> <center><h1>Notice: We are currently working on this page</h1></center> - -<% include ./includes/footer %> + <% include ./includes/scripts %> + <% include ./includes/footer %> </body> </html>
\ No newline at end of file diff --git a/views/includes/footer.ejs b/views/includes/footer.ejs index 600ae87..ac519d1 100644 --- a/views/includes/footer.ejs +++ b/views/includes/footer.ejs @@ -1,13 +1,3 @@ -<!-- JQuery --> -<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> -<!-- Bootstrap tooltips --> -<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script> -<!-- Bootstrap core JavaScript --> -<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"> -</script> -<!-- MDB core JavaScript --> -<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.7/js/mdb.min.js"></script> - -<footer class="page-footer fixed-bottom font-small green"> +<footer class="page-footer mt-5 font-small green"> <div class="footer-copyright text-center py-3">© Copyright 2016-2019, Alee Productions. Powered by ExpressJS, EJS and Material Design Bootstrap.</div> </footer>
\ No newline at end of file diff --git a/views/includes/scripts.ejs b/views/includes/scripts.ejs new file mode 100644 index 0000000..30fe254 --- /dev/null +++ b/views/includes/scripts.ejs @@ -0,0 +1,9 @@ +<!-- JQuery --> +<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> +<!-- Bootstrap tooltips --> +<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script> +<!-- Bootstrap core JavaScript --> +<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"> +</script> +<!-- MDB core JavaScript --> +<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.7/js/mdb.min.js"></script>
\ No newline at end of file diff --git a/views/index.ejs b/views/index.ejs index d7a9afe..39d4fb3 100644 --- a/views/index.ejs +++ b/views/index.ejs @@ -1,4 +1,5 @@ <!DOCTYPE html> +<!-- Alee Productions Website: Made by Alee and licensed with GPL-3.0 --> <html> <head> @@ -17,26 +18,28 @@ </div> <div class="container"> + <center><h2>Our Products</h2></center> <!--Carousel Wrapper--> - <div id="carousel-example-2" class="carousel slide carousel-fade" data-ride="carousel"> + <div id="carousel-product" class="carousel slide carousel-slide" data-ride="carousel"> <!--Indicators--> <ol class="carousel-indicators"> - <li data-target="#carousel-example-2" data-slide-to="0" class="active"></li> - <li data-target="#carousel-example-2" data-slide-to="1"></li> - <li data-target="#carousel-example-2" data-slide-to="2"></li> + <li data-target="#carousel-product" data-slide-to="0" class="active"></li> + <li data-target="#carousel-product" data-slide-to="1"></li> + <li data-target="#carousel-product" data-slide-to="2"></li> </ol> <!--/.Indicators--> <!--Slides--> <div class="carousel-inner" role="listbox"> <div class="carousel-item active"> <div class="view"> - <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(68).jpg" + <img class="d-block w-100" src="/img/carousel/unicity.png" alt="First slide"> <div class="mask rgba-black-light"></div> </div> <div class="carousel-caption"> - <h3 class="h3-responsive">Light mask</h3> - <p>First text</p> + <h3 class="h3-responsive">Unicity</h3> + <p>A Sims clone written in Unity3D.</p> + <a class="btn btn-green btn-lg" href="https://github.com/aleeproductions/Unicity/blob/master/README.md" role="button">Learn More</a> </div> </div> <div class="carousel-item"> @@ -44,11 +47,12 @@ <div class="view"> <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(6).jpg" alt="Second slide"> - <div class="mask rgba-black-strong"></div> + <div class="mask rgba-black-light"></div> </div> <div class="carousel-caption"> - <h3 class="h3-responsive">Strong mask</h3> - <p>Secondary text</p> + <h3 class="h3-responsive">QuantumNet</h3> + <p>A computer "hacking" game made in C#.</p> + <a class="btn btn-green btn-lg" href="https://github.com/aleeproductions/QuantumNet/blob/master/README.md" role="button">Learn More</a> </div> </div> <div class="carousel-item"> @@ -56,21 +60,22 @@ <div class="view"> <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(9).jpg" alt="Third slide"> - <div class="mask rgba-black-slight"></div> + <div class="mask rgba-black-light"></div> </div> <div class="carousel-caption"> <h3 class="h3-responsive">Slight mask</h3> <p>Third text</p> + <a class="btn btn-green btn-lg" href="#" role="button">Learn More</a> </div> </div> </div> <!--/.Slides--> <!--Controls--> - <a class="carousel-control-prev" href="#carousel-example-2" role="button" data-slide="prev"> + <a class="carousel-control-prev" href="#carousel-product" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> - <a class="carousel-control-next" href="#carousel-example-2" role="button" data-slide="next"> + <a class="carousel-control-next" href="#carousel-product" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> @@ -128,7 +133,7 @@ console.log("Welcome to Alee Productions :)"); alert("Please note that this website is under active development and bugs may occur.\nIf there's any report it to the GitHub repo."); </script> - + <% include ./includes/scripts %> <% include ./includes/footer %> </body> diff --git a/views/projects.ejs b/views/projects.ejs index d48282b..a30634c 100644 --- a/views/projects.ejs +++ b/views/projects.ejs @@ -1,4 +1,5 @@ <!DOCTYPE html> +<!-- Alee Productions Website: Made by Alee and licensed with GPL-3.0 --> <html> <head> @@ -11,8 +12,37 @@ <h2 class="display-4">Projects</h2> <p class="lead">This is the projects that we are currently working on.</p> </div> - <center><h1>Notice: We are currently working on this page</h1></center> + <div class="container"> + <center><h1 class="mb-5">Software</h1></center> + <!-- Software Cards --> + <div class="row d-flex justify-content-center"> + + <div class="col-md-5"> + <div class="card elegant-color"> + <div class="card-body"> + <h5 class="card-title">Unicity</h5> + <p class="card-text white-text">A Sims clone written in Unity3D.</p> + <a class="card-link green-text" href="https://github.com/aleeproductions/Unicity">GitHub</a> + </div> + </div> + </div> + + <div class="col-md-5"> + <div class="card elegant-color"> + <div class="card-body"> + <h5 class="card-title">QuantumNet</h5> + <p class="card-text white-text">A computer "hacking" game made in C#.</p> + <a class="card-link green-text">Card link</a> + </div> + </div> + </div> + </div> + <!--/.Software Cards --> + <center><h1 class="mt-5 mb-5">Videos</h1></center> + <ul id="yt-results" class="yt" style="list-style-type:none;"></ul> + </div> + <% include ./includes/scripts %> + <script type="text/javascript" data-main="/js/yt-list-videos.js" src="https://requirejs.org/docs/release/2.3.5/minified/require.js"></script> <% include ./includes/footer %> </body> - </html>
\ No newline at end of file |
