<commit_before><!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="x-tag-components.css"/>
    <link rel="stylesheet" type="text/css" href="../../shuffledeck/src/shuffledeck.css"/>
    <link rel="stylesheet" type="text/css" href="../../iconbutton/src/iconbutton.css"/>
    <link rel="stylesheet" type="text/css" href="../src/tabbar.css"/>
    
    <script type="text/javascript" src="x-tag-components.js"></script>
    <script type="text/javascript" src="../../shuffledeck/src/shuffledeck.js"></script>
    <script type="text/javascript" src="../../iconbutton/src/iconbutton.js"></script>
    <script type="text/javascript" src="../src/tabbar.js"></script>
    <style>
        body, html{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        
        .container{
            width: 320px;
            height: 480px;
            border: 1px solid grey;
        }
        
        #demo-box{
            width: 100%;
            height: 50%;
        }
        
        #demo-box img{
            width: 100%;
            height: 100%;
        }
        
        x-tabbar{
            background-color: orange;
        }
        
        x-iconbutton{
            border: 1px solid transparent;
            margin: 0;
            padding: 0;
            cursor: pointer;
        }
        
        x-iconbutton .button{
            border: 1px solid transparent;
            background-color: goldenrod;
            color: white;
        }
        
        x-iconbutton .button:hover{
            background-color: #e6be5a;
        }
        
        x-iconbutton .label{
            padding: 5px;
        }
    </style>
</head>
<body>
<h1>X-TabBar demos</h1>

<div class="container">
    <h2>With shuffledeck</h2>
    <x-shuffledeck id="demo-box">
        <x-shuffleslide><img src="http://placekitten.com/200/150/?image=1"/></x-shuffleslide>
        <x-shuffleslide><img src="http://placekitten.com/200/150/?image=2"/></x-shuffleslide>
        <x-shuffleslide><img src="http://placekitten.com/200/150/?image=3"/></x-shuffleslide>
        <x-shuffleslide><img src="http://placekitten.com/200/150/?image=4"/></x-shuffleslide>
        <x-shuffleslide><img src="http://placekitten.com/200/150/?image=5"/></x-shuffleslide>
    </x-shuffledeck>
    
    <x-tabbar>
        <x-tabbar-tab target-selector="#demo-box x-shuffleslide:first-child">
            <x-iconbutton src="http://placekitten.com/30/?image=1">One</x-iconbutton>
        </x-tabbar-tab>
        <x-tabbar-tab target-selector="#demo-box x-shuffleslide:nth-child(2)">
            <x-iconbutton src="http://placekitten.com/30/?image=2">Two</x-iconbutton>
        </x-tabbar-tab>
        <x-tabbar-tab target-selector="#demo-box x-shuffleslide:nth-child(3)">
            <x-iconbutton src="http://placekitten.com/30/?image=3">Three</x-iconbutton><commit_msg>Tabbar: minor tweak to shuffledeck/tabbar demo<commit_after><!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="x-tag-components.css"/>
    <link rel="stylesheet" type="text/css" href="../../shuffledeck/src/shuffledeck.css"/>
    <link rel="stylesheet" type="text/css" href="../../iconbutton/src/iconbutton.css"/>
    <link rel="stylesheet" type="text/css" href="../src/tabbar.css"/>
    
    <script type="text/javascript" src="x-tag-components.js"></script>
    <script type="text/javascript" src="../../shuffledeck/src/shuffledeck.js"></script>
    <script type="text/javascript" src="../../iconbutton/src/iconbutton.js"></script>
    <script type="text/javascript" src="../src/tabbar.js"></script>
    <style>
        body, html{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        
        .container{
            width: 320px;
            height: 480px;
            border: 1px solid grey;
        }
        
        #demo-box{
            position: relative;
            width: 100%;
            height: 50%;
        }
        
        #demo-box img{
            width: 100%;
            height: 100%;
        }
        
        #demo-box span{
            position: absolute;
            color: white;
            text-shadow: 1px 1px 10px black;
            left: 25%;
            top: 40%;
            width: 50%;
            text-align: center;
            
            font-size: 3em;
        }
        
        x-tabbar{
            background-color: orange;
        }
        
        x-iconbutton{
            border: 1px solid transparent;
            margin: 0;
            padding: 0;
            cursor: pointer;
        }
        
        x-iconbutton .button{
            border: 1px solid transparent;
            background-color: goldenrod;
            color: white;
        }
        
        x-iconbutton .button:hover{
            background-color: #e6be5a;
        }
        
        x-iconbutton .label{
            padding: 5px;
        }
    </style>
</head>
<body>
<h1>X-TabBar demos</h1>

<div class="container">
    <h2>With shuffledeck</h2>
    <x-shuffledeck id="demo-box">
        <x-shuffleslide><img src="http://placekitten.com/200/150/?image=1"/><span>One</span></x-shuffleslide>
        <x-shuffleslide><img src="http://placekitten.com/200/150/?image=2"/><span>Two</span></x-shuffleslide>
        <x-shuffleslide><img src="http://placekitten.com/200/150/?image=3"/><span>Three</span></x-shuffleslide>
        <x-shuffleslide><img src="http://placekitten.com/200/150/?image=4"/><span>Four</span></x-shuffleslide>
        <x-shuffleslide><img src="http://placekitten.com/200/150/?image=5"/><span>Five</span></x-shuffleslide>
    </x-shuffledeck>
    
    <x-tabbar>
        <x-tabbar-tab target-selector="#demo-box x-shuffleslide:first-child">
            <x-iconbutton src="http://placekitten.com/30/?image=1">One</x-iconbutton>
        </x-tabbar-tab>
        <x-tabbar-tab target-selector="#demo-box x-shuffleslide:nth-child(2)">
            <x-iconbutton src="http://placekitten.com/30/?image=2">Two</x-iconbutton>
        </x-tabbar-tab>
        <x-tabbar-tab target-selector="#demo-box x-shuffleslide:nth-child(3)">
            <x-iconbutton src="http://placekitten.com/30/?image=3">Three</x-iconbutton>
{'fraction_non_alphanumeric': 0.17138787782877038, 'fraction_numerical': 0.02832726697262225, 'mean_word_length': 1.907083716651334, 'pattern_counts': {'":': 0, '<': 121, '<?xml version=': 0, '>': 121, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3923944', 'n_tokens_mistral': 2237, 'n_tokens_neox': 2090, 'n_words': 303}