Main Content

CSS Editor

$(document).ready(function() { // Load initial main content and CSS options loadPageContent('page1'); loadCssOptions(); // Apply CSS button click handler $('#applyCss').click(function() { applyCss(); }); // Initialize gradient color pickers for background $('#backgroundGradientStart').colorpicker(); $('#backgroundGradientEnd').colorpicker(); // Initialize color picker for text color $('#textColorPicker').colorpicker(); // Initialize color picker for box-shadow $('#boxShadowColor').colorpicker(); // Initialize border radius pickers with allowed ranges $('#borderRadiusTopLeft').spinner({ min: 0, max: 18 }); $('#borderRadiusTopRight').spinner({ min: 0, max: 18 }); // Toggle box-shadow options based on checkbox $('#enableBoxShadow').change(function() { $('#boxShadowOptions').toggle(this.checked); }); // Page selection change handler $('#pageSelect').change(function() { var selectedPage = $(this).val(); loadPageContent(selectedPage); loadBorderRadiusOptions(selectedPage); loadGradientBackgroundOptions(selectedPage); loadBoxShadowColorOptions(selectedPage); }); // Initialize box-shadow options $('#boxShadowOptions').hide(); }); function applyCss() { var newCss = generateCss(); $('#mainContent').attr('style', newCss); $('#cssCodeOutput').text(newCss); } function loadPageContent(page) { $.get(page + '.php', function(data) { $('#mainContent').html(data); }); } function loadCssOptions() { $.get('css_options.json', function(data) { var options = JSON.parse(data); var select = $('#pageSelect'); select.empty(); $.each(options, function(key, value) { select.append($('