Code Editor

The Code Editor provides advanced editing capabilities for users who need complete control over the block room design. This document explains how code modifications in the Code Editor affect the preview and how changes are reflected in real-time.

Quick Reference

Code Element	Easy Editing Setting	Customizable	Notes
.nf-vwr-background	Background Image	✅ Yes	Background color/image, padding
.nf-vwr-image3	Image 3 (Main UI background)	✅ Yes	Background color/image, padding, border-radius
.nf-vwr-image1	Image 1	✅ Yes	Background image, size, position
.nf-vwr-image2	Image 2	✅ Yes	Background image, size, position
.nf-vwr-title	Title	✅ Yes	Text, color, font-size, visibility
.nf-vwr-description	Description	✅ Yes	Text, color, font-size, visibility
#nf-vwr-cancel	Exit Waiting Room Button	✅ Yes	Text, colors, opacity, URL attribute
Element IDs (e.g., nf-vwr-*)	-	❌ DO NOT MODIFY	Required for system functionality
Class names (e.g., nf-vwr-*)	-	⚠️ CAUTION	Some classes are used by the system

Overview

The Code Editor allows you to modify design properties directly in code format (HTML/CSS), providing maximum flexibility for customizations. All code changes are immediately reflected in the Preview Area, allowing you to see the results of your modifications in real-time.

Accessing Code Editor

Switching to Editor Mode

To access the Code Editor:

1. In Easy Editing, switch from Easy editing to Editor mode
2. The Code Editor becomes available for code editing
3. The code generated from Easy Editing settings is automatically loaded

Editor Mode Limitation

Once you enter Editor Mode (Code Editor), Easy setup becomes disabled. You can return to Easy Editing mode from Editor mode by confirming the switch, but all custom code entered in Editor mode will be automatically reset and lost when you switch back to Easy Editing mode.

Code Structure Overview

The code editor loads HTML/CSS code that corresponds to the settings configured in Easy Editing. Understanding the code structure helps you make targeted modifications.

CSS Variables System

The block room code uses CSS custom properties (variables) prefixed with --nf-* to control styling. This allows for centralized customization through the :root selector. You can modify these variables to change the appearance of elements without directly editing class styles.

Key CSS Variable Categories:

• Layout variables: --nf-grid-template-*, --nf-justify-content, --nf-align-items
• Font variables: --nf-main-font-family, --nf-title-font-family, etc.
• Color variables: --nf-main-text-color, --nf-title-color, --nf-bg-color, etc.
• Display variables: --nf-title-display, --nf-desc-display, --nf-close-display, etc.
• Image variables: --nf-image1-url, --nf-image2-url, --nf-bg-url, etc.

Example - Modifying via CSS Variables:

:root {
  --nf-title-color: #ff0000;        /* Change title color */
  --nf-title-font-size: 28px;       /* Change title font size */
  --nf-bg-color: #1a1a1a;           /* Change background color */
  --nf-close-display: none;          /* Hide exit waiting room button */
}

Example - Direct CSS Override:

.nf-vwr-title {
  color: #ff0000;                     /* Direct override */
  font-size: 28px;
}

CSS Variables vs Direct CSS

• CSS Variables: Modify in :root for centralized control and consistency
• Direct CSS: Override specific classes for targeted changes
• Direct CSS overrides will take precedence over CSS variables

HTML Structure Mapping

The HTML structure maps to Easy Editing settings as follows:

Background Layer

<div class="nf-vwr-background">

• Easy Editing Setting: Background Image
• Customizable: Background color (background-color), background image (background-image), padding
• Location: Entire screen background (outside main UI element)

Main UI Container

<div class="nf-vwr-image3">

• Easy Editing Setting: Image 3 (Main UI element background)
• Customizable: Background color/image, padding, border-radius, width, max-width
• Location: Main block room UI container

Images

<div class="nf-vwr-image1"></div>
<div class="nf-vwr-image2"></div>

• Easy Editing Setting: Image 1, Image 2
• Customizable: Background image URL, size, position, visibility (via display: none)
• Location: Inside main UI container

Title

<div class="nf-vwr-title">Please enter the title</div>

• Easy Editing Setting: Title
• Customizable: Text content, color, font-size, font-weight, visibility
• Location: Inside main UI container

Description

<div class="nf-vwr-description nf-vwr-pause-hidden">Please enter the content</div>

• Easy Editing Setting: Description
• Customizable: Text content, color, font-size, visibility
• Location: Inside main UI container
• Note: The nf-vwr-pause-hidden class is used by the system for pause state management

Exit Waiting Room Button

<button id="nf-vwr-cancel" class="nf-vwr-cancel" data-nf-cancel-url="">
  <span>Close</span>
</button>

• Easy Editing Setting: Exit Waiting Room Button
• Customizable:
  • Button text (inside <span> tag)
  • Colors (background-color, color, border-color)
  • Display visibility
  • URL attribute (data-nf-cancel-url="")
• ⚠️ Important:
  • Do not modify element ID (id="nf-vwr-cancel")
  • Do not remove data-nf-cancel-url attribute (required for redirect functionality)
  • The <span> tag structure is used by the system

Footer Information

<div class="nf-vwr-copyright">Powered by <strong>NetFUNNEL</strong> | © STCLab Inc.</div>

• Easy Editing Setting: Footer text (via Color Customization)
• Customizable: Text content, color, font-size, visibility
• Location: Inside main UI container
• Note: The .nf-vwr-info class is defined in CSS but may not appear in the HTML structure depending on configuration

Safe Customization Areas

✅ Safe to Modify

CSS Properties:

• Colors (color, background-color)
• Font properties (font-size, font-weight, font-family)
• Spacing (padding, margin, gap)
• Layout (display, flex-direction, align-items, justify-content)
• Sizing (width, max-width, min-width, height)
• Visual effects (border-radius, opacity, box-shadow)
• Background images (background-image, background-size, background-position)

HTML Content:

• Text content in elements without IDs (e.g., .nf-vwr-title, .nf-vwr-description)
• Button text (e.g., "Close")
• Footer text

HTML Attributes:

• data-nf-cancel-url attribute value (for redirect URL)
• lang attribute in <html> tag (for language)
• <title> tag content
• <link rel="icon"> href attribute (for favicon)

⚠️ Modify with Caution

Element IDs:

• All elements with id="nf-vwr-*" are used by the system
• Modifying IDs will break functionality
• Rule: Never change or remove element IDs

Class Names:

• Some classes may be referenced by the system
• Rule: If unsure, test changes in preview before saving

Animations:

• @keyframes marquee - Marquee animation
• @keyframes entering - Entering animation
• Rule: Only modify animation timing if needed - do not remove or significantly alter animation structure

❌ Do Not Modify

Critical Element IDs:

• id="nf-vwr-cancel"

Critical Attributes:

• data-nf-cancel-url attribute name (required for button functionality)
• Element structure of dynamic content containers

Common Customization Examples

Changing Title Text and Style

Method 1: Using CSS Variables (Recommended)

:root {
  --nf-title-color: #ff0000;        /* Change title color */
  --nf-title-font-size: 28px;        /* Increase font size */
}

Method 2: Direct CSS Override

.nf-vwr-title {
  color: #ff0000;           /* Change title color */
  font-size: 28px;          /* Increase font size */
  font-weight: 700;         /* Make bolder */
}

<div class="nf-vwr-title">Access Denied</div>

Hiding Elements

Method 1: Using CSS Variables

:root {
  --nf-desc-display: none;          /* Hide description */
  --nf-title-display: none;         /* Hide title */
  --nf-close-display: none;          /* Hide exit waiting room button */
}

Method 2: Direct CSS Display

.nf-vwr-description {
  display: none;            /* Hide description */
}

Method 3: HTML Comment

<!-- <div class="nf-vwr-description">Please enter the content</div> -->

Changing Colors

Using CSS Variables (Recommended):

:root {
  --nf-bg-color: #1a1a1a;           /* Dark background */
  --nf-image3-bg-color: #ffffff;    /* White main UI background */
  --nf-title-color: #ff0000;        /* Red title */
  --nf-desc-color: #666666;         /* Gray description */
  --nf-info-color: #99999980;       /* Light gray warning message */
  --nf-copyright-color: #99999980;   /* Light gray footer */
  --nf-close-bg-color: #ffffffff;   /* White button background */
  --nf-close-text-color: #4B4C4Fff;  /* Button text color */
  --nf-close-border-color: #D4D5D8ff; /* Button border color */
}

Direct CSS Override:

.nf-vwr-background {
  background-color: #1a1a1a;  /* Dark background */
}

.nf-vwr-image3 {
  background-color: #ffffff;  /* White background */
}

.nf-vwr-title {
  color: #ff0000;            /* Red title */
}

.nf-vwr-description {
  color: #666666;            /* Gray description */
}

.nf-vwr-copyright {
  color: #999999;            /* Light gray footer */
}

Modifying Exit Waiting Room Button

Button Text:

<button id="nf-vwr-cancel" class="nf-vwr-cancel" data-nf-cancel-url="https://example.com">
  <span>Go Back</span>
</button>

Button Styling via CSS Variables:

:root {
  --nf-close-bg-color: #ff0000;      /* Red background */
  --nf-close-text-color: #ffffff;    /* White text */
  --nf-close-border-color: #ff0000;   /* Red border */
}

Button Styling via Direct CSS:

.nf-vwr-cancel {
  background-color: #ff0000;  /* Red background */
  color: #ffffff;              /* White text */
  border-color: #ff0000;       /* Red border */
  border-radius: 12px;         /* More rounded */
}

Button URL:

<button id="nf-vwr-cancel" class="nf-vwr-cancel" data-nf-cancel-url="https://yoursite.com/home">
  <span>Close</span>
</button>

Adding Background Images

Using CSS Variables (Recommended):

:root {
  --nf-bg-url: url('https://example.com/background.jpg');
  --nf-image1-url: url('https://example.com/image1.png');
  --nf-image2-url: url('https://example.com/image2.png');
  --nf-image3-url: url('https://example.com/image3.png');
}

Direct CSS Override:

.nf-vwr-background {
  background-image: url('https://example.com/background.jpg');
  background-size: cover;
  background-position: center;
}

.nf-vwr-image1 {
  background-image: url('https://example.com/image1.png');
  background-size: contain;
}

Advanced Programming Cases

Case 1: Dynamic Language Switching

Scenario: Display block room in different languages based on user locale.

Implementation:

1. Detect user locale (browser language, URL parameter, etc.)
2. Modify text content dynamically using JavaScript
3. Update CSS for language-specific fonts if needed

Example:

// Detect locale and update text
const locale = navigator.language || 'en';
const translations = {
  'en': { title: 'Access Denied', description: 'You do not have permission to access this page.' },
  'ko': { title: '접근 거부', description: '이 페이지에 접근할 권한이 없습니다.' },
  'ja': { title: 'アクセス拒否', description: 'このページにアクセスする権限がありません。' }
};

const title = document.querySelector('.nf-vwr-title');
const description = document.querySelector('.nf-vwr-description');
title.textContent = translations[locale]?.title || translations['en'].title;
description.textContent = translations[locale]?.description || translations['en'].description;

Rules:

• ✅ Safe to modify text content of elements without IDs
• ✅ Safe to add JavaScript for dynamic content
• ❌ Do not modify element IDs
• ⚠️ Test thoroughly across different locales

Case 2: Adding Custom Assets

Scenario: Load custom fonts, images, or other assets.

Implementation:

1. Add <link> tags in <head> for external resources
2. Use url() in CSS for images
3. Ensure assets are accessible (CORS, HTTPS)

Example - Custom Font:

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
</head>

.nf-vwr-title {
  font-family: 'Roboto', sans-serif;
}

Example - Custom Image:

.nf-vwr-image1 {
  background-image: url('https://cdn.example.com/custom-image.png');
}

Rules:

• ✅ Safe to add <link> tags in <head>
• ✅ Safe to use external URLs in CSS url()
• ⚠️ Ensure assets are accessible (CORS enabled, HTTPS)
• ⚠️ Consider loading performance

Case 3: Adding Custom Logic

Scenario: Add custom JavaScript for enhanced functionality.

Implementation:

1. Add <script> tag before closing </body> tag
2. Use existing element IDs to interact with waiting room elements
3. Do not override NetFUNNEL's core functionality

Example - Custom Analytics:

<body>
  <!-- ... existing code ... -->
  
  <script>
    // Custom analytics tracking
    document.getElementById('nf-vwr-cancel').addEventListener('click', function() {
      // Track exit waiting room button click
      console.log('Exit waiting room button clicked');
      // Send to analytics service
    });
  </script>
</body>

Rules:

• ✅ Safe to add custom <script> tags
• ✅ Safe to add event listeners to existing elements
• ❌ Do not remove or modify required element IDs
• ⚠️ Test thoroughly to ensure compatibility

Case 4: Conditional Styling

Scenario: Apply different styles based on conditions (time of day, user type, etc.).

Implementation:

1. Use JavaScript to detect conditions
2. Add/remove CSS classes or modify inline styles
3. Use CSS classes for styling, not direct style modifications

Example - Time-based Styling:

<script>
  const hour = new Date().getHours();
  const background = document.querySelector('.nf-vwr-background');
  
  if (hour >= 6 && hour < 18) {
    background.style.backgroundColor = '#f0f0f0'; // Light mode
  } else {
    background.style.backgroundColor = '#1a1a1a'; // Dark mode
  }
</script>

Rules:

• ✅ Safe to modify CSS classes and inline styles via JavaScript
• ✅ Safe to add conditional logic
• ⚠️ Ensure changes don't break core functionality
• ⚠️ Test across different conditions

Case 5: Custom Animations

Scenario: Add custom animations or transitions.

Implementation:

1. Define @keyframes in CSS
2. Apply animations to elements
3. Ensure animations don't interfere with existing animations

Example:

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.nf-vwr-title {
  animation: fadeIn 1s ease-in;
}

Rules:

• ✅ Safe to add custom @keyframes
• ✅ Safe to add CSS animations
• ⚠️ Do not modify existing @keyframes (marquee, entering) if present
• ⚠️ Test animation performance

Programming Rules Summary

✅ Allowed Operations

1. CSS Modifications: All CSS properties can be modified (colors, fonts, spacing, layout, etc.)
2. HTML Content: Text content in non-ID elements can be modified
3. HTML Attributes: Safe attributes can be modified (data-nf-cancel-url, lang, title, href)
4. Adding Resources: Can add <link> tags for fonts, stylesheets, etc.
5. Adding Scripts: Can add custom <script> tags for additional functionality
6. Adding Elements: Can add new HTML elements (with caution - may affect layout)

⚠️ Restricted Operations

1. Element IDs: Never modify or remove IDs starting with nf-vwr-*
2. Required Attributes: Do not remove data-nf-cancel-url attribute name
3. Core Animations: Do not modify existing @keyframes (marquee, entering) if present
4. Element Structure: Be cautious when modifying structure of dynamic content containers

❌ Prohibited Operations

1. Removing Required Elements: Do not remove elements with IDs
2. Breaking Functionality: Do not make changes that break waiting room functionality
3. Security Risks: Do not add scripts that pose security risks

Best Practices

Code Organization

• Use Comments: Add comments to identify custom sections
• Maintain Structure: Keep code organized and readable
• Test Incrementally: Make small changes and test frequently

Preview Monitoring

• Check After Each Change: Verify changes in preview after each modification
• Test Different Scenarios: Use Preview Controls to test at different resolutions
• Validate Functionality: Ensure all interactive elements work correctly

Safety Guidelines

• Backup Code: Save code backups before major changes
• Test Thoroughly: Test all functionality after modifications
• Document Changes: Keep notes on what was modified and why

---

Important

Always backup your code before making major changes. Code changes cannot be recovered after resetting to Easy Editing mode.

Block Room Customization

The block room is designed to inform users when access is restricted. You can customize all visual elements while maintaining the core functionality. Ensure your design clearly communicates the blocking status while providing users with appropriate next steps.