event-log.html - This HTML code generates a web page for an…

/data/html/event-log.html

http://github.com/hbons/SparkleShare · HTML · 326 lines · 271 code · 53 blank · 2 comment · 0 complexity · 80465060245383a1b0490d2949bbce7c MD5 · raw file

<!doctype html>
<html>
    <head>
        <title>SparkleShare Event Log</title>
        <script type="text/javascript">
          <!-- $jquery -->
        </script>

        <script type="text/javascript">
          $(document).ready(function () {

              // Update the Today and Yesterday labels after midnight
              var midnight_interval = setInterval (function(){
                var date = new Date();

                if ((date.getTime() / 1000) >= <!-- $midnight -->) {
                  $("#today").html($("#today").attr("name"));
                  $("#yesterday").html($("#yesterday").attr("name"));

                  clearInterval(midnight_interval);
                }
              }, 60 * 1000);

          
              $('.comments-section').each (function () {
                if ($(this).find ('.comments').children ().size () < 1) {
                  $(this).hide ();
                }
              });

              $('.buddy-icon').each (function () {
                if ($(this).css('backgroundImage').indexOf ('@') != -1) {
                  $(this).css ('backgroundColor', '#fff');
                }
              });

              // Show the form when 'Add note' is clicked
              $('.note').click(function () {
                 $(this).parent ().find ('.comments-section').show ();
              });

              // Hide the 'Show all' link when there are less than 10 events
              $('.show').each (function () {
                var entries = $(this).parent ().find ('dl').children ().length;

                if (entries <= 10) {
                  $(this).hide ();
                } else {
                  // Append the number of entries
                  $(this).html ('Show all ' + entries);
                }
              });

              // When 'Show all' is clicked, show all collapsed events
              $('.show').click(function () {
                 $(this).parent ().find ('dl').children ().show ();
                 $(this).hide ();
              });

              $("input").click(function () {
                 textarea = $(this).parent ().find ('textarea');
                 text = textarea.val ();

                 if (text == '')
                     return;

                 // Clear the textarea
                 textarea.val ('');

                 table = $(this).parent ().find (".comments");
                 comments = table.html ();

                 // Add the note to the html
                 comments += '<div class="comment-text">' +
                             '<p class="comment-author"' +
                             ' style="background-image: url(\'<!-- $user-avatar-url -->\');">' +
                             '<!-- $username --></p>' +
                             text +
                             '</div>';

                 table.html (comments);

                 // Feed the note to the backend
                 location = this.id + '~' + text;
              });
          });
        </script>

        <style>
            * {
                box-sizing:         border-box;
                -webkit-box-sizing: border-box;
            }

            body {
                background-color: #fff;
                color:            <!-- $body-color -->;
                font-size:        <!-- $body-font-size -->;
                font-family:      <!-- $body-font-family -->;
                margin:           0;
                padding:          18px;
                -webkit-user-select: none;
            }

            small {
                font-size: <!-- $small-font-size -->;
                color:     <!-- $secondary-font-color -->;
            }

            .moved-arrow {
                color: <!-- $secondary-font-color -->;
            }

            .comment-text {
                font-size: 90%;
                padding: 12px;
                background-color: #FFF4DB;
                margin-bottom: 2px;
            }

            .day-entry-header {
                color: #aaa;
                margin-left: auto;
                margin-right: auto;
                display: block;
                text-align: center;
                margin-bottom: 36px;
                font-weight: bold;
            }

            .day-entry-content .event-entry:last-child {
                border: none;
            }
                        
            a {
                color:           <!-- $a-color -->;
                text-decoration: none;
            }

            a:hover {
                color: <!-- $a-hover-color -->;
            }

            .event-timestamp {
                float: left;
                font-size: 80%;
                color: <!-- $secondary-font-color -->;
            }

            .event-user-name {
                float: left;
                font-weight: bold;
            }

            .event-folder {
                float: right;
                color: <!-- $secondary-font-color -->;
            }

            .event-entry {
                margin-bottom: 24px;
                padding-bottom: 24px;
                border-bottom: 1px  <!-- $secondary-font-color --> solid;
                width: 95%;
                margin-left: auto;
                margin-right: auto;
                padding-left: 72px;
                padding-right: 12px;
                background-repeat: no-repeat;
                background-position: 12px top;
                display:        block;
            }

            .action {
                font-size: 80%;
                margin-left: 15px;
                float: right;
                margin-bottom: 9px;
                color: <!-- $a-color -->;
            }

            .action:hover {
                color: <!-- $a-hover-color -->;
                cursor: pointer;
            }

            .clearer {
                clear: both;
                backround-color: blue;
                margin: 0;
                padding: 0;
                height: 0;
            }

            .separator {
                clear: both;
                border-bottom: 1px #ccc solid;
                margin-top: 24px;
                margin-bottom: 24px;
            }

            dl {
                padding : 0;
                margin:  0;
                margin-bottom: 12px;
                padding-top: 6px;
                clear: both;
            }
            
            dd {
                display: none;
                overflow:            hidden;
                text-overflow:       ellipsis;
                width:               90%;
                padding:             0;
                padding-top:         2px;
                padding-bottom:      2px;
                padding-left:        20px;
                margin:              0;
                margin-bottom:       1px;
                background-repeat:   no-repeat;
                background-position: center left;
            }

            dl dd:nth-child(-n+10) {
                display: block;
            }

            .document {
                text-overflow: ellipsis;
                width: 100%;
                white-space: nowrap;
            }

            .added {
                background-image: url('<!-- $document-added-background-image -->');
            }

            .deleted {
                background-image: url('<!-- $document-deleted-background-image -->');
            }

            .edited {
                background-image: url('<!-- $document-edited-background-image -->');
            }

            .moved {
                background-image: url('<!-- $document-moved-background-image -->');
            }

            .no-buddy-icon {
                position: relative;
                top: 0;
                left: 0;
                float:               left;
                margin-right:        12px;
                width:               48px;
                background-image:    url('<!-- $no-buddy-icon-background-image -->');
                background-repeat:   no-repeat;
                background-position: top center; 
            }

            .buddy-icon {
                width:            48px;
                height:           48px;
            }

            .comments {
                width: 100%;
                font-size: 90%;
                margin-bottom: 9px;
            }

            .comment-author {
                font-size: 90%;
                font-weight: bold;
                margin: 0;
                margin-bottom: 9px;
                background-repeat: no-repeat;
                background-position: bottom left;
                background-size: 24px;
                height: 24px;
                padding-left: 30px;
                line-height: 24px;
            }

            .comment-timestamp {
                color: <!-- $secondary-font-color -->;
                text-align: right;
            }

            .comment-button {
                float:right;
                margin-top: 6px;
            }

            .comment-textarea {
                box-sizing:         border-box;
                -webkit-box-sizing: border-box;
                width:              100%;
                height:             3em;
                padding-bottom:     6px;
            }

            .comments-section {
                box-sizing:         border-box;
                -webkit-box-sizing: border-box;
                width:              100%;
            }

            .comments-wrapper {
                box-sizing:         border-box;
                -webkit-box-sizing: border-box;
                width:              100%;
                margin-top: 12px;
            }

            .comment-text {
                padding-bottom: 15px;
            }
        </style>
    </head>
    <body>
        <!-- $event-log-content -->
    </body>
</html>
Summary ✨

This HTML code generates a web page for an event log, displaying a list of events with timestamps and user information. It includes features like updating labels after midnight, hiding comments sections by default, and showing/hiding “Show all” links based on the number of entries. The page also allows users to add notes and view comments in a textarea.
Alerts (2)

'style=' Inline CSS detected; use external stylesheets for maintainability and performance
76
'<style>' Inline CSS detected; use external stylesheets for maintainability and performance
89