Skip to content

Instantly share code, notes, and snippets.

/index.html

Created August 20, 2016 16:01
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save anonymous/f18342ab0ff3cf9f82b1033be455918b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save anonymous/f18342ab0ff3cf9f82b1033be455918b to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @invalid-email-address Anonymous created this gist Aug 20, 2016.
    491 changes: 491 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,491 @@
    <!DOCTYPE html>
    <html>

    <head>
    <meta name="description" content="HTML Tables">
    <meta charset="utf-8">
    <title>HTML Tables</title>
    <link rel="stylesheet" href="table-style.css"> <style id="jsbin-css">
    body {
    font-size: 16px;
    font-weight: 400;
    text-rendering: optimizeLegibility;
    background-color: #000000;
    padding: 0px;
    margin: 0px;
    }

    #gradient {
    width: 100%;
    padding: 0px;
    margin: 0px;
    }

    .album-view-song-list {
    margin: 1.5rem auto;
    font-family: 'Questrial', sans-serif;
    font-weight: 300;
    font-size: .85em;
    border-collapse: collapse;
    margin: auto;
    width: 100%;
    }

    .album-view-song-item {
    height: 4rem;
    }

    .song-item-number {
    width: 3%;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    }

    .song-item-title {
    width: 40%;
    }

    .artist {
    width: 45%;
    }

    .song-item-duration {
    width: 4%;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    }

    .song-item-count {
    width: 3%;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    }

    .album-view-song-list {
    margin: 1.5rem auto;
    font-weight: 300;
    font-size: 1em;
    }

    .album-view-song-item {
    height: 3rem;
    }

    th {
    color: rgba(255, 255, 255, 0.5);
    background: rgba(30, 30, 30, 0.6);
    font-family: 'Open Sans 400', sans-serif;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 100;
    padding: 10px;
    text-align: left;
    vertical-align: middle;
    }

    tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
    font-weight: normal;
    background: rgba(0, 0, 0, 0.75);
    /* text-shadow: 0 1px 1px rgba(256, 256, 256, 1);*/
    }

    tr:hover td {
    background: rgba(0, 0, 0, 0.85);
    color: #FFFFFF;
    }

    tr:first-child {
    border-top: none;
    }

    tr:last-child {
    border-bottom: none;
    }


    /*
    tr:nth-child(odd) td {
    background: rgba(255, 255, 255, 0.2);
    }
    */


    /*
    tr:nth-child(odd):hover td {
    background: rgba(0, 0, 0, 0.5);
    }
    */


    /*
    tr:last-child td:first-child {
    border-bottom-left-radius: 3px;
    }
    */


    /*
    tr:last-child td:last-child {
    border-bottom-right-radius: 3px;
    }
    */

    td {
    padding: 10px;
    text-align: left;
    vertical-align: middle;
    font-weight: 300;
    font-size: 16px;
    /* text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);*/
    }


    /*
    td:last-child {
    border-right: 0px;
    }
    */

    th.text-left {
    text-align: left;
    }

    th.text-center {
    text-align: center;
    }

    th.text-right {
    text-align: right;
    }

    td.text-left {
    text-align: left;
    }

    td.text-center {
    text-align: center;
    }

    td.text-right {
    text-align: right;
    }
    </style>
    </head>
    <link href="https://fonts.googleapis.com/css?family=Droid+Serif:400,400i,700,700i|Open+Sans:600|Questrial" rel="stylesheet">

    <body onload="window.resizeTo(500,500)">
    <table class="album-view-song-list" id="gradient">
    <thead>
    <tr>
    <th class="text-left">#</th>
    <th class="text-left">Title</th>
    <th class="text-left artist">Artist</th>
    <th class="text-left">Duration</th>
    <th class="text-center">Played</th>
    </tr>
    </thead>
    <tbody class="table-hover">
    <tr class="album-view-song-item">
    <td class="song-item-number">1</td>
    <td class="song-item-title">Blue</td>
    <td class="artist">The Calm Blue Ocean</td>
    <td class="song-item-duration">X:XX</td>
    <td class="song-item-count">10</td>
    </tr>
    <tr class="album-view-song-item">
    <td class="song-item-number">2</td>
    <td class="song-item-title">Red</td>
    <td class="artist">The Calm Blue Ocean</td>
    <td class="song-item-duration">X:XX</td>
    <td class="song-item-count">10</td>
    </tr>
    <tr class="album-view-song-item">
    <td class="song-item-number">3</td>
    <td class="song-item-title">Green</td>
    <td class="artist">The Calm Blue Ocean</td>
    <td class="song-item-duration">X:XX</td>
    <td class="song-item-count">10</td>
    </tr>
    <tr class="album-view-song-item">
    <td class="song-item-number">4</td>
    <td class="song-item-title">Purple</td>
    <td class="artist">The Calm Blue Ocean</td>
    <td class="song-item-duration">X:XX</td>
    <td class="song-item-count">10</td>
    </tr>
    <tr class="album-view-song-item">
    <td class="song-item-number">5</td>
    <td class="song-item-title">Black</td>
    <td class="artist">The Calm Blue Ocean</td>
    <td class="song-item-duration">X:XX</td>
    <td class="song-item-count">10</td>
    </tr>
    </tbody>
    </table>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
    <script src="js/index.js"></script>
    <script id="jsbin-javascript">
    var colors = new Array(
    [62, 35, 255], [60, 255, 60], [255, 35, 98], [45, 175, 230], [255, 0, 255], [255, 128, 0]);
    var step = 0;
    //color table indices for:
    // current color left
    // next color left
    // current color right
    // next color right
    var colorIndices = [0, 1, 2, 3];
    //transition speed var gradientSpeed = 0.002;
    var gradientSpeed = 0.001;

    function updateGradient() {
    if ($ === undefined) return;
    var c0_0 = colors[colorIndices[0]];
    var c0_1 = colors[colorIndices[1]];
    var c1_0 = colors[colorIndices[2]];
    var c1_1 = colors[colorIndices[3]];
    var istep = 1 - step;
    var r1 = Math.round(istep * c0_0[0] + step * c0_1[0]);
    var g1 = Math.round(istep * c0_0[1] + step * c0_1[1]);
    var b1 = Math.round(istep * c0_0[2] + step * c0_1[2]);
    var color1 = "rgb(" + r1 + "," + g1 + "," + b1 + ")";
    var r2 = Math.round(istep * c1_0[0] + step * c1_1[0]);
    var g2 = Math.round(istep * c1_0[1] + step * c1_1[1]);
    var b2 = Math.round(istep * c1_0[2] + step * c1_1[2]);
    var color2 = "rgb(" + r2 + "," + g2 + "," + b2 + ")";
    $('#gradient').css({
    background: "-webkit-gradient(linear, left top, right top, from(" + color1 + "), to(" + color2 + "))"
    }).css({
    background: "-moz-linear-gradient(left, " + color1 + " 0%, " + color2 + " 100%)"
    });
    step += gradientSpeed;
    if (step >= 1) {
    step %= 1;
    colorIndices[0] = colorIndices[1];
    colorIndices[2] = colorIndices[3];
    //pick two new target color indices
    //do not pick the same as the current one
    colorIndices[1] = (colorIndices[1] + Math.floor(1 + Math.random() * (colors.length - 1))) % colors.length;
    colorIndices[3] = (colorIndices[3] + Math.floor(1 + Math.random() * (colors.length - 1))) % colors.length;
    }
    }
    setInterval(updateGradient, 10);
    </script>


    <script id="jsbin-source-css" type="text/css">
    body {
    font-size: 16px;
    font-weight: 400;
    text-rendering: optimizeLegibility;
    background-color: #000000;
    padding: 0px;
    margin: 0px;
    }

    #gradient {
    width: 100%;
    padding: 0px;
    margin: 0px;
    }

    .album-view-song-list {
    margin: 1.5rem auto;
    font-family: 'Questrial', sans-serif;
    font-weight: 300;
    font-size: .85em;
    border-collapse: collapse;
    margin: auto;
    width: 100%;
    }

    .album-view-song-item {
    height: 4rem;
    }

    .song-item-number {
    width: 3%;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    }

    .song-item-title {
    width: 40%;
    }

    .artist {
    width: 45%;
    }

    .song-item-duration {
    width: 4%;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    }

    .song-item-count {
    width: 3%;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    }

    .album-view-song-list {
    margin: 1.5rem auto;
    font-weight: 300;
    font-size: 1em;
    }

    .album-view-song-item {
    height: 3rem;
    }

    th {
    color: rgba(255, 255, 255, 0.5);
    background: rgba(30, 30, 30, 0.6);
    font-family: 'Open Sans 400', sans-serif;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 100;
    padding: 10px;
    text-align: left;
    vertical-align: middle;
    }

    tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
    font-weight: normal;
    background: rgba(0, 0, 0, 0.75);
    /* text-shadow: 0 1px 1px rgba(256, 256, 256, 1);*/
    }

    tr:hover td {
    background: rgba(0, 0, 0, 0.85);
    color: #FFFFFF;
    }

    tr:first-child {
    border-top: none;
    }

    tr:last-child {
    border-bottom: none;
    }


    /*
    tr:nth-child(odd) td {
    background: rgba(255, 255, 255, 0.2);
    }
    */


    /*
    tr:nth-child(odd):hover td {
    background: rgba(0, 0, 0, 0.5);
    }
    */


    /*
    tr:last-child td:first-child {
    border-bottom-left-radius: 3px;
    }
    */


    /*
    tr:last-child td:last-child {
    border-bottom-right-radius: 3px;
    }
    */

    td {
    padding: 10px;
    text-align: left;
    vertical-align: middle;
    font-weight: 300;
    font-size: 16px;
    /* text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);*/
    }


    /*
    td:last-child {
    border-right: 0px;
    }
    */

    th.text-left {
    text-align: left;
    }

    th.text-center {
    text-align: center;
    }

    th.text-right {
    text-align: right;
    }

    td.text-left {
    text-align: left;
    }

    td.text-center {
    text-align: center;
    }

    td.text-right {
    text-align: right;
    }</script>

    <script id="jsbin-source-javascript" type="text/javascript">var colors = new Array(
    [62, 35, 255], [60, 255, 60], [255, 35, 98], [45, 175, 230], [255, 0, 255], [255, 128, 0]);
    var step = 0;
    //color table indices for:
    // current color left
    // next color left
    // current color right
    // next color right
    var colorIndices = [0, 1, 2, 3];
    //transition speed var gradientSpeed = 0.002;
    var gradientSpeed = 0.001;

    function updateGradient() {
    if ($ === undefined) return;
    var c0_0 = colors[colorIndices[0]];
    var c0_1 = colors[colorIndices[1]];
    var c1_0 = colors[colorIndices[2]];
    var c1_1 = colors[colorIndices[3]];
    var istep = 1 - step;
    var r1 = Math.round(istep * c0_0[0] + step * c0_1[0]);
    var g1 = Math.round(istep * c0_0[1] + step * c0_1[1]);
    var b1 = Math.round(istep * c0_0[2] + step * c0_1[2]);
    var color1 = "rgb(" + r1 + "," + g1 + "," + b1 + ")";
    var r2 = Math.round(istep * c1_0[0] + step * c1_1[0]);
    var g2 = Math.round(istep * c1_0[1] + step * c1_1[1]);
    var b2 = Math.round(istep * c1_0[2] + step * c1_1[2]);
    var color2 = "rgb(" + r2 + "," + g2 + "," + b2 + ")";
    $('#gradient').css({
    background: "-webkit-gradient(linear, left top, right top, from(" + color1 + "), to(" + color2 + "))"
    }).css({
    background: "-moz-linear-gradient(left, " + color1 + " 0%, " + color2 + " 100%)"
    });
    step += gradientSpeed;
    if (step >= 1) {
    step %= 1;
    colorIndices[0] = colorIndices[1];
    colorIndices[2] = colorIndices[3];
    //pick two new target color indices
    //do not pick the same as the current one
    colorIndices[1] = (colorIndices[1] + Math.floor(1 + Math.random() * (colors.length - 1))) % colors.length;
    colorIndices[3] = (colorIndices[3] + Math.floor(1 + Math.random() * (colors.length - 1))) % colors.length;
    }
    }
    setInterval(updateGradient, 10);</script></body>

    </html>
    166 changes: 166 additions & 0 deletions jsbin.qusijiq.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,166 @@
    body {
    font-size: 16px;
    font-weight: 400;
    text-rendering: optimizeLegibility;
    background-color: #000000;
    padding: 0px;
    margin: 0px;
    }

    #gradient {
    width: 100%;
    padding: 0px;
    margin: 0px;
    }

    .album-view-song-list {
    margin: 1.5rem auto;
    font-family: 'Questrial', sans-serif;
    font-weight: 300;
    font-size: .85em;
    border-collapse: collapse;
    margin: auto;
    width: 100%;
    }

    .album-view-song-item {
    height: 4rem;
    }

    .song-item-number {
    width: 3%;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    }

    .song-item-title {
    width: 40%;
    }

    .artist {
    width: 45%;
    }

    .song-item-duration {
    width: 4%;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    }

    .song-item-count {
    width: 3%;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    }

    .album-view-song-list {
    margin: 1.5rem auto;
    font-weight: 300;
    font-size: 1em;
    }

    .album-view-song-item {
    height: 3rem;
    }

    th {
    color: rgba(255, 255, 255, 0.5);
    background: rgba(30, 30, 30, 0.6);
    font-family: 'Open Sans 400', sans-serif;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 100;
    padding: 10px;
    text-align: left;
    vertical-align: middle;
    }

    tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
    font-weight: normal;
    background: rgba(0, 0, 0, 0.75);
    /* text-shadow: 0 1px 1px rgba(256, 256, 256, 1);*/
    }

    tr:hover td {
    background: rgba(0, 0, 0, 0.85);
    color: #FFFFFF;
    }

    tr:first-child {
    border-top: none;
    }

    tr:last-child {
    border-bottom: none;
    }


    /*
    tr:nth-child(odd) td {
    background: rgba(255, 255, 255, 0.2);
    }
    */


    /*
    tr:nth-child(odd):hover td {
    background: rgba(0, 0, 0, 0.5);
    }
    */


    /*
    tr:last-child td:first-child {
    border-bottom-left-radius: 3px;
    }
    */


    /*
    tr:last-child td:last-child {
    border-bottom-right-radius: 3px;
    }
    */

    td {
    padding: 10px;
    text-align: left;
    vertical-align: middle;
    font-weight: 300;
    font-size: 16px;
    /* text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);*/
    }


    /*
    td:last-child {
    border-right: 0px;
    }
    */

    th.text-left {
    text-align: left;
    }

    th.text-center {
    text-align: center;
    }

    th.text-right {
    text-align: right;
    }

    td.text-left {
    text-align: left;
    }

    td.text-center {
    text-align: center;
    }

    td.text-right {
    text-align: right;
    }
    44 changes: 44 additions & 0 deletions jsbin.qusijiq.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,44 @@
    var colors = new Array(
    [62, 35, 255], [60, 255, 60], [255, 35, 98], [45, 175, 230], [255, 0, 255], [255, 128, 0]);
    var step = 0;
    //color table indices for:
    // current color left
    // next color left
    // current color right
    // next color right
    var colorIndices = [0, 1, 2, 3];
    //transition speed var gradientSpeed = 0.002;
    var gradientSpeed = 0.001;

    function updateGradient() {
    if ($ === undefined) return;
    var c0_0 = colors[colorIndices[0]];
    var c0_1 = colors[colorIndices[1]];
    var c1_0 = colors[colorIndices[2]];
    var c1_1 = colors[colorIndices[3]];
    var istep = 1 - step;
    var r1 = Math.round(istep * c0_0[0] + step * c0_1[0]);
    var g1 = Math.round(istep * c0_0[1] + step * c0_1[1]);
    var b1 = Math.round(istep * c0_0[2] + step * c0_1[2]);
    var color1 = "rgb(" + r1 + "," + g1 + "," + b1 + ")";
    var r2 = Math.round(istep * c1_0[0] + step * c1_1[0]);
    var g2 = Math.round(istep * c1_0[1] + step * c1_1[1]);
    var b2 = Math.round(istep * c1_0[2] + step * c1_1[2]);
    var color2 = "rgb(" + r2 + "," + g2 + "," + b2 + ")";
    $('#gradient').css({
    background: "-webkit-gradient(linear, left top, right top, from(" + color1 + "), to(" + color2 + "))"
    }).css({
    background: "-moz-linear-gradient(left, " + color1 + " 0%, " + color2 + " 100%)"
    });
    step += gradientSpeed;
    if (step >= 1) {
    step %= 1;
    colorIndices[0] = colorIndices[1];
    colorIndices[2] = colorIndices[3];
    //pick two new target color indices
    //do not pick the same as the current one
    colorIndices[1] = (colorIndices[1] + Math.floor(1 + Math.random() * (colors.length - 1))) % colors.length;
    colorIndices[3] = (colorIndices[3] + Math.floor(1 + Math.random() * (colors.length - 1))) % colors.length;
    }
    }
    setInterval(updateGradient, 10);