# Sqalli Events — Quick Reference Guide ## File Locations & Purposes | File | Purpose | Language | |------|---------|----------| | `public/index.php` | Main page, session setup, form display | PHP + HTML | | `public/css/style.css` | All styling, colors, animations, responsive | CSS3 | | `public/js/script.js` | Navigation, lightbox, form, interactions | Vanilla JS | | `public/includes/header.php` | Navigation, logo, mobile menu | PHP + HTML | | `public/includes/footer.php` | Footer, links, social, copyright | PHP + HTML | | `public/includes/whatsapp-button.php` | Floating WhatsApp button | PHP + HTML | | `public/includes/submit-form.php` | Form processing, validation, Google Sheets | PHP | --- ## Common Tasks ### Change Contact Information **File:** `public/index.php` ```php // Line 25-27, update these values: $site_config = [ 'phone' => '+212671746671', // Phone number 'whatsapp' => '212671746671', // WhatsApp (without +) 'email' => 'contact@sqalli-events.ma', ]; ``` **Also update:** - Footer: `public/includes/footer.php` (line 63-67) - Header: `public/includes/header.php` (line 25) - WhatsApp button: `public/includes/whatsapp-button.php` (line 8-9) --- ### Change Brand Colors **File:** `public/css/style.css` **Primary Gold Color** (lines 56-58): ```css --color-gold: #C49068; /* Primary accent */ --color-gold-deep: #A8784E; /* Darker for hover */ --color-gold-light: #F0E0CF; /* Light backgrounds */ ``` **Text Colors** (lines 48-54): ```css --color-dark: #1A1411; /* Headings */ --color-text: #4A3D37; /* Body text */ --color-text-light: #6E6560; /* Lighter text */ --color-text-muted: #9A9288; /* Muted text */ ``` --- ### Change Fonts **File:** `public/css/style.css` **Display Font** (line 72): ```css --font-display: 'Marcellus', 'Cormorant Garamond', Georgia, serif; ``` **Body Font** (line 74): ```css --font-body: 'DM Sans', 'Inter', system-ui, sans-serif; ``` **Also update HTML** in `public/index.php` (line 55): ```html ``` --- ### Enable Google Sheets Integration **File:** `public/includes/submit-form.php` **Line 55-57:** ```php $google_sheets_url = getenv('GOOGLE_SHEETS_WEBHOOK_URL'); // Or set directly: // $google_sheets_url = 'https://script.google.com/macros/s/YOUR_ID/usercontent'; ``` **Google Apps Script Setup:** 1. Go to [script.google.com](https://script.google.com) 2. Create new project 3. Paste this code: ```javascript function doPost(e) { const sheet = SpreadsheetApp.getActiveSheet(); const data = JSON.parse(e.postData.contents); sheet.appendRow([data.nom, data.telephone, data.ville, data.message, data.timestamp]); return ContentService.createTextOutput(JSON.stringify({success: true})); } ``` 4. Deploy → Select "Execute as me" → Copy URL → Set in `GOOGLE_SHEETS_WEBHOOK_URL` --- ### Customize Form Fields **File:** `public/index.php` **Add new field:** ```html
``` **Add validation (JavaScript):** ```javascript // In public/js/script.js, add to validators object: new_field: { el: $('#new-field'), error: $('#new-field-error'), validate: (val) => val.trim().length >= 2 ? '' : 'Please enter a valid value.', }, ``` --- ### Change Section Content **Hero Section:** `public/index.php` (lines 80-126) **About Section:** `public/index.php` (lines 131-200) **Story Section:** `public/index.php` (lines 205-238) **Services Section:** `public/index.php` (lines 243-297) **Gallery Section:** `public/index.php` (lines 302-336) **Why Us Section:** `public/index.php` (lines 341-386) **Contact Section:** `public/index.php` (lines 391-513) --- ### Update Gallery Images **File:** `public/index.php` (lines 302-336) ```html
Your description
Your description
``` **Image sizing recommendations:** - `gallery__item--large`: 600×700px (portrait) - `gallery__item--wide`: 800×400px (landscape) - Standard `gallery__item`: 400×480px (portrait) --- ### Configure Mobile Menu **File:** `public/js/script.js` (lines 58-119) **Menu behavior:** - Opens on burger button click - Closes on link click - Closes on overlay click - Closes on Escape key - Locks body scroll when open **Customize:** - Timeout on close: `setTimeout(() => {...}, 300)` - Add transition delay: Modify CSS `slideInNav` animation --- ### Modify Lightbox Gallery **File:** `public/js/script.js` (lines 272-464) **Customize colors:** ```javascript // Line 319: Change backdrop color background: rgba(57, 43, 37, 0.92); // Darker/lighter value // Line 351: Change accent color color: #D6A680; // Gold highlight color ``` **Change navigation buttons:** ```javascript // Lines 292-293: Change arrow symbols ``` --- ### Customize Form Validation **File:** `public/js/script.js` (lines 471-609) **Error messages:** ```javascript nom: { el: $('#nom'), error: $('#nom-error'), validate: (val) => val.trim().length >= 2 ? '' : 'Your custom error message', }, ``` **Validation rules:** - `length >= 2`: Minimum length - `regex test`: Pattern matching - `return ''`: Valid (no error) - `return 'message'`: Invalid (show error) --- ### Add CSS Animations **File:** `public/css/style.css` **Fade in on scroll:** ```css .your-element { opacity: 0; transition: opacity var(--transition-base); } .your-element.is-visible { opacity: 1; } ``` **Slide in on scroll:** ```css .your-element { transform: translateY(20px); opacity: 0; transition: transform var(--transition-base), opacity var(--transition-base); } .your-element.is-visible { transform: translateY(0); opacity: 1; } ``` **Add to JavaScript reveal targets** (lines 214-228): ```javascript const targets = [ '.your-element', // Add here // ... existing targets ]; ``` --- ### Change Header Transparency **File:** `public/js/script.js` (line 71) ```javascript const scrolled = window.scrollY > 40; // Change 40 to different value ``` **File:** `public/css/style.css` **Scrolled header background** (lines 407-412): ```css .site-header.is-scrolled { background-color: rgba(250, 250, 248, 0.97); /* Adjust opacity */ backdrop-filter: blur(14px); /* Adjust blur amount */ } ``` --- ### Add New Section **Step 1:** Add HTML in `public/index.php` ```html

Eyebrow Text

My Section Title
With emphasis

``` **Step 2:** Add CSS styling in `public/css/style.css` ```css .my-section { background-color: var(--color-warm); padding-block: var(--space-xl); } .my-section-item { /* Your styles */ } ``` **Step 3:** Add to navigation in `public/includes/header.php` ```html
  • My Section
    • ``` **Step 4:** Add to reveal list in `public/js/script.js` ```javascript const targets = [ '.my-section-item', // Add this // ... existing targets ]; ``` --- ### Enable Security Headers **File:** Apache `.htaccess` or Nginx config ```apache # .htaccess (Apache) Header set X-Content-Type-Options "nosniff" Header set X-Frame-Options "SAMEORIGIN" Header set X-XSS-Protection "1; mode=block" Header set Referrer-Policy "strict-origin-when-cross-origin" Header set Permissions-Policy "geolocation=(), microphone=(), camera=()" ``` ```nginx # Nginx add_header X-Content-Type-Options "nosniff"; add_header X-Frame-Options "SAMEORIGIN"; add_header X-XSS-Protection "1; mode=block"; add_header Referrer-Policy "strict-origin-when-cross-origin"; add_header Permissions-Policy "geolocation=(), microphone=(), camera=()"; ``` --- ## Performance Tips ### Image Optimization ```bash # Convert to WebP (requires cwebp) cwebp input.jpg -o output.webp # Compress JPEG jpegoptim --max=85 -o image.jpg # Compress PNG pngquant --speed 4 image.png ``` ### CSS/JS Minification ```bash # CSS npm install -g cleancss-cli cleancss -o style.min.css css/style.css # JavaScript npm install -g uglify-js uglifyjs js/script.js -o js/script.min.js ``` ### Enable Gzip ```apache # Apache .htaccess AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE application/javascript ``` --- ## Debugging ### Check Browser Console 1. Right-click → Inspect 2. Go to Console tab 3. Look for red errors 4. Check Network tab for failed requests ### Check Server Logs ```bash # PHP errors tail -f /var/log/php-fpm/error.log # Access logs tail -f /var/log/apache2/access.log # Error logs tail -f /var/log/apache2/error.log ``` ### Test Form Submission 1. Open browser dev tools (F12) 2. Go to Network tab 3. Fill and submit form 4. Check POST request to `submit-form.php` 5. View response (should show success message) --- ## Regular Maintenance ### Weekly - Check form submissions - Monitor error logs - Verify website loads correctly ### Monthly - Review analytics - Test all forms - Check Core Web Vitals ### Quarterly - Security audit - Update dependencies - Performance review ### Annually - Full code review - Update major components - Plan new features --- ## Helpful Resources - **Color Schemes:** https://coolors.co - **Typography:** https://fonts.google.com - **Performance:** https://web.dev/vitals - **Security:** https://owasp.org - **Accessibility:** https://www.w3.org/WAI - **PHP:** https://www.php.net/docs.php - **CSS:** https://developer.mozilla.org/en-US/docs/Web/CSS - **JavaScript:** https://developer.mozilla.org/en-US/docs/Web/JavaScript --- ## Emergency Contacts & Procedures ### If Form Stops Working 1. Check PHP error logs 2. Verify submit-form.php permissions (644) 3. Test with curl: `curl -X POST http://your-site.com/includes/submit-form.php` 4. Check PHP version is 7.4+ 5. Verify cURL is enabled: `php -r "echo extension_loaded('curl') ? 'yes' : 'no';"` ### If Images Don't Load 1. Check image file paths are correct 2. Verify image files exist in `/public/img/` 3. Check file permissions (644) 4. Test in different browsers 5. Clear browser cache (Ctrl+Shift+R) ### If Mobile Menu Broken 1. Clear browser cache 2. Check z-index conflicts in CSS 3. Verify all IDs in HTML match JS selectors 4. Test in different mobile browsers 5. Check for JavaScript errors in console --- ## Support & Documentation 📖 **Full Documentation:** See `REFACTORING_GUIDE.md` 📝 **Summary:** See `REFACTORING_SUMMARY.txt` ⚡ **Quick Tips:** This file For detailed information about security, performance, or architecture, refer to the comprehensive guides. --- **Last Updated:** June 15, 2026 **Version:** 2.0 (Production-Ready) **Status:** ✅ Maintained & Secure