Python
import requests
from bs4 import BeautifulSoup
import css_parser
from urllib.parse import urljoin, urlparse
import os

def copy_website(url):
    # Fetch the page
    response = requests.get(url, headers={
        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36'
    })
    soup = BeautifulSoup(response.content, 'html.parser')
    
    # Download all assets
    download_assets(soup, url)
    
    # Extract and inline critical CSS
    inline_styles(soup, url)
    
    # Add responsive viewport if missing
    if not soup.find('meta', attrs={'name': 'viewport'}):
        viewport = soup.new_tag('meta', **{'name': 'viewport', 'content': 'width=device-width, initial-scale=1'})
        soup.head.append(viewport)
    
    return str(soup.prettify())

Progress:

• Fetch source HTML - Get the original page with proper headers
• Download all assets - CSS files, images, fonts, JS (in order of dependency)
• Extract computed styles - Capture inline styles and CSS rules
• Recreate responsive breakpoints - Identify and preserve media queries
• Handle dynamic content - Capture JavaScript-rendered elements
• Test mobile/desktop views - Verify layouts match at different screen sizes
• Optimize asset loading - Inline critical CSS, compress images

Detailed Steps:

1. Asset Discovery & Download

Python
def download_assets(soup, base_url):
    assets = {
        'css': soup.find_all('link', rel='stylesheet'),
        'images': soup.find_all('img'),
        'scripts': soup.find_all('script', src=True),
        'fonts': []  # Extract from CSS @font-face rules
    }
    
    for asset_type, elements in assets.items():
        for element in elements:
            src = element.get('href') or element.get('src')
            if src:
                full_url = urljoin(base_url, src)
                local_path = download_file(full_url)
                element[src.split('=')[0]] = local_path

2. Style Extraction

Python
def extract_styles(soup, url):
    # Get all CSS files
    css_files = [urljoin(url, link.get('href')) for link in soup.find_all('link', rel='stylesheet')]
    
    # Combine all CSS
    combined_css = ""
    for css_url in css_files:
        response = requests.get(css_url)
        combined_css += response.text + "\n"
    
    # Parse and extract media queries
    parser = css_parser.CSSParser()
    stylesheet = parser.parseString(combined_css)
    
    return stylesheet

3. Responsive Layout Capture

Python
def capture_responsive_layouts(url):
    from selenium import webdriver
    from selenium.webdriver.chrome.options import Options
    
    options = Options()
    options.add_argument('--headless')
    
    layouts = {}
    viewports = [
        {'name': 'mobile', 'width': 375, 'height': 667},
        {'name': 'tablet', 'width': 768, 'height': 1024},
        {'name': 'desktop', 'width': 1920, 'height': 1080}
    ]
    
    driver = webdriver.Chrome(options=options)
    
    for viewport in viewports:
        driver.set_window_size(viewport['width'], viewport['height'])
        driver.get(url)
        layouts[viewport['name']] = {
            'html': driver.page_source,
            'computed_styles': driver.execute_script("""
                return Array.from(document.querySelectorAll('*')).map(el => ({
                    selector: el.tagName.toLowerCase() + (el.id ? '#' + el.id : '') + (el.className ? '.' + el.className.split(' ').join('.') : ''),
                    styles: window.getComputedStyle(el)
                }));
            """)
        }
    
    return layouts