PAYDAY2 Scratch Edition

PAYDAY2 Scratch Edition about
CitoHub · Sep 3, 2023 · cb64636 · cb64636
1 parent 946cf05
commit cb64636
Show file tree

Hide file tree

Showing 17 changed files with 11,296 additions and 0 deletions.
diff --git a/assets/img/bg-masthead.jpg b/assets/img/bg-masthead.jpg
diff --git a/assets/img/portfolio/fullsize/p1.png b/assets/img/portfolio/fullsize/p1.png
diff --git a/assets/img/portfolio/fullsize/p2.png b/assets/img/portfolio/fullsize/p2.png
diff --git a/assets/img/portfolio/fullsize/p3.png b/assets/img/portfolio/fullsize/p3.png
diff --git a/assets/img/portfolio/fullsize/p4.png b/assets/img/portfolio/fullsize/p4.png
diff --git a/assets/img/portfolio/fullsize/p5.png b/assets/img/portfolio/fullsize/p5.png
diff --git a/assets/img/portfolio/fullsize/p6.png b/assets/img/portfolio/fullsize/p6.png
diff --git a/assets/img/portfolio/thumbnails/p1.png b/assets/img/portfolio/thumbnails/p1.png
diff --git a/assets/img/portfolio/thumbnails/p2.png b/assets/img/portfolio/thumbnails/p2.png
diff --git a/assets/img/portfolio/thumbnails/p3.png b/assets/img/portfolio/thumbnails/p3.png
diff --git a/assets/img/portfolio/thumbnails/p4.png b/assets/img/portfolio/thumbnails/p4.png
diff --git a/assets/img/portfolio/thumbnails/p5.png b/assets/img/portfolio/thumbnails/p5.png
diff --git a/assets/img/portfolio/thumbnails/p6.png b/assets/img/portfolio/thumbnails/p6.png
diff --git a/assets/scratch.ico b/assets/scratch.ico
diff --git a/css/styles.css b/css/styles.css
diff --git a/index.html b/index.html
@@ -0,0 +1,242 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+        <meta name="description" content="" />
+        <meta name="author" content="" />
+        <title>Scratch</title>
+        <!-- Favicon-->
+        <link rel="icon" type="image/x-icon" href="assets/scratch.ico" />
+        <!-- Bootstrap Icons-->
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" rel="stylesheet" />
+        <!-- Google fonts-->
+        <link href="https://fonts.googleapis.com/css?family=Merriweather+Sans:400,700" rel="stylesheet" />
+        <link href="https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic" rel="stylesheet" type="text/css" />
+        <!-- SimpleLightbox plugin CSS-->
+        <link href="https://cdnjs.cloudflare.com/ajax/libs/SimpleLightbox/2.1.0/simpleLightbox.min.css" rel="stylesheet" />
+        <!-- Core theme CSS (includes Bootstrap)-->
+        <link href="css/styles.css" rel="stylesheet" />
+    </head>
+    <body id="page-top">
+        <!-- Navigation-->
+        <nav class="navbar navbar-expand-lg navbar-light fixed-top py-3" id="mainNav">
+            <div class="container px-4 px-lg-5">
+                <a class="navbar-brand" href="#page-top">PAYDAY2 / Scratch Edition</a>
+                <button class="navbar-toggler navbar-toggler-right" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
+                <div class="collapse navbar-collapse" id="navbarResponsive">
+                    <ul class="navbar-nav ms-auto my-2 my-lg-0">
+                        <li class="nav-item"><a class="nav-link" href="#about">About</a></li>
+                        <li class="nav-item"><a class="nav-link" href="#services">Services</a></li>
+                        <li class="nav-item"><a class="nav-link" href="#portfolio">Portfolio</a></li>
+                        <li class="nav-item"><a class="nav-link" href="#enquiries">Enquiries</a></li>
+                    </ul>
+                </div>
+            </div>
+        </nav>
+        <!-- Masthead-->
+        <header class="masthead">
+            <div class="container px-4 px-lg-5 h-100">
+                <div class="row gx-4 gx-lg-5 h-100 align-items-center justify-content-center text-center">
+                    <div class="col-lg-8 align-self-end">
+                        <h1 class="text-white font-weight-bold">PAYDAY2</h1>
+                        <hr class="divider" />
+                    </div>
+                    <div class="col-lg-8 align-self-baseline">
+                        <p class="text-white-75 mb-5">PAYDAY 2 Scratch Edition is inspired by PAYDAY 2 Windows Edition developed by OVERKILL - a Starbreeze Studio. PAYDAY 2 Scratch Edition is a 2D shooting game built with Scratch 3.</p>
+                        <a class="btn btn-primary btn-xl" href="https://sites.google.com/view/scratch-payday2-en/home">Find Out More</a>
+                    </div>
+                </div>
+            </div>
+        </header>
+        <!-- About-->
+        <section class="page-section bg-primary" id="about">
+            <div class="container px-4 px-lg-5">
+                <div class="row gx-4 gx-lg-5 justify-content-center">
+                    <div class="col-lg-8 text-center">
+                        <h2 class="text-white mt-0">New? Start here!</h2>
+                        <hr class="divider divider-light" />
+                        <p class="text-white-75 mb-4">New? Start here!
+
+                            When playing the game, you can play the game to your advantage by thinking about your strategy and acting like an FPS game, and by increasing the accuracy of your aim.</p>
+                        <a class="btn btn-light btn-xl" href="https://citohub.github.io/playPAYDAY2-Scratch.Edition/">Start with the web version!</a>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- Services-->
+        <section class="page-section" id="services">
+            <div class="container px-4 px-lg-5">
+                <h2 class="text-center mt-0">At Your Service</h2>
+                <hr class="divider" />
+                <div class="row gx-4 gx-lg-5">
+                    <div class="col-lg-3 col-md-6 text-center">
+                        <div class="mt-5">
+                            <div class="mb-2"><i class="bi-gem fs-1 text-primary"></i></div>
+                            <h3 class="h4 mb-2">Sturdy program</h3>
+                            <p class="text-muted mb-0">Our game are updated regularly to keep them bug free!</p>
+                        </div>
+                    </div>
+                    <div class="col-lg-3 col-md-6 text-center">
+                        <div class="mt-5">
+                            <div class="mb-2"><i class="bi-laptop fs-1 text-primary"></i></div>
+                            <h3 class="h4 mb-2">Up to Date</h3>
+                            <p class="text-muted mb-0">All dependencies are kept current to keep things fresh.</p>
+                        </div>
+                    </div>
+                    <div class="col-lg-3 col-md-6 text-center">
+                        <div class="mt-5">
+                            <div class="mb-2"><i class="bi-globe fs-1 text-primary"></i></div>
+                            <h3 class="h4 mb-2">Online play</h3>
+                            <p class="text-muted mb-0">Multiplayer is possible using a cloud server.</p>
+                        </div>
+                    </div>
+                    <div class="col-lg-3 col-md-6 text-center">
+                        <div class="mt-5">
+                            <div class="mb-2"><i class="bi-heart fs-1 text-primary"></i></div>
+                            <h3 class="h4 mb-2">thoughts</h3>
+                            <p class="text-muted mb-0">Remember to play with kindness.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- Portfolio-->
+        <div id="portfolio">
+            <div class="container-fluid p-0">
+                <div class="row g-0">
+                    <div class="col-lg-4 col-sm-6">
+                        <a class="portfolio-box" href="assets/img/portfolio/fullsize/p1.png" title="Play">
+                            <img class="img-fluid" src="assets/img/portfolio/thumbnails/p1.png" alt="..." />
+                            <div class="portfolio-box-caption">
+                                <div class="project-category text-white-50">matching</div>
+                                <div class="project-name">Lobby</div>
+                            </div>
+                        </a>
+                    </div>
+                    <div class="col-lg-4 col-sm-6">
+                        <a class="portfolio-box" href="assets/img/portfolio/fullsize/p2.png" title="Great villain">
+                            <img class="img-fluid" src="assets/img/portfolio/thumbnails/p2.png" alt="..." />
+                            <div class="portfolio-box-caption">
+                                <div class="project-category text-white-50">achievement</div>
+                                <div class="project-name">Great villain</div>
+                            </div>
+                        </a>
+                    </div>
+                    <div class="col-lg-4 col-sm-6">
+                        <a class="portfolio-box" href="assets/img/portfolio/fullsize/p3.png" title="Store">
+                            <img class="img-fluid" src="assets/img/portfolio/thumbnails/p3.png" alt="..." />
+                            <div class="portfolio-box-caption">
+                                <div class="project-category text-white-50">store</div>
+                                <div class="project-name">Free store</div>
+                            </div>
+                        </a>
+                    </div>
+                    <div class="col-lg-4 col-sm-6">
+                        <a class="portfolio-box" href="assets/img/portfolio/fullsize/p4.png" title="CHALLENGES">
+                            <img class="img-fluid" src="assets/img/portfolio/thumbnails/p4.png" alt="..." />
+                            <div class="portfolio-box-caption">
+                                <div class="project-category text-white-50">Challenges</div>
+                                <div class="project-name">today's Challenges</div>
+                            </div>
+                        </a>
+                    </div>
+                    <div class="col-lg-4 col-sm-6">
+                        <a class="portfolio-box" href="assets/img/portfolio/fullsize/p5.png" title="Batch">
+                            <img class="img-fluid" src="assets/img/portfolio/thumbnails/p5.png" alt="..." />
+                            <div class="portfolio-box-caption">
+                                <div class="project-category text-white-50">achievement</div>
+                                <div class="project-name">batch</div>
+                            </div>
+                        </a>
+                    </div>
+                    <div class="col-lg-4 col-sm-6">
+                        <a class="portfolio-box" href="assets/img/portfolio/fullsize/p6.png" title="Setting">
+                            <img class="img-fluid" src="assets/img/portfolio/thumbnails/p6.png" alt="..." />
+                            <div class="portfolio-box-caption p-3">
+                                <div class="project-category text-white-50">setting</div>
+                                <div class="project-name">Key binding</div>
+                            </div>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Call to action-->
+        <section class="page-section bg-dark text-white">
+            <div class="container px-4 px-lg-5 text-center">
+                <h2 class="mb-4">Free Download at PAYDAY2 scratch edition (Build v0.2.0.58)</h2>
+                <a class="btn btn-light btn-xl" href="https://www.mediafire.com/file/30fuattub2dl7ws/PAYDAY_2_%2528_Build_v0.2.0.58_%2529.html/file">Download Now!</a>
+            </div>
+        </section>
+        <!-- Enquiries -->
+        <section class="page-section" id="enquiries">
+            <div class="container px-4 px-lg-5">
+                <div class="row gx-4 gx-lg-5 justify-content-center">
+                    <div class="col-lg-8 col-xl-6 text-center">
+                        <h2 class="mt-0">Let's Get In Enquiries</h2>
+                        <hr class="divider" />
+                        <p class="text-muted mb-5">What issue are you experiencing? Describe the glitch and how to reproduce it.</p>
+                    </div>
+                </div>
+                <div class="row gx-4 gx-lg-5 justify-content-center mb-5">
+                    <div class="col-lg-6">
+                        <!-- * * * * * * * * * * * * * * *-->
+                        <!-- * * SB Forms Contact Form * *-->
+                        <!-- * * * * * * * * * * * * * * *-->
+                        <!-- to get an API token!-->
+                        <form id="contactForm" data-sb-form-api-token="API_TOKEN">
+                            <!-- Name input-->
+                            <div class="form-floating mb-3">
+                                <input class="form-control" id="name" type="text" placeholder="Enter your name..." data-sb-validations="required" />
+                                <label for="name">name (Screen Name)</label>
+                                <div class="invalid-feedback" data-sb-feedback="name:required">A name is required.</div>
+                            </div>
+                            <!-- Message input-->
+                            <div class="form-floating mb-3">
+                                <textarea class="form-control" id="message" type="text" placeholder="Enter your message here..." style="height: 10rem" data-sb-validations="required"></textarea>
+                                <label for="message">Message</label>
+                                <div class="invalid-feedback" data-sb-feedback="message:required">A message is required.</div>
+                            </div>
+                            <!-- Submit success message-->
+                            <!---->
+                            <!-- This is what your users will see when the form-->
+                            <!-- has successfully submitted-->
+                            <div class="d-none" id="submitSuccessMessage">
+                                <div class="text-center mb-3">
+                                    <div class="fw-bolder">Form submission failed</div>
+                                    This form is currently disabled. Please use <a href="https://docs.google.com/forms/d/e/1FAIpQLScGOUVm1Akes00z2AuqOnqrKyywZR8FEI0W0Zxmw32KM9NiJg/viewform">Google Form</a>.<br />
+                                </div>
+                            </div>
+                            <!-- Submit error message-->
+                            <!---->
+                            <!-- This is what your users will see when there is-->
+                            <!-- an error submitting the form-->
+                            <div class="d-none" id="submitErrorMessage"><div class="text-center text-danger mb-3">Error sending message!</div></div>
+                            <!-- Submit Button-->
+                            <div class="d-grid"><button class="btn btn-primary btn-xl disabled" id="submitButton" type="submit">Submit</button></div>
+                        </form>
+                    </div>
+                </div>
+                <div class="row gx-4 gx-lg-5 justify-content-center">
+                    <div class="col-lg-4 text-center mb-5 mb-lg-0">
+                        <i class="bi-phone fs-2 mb-3 text-muted"></i>
+                        <div>Due to the limitations of Scratch's Community Guidelines, it's difficult to contact us directly.</div>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- Footer-->
+        <footer class="bg-light py-5">
+            <div class="container px-4 px-lg-5"><div class="small text-center text-muted">Copyright &copy; 2023 - CitoHub</div></div>
+        </footer>
+        <!-- Bootstrap core JS-->
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
+        <!-- SimpleLightbox plugin JS-->
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/SimpleLightbox/2.1.0/simpleLightbox.min.js"></script>
+        <!-- Core theme JS-->
+        <script src="js/scripts.js"></script>
+        <script src="https://cdn.startbootstrap.com/sb-forms-latest.js"></script>
+    </body>
+</html>
+<!-- by fun117 -->
diff --git a/js/scripts.js b/js/scripts.js
@@ -0,0 +1,59 @@
+/*!
+* Start Bootstrap - Creative v7.0.7 (https://startbootstrap.com/theme/creative)
+* Copyright 2013-2023 Start Bootstrap
+* Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-creative/blob/master/LICENSE)
+*/
+//
+// Scripts
+// 
+
+window.addEventListener('DOMContentLoaded', event => {
+
+    // Navbar shrink function
+    var navbarShrink = function () {
+        const navbarCollapsible = document.body.querySelector('#mainNav');
+        if (!navbarCollapsible) {
+            return;
+        }
+        if (window.scrollY === 0) {
+            navbarCollapsible.classList.remove('navbar-shrink')
+        } else {
+            navbarCollapsible.classList.add('navbar-shrink')
+        }
+
+    };
+
+    // Shrink the navbar 
+    navbarShrink();
+
+    // Shrink the navbar when page is scrolled
+    document.addEventListener('scroll', navbarShrink);
+
+    // Activate Bootstrap scrollspy on the main nav element
+    const mainNav = document.body.querySelector('#mainNav');
+    if (mainNav) {
+        new bootstrap.ScrollSpy(document.body, {
+            target: '#mainNav',
+            rootMargin: '0px 0px -40%',
+        });
+    };
+
+    // Collapse responsive navbar when toggler is visible
+    const navbarToggler = document.body.querySelector('.navbar-toggler');
+    const responsiveNavItems = [].slice.call(
+        document.querySelectorAll('#navbarResponsive .nav-link')
+    );
+    responsiveNavItems.map(function (responsiveNavItem) {
+        responsiveNavItem.addEventListener('click', () => {
+            if (window.getComputedStyle(navbarToggler).display !== 'none') {
+                navbarToggler.click();
+            }
+        });
+    });
+
+    // Activate SimpleLightbox plugin for portfolio items
+    new SimpleLightbox({
+        elements: '#portfolio a.portfolio-box'
+    });
+
+});