feat: Add comprehensive documentation suite and reorganize project structure

- Created complete documentation in docs/ directory
- Added PROJECT_OVERVIEW.md with feature highlights and getting started guide
- Added ARCHITECTURE.md with system design and technical details
- Added SECURITY.md with comprehensive security implementation guide
- Added DEVELOPMENT.md with development workflows and best practices
- Added DEPLOYMENT.md with production deployment instructions
- Added API.md with complete REST API documentation
- Added CONTRIBUTING.md with contribution guidelines
- Added CHANGELOG.md with version history and migration notes
- Reorganized all documentation files into docs/ directory for better organization
- Updated README.md with proper documentation links and quick navigation
- Enhanced project structure with professional documentation standards

f_scripts/fe/js/breakpoints.js

@@ -0,0 +1,90 @@
+/*
+	Breakpoints.js
+	version 1.0
+	
+	Creates handy events for your responsive design breakpoints
+	
+	Copyright 2011 XOXCO, Inc
+	http://xoxco.com/
+
+	Documentation for this plugin lives here:
+	http://xoxco.com/projects/code/breakpoints
+	
+	Licensed under the MIT license:
+	http://www.opensource.org/licenses/mit-license.php
+
+*/
+(function($) {
+
+	var lastSize = 0;
+	var interval = null;
+
+	$.fn.resetBreakpoints = function() {
+		$(window).unbind('resize');
+		if (interval) {
+			clearInterval(interval);
+		}
+		lastSize = 0;
+	};
+	
+	$.fn.setBreakpoints = function(settings) {
+		var options = jQuery.extend({
+							distinct: true,
+							breakpoints: new Array(320,480,768,980,1200)
+				    	},settings);
+
+
+		interval = setInterval(function() {
+	
+			var w = $(window).width();
+			var done = false;
+			
+			for (var bp in options.breakpoints.sort(function(a,b) { return (b-a) })) {
+			
+				// fire onEnter when a browser expands into a new breakpoint
+				// if in distinct mode, remove all other breakpoints first.
+				if (!done && w >= options.breakpoints[bp] && lastSize < options.breakpoints[bp]) {
+					if (options.distinct) {
+						for (var x in options.breakpoints.sort(function(a,b) { return (b-a) })) {
+							if ($('body').hasClass('media-width-' + options.breakpoints[x])) {
+								$('body').removeClass('media-width-' + options.breakpoints[x]);
+								$(window).trigger('exitMedia' + options.breakpoints[x]);
+							}
+						}
+						done = true;
+					}
+					$('body').addClass('media-width-' + options.breakpoints[bp]);
+					$(window).trigger('enterMedia' + options.breakpoints[bp]);
+
+				}				
+
+				// fire onExit when browser contracts out of a larger breakpoint
+				if (w < options.breakpoints[bp] && lastSize >= options.breakpoints[bp]) {
+					$('body').removeClass('media-width-' + options.breakpoints[bp]);
+					$(window).trigger('exitMedia' + options.breakpoints[bp]);
+
+				}
+				
+				// if in distinct mode, fire onEnter when browser contracts into a smaller breakpoint
+				if (
+					options.distinct && // only one breakpoint at a time
+					w >= options.breakpoints[bp] && // and we are in this one
+					w < options.breakpoints[bp-1] && // and smaller than the bigger one
+					lastSize > w && // and we contracted
+					lastSize >0 &&  // and this is not the first time
+					!$('body').hasClass('media-width-' + options.breakpoints[bp]) // and we aren't already in this breakpoint
+					) {					
+					$('body').addClass('media-width-' + options.breakpoints[bp]);
+					$(window).trigger('enterMedia' + options.breakpoints[bp]);
+
+				}						
+			}
+			
+			// set up for next call
+			if (lastSize != w) {
+				lastSize = w;
+			}
+		},250);
+	};
+	
+})(jQuery);