Demo Projects > focalboard >

main

mattermost/focalboard

Get started View on GitHub

Last updated at: 29/12/2023 09:42

index.html

TLDR

This file is an HTML template for a website's homepage. It includes partials for the header, navigation, hero section, introduction, mailing list, and footer. It also initializes some JavaScript libraries like Alpine.js and AOS.js. The file contains inline JavaScript code for initializing variables and defining functions for dropdown menus.

Classes

There are no classes in this file.

Methods

There are no methods in this file.

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]>      <html class="no-js"> <![endif]-->
<html>
    <head>
        {{ partial "head.html" .}}
        <script src="https://cdn.jsdelivr.net/gh/kevinbatdorf/alpine-auto-interval@0.x.x/dist/index.js"></script>
        <script defer src="https://unpkg.com/alpinejs@3.10.5/dist/cdn.min.js"></script>
        <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
        <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

    </head>
    <body
        class="homepage"
        x-data='{
            template: 1,
            boardView: 1,
            roadmapItem: 1,
            viewsInterval: null,
            roadmapInterval: null,
        }'
        x-init='viewsInterval = setInterval(function () {boardView > 3 ? boardView = 1 : boardView++}, 3000); roadmapInterval = setInterval(function () {roadmapItem > 2 ? roadmapItem = 1 : roadmapItem++}, 3000);'
    >
        {{ partial "nav.html" .}}


        <div id="wrapper">
            {{ partial "hero.html" .}}

            {{ partial "intro.html" .}}

            {{ partial "mailinglist.html" .}}
        </div>

        {{ partial "footer.html" .}}

        <script>
            document.addEventListener('alpine:init', () => {
                Alpine.data('dropdown', () => ({
                    open: false,

                    toggle() {
                        this.open = ! this.open
                    }
                }))
            })

            AOS.init();

            AOS.init({
                // Global settings:
                disable: false, // accepts following values: 'phone', 'tablet', 'mobile', boolean, expression or function
                startEvent: 'DOMContentLoaded', // name of the event dispatched on the document, that AOS should initialize on
                initClassName: 'aos-init', // class applied after initialization
                animatedClassName: 'aos-animate', // class applied on animation
                useClassNames: false, // if true, will add content of `data-aos` as classes on scroll
                disableMutationObserver: false, // disables automatic mutations' detections (advanced)
                debounceDelay: 50, // the delay on debounce used while resizing window (advanced)
                throttleDelay: 99, // the delay on throttle used while scrolling the page (advanced)


                // Settings that can be overridden on per-element basis, by `data-aos-*` attributes:
                delay: 0, // values from 0 to 3000, with step 50ms
                duration: 1000, // values from 0 to 3000, with step 50ms
                easing: 'ease', // default easing for AOS animations
                once: false, // whether animation should happen only once - while scrolling down
                mirror: false, // whether elements should animate out while scrolling past them
                anchorPlacement: 'top-bottom', // defines which position of the element regarding to window should trigger the animation
                });
        </script>
    </body>
</html>