FLASK

Flask JACKETS Architecture & Live Route Workbench

Routes:
http://127.0.0.1:5000
WSGI URL Rule: @app.route('/product/<int:id>') → View Handler: product(id=2) → Jinja Extends: base.html ← product.html → Active Block: {% block content %}
PROJECT EXPLORER (jackets/) Flask 3.0.x
WSGI Execution Telemetry
Matched Endpoint: product_detail
HTTP Status Code: 200 OK
View Function: def product(id):
Resolved Template: templates/product.html
Extends Parent: templates/base.html
Template Context Payload: 

        

      

    


    
    

      

        
        
        
        
      

      

    


    
    

      

        
        
        
        http://127.0.0.1:5000/product/2
      


      
      

        
        
      


      

        
      

    

  


  
  

  
Super generates helpful tools and automates fact-checking across the internet proactively. If you enjoyed this tool, build your own with Super and share it with a friend.




`,
        'templates/index.html': `{% extends "base.html" %}

{% block title %}JACKETS | Premium Outerwear Showcase{% endblock %}

{% block content %}


  
ENGINEERED FOR THE ELEMENTS

  
Technical craftsmanship meets architectural wool tailoring.

  Explore All Jackets




Featured Curations



  {% for product in featured %}
    

      

        {{ product.badge }}
      

      

        
{{ product.name }}

        
\${{ product.price }}

      

    

  {% endfor %}


{% endblock %}
`,
        'templates/shop.html': `{% extends "base.html" %}

{% block title %}Catalog | JACKETS Storefront{% endblock %}

{% block content %}

Complete Outerwear Archive


Full collection of performance parkas, bombers, and field jackets.




  {% for product in products %}
    

      

        {{ product.badge }}
      

      

        
{{ product.name }}

        
\${{ product.price }}

        
{{ product.desc }}

      

    

  {% endfor %}


{% endblock %}
`,
        'templates/product.html': `{% extends "base.html" %}

{% block title %}{{ product.name }} | JACKETS{% endblock %}

{% block content %}


  

    {{ product.badge }}
    
JACKET PREVIEW HERO

  

  

    
{{ product.category }}

    
{{ product.name }}

    
\${{ product.price }}

    
{{ product.desc }}

    
✓ In Stock • Free Express Shipping

    
  



{% endblock %}
`,
        'templates/contact.html': `{% extends "base.html" %}

{% block title %}Contact • JACKETS Studio{% endblock %}

{% block content %}

Contact Customer Concierge


Questions about sizing, custom waxing, or orders? Drop us a note.




  

    
    
  

  

    
    
  

  

    
    
  

  


{% endblock %}
`,
        'static/css/style.css': `/* JACKETS Brand Static Stylesheet */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  margin: 0;
  background: #fafafa;
  color: #111;
}
.sf-header {
  border-bottom: 1px solid #e5e7eb;
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
}
.sf-logo a {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 3px;
  text-decoration: none;
  color: #000;
}
.sf-nav a {
  margin-left: 20px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  color: #4b5563;
}
.sf-nav a:hover { color: #000; }
.sf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 20px;
}
.sf-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
}
.sf-btn {
  background: #000;
  color: #fff;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}
`,
        'requirements.txt': `flask>=3.0.0,<3.1.0\nWerkzeug>=3.0.0\nJinja2>=3.1.2\n`
      };

      // DOM Bindings
      const dom = {
        simUrlInput: document.getElementById('sim-url-input'),
        routeChips: document.querySelectorAll('.route-chip'),
        fileItems: document.querySelectorAll('.file-item[data-file]'),
        codeTabs: document.getElementById('code-tabs'),
        codeDisplay: document.getElementById('code-display'),
        sfChromeUrl: document.getElementById('sf-chrome-url'),
        sfMainContainer: document.getElementById('sf-main-container'),
        flowRule: document.getElementById('flow-rule'),
        flowFn: document.getElementById('flow-fn'),
        flowExtends: document.getElementById('flow-extends'),
        flowBlock: document.getElementById('flow-block'),
        telEndpoint: document.getElementById('tel-endpoint'),
        telStatus: document.getElementById('tel-status'),
        telViewFn: document.getElementById('tel-view-fn'),
        telTemplate: document.getElementById('tel-template'),
        telExtends: document.getElementById('tel-extends'),
        telContext: document.getElementById('tel-context'),
        btnReset: document.getElementById('btn-reset'),
        btnExportZip: document.getElementById('btn-export-zip'),
        sfNavHome: document.getElementById('sf-nav-home'),
        sfNavHomeLink: document.getElementById('sf-nav-home-link'),
        sfNavShopLink: document.getElementById('sf-nav-shop-link'),
        sfNavContactLink: document.getElementById('sf-nav-contact-link')
      };

      // Pure JS ZIP Builder to package Flask project cleanly with zero external CDN dependency
      function createZipArchive(files) {
        // Build an uncompressed (Store) standard ZIP byte array
        const textEncoder = new TextEncoder();
        const records = [];
        let offset = 0;

        for (const [name, content] of Object.entries(files)) {
          const nameBytes = textEncoder.encode(name);
          const dataBytes = textEncoder.encode(content);
          const crc = computeCrc32(dataBytes);

          // Local file header: 30 bytes + name length + data length
          const localHeader = new Uint8Array(30 + nameBytes.length);
          const lv = new DataView(localHeader.buffer);
          lv.setUint32(0, 0x04034b50, true); // Local header signature
          lv.setUint16(4, 20, true);         // Version needed
          lv.setUint16(6, 0, true);          // General purpose bit flag
          lv.setUint16(8, 0, true);          // Compression method: 0 (stored)
          lv.setUint16(10, 0, true);         // Mod time
          lv.setUint16(12, 0, true);         // Mod date
          lv.setUint32(14, crc, true);       // CRC-32
          lv.setUint32(18, dataBytes.length, true); // Compressed size
          lv.setUint32(22, dataBytes.length, true); // Uncompressed size
          lv.setUint16(26, nameBytes.length, true); // File name length
          lv.setUint16(28, 0, true);         // Extra field length
          localHeader.set(nameBytes, 30);

          records.push({
            nameBytes,
            dataBytes,
            localHeader,
            offset,
            crc,
            length: dataBytes.length
          });

          offset += localHeader.length + dataBytes.length;
        }

        // Central Directory
        const centralStart = offset;
        const centralRecords = [];
        let centralSize = 0;

        for (const r of records) {
          const cd = new Uint8Array(46 + r.nameBytes.length);
          const cv = new DataView(cd.buffer);
          cv.setUint32(0, 0x02014b50, true); // Central directory signature
          cv.setUint16(4, 20, true);         // Version made by
          cv.setUint16(6, 20, true);         // Version needed
          cv.setUint16(8, 0, true);          // General flag
          cv.setUint16(10, 0, true);         // Compression: 0
          cv.setUint16(12, 0, true);         // Time
          cv.setUint16(14, 0, true);         // Date
          cv.setUint32(16, r.crc, true);     // CRC-32
          cv.setUint32(20, r.length, true);  // Compressed
          cv.setUint32(24, r.length, true);  // Uncompressed
          cv.setUint16(28, r.nameBytes.length, true);
          cv.setUint16(30, 0, true);         // Extra field length
          cv.setUint16(32, 0, true);         // Comment length
          cv.setUint16(34, 0, true);         // Disk start
          cv.setUint16(36, 0, true);         // Internal attributes
          cv.setUint32(38, 0, true);         // External attributes
          cv.setUint32(42, r.offset, true);  // Relative offset of local header
          cd.set(r.nameBytes, 46);
          centralRecords.push(cd);
          centralSize += cd.length;
        }

        // End of central directory record (22 bytes)
        const eocd = new Uint8Array(22);
        const ev = new DataView(eocd.buffer);
        ev.setUint32(0, 0x06054b50, true);
        ev.setUint16(4, 0, true);
        ev.setUint16(6, 0, true);
        ev.setUint16(8, records.length, true);
        ev.setUint16(10, records.length, true);
        ev.setUint32(12, centralSize, true);
        ev.setUint32(16, centralStart, true);
        ev.setUint16(20, 0, true);

        // Combine all chunks into one Blob
        const parts = [];
        for (const r of records) {
          parts.push(r.localHeader);
          parts.push(r.dataBytes);
        }
        for (const cd of centralRecords) {
          parts.push(cd);
        }
        parts.push(eocd);

        return new Blob(parts, { type: 'application/zip' });
      }

      function computeCrc32(bytes) {
        let table = window._crcTable;
        if (!table) {
          table = new Uint32Array(256);
          for (let i = 0; i < 256; i++) {
            let c = i;
            for (let k = 0; k < 8; k++) {
              c = (c & 1) ? (0xedb88320 ^ (c >>> 1)) : (c >>> 1);
            }
            table[i] = c;
          }
          window._crcTable = table;
        }
        let crc = 0 ^ (-1);
        for (let i = 0; i < bytes.length; i++) {
          crc = (crc >>> 8) ^ table[(crc ^ bytes[i]) & 0xff];
        }
        return (crc ^ (-1)) >>> 0;
      }

      // Route Dispatch & Jinja Simulation Engine
      function dispatchRoute(path, method, formData) {
        STATE.activeRoute = path;
        STATE.httpMethod = method || 'GET';
        STATE.formSubmission = formData || null;

        dom.simUrlInput.value = path;
        dom.sfChromeUrl.textContent = `http://127.0.0.1:5000${path}`;

        // Sync active chip
        dom.routeChips.forEach(chip => {
          const cRoute = chip.dataset.route;
          const cMethod = chip.dataset.method;
          const matches = (cRoute === path && cMethod === STATE.httpMethod);
          chip.classList.toggle('active', matches);
        });

        // Resolve WSGI Handler
        let endpoint = 'not_found';
        let statusCode = 200;
        let viewFn = 'unknown';
        let template = '';
        let extendsParent = 'templates/base.html';
        let context = {};
        let renderedHtml = '';

        if (path === '/' || path === '') {
          endpoint = 'home';
          viewFn = 'def home():';
          template = 'templates/index.html';
          context = {
            featured: STATE.inventory.filter(p => !!p.badge)
          };
          renderedHtml = renderIndexView(context.featured);
        } else if (path === '/shop') {
          endpoint = 'shop';
          viewFn = 'def shop():';
          template = 'templates/shop.html';
          context = {
            products: STATE.inventory
          };
          renderedHtml = renderShopView(context.products);
        } else if (path.startsWith('/product/')) {
          const idStr = path.split('/')[2];
          const id = parseInt(idStr, 10);
          STATE.requestParams = { id };
          const found = STATE.inventory.find(p => p.id === id);

          if (found) {
            endpoint = 'product_detail';
            viewFn = 'def product(id):';
            template = 'templates/product.html';
            context = {
              in_stock: true,
              price: found.price,
              product_id: found.id,
              product_name: found.name
            };
            renderedHtml = renderProductView(found);
          } else {
            endpoint = 'product_detail';
            statusCode = 404;
            viewFn = 'def product(id):';
            template = 'templates/product.html';
            context = { error: 'Product not found', requested_id: id };
            renderedHtml = `
404 Not Found
No jacket exists with ID #${id}
Return to Shop
`;
          }
        } else if (path === '/contact') {
          endpoint = 'contact';
          viewFn = 'def contact():';
          template = 'templates/contact.html';
          if (method === 'POST') {
            const submitter = formData?.name || 'Customer';
            context = {
              flash_category: 'success',
              flash_message: `Thank you, ${submitter}! Your message has been received.`
            };
            renderedHtml = renderContactView(context.flash_message);
          } else {
            context = {};
            renderedHtml = renderContactView(null);
          }
        } else {
          statusCode = 404;
          endpoint = 'handle_404';
          viewFn = 'Flask default errorhandler';
          template = 'built-in 404';
          renderedHtml = `
404 Not Found
The requested URL was not found on the server.
`;
        }

        // Update telemetry panel
        dom.telEndpoint.textContent = endpoint;
        dom.telStatus.textContent = `${statusCode} ${statusCode === 200 ? 'OK' : (statusCode === 404 ? 'NOT FOUND' : '')}`;
        dom.telStatus.style.color = statusCode === 200 ? '#4ade80' : '#f87171';
        dom.telViewFn.textContent = viewFn;
        dom.telTemplate.textContent = template;
        dom.telExtends.textContent = extendsParent;
        dom.telContext.textContent = JSON.stringify(context, null, 2);

        // Update breadcrumb
        dom.flowRule.textContent = path.startsWith('/product/') ? "@app.route('/product/')" : `@app.route('${path}')`;
        dom.flowFn.textContent = path.startsWith('/product/') ? `product(id=${STATE.requestParams?.id || 1})` : `${endpoint}()`;
        dom.flowExtends.textContent = `base.html \u2190 ${template.replace('templates/', '')}`;

        // Render to live viewport
        dom.sfMainContainer.innerHTML = renderedHtml;

        // Auto-select template in code viewer for visual inspection
        if (PROJECT_FILES[template]) {
          selectFile(template);
        }

        // Attach dynamic storefront event handlers
        attachStorefrontListeners();
      }

      function renderIndexView(featured) {
        return `
          

            
ENGINEERED FOR THE ELEMENTS

            
ARCHITECTURAL OUTERWEAR

            
Tested against gale-force gusts and metropolitan commutes. Handcrafted from Scottish melton wool and waterproof tech shells.

            
          


          

            
Featured Curations

            ${featured.length} curated styles
          


          

            ${featured.map(item => `
              

                

                  ${item.badge}
                  JACKET #${item.id}
                

                

                  
${item.name}

                  
$${item.price}

                  
${item.desc}

                

              

            `).join('')}
          

        `;
      }

      function renderShopView(products) {
        return `
          

            
Complete Outerwear Archive

            
Full seasonal stock including insulated bombers, waterproof shells, and heritage wax jackets.

          


          

            ${products.map(item => `
              

                

                  ${item.badge}
                  JACKET #${item.id}
                

                

                  
${item.category}

                  
${item.name}

                  
$${item.price}

                  
${item.desc}

                

              

            `).join('')}
          

        `;
      }

      function renderProductView(product) {
        return `
          

            

              ${product.badge}
              

                
🧊

                
${product.name}

                
SKU: JCKT-00${product.id}

              

            

            

              
${product.category} COLLECTION

              
${product.name}

              
$${product.price}

              
${product.desc}

              

                ✓ In Stock • Free Global Shipping
              

              
            

          

        `;
      }

      function renderContactView(flashMsg) {
        return `
          ${flashMsg ? `
            

              ✓
              ${flashMsg}
            

          ` : ''}

          

            
Contact Concierge

            
Submit a POST request to simulated route /contact.


            

              

                
                
              

              

                
                
              

              

                
                
              

              
            

          

        `;
      }

      function attachStorefrontListeners() {
        // Product cards click -> route to detail
        const cards = dom.sfMainContainer.querySelectorAll('.sf-card');
        cards.forEach(card => {
          card.addEventListener('click', () => {
            const id = card.dataset.productId;
            dispatchRoute(`/product/${id}`, 'GET');
          });
        });

        const heroBtn = dom.sfMainContainer.querySelector('#sf-hero-shop-btn');
        if (heroBtn) {
          heroBtn.addEventListener('click', () => dispatchRoute('/shop', 'GET'));
        }

        const addBagBtn = dom.sfMainContainer.querySelector('#btn-add-bag');
        if (addBagBtn) {
          addBagBtn.addEventListener('click', () => {
            addBagBtn.textContent = 'Added to Bag! \u2713';
            addBagBtn.style.background = '#16a34a';
            setTimeout(() => {
              const currentItem = STATE.inventory.find(p => p.id === STATE.requestParams.id);
              if (currentItem) {
                addBagBtn.textContent = `Add To Bag \u2022 $${currentItem.price}`;
                addBagBtn.style.background = '#000';
              }
            }, 1600);
          });
        }

        const contactForm = dom.sfMainContainer.querySelector('#sf-contact-form');
        if (contactForm) {
          contactForm.addEventListener('submit', (e) => {
            e.preventDefault();
            const name = document.getElementById('sf-form-name').value;
            const email = document.getElementById('sf-form-email').value;
            const message = document.getElementById('sf-form-message').value;
            dispatchRoute('/contact', 'POST', { name, email, message });
          });
        }
      }

      // File Selection and Code Rendering
      function selectFile(filePath) {
        if (!PROJECT_FILES[filePath]) return;
        STATE.selectedFile = filePath;

        // Tree highlight
        dom.fileItems.forEach(item => {
          item.classList.toggle('active', item.dataset.file === filePath);
        });

        // Tabs highlight
        const tabs = dom.codeTabs.querySelectorAll('.code-tab');
        tabs.forEach(tab => {
          tab.classList.toggle('active', tab.dataset.file === filePath);
        });

        // Display code
        dom.codeDisplay.textContent = PROJECT_FILES[filePath];
      }

      // Event Wiring
      window.__dispatch = dispatchRoute;

      dom.routeChips.forEach(chip => {
        chip.addEventListener('click', () => {
          const r = chip.dataset.route;
          const m = chip.dataset.method;
          dispatchRoute(r, m);
        });
      });

      dom.simUrlInput.addEventListener('keydown', (e) => {
        if (e.key === 'Enter') {
          let val = dom.simUrlInput.value.trim();
          if (!val.startsWith('/')) val = '/' + val;
          dispatchRoute(val, 'GET');
        }
      });

      dom.fileItems.forEach(item => {
        item.addEventListener('click', () => {
          const f = item.dataset.file;
          if (f) selectFile(f);
        });
      });

      dom.codeTabs.querySelectorAll('.code-tab').forEach(tab => {
        tab.addEventListener('click', () => {
          selectFile(tab.dataset.file);
        });
      });

      // Storefront Nav header links
      dom.sfNavHome.addEventListener('click', () => dispatchRoute('/', 'GET'));
      dom.sfNavHomeLink.addEventListener('click', () => dispatchRoute('/', 'GET'));
      dom.sfNavShopLink.addEventListener('click', () => dispatchRoute('/shop', 'GET'));
      dom.sfNavContactLink.addEventListener('click', () => dispatchRoute('/contact', 'GET'));

      // Reset Action
      dom.btnReset.addEventListener('click', () => {
        dispatchRoute('/product/2', 'GET');
        selectFile('templates/product.html');
      });

      // Export Complete Flask Project Action (ZIP creation)
      dom.btnExportZip.addEventListener('click', () => {
        const filesToExport = {
          'app.py': PROJECT_FILES['app.py'],
          'requirements.txt': PROJECT_FILES['requirements.txt'],
          'static/css/style.css': PROJECT_FILES['static/css/style.css'],
          'templates/base.html': PROJECT_FILES['templates/base.html'],
          'templates/index.html': PROJECT_FILES['templates/index.html'],
          'templates/shop.html': PROJECT_FILES['templates/shop.html'],
          'templates/product.html': PROJECT_FILES['templates/product.html'],
          'templates/contact.html': PROJECT_FILES['templates/contact.html'],
          'README.md': `# JACKETS - Flask E-Commerce Project

Built from the Stackademic tutorial: 'How a single Python Library helped me create my (Project website)'.

## Getting Started
1. Install Flask:
   \`\`\`bash
   pip install -r requirements.txt
   \`\`\`
2. Run the application:
   \`\`\`bash
   python -m flask --app app run --debug
   \`\`\`
3. Open your browser at: http://127.0.0.1:5000/
`
        };

        const zipBlob = createZipArchive(filesToExport);
        const downloadUrl = URL.createObjectURL(zipBlob);
        const a = document.createElement('a');
        a.href = downloadUrl;
        a.download = 'jackets_flask_project.zip';
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);

        // Expose for QA inspection channel
        globalThis.__codexQaLastDownload = {
          filename: 'jackets_flask_project.zip',
          blob: zipBlob,
          size: zipBlob.size
        };

        const prevLabel = dom.btnExportZip.innerHTML;
        dom.btnExportZip.innerHTML = '✓ Project Exported!';
        setTimeout(() => { dom.btnExportZip.innerHTML = prevLabel; }, 2000);
      });

      // Initialize with representative fixture
      dispatchRoute('/product/2', 'GET');
      selectFile('templates/product.html');
    })();