<!DOCTYPE html>

<html>
    <head>
        <style>
            body {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 20px;
                margin-top: 20px;
            }
            
            .wrapper {
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .app {
                width: 40px;
                height: 40px;
                background: #333;
                border-radius: 50%;
                display: inline-block;
                align-self: center;
                cursor: pointer;
            }
            
            .app:hover {
                box-shadow: 0 0 0 7px rgba(0, 0, 0, .4);
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <div data-href="https://www.google.com" class="app" style="background: url(img/widget/google.svg); background-size: cover"></div>
        </div>
        <div class="wrapper">
            <div data-href="https://discord.com" class="app" style="background: url(img/widget/disc.svg); background-size: cover"></div>
        </div>
        <div class="wrapper">
            <div data-href="https://spotify.com" class="app" style="background: url(img/widget/sptfy.svg); background-size: cover"></div>
        </div>
        <div class="wrapper">
            <div data-href="https://www.youtube.com" class="app" style="background: url(img/widget/yt.svg); background-size: cover"></div>
        </div>
        <div class="wrapper">
            <div data-href="https://twitch.tv" class="app" style="background: url(img/widget/twich.svg); background-size: cover"></div>
        </div>
        <script>
            document.querySelectorAll('.app[data-href]').forEach(node => {
                node.addEventListener('click', () => {
                    parent.postMessage({ 
                        type: 'access', 
                        href: node.getAttribute('data-href') 
                    })
                });
            });

            window.addEventListener('blur', () => {
                parent.postMessage('close-widget');
            });

        </script>
    </body>
</html>

Collaborative Calculation and Data Science

colby

sagemath

Product

Resources

Company