www_projectmycelium_io/poc_threefold/components/footer.html

{% include 'components/login.html' %}

<footer class="tf_footer">
    <div class="tf_footer_container">
        <div class="tf_footer_section">
            <h3>ThreeFold</h3>
            <p>Building a decentralized internet <br>for a better world.</p>
        </div>
        <div class="tf_footer_section">
            <h4>Links</h4>
            <div class="footer_links">
                <a href="#">About</a>
                <a href="#">Technology</a>
                <a href="#">Community</a>
                <a href="#">Contact</a>
            </div>
        </div>
        <div class="tf_footer_section">
            <h4>Resources</h4>
            <div class="footer_links">
                <a href="#">Documentation</a>
                <a href="#">Blog</a>
                <a href="#">FAQ</a>
                <a href="#">Support</a>
            </div>
        </div>
        <div class="tf_footer_section">
            <h4>Connect</h4>
            <div class="footer_links">
                <a href="#">Twitter</a>
                <a href="#">Telegram</a>
                <a href="#">GitHub</a>
                <a href="#">Discord</a>
            </div>
        </div>
    </div>
    <div class="tf_footer_bottom">
        <p>&copy; 2024 ThreeFold. All rights reserved.</p>
    </div>
</footer>

<style>
    :root {
        /* Light theme variables */
        --footer-background-light: #FFFFFFF2;
        --footer-text-light: #333;
        --footer-link-light: #385bb5;
        --footer-link-hover-light: #2a4494;
        --footer-border-light: #eee;
        
        /* Dark theme variables */
        --footer-background-dark: #282C34F2;
        --footer-text-dark: #fff;
        --footer-link-dark: #7a9bff;
        --footer-link-hover-dark: #a8beff;
        --footer-border-dark: #444;

        /* Default to dark theme */
        --footer-background: var(--footer-background-dark);
        --footer-text: var(--footer-text-dark);
        --footer-link: var(--footer-link-dark);
        --footer-link-hover: var(--footer-link-hover-dark);
        --footer-border: var(--footer-border-dark);
    }

    /* Light theme class */
    .light-theme {
        --footer-background: var(--footer-background-light);
        --footer-text: var(--footer-text-light);
        --footer-link: var(--footer-link-light);
        --footer-link-hover: var(--footer-link-hover-light);
        --footer-border: var(--footer-border-light);
    }

    .tf_footer {
        background-color: var(--footer-background);
        color: var(--footer-text);
        padding: 1.5rem 0 0.5rem;
        margin-top: auto;
        transition: background-color 0.3s, color 0.3s;
        box-sizing: border-box;
    }

    .tf_footer_container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 0rem;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 0.8rem;
    }

    .tf_footer_section {
        display: flex;
        flex-direction: column;
    }

    .tf_footer_section h3 {
        font-size: 1.1rem;
        margin: 0 0 0.4rem;
        color: var(--footer-text);
    }

    .tf_footer_section h4 {
        font-size: 0.9rem;
        margin: 0 0 0.3rem;
        color: var(--footer-text);
        padding-left: 1rem;
    }

    .tf_footer_section p {
        margin: 0;
        line-height: 1.3;
        font-size: 0.8rem;
        color: var(--footer-text);
    }

    .footer_links {
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
        padding-left: 1rem;
    }

    .footer_links a {
        color: var(--footer-link);
        text-decoration: none;
        transition: color 0.3s;
        font-size: 0.8rem;
        line-height: 1.2;
    }

    .footer_links a:hover {
        color: var(--footer-link-hover);
    }

    .tf_footer_bottom {
    background-color: var(--footer-background);
    margin-top: 1rem;
    padding-top: 0.5rem;
    /* Add flexbox properties */
    display: flex;
    justify-content: center; /* Horizontally center */
    align-items: center;     /* Vertically center */
    border-top: 0px solid var(--footer-border);
    }

    .tf_footer_bottom p {
        margin: 0;
        font-size: 0.75rem;
        color: var(--footer-text);
    }

    @media (max-width: 768px) {
        .tf_footer_container {
            grid-template-columns: repeat(2, 1fr);
            gap: 0.8rem;
        }
        
        .tf_footer {
            padding: 1rem 0 0.4rem;
        }
    }

    @media (max-width: 480px) {
        .tf_footer_container {
            grid-template-columns: repeat(2, 1fr);
        }
        
        .tf_footer {
            padding: 0.8rem 0 0.3rem;
        }

        .tf_footer_section {
            font-size: 0.75rem;
        }

        .tf_footer_section h4 {
            padding-left: 0.3rem;
        }

        .footer_links {
            padding-left: 0.6rem;
        }
    }
</style>

<script>
    // Ensure theme changes are applied consistently across all components
    function applyTheme(theme) {
        document.documentElement.className = theme;
        localStorage.setItem('theme', theme);
    }

    // Initialize theme from localStorage or default to dark
    document.addEventListener('DOMContentLoaded', () => {
        const savedTheme = localStorage.getItem('theme') || '';
        applyTheme(savedTheme);
    });

    // Override the toggleTheme function from nav.html
    function toggleTheme() {
        const isLight = document.documentElement.classList.contains('light-theme');
        applyTheme(isLight ? '' : 'light-theme');
    }
</script>