Example Mozart components

1-header.json

{
    "head": [
        "<style>body { font-family: \"Helvetica\", \"Arial\", sans-serif; margin: 0; } #header { background-color: #bb1919; color: white; font-size: 48px; padding: 10px 0; font-family: \"Gill Sans\"; text-align: center; }</style>"    
    ],
    "bodyInline": "<div id=\"header\">BBC NEWS</div>",
    "bodyLast": []
}

2-body.json

{
    "head": [
        "<style>#content { margin: 0 auto; max-width: 700px; } img { height:100px; padding: 2px; }</style>",
        "<script src=\"https://code.jquery.com/jquery-2.1.4.min.js\"></script>"
    ],
    "bodyInline":
        "<div id=\"content\"><h2>Demo page</h2><p>Hello, world!</p><p>There should be kittens here:</p><div id=\"kittens\"></div></div>",
    "bodyLast": [
        "<script>$.ajax('https://api.flickr.com/services/feeds/photos_public.gne?format=json&tags=kittens',{dataType: 'jsonp', jsonp: false, jsonpCallback: 'jsonFlickrFeed'}).success(function(data){for(var i=0; i<10; i++) {$(document.createElement('img')).attr('src', data.items[i].media.m).appendTo('#kittens');}});</script>"
    ]
}

3-footer.json

{
    "head": [
        "<style>#footer { margin: 10px auto; padding: 10px 0; max-width: 700px; border-top: 1px solid #333; }</style>"
    ],
    "bodyInline":
        "<div id=\"footer\">&copy; 2015 BBC</div>",
    "bodyLast": []
}