Class: Pindo::WebServer::ResponsivePreviewHandler

Inherits:

WEBrick::HTTPServlet::AbstractServlet

Object
WEBrick::HTTPServlet::AbstractServlet
Pindo::WebServer::ResponsivePreviewHandler

show all

Defined in:: lib/pindo/module/webserver/responsive_preview_handler.rb

Overview

响应式预览页面处理器

Instance Method Summary collapse

#do_GET(req, res) ⇒ Object
#initialize(server, root_dir, port, debug = false) ⇒ ResponsivePreviewHandler constructor

A new instance of ResponsivePreviewHandler.

Constructor Details

#initialize(server, root_dir, port, debug = false) ⇒ `ResponsivePreviewHandler`

Returns a new instance of ResponsivePreviewHandler.

# File 'lib/pindo/module/webserver/responsive_preview_handler.rb', line 9

def initialize(server, root_dir, port, debug=false)
    super(server)
    @root_dir = root_dir
    @port = port
    @debug = debug
end

Instance Method Details

#do_GET(req, res) ⇒ `Object`

# File 'lib/pindo/module/webserver/responsive_preview_handler.rb', line 16

def do_GET(req, res)
    # 预定义设备尺寸
    devices = {
        'iPhone 16 Pro Max' => { width: 430, height: 932 },
        'iPhone 16' => { width: 393, height: 852 },
        'iPhone X' => { width: 375, height: 812 },
        'iPhone 8 Plus' => { width: 414, height: 736 },
        'iPhone 8' => { width: 375, height: 667 },
        'iPhone 5s' => { width: 320, height: 568 },
        'iPad Mini' => { width: 768, height: 1024 },
        'iPad Pro 11"' => { width: 834, height: 1194 },
        'iPad Pro 12.9"' => { width: 1024, height: 1366 },
        'Galaxy Note 8' => { width: 360, height: 740 },
        'Galaxy S5' => { width: 360, height: 640 },
        'Nexus 5' => { width: 360, height: 640 },
        'Lumia 920' => { width: 384, height: 640 },
        'MacBook Pro' => { width: 1440, height: 900 },
        '标准桌面' => { width: 1280, height: 720 },
        '宽屏桌面' => { width: 1920, height: 1080 }
    }

    html = <<-HTML
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>WebGL预览</title>
        <style>
            :root {
                --bg-color: #f9f9fb;
                --primary-color: #6166f1;
                --secondary-color: #f5f5f7;
                --text-color: #333;
                --border-color: #e0e0e5;
                --header-height: 60px;
                --device-frame-color: #e2e2e7;
            }
            
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
                -webkit-overflow-scrolling: touch;
            }
            
            body {
                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
                background-color: var(--bg-color);
                color: var(--text-color);
                line-height: 1.5;
                height: 100vh;
                display: flex;
                flex-direction: column;
                overflow: hidden;
            }
            
            .header {
                height: var(--header-height);
                background-color: white;
                border-bottom: 1px solid var(--border-color);
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0 20px;
                box-shadow: 0 1px 3px rgba(0,0,0,0.05);
                z-index: 10;
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
            }
            
            .header-title {
                font-size: 18px;
                font-weight: 600;
                color: var(--text-color);
            }
            
            .header-controls {
                display: flex;
                align-items: center;
                gap: 16px;
            }
            
            .control-group {
                display: flex;
                align-items: center;
                gap: 12px;
            }
            
            .device-select {
                position: relative;
            }
            
            .device-select-button {
                display: flex;
                align-items: center;
                background: white;
                border: 1px solid var(--border-color);
                border-radius: 5px;
                padding: 6px 12px;
                font-size: 14px;
                cursor: pointer;
                min-width: 160px;
                justify-content: space-between;
            }
            
            .device-select-dropdown {
                position: absolute;
                top: 100%;
                left: 0;
                width: 240px;
                max-height: 350px;
                overflow-y: auto;
                background: white;
                border: 1px solid var(--border-color);
                border-radius: 5px;
                box-shadow: 0 4px 12px rgba(0,0,0,0.1);
                z-index: 100;
                display: none;
                margin-top: 5px;
            }
            
            .device-select-dropdown.active {
                display: block;
            }
            
            .device-option {
                padding: 8px 12px;
                cursor: pointer;
            }
            
            .device-option:hover {
                background-color: var(--secondary-color);
            }
            
            .dimensions-display {
                font-size: 14px;
                color: #666;
                border: 1px solid var(--border-color);
                padding: 6px 12px;
                border-radius: 5px;
                background: white;
            }
            
            .action-button {
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 0 12px;
                height: 36px;
                border-radius: 5px;
                border: 1px solid var(--border-color);
                background: white;
                cursor: pointer;
                transition: all 0.2s;
                font-size: 14px;
                white-space: nowrap;
            }
            
            .action-button:hover {
                background: var(--secondary-color);
            }
            
            .action-button svg {
                width: 16px;
                height: 16px;
                fill: #555;
                margin-right: 6px;
            }
            
            .action-button:hover svg {
                fill: var(--primary-color);
            }
            
            .main-content {
                position: fixed;
                top: var(--header-height);
                left: 0;
                right: 0;
                bottom: 0;
                display: flex;
                justify-content: center;
                align-items: flex-start;
                overflow: auto;
                padding: 0;
            }
            
            .device-container {
                position: relative;
                transition: all 0.3s ease;
                transform-origin: top center;
                margin-top: 0;
                padding: 0;
            }
            
            /* 横屏容器样式 */
            .device-container.landscape-container {
                padding: 0;
            }
            
            .device-frame {
                position: relative;
                margin: 0 auto;
                border: 12px solid var(--device-frame-color);
                border-radius: 36px;
                box-shadow: 0 8px 24px rgba(0,0,0,0.1);
                overflow: hidden;
                transition: all 0.3s ease;
                background: #000;
                transform-origin: center center;
                touch-action: none;
            }
            
            .device-frame.landscape {
                transform: rotate(90deg);
                transform-origin: center center;
            }
            
            .device-frame:before {
                content: '';
                position: absolute;
                top: 0;
                left: 50%;
                transform: translateX(-50%);
                width: 150px;
                height: 24px;
                background: var(--device-frame-color);
                border-bottom-left-radius: 16px;
                border-bottom-right-radius: 16px;
                z-index: 10;
            }
            
            .iframe-container {
                width: 100%;
                height: 100%;
                overflow: hidden;
                background: white;
                position: relative;
                touch-action: none;
            }
            
            .iframe-container iframe {
                border: none;
                width: 100%;
                height: 100%;
                display: block;
                position: absolute;
                top: 0;
                left: 0;
                margin: 0;
                padding: 0;
            }
            
            .loading {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                background: rgba(255,255,255,0.8);
                z-index: 20;
            }
            
            .spinner {
                width: 40px;
                height: 40px;
                border: 4px solid rgba(0,0,0,0.1);
                border-radius: 50%;
                border-top: 4px solid var(--primary-color);
                animation: spin 1s linear infinite;
            }
            
            @keyframes spin {
                0% { transform: rotate(0deg); }
                100% { transform: rotate(360deg); }
            }
            
            .custom-dimensions {
                position: absolute;
                top: calc(100% + 5px);
                left: 0;
                background: white;
                border: 1px solid var(--border-color);
                border-radius: 5px;
                padding: 15px;
                width: 280px;
                display: none;
                box-shadow: 0 4px 12px rgba(0,0,0,0.1);
                z-index: 100;
            }
            
            .custom-dimensions.active {
                display: block;
            }
            
            .dimension-inputs {
                display: flex;
                gap: 10px;
                margin-bottom: 10px;
            }
            
            .dimension-input-group {
                flex: 1;
            }
            
            .dimension-input-group label {
                display: block;
                font-size: 12px;
                margin-bottom: 5px;
                color: #666;
            }
            
            .dimension-input-group input {
                width: 100%;
                padding: 6px 8px;
                border: 1px solid var(--border-color);
                border-radius: 4px;
                font-size: 14px;
            }
            
            .apply-button {
                width: 100%;
                padding: 8px;
                background: var(--primary-color);
                color: white;
                border: none;
                border-radius: 4px;
                cursor: pointer;
                font-size: 14px;
            }
            
            .apply-button:hover {
                background: #4c51d3;
            }

            .caret-icon {
                border: solid #666;
                border-width: 0 2px 2px 0;
                display: inline-block;
                padding: 2px;
                margin-left: 6px;
                transform: rotate(45deg);
                transition: transform 0.2s;
            }
            
            .caret-icon.up {
                transform: rotate(-135deg);
            }
            
            @media (max-width: 768px) {
                .header {
                    flex-direction: column;
                    height: auto;
                    padding: 10px;
                }
                
                .header-controls {
                    width: 100%;
                    flex-wrap: wrap;
                    justify-content: center;
                    margin-top: 10px;
                }
                
                .device-select-dropdown {
                    width: 100%;
                }
                
                .device-container.landscape-container {
                    padding: 0;
                }
                
                .main-content {
                    top: auto;
                    padding: 0;
                }
            }
            
            /* 确保横屏模式在较小屏幕上也有足够的空间 */
            @media (max-height: 600px) {
                .device-container.landscape-container {
                    padding: 0;
                }
            }
        </style>
    </head>
    <body>
        <div class="header">
            <div class="header-title">WebGL预览</div>
            <div class="header-controls">
                <div class="control-group">
                    <div class="device-select">
                        <div class="device-select-button" id="device-select-button">
                            <span id="current-device-name">iPhone 8 Plus</span>
                            <span class="caret-icon"></span>
                        </div>
                        <div class="device-select-dropdown" id="device-select-dropdown">
                            #{devices.map { |name, dims| "<div class='device-option' data-device='#{name}' data-width='#{dims[:width]}' data-height='#{dims[:height]}'>#{name} (#{dims[:width]}×#{dims[:height]})</div>" }.join}
                            <div class="device-option" data-device="custom">自定义尺寸...</div>
                        </div>
                        <div class="custom-dimensions" id="custom-dimensions">
                            <div class="dimension-inputs">
                                <div class="dimension-input-group">
                                    <label for="width-input">宽度 (px)</label>
                                    <input type="number" id="width-input" value="375" min="200" max="2560">
                                </div>
                                <div class="dimension-input-group">
                                    <label for="height-input">高度 (px)</label>
                                    <input type="number" id="height-input" value="667" min="200" max="2560">
                                </div>
                            </div>
                            <button class="apply-button" id="apply-dimensions">应用尺寸</button>
                        </div>
                    </div>
                    <div class="dimensions-display" id="dimensions-display">375 × 667</div>
                </div>
                <div class="control-group">
                    <button class="action-button" id="rotate-button" title="旋转屏幕">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                            <path d="M7.34 6.41L.86 12.9l6.49 6.48 6.49-6.48-6.5-6.49zM3.69 12.9l3.66-3.66L11 12.9l-3.66 3.66-3.65-3.66zm15.67-6.26C17.61 4.88 15.3 4 13 4V.76L8.76 5 13 9.24V6c1.79 0 3.58.68 4.95 2.05 2.73 2.73 2.73 7.17 0 9.9C16.58 19.32 14.79 20 13 20c-.97 0-1.94-.21-2.84-.61l-1.49 1.49C10.02 21.62 11.51 22 13 22c2.3 0 4.61-.88 6.36-2.64 3.52-3.51 3.52-9.21 0-12.72z"/>
                        </svg>
                        旋转屏幕
                    </button>
                    <button class="action-button" id="fullscreen-button" title="全屏预览">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                            <path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>
                        </svg>
                        全屏预览
                    </button>
                </div>
            </div>
        </div>
        
        <div class="main-content">
            <div class="device-container" id="device-container">
                <div id="loading" class="loading">
                    <div class="spinner"></div>
                </div>
                <div class="device-frame" id="device-frame">
                    <div class="iframe-container">
                        <iframe id="preview-frame" src="./rawindex.html"></iframe>
                    </div>
                </div>
            </div>
        </div>
        
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                // 根据设备尺寸和窗口尺寸动态决定是否允许滚动
                function updateScrollBehavior() {
                    const deviceFrame = document.getElementById('device-frame');
                    const mainContent = document.querySelector('.main-content');
                    
                    // 获取设备框架的尺寸和位置
                    const deviceRect = deviceFrame.getBoundingClientRect();
                    const windowHeight = window.innerHeight;
                    const headerHeight = document.querySelector('.header').offsetHeight;
                    const availableHeight = windowHeight - headerHeight;
                    
                    // 判断设备是否完全显示在窗口中
                    const isDeviceFullyVisible = deviceRect.height <= availableHeight;
                    
                    console.log('设备是否完全可见: ' + isDeviceFullyVisible);
                    console.log('设备高度: ' + deviceRect.height + ', 可用高度: ' + availableHeight);
                    
                    return isDeviceFullyVisible;
                }
                
                // 智能滚动处理函数
                function handleScroll(e) {
                    // 如果是设备下拉菜单或自定义尺寸面板内的滚动，始终允许
                    if (e.target.closest('.custom-dimensions') || e.target.closest('.device-select-dropdown')) {
                        return;
                    }
                    
                    // 检查设备是否完全可见
                    if (updateScrollBehavior()) {
                        // 设备完全可见，禁止滚动
                        e.preventDefault();
                    }
                    // 设备不完全可见，允许滚动，不做处理
                }
                
                // 设置滚动事件监听
                document.addEventListener('touchmove', handleScroll, { passive: false });
                document.addEventListener('wheel', handleScroll, { passive: false });
                
                // 设备配置
                const devices = #{devices.to_json};
                
                // 获取DOM元素
                const deviceSelectButton = document.getElementById('device-select-button');
                const deviceSelectDropdown = document.getElementById('device-select-dropdown');
                const deviceOptions = document.querySelectorAll('.device-option');
                const customDimensions = document.getElementById('custom-dimensions');
                const widthInput = document.getElementById('width-input');
                const heightInput = document.getElementById('height-input');
                const applyDimensionsButton = document.getElementById('apply-dimensions');
                const rotateButton = document.getElementById('rotate-button');
                const fullscreenButton = document.getElementById('fullscreen-button');
                const deviceFrame = document.getElementById('device-frame');
                const previewFrame = document.getElementById('preview-frame');
                const dimensionsDisplay = document.getElementById('dimensions-display');
                const loading = document.getElementById('loading');
                const currentDeviceName = document.getElementById('current-device-name');
                const deviceContainer = document.getElementById('device-container');
                
                let isLandscape = false;
                let currentDevice = 'iPhone 8 Plus';
                let isInitialLoad = true;
                
                // 初始化设备
                initDevice('iPhone 8 Plus');
                
                // iframe加载事件
                previewFrame.onload = function() {
                    // 隐藏加载动画
                    loading.style.display = 'none';
                    
                    // 重置滚动位置
                    if (window.scrollY > 0) {
                        window.scrollTo(0, 0);
                    }
                    
                    // 尝试访问iframe内容
                    try {
                        const iframeDocument = previewFrame.contentDocument || (previewFrame.contentWindow && previewFrame.contentWindow.document);
                        if (iframeDocument) {
                            const iframeBody = iframeDocument.body;
                            if (iframeBody) {
                                // 设置CSS，优化展示并禁止滚动
                                iframeBody.style.overflow = 'hidden';
                                iframeBody.style.width = '100%';
                                iframeBody.style.height = '100%';
                                iframeBody.style.margin = '0';
                                iframeBody.style.padding = '0';
                                
                                // 添加滚动锁定
                                iframeDocument.documentElement.style.overflow = 'hidden';
                                iframeDocument.documentElement.style.position = 'fixed';
                                iframeDocument.documentElement.style.width = '100%';
                                iframeDocument.documentElement.style.height = '100%';
                                
                                // 禁止触摸滚动
                                iframeDocument.addEventListener('touchmove', function(e) {
                                    e.preventDefault();
                                }, { passive: false });
                            }
                            
                            // 尝试修复iframe中相对路径的问题
                            const basePath = './';
                            const baseElement = iframeDocument.createElement('base');
                            baseElement.href = basePath;
                            
                            // 将base元素添加到head开始位置
                            const head = iframeDocument.head || iframeDocument.getElementsByTagName('head')[0];
                            if (head && !head.querySelector('base')) {
                                head.insertBefore(baseElement, head.firstChild);
                            }
                        }
                    } catch (e) {
                        // 可能由于同源策略限制，忽略错误
                        console.log("无法访问iframe内容:", e);
                    }
                    
                    // 更新滚动行为
                    setTimeout(updateScrollBehavior, 300);
                };
                
                // iframe错误处理，避免无限加载
                previewFrame.onerror = function() {
                    loading.style.display = 'none';
                };
                
                // 显示加载动画
                function showLoading() {
                    loading.style.display = 'flex';
                    
                    // 设置超时，如果5秒后还在加载，则强制隐藏加载动画
                    setTimeout(() => {
                        loading.style.display = 'none';
                    }, 5000);
                }
                
                // 设备选择下拉菜单
                deviceSelectButton.addEventListener('click', function(e) {
                    e.stopPropagation();
                    deviceSelectDropdown.classList.toggle('active');
                    deviceSelectButton.querySelector('.caret-icon').classList.toggle('up');
                    customDimensions.classList.remove('active');
                });
                
                // 点击页面其他区域关闭下拉菜单
                document.addEventListener('click', function() {
                    deviceSelectDropdown.classList.remove('active');
                    customDimensions.classList.remove('active');
                    deviceSelectButton.querySelector('.caret-icon').classList.remove('up');
                });
                
                // 设备选项点击事件
                deviceOptions.forEach(option => {
                    option.addEventListener('click', function(e) {
                        e.stopPropagation(); // 阻止事件冒泡
                        const deviceName = this.dataset.device;
                        
                        if (deviceName === 'custom') {
                            // 显示自定义尺寸弹窗
                            customDimensions.classList.add('active');
                            deviceSelectDropdown.classList.remove('active');
                            deviceSelectButton.querySelector('.caret-icon').classList.remove('up');
                            
                            // 将当前的宽高填入输入框
                            const currentWidth = parseInt(deviceFrame.style.width) || 375;
                            const currentHeight = parseInt(deviceFrame.style.height) || 667;
                            widthInput.value = isLandscape ? currentHeight : currentWidth;
                            heightInput.value = isLandscape ? currentWidth : currentHeight;
                        } else {
                            initDevice(deviceName);
                            deviceSelectDropdown.classList.remove('active');
                            deviceSelectButton.querySelector('.caret-icon').classList.remove('up');
                            currentDevice = deviceName;
                            currentDeviceName.textContent = deviceName;
                        }
                    });
                });
                
                // 防止自定义尺寸弹窗被点击外部区域关闭
                customDimensions.addEventListener('click', function(e) {
                    e.stopPropagation();
                });
                
                // 应用自定义尺寸
                applyDimensionsButton.addEventListener('click', function() {
                    // 获取用户输入的宽高值，并确保它们是有效的正整数
                    let width = parseInt(widthInput.value);
                    let height = parseInt(heightInput.value);
                    
                    // 设置最小尺寸限制
                    width = (width && width >= 200) ? width : 375;
                    height = (height && height >= 200) ? height : 667;
                    
                    // 更新输入框的值，确保显示有效数值
                    widthInput.value = width;
                    heightInput.value = height;
                    
                    // 显示加载动画
                    showLoading();
                    
                    // 重置滚动位置
                    document.querySelector('.main-content').scrollTop = 0;
                    
                    // 更新设备名为"自定义尺寸"
                    currentDevice = 'custom';
                    currentDeviceName.textContent = '自定义尺寸';
                    
                    // 更新尺寸显示
                    dimensionsDisplay.textContent = width + ' × ' + height;
                    
                    // 应用新尺寸到设备框架
                    setTimeout(() => {
                        applyDimensions(width, height);
                        
                        // 关闭自定义尺寸面板
                        customDimensions.classList.remove('active');
                        
                        // 强制刷新iframe，与切换设备的行为一致
                        const baseUrl = './rawindex.html';
                        const currentTime = new Date().getTime();
                        const freshUrl = baseUrl + '?t=' + currentTime;
                        previewFrame.src = freshUrl;
                    }, 100);
                });
                
                // 旋转按钮点击事件
                rotateButton.addEventListener('click', function() {
                    isLandscape = !isLandscape;
                    
                    // 获取当前设备尺寸
                    const currentWidth = parseInt(deviceFrame.style.width) || 375;
                    const currentHeight = parseInt(deviceFrame.style.height) || 667;
                    
                    // 显示加载动画
                    showLoading();
                    
                    // 重置滚动位置
                    const mainContent = document.querySelector('.main-content');
                    mainContent.scrollTop = 0;
                    
                    if (isLandscape) {
                        // 添加横屏类
                        deviceFrame.classList.add('landscape');
                        // 为容器添加横屏样式类
                        deviceContainer.classList.add('landscape-container');
                    } else {
                        // 移除横屏类
                        deviceFrame.classList.remove('landscape');
                        // 移除容器的横屏样式类
                        deviceContainer.classList.remove('landscape-container');
                    }
                    
                    // 更新尺寸显示为旋转后的尺寸
                    dimensionsDisplay.textContent = currentHeight + ' × ' + currentWidth;
                    
                    // 延迟应用尺寸，确保动画效果流畅
                    setTimeout(() => {
                        // 交换宽高应用到设备
                        applyDimensions(currentHeight, currentWidth);
                        
                        // 强制刷新iframe，提高响应速度
                        const baseUrl = './rawindex.html';
                        const currentTime = new Date().getTime();
                        const freshUrl = baseUrl + '?t=' + currentTime;
                        previewFrame.src = freshUrl;
                    }, 300);
                });
                
                // 全屏按钮点击事件
                fullscreenButton.addEventListener('click', function() {
                    if (previewFrame.requestFullscreen) {
                        previewFrame.requestFullscreen();
                    } else if (previewFrame.mozRequestFullScreen) {
                        previewFrame.mozRequestFullScreen();
                    } else if (previewFrame.webkitRequestFullscreen) {
                        previewFrame.webkitRequestFullscreen();
                    } else if (previewFrame.msRequestFullscreen) {
                        previewFrame.msRequestFullscreen();
                    }
                });
                
                // 初始化设备
                function initDevice(deviceName) {
                    if (devices[deviceName]) {
                        // 显示加载动画
                        showLoading();
                        
                        if (isInitialLoad) {
                            isInitialLoad = false;
                        }
                        
                        // 重置容器样式
                        deviceContainer.classList.remove('landscape-container');
                        
                        // 如果之前是横屏状态，切换回竖屏
                        if (isLandscape) {
                            isLandscape = false;
                            deviceFrame.classList.remove('landscape');
                        }
                        
                        const { width, height } = devices[deviceName];
                        applyDimensions(width, height);
                        currentDeviceName.textContent = deviceName;
                        
                        // 强制刷新iframe
                        const baseUrl = './rawindex.html';
                        const currentTime = new Date().getTime();
                        const freshUrl = baseUrl + '?t=' + currentTime;
                        previewFrame.src = freshUrl;
                    }
                }
                
                // 应用尺寸到设备框架
                function applyDimensions(width, height) {
                    deviceFrame.style.width = width + 'px';
                    deviceFrame.style.height = height + 'px';
                    
                    // 更新滚动行为
                    setTimeout(updateScrollBehavior, 100);
                }
                
                // 监听窗口尺寸改变
                window.addEventListener('resize', function() {
                    // 更新滚动行为
                    updateScrollBehavior();
                });
            });
        </script>
        <style>
            /* 美化滚动条 */
            ::-webkit-scrollbar {
                width: 8px;
                height: 8px;
            }
            
            ::-webkit-scrollbar-track {
                background: #f1f1f1;
                border-radius: 4px;
            }
            
            ::-webkit-scrollbar-thumb {
                background: #ccc;
                border-radius: 4px;
            }
            
            ::-webkit-scrollbar-thumb:hover {
                background: #aaa;
            }
        </style>
    </body>
    </html>
    HTML

    res.status = 200
    res.content_type = 'text/html'
    res.body = html
end

Class: Pindo::WebServer::ResponsivePreviewHandler

Overview

Instance Method Summary collapse

Constructor Details

#initialize(server, root_dir, port, debug = false) ⇒ ResponsivePreviewHandler

Instance Method Details

#do_GET(req, res) ⇒ Object

#initialize(server, root_dir, port, debug = false) ⇒ `ResponsivePreviewHandler`

#do_GET(req, res) ⇒ `Object`