{"id":2643,"date":"2026-02-12T17:19:33","date_gmt":"2026-02-12T19:19:33","guid":{"rendered":"https:\/\/nea.codes\/?page_id=2643"},"modified":"2026-02-12T17:24:43","modified_gmt":"2026-02-12T19:24:43","slug":"design-preview","status":"publish","type":"page","link":"https:\/\/nea.codes\/ru\/design-preview\/","title":{"rendered":"design-preview"},"content":{"rendered":"
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n \n \n E-lekcijas Design System<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n :root {\n \/* Accent Colors - consistent across themes *\/\n --accent-red: #cd5454;\n --accent-blue: #5454ff;\n \n \/* Gradients *\/\n --gradient-primary: linear-gradient(135deg, #cd5454 0%, #5454ff 100%);\n --gradient-red: linear-gradient(135deg, #cd5454 0%, #e57373 100%);\n --gradient-blue: linear-gradient(135deg, #5454ff 0%, #7c7cff 100%);\n \n \/* Transitions *\/\n --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);\n --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n \n \/* Spacing *\/\n --space-xs: 4px;\n --space-sm: 8px;\n --space-md: 16px;\n --space-lg: 24px;\n --space-xl: 32px;\n --space-2xl: 48px;\n \n \/* Border Radius *\/\n --radius-sm: 12px;\n --radius-md: 20px;\n --radius-lg: 28px;\n --radius-xl: 36px;\n }\n\n \/* DARK THEME (default) *\/\n [data-theme=\"dark\"] {\n --bg-primary: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);\n --bg-secondary: #1a1a2e;\n \n --glass-bg: rgba(255, 255, 255, 0.08);\n --glass-border: rgba(255, 255, 255, 0.18);\n --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);\n \n --text-primary: rgba(255, 255, 255, 0.95);\n --text-secondary: rgba(255, 255, 255, 0.7);\n --text-muted: rgba(255, 255, 255, 0.5);\n \n --input-bg: rgba(0, 0, 0, 0.3);\n --input-border: rgba(255, 255, 255, 0.2);\n --input-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);\n \n --card-bg: rgba(255, 255, 255, 0.05);\n --hover-bg: rgba(255, 255, 255, 0.12);\n \n --skeleton-base: rgba(255, 255, 255, 0.05);\n --skeleton-highlight: rgba(255, 255, 255, 0.1);\n \n --overlay-bg: rgba(0, 0, 0, 0.7);\n \n --nav-bg: rgba(26, 26, 46, 0.8);\n }\n\n \/* LIGHT THEME *\/\n [data-theme=\"light\"] {\n --bg-primary: #e5e8f3;\n --bg-secondary: #d1d8e8;\n \n --glass-bg: rgba(255, 255, 255, 0.6);\n --glass-border: rgba(255, 255, 255, 0.8);\n --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);\n \n --text-primary: #1a1a2e;\n --text-secondary: #4a4a6a;\n --text-muted: #7a7a9a;\n \n --input-bg: rgba(255, 255, 255, 0.8);\n --input-border: rgba(0, 0, 0, 0.1);\n --input-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);\n \n --card-bg: rgba(255, 255, 255, 0.7);\n --hover-bg: rgba(255, 255, 255, 0.9);\n \n --skeleton-base: rgba(0, 0, 0, 0.05);\n --skeleton-highlight: rgba(0, 0, 0, 0.1);\n \n --overlay-bg: rgba(26, 26, 46, 0.5);\n \n --nav-bg: rgba(229, 232, 243, 0.8);\n }\n\n body {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n background: var(--bg-primary);\n min-height: 100vh;\n color: var(--text-primary);\n line-height: 1.6;\n padding: 40px 20px;\n transition: background var(--transition-slow), color var(--transition-base);\n }\n\n .container {\n max-width: 1400px;\n margin: 0 auto;\n }\n\n h1 {\n font-size: 3rem;\n font-weight: 700;\n margin-bottom: var(--space-xl);\n background: var(--gradient-primary);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n\n h2 {\n font-size: 1.5rem;\n margin: var(--space-2xl) 0 var(--space-lg);\n color: var(--text-primary);\n font-weight: 600;\n }\n\n h3, h4 {\n color: var(--text-primary);\n }\n\n p {\n color: var(--text-secondary);\n }\n\n .section {\n margin-bottom: var(--space-2xl);\n }\n\n \/* THEME TOGGLE BUTTON *\/\n .theme-toggle {\n position: fixed;\n top: 20px;\n right: 20px;\n z-index: 1001;\n width: 60px;\n height: 32px;\n background: var(--glass-bg);\n backdrop-filter: blur(20px);\n border: 1px solid var(--glass-border);\n border-radius: 16px;\n cursor: pointer;\n display: flex;\n align-items: center;\n padding: 4px;\n box-shadow: var(--glass-shadow);\n transition: all var(--transition-base);\n }\n\n .theme-toggle:hover {\n transform: scale(1.05);\n box-shadow: 0 12px 40px rgba(84, 84, 255, 0.2);\n }\n\n .theme-toggle-slider {\n width: 24px;\n height: 24px;\n background: var(--gradient-primary);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: transform var(--transition-base);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);\n font-size: 14px;\n }\n\n [data-theme=\"dark\"] .theme-toggle-slider {\n transform: translateX(0);\n }\n\n [data-theme=\"light\"] .theme-toggle-slider {\n transform: translateX(28px);\n }\n\n .theme-icon {\n filter: brightness(0) invert(1);\n }\n\n \/* BENTO GRID *\/\n .bento-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: var(--space-lg);\n margin-bottom: var(--space-xl);\n }\n\n .bento-item {\n background: var(--glass-bg);\n backdrop-filter: blur(16px);\n -webkit-backdrop-filter: blur(16px);\n border: 1px solid var(--glass-border);\n border-radius: var(--radius-lg);\n padding: var(--space-xl);\n box-shadow: var(--glass-shadow);\n transition: all var(--transition-base);\n position: relative;\n overflow: hidden;\n }\n\n .bento-item::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 1px;\n background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);\n }\n\n [data-theme=\"light\"] .bento-item::before {\n background: linear-gradient(90deg, transparent, rgba(0,0,0,0.1), transparent);\n }\n\n .bento-item:hover {\n transform: translateY(-4px) scale(1.01);\n box-shadow: 0 20px 60px rgba(31, 38, 135, 0.4);\n border-color: var(--accent-blue);\n background: var(--hover-bg);\n }\n\n [data-theme=\"light\"] .bento-item:hover {\n box-shadow: 0 20px 60px rgba(31, 38, 135, 0.15);\n }\n\n .bento-item.large {\n grid-column: span 2;\n }\n\n .bento-item.small {\n grid-column: span 1;\n }\n\n \/* CARDS *\/\n .card {\n background: var(--glass-bg);\n backdrop-filter: blur(20px);\n -webkit-backdrop-filter: blur(20px);\n border: 1px solid var(--glass-border);\n border-radius: var(--radius-md);\n padding: var(--space-lg);\n box-shadow: var(--glass-shadow);\n transition: all var(--transition-base);\n position: relative;\n }\n\n .card::after {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: var(--radius-md);\n padding: 1px;\n background: var(--gradient-primary);\n -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n -webkit-mask-composite: xor;\n mask-composite: exclude;\n opacity: 0;\n transition: opacity var(--transition-base);\n }\n\n .card:hover::after {\n opacity: 1;\n }\n\n .card:hover {\n transform: translateY(-2px);\n box-shadow: 0 12px 40px rgba(84, 84, 255, 0.3);\n background: var(--hover-bg);\n }\n\n [data-theme=\"light\"] .card:hover {\n box-shadow: 0 12px 40px rgba(84, 84, 255, 0.15);\n }\n\n .card-header {\n display: flex;\n align-items: center;\n gap: var(--space-md);\n margin-bottom: var(--space-md);\n }\n\n .card-icon {\n width: 48px;\n height: 48px;\n background: var(--gradient-primary);\n border-radius: var(--radius-sm);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1.5rem;\n box-shadow: 0 4px 15px rgba(205, 84, 84, 0.3);\n }\n\n \/* BUTTONS *\/\n .btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-sm);\n padding: 14px 28px;\n border: none;\n border-radius: var(--radius-sm);\n font-size: 1rem;\n font-weight: 600;\n cursor: pointer;\n transition: all var(--transition-base);\n position: relative;\n overflow: hidden;\n text-decoration: none;\n color: inherit;\n }\n\n .btn-primary {\n background: var(--gradient-primary);\n color: white;\n box-shadow: 0 4px 15px rgba(205, 84, 84, 0.4), \n inset 0 1px 0 rgba(255,255,255,0.2);\n }\n\n [data-theme=\"light\"] .btn-primary {\n box-shadow: 0 4px 15px rgba(205, 84, 84, 0.3), \n inset 0 1px 0 rgba(255,255,255,0.3);\n }\n\n .btn-primary::before {\n content: '';\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);\n transition: left 0.5s;\n }\n\n .btn-primary:hover::before {\n left: 100%;\n }\n\n .btn-primary:hover {\n transform: translateY(-2px);\n box-shadow: 0 8px 25px rgba(205, 84, 84, 0.5), \n inset 0 1px 0 rgba(255,255,255,0.3);\n }\n\n [data-theme=\"light\"] .btn-primary:hover {\n box-shadow: 0 8px 25px rgba(205, 84, 84, 0.4);\n }\n\n .btn-primary:active {\n transform: translateY(0);\n box-shadow: 0 2px 10px rgba(205, 84, 84, 0.4);\n }\n\n .btn-secondary {\n background: var(--glass-bg);\n backdrop-filter: blur(10px);\n color: var(--text-primary);\n border: 1px solid var(--glass-border);\n box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);\n }\n\n .btn-secondary:hover {\n background: var(--hover-bg);\n border-color: var(--accent-blue);\n transform: translateY(-2px);\n }\n\n .btn-secondary:active {\n transform: translateY(0);\n }\n\n .btn-ghost {\n background: transparent;\n color: var(--text-primary);\n border: 1px solid transparent;\n }\n\n .btn-ghost:hover {\n background: var(--glass-bg);\n border-color: var(--glass-border);\n }\n\n .btn-gradient-red {\n background: var(--gradient-red);\n color: white;\n box-shadow: 0 4px 15px rgba(205, 84, 84, 0.4);\n }\n\n .btn-gradient-blue {\n background: var(--gradient-blue);\n color: white;\n box-shadow: 0 4px 15px rgba(84, 84, 255, 0.4);\n }\n\n .btn:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n transform: none !important;\n }\n\n \/* FORM ELEMENTS *\/\n .form-group {\n margin-bottom: var(--space-lg);\n }\n\n .form-label {\n display: block;\n margin-bottom: var(--space-sm);\n color: var(--text-secondary);\n font-size: 0.875rem;\n font-weight: 500;\n transition: color var(--transition-fast);\n }\n\n .form-input {\n width: 100%;\n padding: 14px 18px;\n background: var(--input-bg);\n border: 1px solid var(--input-border);\n border-radius: var(--radius-sm);\n color: var(--text-primary);\n font-size: 1rem;\n transition: all var(--transition-base);\n backdrop-filter: blur(10px);\n box-shadow: var(--input-shadow);\n }\n\n .form-input::placeholder {\n color: var(--text-muted);\n }\n\n .form-input:hover {\n border-color: var(--accent-blue);\n background: var(--hover-bg);\n }\n\n .form-input:focus {\n outline: none;\n border-color: var(--accent-blue);\n box-shadow: 0 0 0 3px rgba(84, 84, 255, 0.2),\n var(--input-shadow);\n background: var(--hover-bg);\n }\n\n .form-input:focus + .form-label,\n .form-group:focus-within .form-label {\n color: var(--accent-blue);\n }\n\n .form-input.error {\n border-color: var(--accent-red);\n box-shadow: 0 0 0 3px rgba(205, 84, 84, 0.2);\n }\n\n .form-input.success {\n border-color: #4caf50;\n box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.2);\n }\n\n \/* Custom Select *\/\n .select-wrapper {\n position: relative;\n }\n\n .select-wrapper::after {\n content: '\u25bc';\n position: absolute;\n right: 18px;\n top: 50%;\n transform: translateY(-50%);\n color: var(--text-muted);\n font-size: 0.75rem;\n pointer-events: none;\n transition: transform var(--transition-fast);\n }\n\n .select-wrapper:focus-within::after {\n transform: translateY(-50%) rotate(180deg);\n color: var(--accent-blue);\n }\n\n .form-select {\n appearance: none;\n cursor: pointer;\n }\n\n \/* Textarea *\/\n .form-textarea {\n min-height: 120px;\n resize: vertical;\n font-family: inherit;\n }\n\n \/* Checkbox & Radio *\/\n .checkbox-wrapper,\n .radio-wrapper {\n display: flex;\n align-items: center;\n gap: var(--space-md);\n cursor: pointer;\n padding: var(--space-sm) 0;\n }\n\n .checkbox-input,\n .radio-input {\n appearance: none;\n width: 22px;\n height: 22px;\n border: 2px solid var(--input-border);\n border-radius: 6px;\n background: var(--input-bg);\n cursor: pointer;\n position: relative;\n transition: all var(--transition-fast);\n box-shadow: var(--input-shadow);\n }\n\n .radio-input {\n border-radius: 50%;\n }\n\n .checkbox-input:hover,\n .radio-input:hover {\n border-color: var(--accent-blue);\n }\n\n .checkbox-input:checked {\n background: var(--gradient-primary);\n border-color: transparent;\n }\n\n .radio-input:checked {\n background: var(--accent-blue);\n border-color: var(--accent-blue);\n }\n\n .checkbox-input:checked::after {\n content: '\u2713';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n color: white;\n font-size: 14px;\n font-weight: bold;\n }\n\n .radio-input:checked::after {\n content: '';\n width: 8px;\n height: 8px;\n background: white;\n border-radius: 50%;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n\n .checkbox-label,\n .radio-label {\n color: var(--text-primary);\n font-size: 0.95rem;\n user-select: none;\n }\n\n \/* Toggle Switch *\/\n .toggle-wrapper {\n display: flex;\n align-items: center;\n gap: var(--space-md);\n cursor: pointer;\n }\n\n .toggle-input {\n appearance: none;\n width: 52px;\n height: 28px;\n background: var(--input-bg);\n border-radius: 14px;\n position: relative;\n cursor: pointer;\n transition: all var(--transition-base);\n box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);\n border: 1px solid var(--input-border);\n }\n\n .toggle-input::after {\n content: '';\n position: absolute;\n top: 2px;\n left: 2px;\n width: 22px;\n height: 22px;\n background: white;\n border-radius: 50%;\n transition: all var(--transition-base);\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n }\n\n .toggle-input:checked {\n background: var(--gradient-primary);\n border-color: transparent;\n }\n\n .toggle-input:checked::after {\n left: 26px;\n }\n\n \/* NAVIGATION *\/\n .nav-glass {\n background: var(--nav-bg);\n backdrop-filter: blur(20px);\n -webkit-backdrop-filter: blur(20px);\n border-bottom: 1px solid var(--glass-border);\n padding: var(--space-md) var(--space-xl);\n position: sticky;\n top: 0;\n z-index: 100;\n border-radius: 0 0 var(--radius-md) var(--radius-md);\n margin: -40px -20px 40px;\n transition: background var(--transition-slow);\n }\n\n .nav-content {\n max-width: 1400px;\n margin: 0 auto;\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n .nav-logo {\n font-size: 1.5rem;\n font-weight: 700;\n background: var(--gradient-primary);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n\n .nav-links {\n display: flex;\n gap: var(--space-xl);\n list-style: none;\n }\n\n .nav-link {\n color: var(--text-secondary);\n text-decoration: none;\n font-weight: 500;\n transition: all var(--transition-fast);\n position: relative;\n padding: var(--space-sm) 0;\n }\n\n .nav-link::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n width: 0;\n height: 2px;\n background: var(--gradient-primary);\n transition: width var(--transition-base);\n }\n\n .nav-link:hover {\n color: var(--text-primary);\n }\n\n .nav-link:hover::after {\n width: 100%;\n }\n\n .nav-link.active {\n color: var(--text-primary);\n }\n\n .nav-link.active::after {\n width: 100%;\n }\n\n \/* COURSE CARD SPECIFIC *\/\n .course-card {\n display: flex;\n flex-direction: column;\n height: 100%;\n }\n\n .course-image {\n width: 100%;\n height: 180px;\n background: linear-gradient(135deg, rgba(205, 84, 84, 0.1) 0%, rgba(84, 84, 255, 0.1) 100%);\n border-radius: var(--radius-sm);\n margin-bottom: var(--space-md);\n position: relative;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 3rem;\n border: 1px solid var(--glass-border);\n }\n\n .course-badge {\n position: absolute;\n top: var(--space-sm);\n right: var(--space-sm);\n background: var(--glass-bg);\n backdrop-filter: blur(10px);\n padding: var(--space-xs) var(--space-md);\n border-radius: 20px;\n font-size: 0.75rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n border: 1px solid var(--glass-border);\n color: var(--text-primary);\n }\n\n .course-title {\n font-size: 1.25rem;\n font-weight: 600;\n margin-bottom: var(--space-sm);\n color: var(--text-primary);\n }\n\n .course-meta {\n display: flex;\n gap: var(--space-md);\n color: var(--text-secondary);\n font-size: 0.875rem;\n margin-bottom: var(--space-md);\n }\n\n .course-price {\n font-size: 1.5rem;\n font-weight: 700;\n background: var(--gradient-primary);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n margin-top: auto;\n }\n\n \/* PROGRESS BAR *\/\n .progress-container {\n background: var(--input-bg);\n border-radius: 10px;\n height: 8px;\n overflow: hidden;\n box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);\n border: 1px solid var(--input-border);\n }\n\n .progress-bar {\n height: 100%;\n background: var(--gradient-primary);\n border-radius: 10px;\n transition: width var(--transition-slow);\n position: relative;\n overflow: hidden;\n }\n\n .progress-bar::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);\n animation: shimmer 2s infinite;\n }\n\n @keyframes shimmer {\n 0% { transform: translateX(-100%); }\n 100% { transform: translateX(100%); }\n }\n\n \/* TAGS *\/\n .tag {\n display: inline-flex;\n align-items: center;\n padding: 6px 14px;\n background: var(--glass-bg);\n border: 1px solid var(--glass-border);\n border-radius: 20px;\n font-size: 0.875rem;\n color: var(--text-primary);\n transition: all var(--transition-fast);\n cursor: pointer;\n backdrop-filter: blur(10px);\n }\n\n .tag:hover {\n background: var(--hover-bg);\n transform: translateY(-1px);\n border-color: var(--accent-blue);\n }\n\n .tag.active {\n background: var(--gradient-primary);\n border-color: transparent;\n color: white;\n }\n\n \/* MODAL\/OVERLAY *\/\n .modal-overlay {\n position: fixed;\n inset: 0;\n background: var(--overlay-bg);\n backdrop-filter: blur(8px);\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: 0;\n visibility: hidden;\n transition: all var(--transition-base);\n z-index: 1000;\n }\n\n .modal-overlay.active {\n opacity: 1;\n visibility: visible;\n }\n\n .modal-content {\n background: var(--glass-bg);\n backdrop-filter: blur(30px);\n border: 1px solid var(--glass-border);\n border-radius: var(--radius-lg);\n padding: var(--space-2xl);\n max-width: 500px;\n width: 90%;\n transform: scale(0.9) translateY(20px);\n transition: all var(--transition-base);\n box-shadow: var(--glass-shadow);\n color: var(--text-primary);\n }\n\n .modal-overlay.active .modal-content {\n transform: scale(1) translateY(0);\n }\n\n \/* SEARCH BAR *\/\n .search-container {\n position: relative;\n max-width: 400px;\n }\n\n .search-input {\n width: 100%;\n padding: 14px 20px 14px 48px;\n background: var(--glass-bg);\n border: 1px solid var(--glass-border);\n border-radius: var(--radius-xl);\n color: var(--text-primary);\n font-size: 1rem;\n transition: all var(--transition-base);\n backdrop-filter: blur(10px);\n }\n\n .search-input:focus {\n outline: none;\n border-color: var(--accent-blue);\n box-shadow: 0 0 0 3px rgba(84, 84, 255, 0.2);\n background: var(--hover-bg);\n }\n\n .search-icon {\n position: absolute;\n left: 18px;\n top: 50%;\n transform: translateY(-50%);\n color: var(--text-muted);\n transition: color var(--transition-fast);\n }\n\n .search-input:focus + .search-icon {\n color: var(--accent-blue);\n }\n\n \/* LOADING STATES *\/\n .skeleton {\n background: linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-highlight) 50%, var(--skeleton-base) 75%);\n background-size: 200% 100%;\n animation: loading 1.5s infinite;\n border-radius: var(--radius-sm);\n }\n\n @keyframes loading {\n 0% { background-position: 200% 0; }\n 100% { background-position: -200% 0; }\n }\n\n \/* TOOLTIP *\/\n .tooltip {\n position: relative;\n }\n\n .tooltip::before {\n content: attr(data-tooltip);\n position: absolute;\n bottom: 100%;\n left: 50%;\n transform: translateX(-50%) translateY(-8px);\n padding: var(--space-sm) var(--space-md);\n background: var(--text-primary);\n color: var(--bg-secondary);\n font-size: 0.875rem;\n border-radius: var(--radius-sm);\n white-space: nowrap;\n opacity: 0;\n visibility: hidden;\n transition: all var(--transition-fast);\n pointer-events: none;\n font-weight: 500;\n }\n\n [data-theme=\"light\"] .tooltip::before {\n background: var(--text-primary);\n color: white;\n }\n\n .tooltip:hover::before {\n opacity: 1;\n visibility: visible;\n transform: translateX(-50%) translateY(-4px);\n }\n\n \/* DIVIDER *\/\n .divider {\n height: 1px;\n background: linear-gradient(90deg, transparent, var(--glass-border), transparent);\n margin: var(--space-xl) 0;\n }\n\n \/* ALERTS *\/\n .alert {\n padding: var(--space-md) var(--space-lg);\n border-radius: var(--radius-sm);\n border: 1px solid;\n margin-bottom: var(--space-md);\n display: flex;\n align-items: center;\n gap: var(--space-md);\n backdrop-filter: blur(10px);\n }\n\n .alert-info {\n background: rgba(84, 84, 255, 0.1);\n border-color: rgba(84, 84, 255, 0.3);\n color: var(--accent-blue);\n }\n\n [data-theme=\"light\"] .alert-info {\n background: rgba(84, 84, 255, 0.05);\n }\n\n .alert-success {\n background: rgba(76, 175, 80, 0.1);\n border-color: rgba(76, 175, 80, 0.3);\n color: #4caf50;\n }\n\n .alert-warning {\n background: rgba(255, 152, 0, 0.1);\n border-color: rgba(255, 152, 0, 0.3);\n color: #ff9800;\n }\n\n .alert-error {\n background: rgba(205, 84, 84, 0.1);\n border-color: rgba(205, 84, 84, 0.3);\n color: var(--accent-red);\n }\n\n \/* DEMO GRID *\/\n .demo-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: var(--space-lg);\n }\n\n .demo-item {\n padding: var(--space-lg);\n }\n\n \/* RESPONSIVE *\/\n @media (max-width: 768px) {\n .bento-item.large {\n grid-column: span 1;\n }\n \n .nav-links {\n display: none;\n }\n \n h1 {\n font-size: 2rem;\n }\n\n .theme-toggle {\n top: 10px;\n right: 10px;\n }\n }\n\n \/* FOCUS VISIBLE \u0434\u043b\u044f accessibility *\/\n *:focus-visible {\n outline: 2px solid var(--accent-blue);\n outline-offset: 2px;\n }\n\n button:focus-visible,\n a:focus-visible {\n outline: 2px solid var(--accent-blue);\n outline-offset: 4px;\n }\n\n \/* Smooth theme transition for all elements *\/\n *, *::before, *::after {\n transition: background-color var(--transition-base),\n border-color var(--transition-base),\n color var(--transition-base),\n box-shadow var(--transition-base);\n }\n <\/style>\n<\/head>\n<body>\n <!-- Theme Toggle -->\n <button class=\"theme-toggle\" id=\"themeToggle\" aria-label=\"P\u0101rsl\u0113gt t\u0113mu\">\n <div class=\"theme-toggle-slider\">\n <span id=\"themeIcon\">\ud83c\udf19<\/span>\n <\/div>\n <\/button>\n\n <!-- Navigation -->\n <nav class=\"nav-glass\">\n <div class=\"nav-content\">\n <div class=\"nav-logo\">E-lekcijas.lv<\/div>\n <ul class=\"nav-links\">\n <li><a href=\"#\" target=\"_blank\" rel=\"noopener noreferrer\">Kursi<\/a><\/li>\n <li><a href=\"#\" target=\"_blank\" rel=\"noopener noreferrer\">Par mums<\/a><\/li>\n <li><a href=\"#\" target=\"_blank\" rel=\"noopener noreferrer\">K\u0101 tas darbojas<\/a><\/li>\n <li><a href=\"#\" target=\"_blank\" rel=\"noopener noreferrer\">Kontakti<\/a><\/li>\n <\/ul>\n <button class=\"btn btn-secondary\" style=\"padding: 10px 20px; font-size: 0.875rem;\">Ien\u0101kt<\/button>\n <\/div>\n <\/nav>\n\n <div class=\"container\">\n <h1>Design System<\/h1>\n\n <!-- Bento Grid Section -->\n <div class=\"section\">\n <h2>Bento Grid Layout<\/h2>\n <div class=\"bento-grid\">\n <div class=\"bento-item large\">\n <h3 style=\"font-size: 1.5rem; margin-bottom: var(--space-md);\">Featured Course<\/h3>\n <p style=\"color: var(--text-secondary); margin-bottom: var(--space-lg);\">Complete endocrinology program for medical professionals seeking certification.<\/p>\n <div style=\"display: flex; gap: var(--space-md);\">\n <button class=\"btn btn-primary\">Uzzin\u0101t vair\u0101k<\/button>\n <button class=\"btn btn-secondary\">Skat\u012bties preview<\/button>\n <\/div>\n <\/div>\n <div class=\"bento-item small\">\n <div class=\"card-icon\" style=\"margin-bottom: var(--space-md);\">\ud83d\udcca<\/div>\n <h4 style=\"margin-bottom: var(--space-sm); color: var(--text-primary);\">Progress<\/h4>\n <div class=\"progress-container\" style=\"margin-bottom: var(--space-sm);\">\n <div class=\"progress-bar\" style=\"width: 75%;\"><\/div>\n <\/div>\n <p style=\"color: var(--text-secondary); font-size: 0.875rem;\">75% completed<\/p>\n <\/div>\n <div class=\"bento-item small\">\n <div style=\"font-size: 2.5rem; margin-bottom: var(--space-sm);\">\ud83c\udfc6<\/div>\n <h4 style=\"color: var(--accent-red);\">12<\/h4>\n <p style=\"color: var(--text-secondary);\">Sertifik\u0101ti ieg\u016bti<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Buttons Section -->\n <div class=\"section\">\n <h2>Buttons<\/h2>\n <div class=\"demo-grid\">\n <div class=\"demo-item\">\n <h4 style=\"margin-bottom: var(--space-md); color: var(--text-secondary);\">Primary<\/h4>\n <button class=\"btn btn-primary\">Maks\u0101t \u20ac299<\/button>\n <\/div>\n <div class=\"demo-item\">\n <h4 style=\"margin-bottom: var(--space-md); color: var(--text-secondary);\">Secondary<\/h4>\n <button class=\"btn btn-secondary\">Saglab\u0101t<\/button>\n <\/div>\n <div class=\"demo-item\">\n <h4 style=\"margin-bottom: var(--space-md); color: var(--text-secondary);\">Ghost<\/h4>\n <button class=\"btn btn-ghost\">Atcelt<\/button>\n <\/div>\n <div class=\"demo-item\">\n <h4 style=\"margin-bottom: var(--space-md); color: var(--text-secondary);\">Gradient Red<\/h4>\n <button class=\"btn btn-gradient-red\">Dz\u0113st<\/button>\n <\/div>\n <div class=\"demo-item\">\n <h4 style=\"margin-bottom: var(--space-md); color: var(--text-secondary);\">Gradient Blue<\/h4>\n <button class=\"btn btn-gradient-blue\">Lejupiel\u0101d\u0113t<\/button>\n <\/div>\n <div class=\"demo-item\">\n <h4 style=\"margin-bottom: var(--space-md); color: var(--text-secondary);\">Disabled<\/h4>\n <button class=\"btn btn-primary\" disabled>Apstr\u0101d\u0101...<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Form Elements -->\n <div class=\"section\">\n <h2>Form Elements<\/h2>\n <div class=\"bento-grid\">\n <div class=\"bento-item\">\n <h4 style=\"margin-bottom: var(--space-lg); color: var(--text-primary);\">Text Inputs<\/h4>\n <div class=\"form-group\">\n <label class=\"form-label\">V\u0101rds<\/label>\n <input type=\"text\" class=\"form-input\" placeholder=\"Ievadiet v\u0101rdu\">\n <\/div>\n <div class=\"form-group\">\n <label class=\"form-label\">E-pasts<\/label>\n <input type=\"email\" class=\"form-input\" placeholder=\"verts@example.com\">\n <\/div>\n <div class=\"form-group\">\n <label class=\"form-label\">Parole<\/label>\n <input type=\"password\" class=\"form-input\" placeholder=\"\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\">\n <\/div>\n <\/div>\n \n <div class=\"bento-item\">\n <h4 style=\"margin-bottom: var(--space-lg); color: var(--text-primary);\">States<\/h4>\n <div class=\"form-group\">\n <label class=\"form-label\">Error state<\/label>\n <input type=\"text\" class=\"form-input error\" value=\"invalid-email\">\n <\/div>\n <div class=\"form-group\">\n <label class=\"form-label\">Success state<\/label>\n <input type=\"text\" class=\"form-input success\" value=\"valid@email.com\">\n <\/div>\n <div class=\"form-group\">\n <label class=\"form-label\">Disabled<\/label>\n <input type=\"text\" class=\"form-input\" disabled value=\"Nevar redi\u0123\u0113t\">\n <\/div>\n <\/div>\n\n <div class=\"bento-item\">\n <h4 style=\"margin-bottom: var(--space-lg); color: var(--text-primary);\">Select & Textarea<\/h4>\n <div class=\"form-group\">\n <label class=\"form-label\">Specialit\u0101te<\/label>\n <div class=\"select-wrapper\">\n <select class=\"form-input form-select\">\n <option>Endokrinolo\u0123ija<\/option>\n <option>Kardiolo\u0123ija<\/option>\n <option>Neirologija<\/option>\n <\/select>\n <\/div>\n <\/div>\n <div class=\"form-group\">\n <label class=\"form-label\">Zi\u0146ojums<\/label>\n <textarea class=\"form-input form-textarea\" placeholder=\"J\u016bsu zi\u0146ojums...\"><\/textarea>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Checkboxes & Radios -->\n <div class=\"section\">\n <h2>Checkboxes, Radios & Toggles<\/h2>\n <div class=\"bento-grid\">\n <div class=\"bento-item\">\n <h4 style=\"margin-bottom: var(--space-lg); color: var(--text-primary);\">Checkboxes<\/h4>\n <label class=\"checkbox-wrapper\">\n <input type=\"checkbox\" class=\"checkbox-input\" checked>\n <span class=\"checkbox-label\">Piekr\u012btu noteikumiem<\/span>\n <\/label>\n <label class=\"checkbox-wrapper\">\n <input type=\"checkbox\" class=\"checkbox-input\">\n <span class=\"checkbox-label\">Sa\u0146emt jaunumus<\/span>\n <\/label>\n <\/div>\n \n <div class=\"bento-item\">\n <h4 style=\"margin-bottom: var(--space-lg); color: var(--text-primary);\">Radio Buttons<\/h4>\n <label class=\"radio-wrapper\">\n <input type=\"radio\" name=\"payment\" class=\"radio-input\" checked>\n <span class=\"radio-label\">Stripe<\/span>\n <\/label>\n <label class=\"radio-wrapper\">\n <input type=\"radio\" name=\"payment\" class=\"radio-input\">\n <span class=\"radio-label\">Mollie<\/span>\n <\/label>\n <\/div>\n\n <div class=\"bento-item\">\n <h4 style=\"margin-bottom: var(--space-lg); color: var(--text-primary);\">Toggle Switch<\/h4>\n <label class=\"toggle-wrapper\">\n <input type=\"checkbox\" class=\"toggle-input\" checked>\n <span class=\"checkbox-label\">Autom\u0101tiskie atg\u0101din\u0101jumi<\/span>\n <\/label>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Course Cards -->\n <div class=\"section\">\n <h2>Course Cards<\/h2>\n <div class=\"bento-grid\">\n <div class=\"card course-card\">\n <div class=\"course-image\">\ud83c\udfa5\n <span class=\"course-badge\">Jauns<\/span>\n <\/div>\n <h3 class=\"course-title\">Endokrinolo\u0123ijas pamati<\/h3>\n <div class=\"course-meta\">\n <span>\u23f1 12h<\/span>\n <span>\ud83d\udcda 8 nodarb\u012bbas<\/span>\n <span>\ud83c\udfaf Ies\u0101c\u0113jiem<\/span>\n <\/div>\n <p style=\"color: var(--text-secondary); margin-bottom: var(--space-md); font-size: 0.9rem;\">Pamatzin\u0101\u0161anas par endokr\u012bno sist\u0113mu un slim\u012bb\u0101m.<\/p>\n <div class=\"course-price\">\u20ac149<\/div>\n <\/div>\n\n <div class=\"card course-card\">\n <div class=\"course-image\" style=\"background: linear-gradient(135deg, rgba(205, 84, 84, 0.1) 0%, rgba(84, 84, 255, 0.1) 100%);\">\ud83c\udfa5\n <span class=\"course-badge\" style=\"background: var(--gradient-red); color: white; border: none;\">Popul\u0101rs<\/span>\n <\/div>\n <h3 class=\"course-title\">Diab\u0113ta mened\u017ements<\/h3>\n <div class=\"course-meta\">\n <span>\u23f1 24h<\/span>\n <span>\ud83d\udcda 15 nodarb\u012bbas<\/span>\n <span>\ud83c\udfaf Vid\u0113js<\/span>\n <\/div>\n <p style=\"color: var(--text-secondary); margin-bottom: var(--space-md); font-size: 0.9rem;\">Padzi\u013cin\u0101ts kurss par 1. un 2. tipa diab\u0113tu.<\/p>\n <div class=\"course-price\">\u20ac299<\/div>\n <\/div>\n\n <div class=\"card course-card\">\n <div class=\"course-image\">\ud83c\udfa5\n <span class=\"course-badge\">Dr\u012bzum\u0101<\/span>\n <\/div>\n <h3 class=\"course-title\">Vairogdziedzera \u0137irur\u0123ija<\/h3>\n <div class=\"course-meta\">\n <span>\u23f1 18h<\/span>\n <span>\ud83d\udcda 12 nodarb\u012bbas<\/span>\n <span>\ud83c\udfaf Ekspertiem<\/span>\n <\/div>\n <p style=\"color: var(--text-secondary); margin-bottom: var(--space-md); font-size: 0.9rem;\">Operat\u012bv\u0101s tehnikas un postoperat\u012bv\u0101 apr\u016bpe.<\/p>\n <div class=\"course-price\">\u20ac399<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Tags & Search -->\n <div class=\"section\">\n <h2>Tags & Search<\/h2>\n <div class=\"bento-grid\">\n <div class=\"bento-item\">\n <h4 style=\"margin-bottom: var(--space-lg); color: var(--text-primary);\">Filter Tags<\/h4>\n <div style=\"display: flex; flex-wrap: wrap; gap: var(--space-sm);\">\n <span class=\"tag active\">Visi<\/span>\n <span class=\"tag\">Endokrinolo\u0123ija<\/span>\n <span class=\"tag\">Kardiolo\u0123ija<\/span>\n <span class=\"tag\">Neirologija<\/span>\n <span class=\"tag\">Ies\u0101c\u0113jiem<\/span>\n <span class=\"tag\">Vid\u0113js<\/span>\n <span class=\"tag\">Ekspertiem<\/span>\n <\/div>\n <\/div>\n \n <div class=\"bento-item\">\n <h4 style=\"margin-bottom: var(--space-lg); color: var(--text-primary);\">Search<\/h4>\n <div class=\"search-container\">\n <span class=\"search-icon\">\ud83d\udd0d<\/span>\n <input type=\"text\" class=\"search-input\" placeholder=\"Mekl\u0113t kursus...\">\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Alerts -->\n <div class=\"section\">\n <h2>Alerts<\/h2>\n <div class=\"alert alert-info\">\n <span>\u2139\ufe0f<\/span>\n <span>Jauns kurss pieejams no n\u0101kam\u0101s ned\u0113\u013cas!<\/span>\n <\/div>\n <div class=\"alert alert-success\">\n <span>\u2713<\/span>\n <span>Maks\u0101jums veiksm\u012bgi apstr\u0101d\u0101ts. Piek\u013cuve atv\u0113rta.<\/span>\n <\/div>\n <div class=\"alert alert-warning\">\n <span>\u26a0<\/span>\n <span>Sertifik\u0101ts j\u0101atjauno l\u012bdz 31.12.2025.<\/span>\n <\/div>\n <div class=\"alert alert-error\">\n <span>\u2715<\/span>\n <span>K\u013c\u016bda apstr\u0101d\u0101jot maks\u0101jumu. L\u016bdzu, m\u0113\u0123iniet v\u0113lreiz.<\/span>\n <\/div>\n <\/div>\n\n <!-- Modal Demo -->\n <div class=\"section\">\n <h2>Modal<\/h2>\n <button class=\"btn btn-primary\" onclick=\"document.getElementById('demoModal').classList.add('active')\">Atv\u0113rt mod\u0101lo logu<\/button>\n <\/div>\n\n <div class=\"divider\"><\/div>\n\n <div style=\"text-align: center; color: var(--text-secondary); padding: var(--space-xl);\">\n <p>E-lekcijas.lv Design System 2026<\/p>\n <\/div>\n <\/div>\n\n <!-- Modal -->\n <div id=\"demoModal\" class=\"modal-overlay\" onclick=\"if(event.target === this) this.classList.remove('active')\">\n <div class=\"modal-content\">\n <h3 style=\"margin-bottom: var(--space-md); color: var(--text-primary);\">Apstiprin\u0101t maks\u0101jumu<\/h3>\n <p style=\"color: var(--text-secondary); margin-bottom: var(--space-lg);\">Vai tie\u0161\u0101m v\u0113laties ieg\u0101d\u0101ties kursu \"Endokrinolo\u0123ijas pamati\" par \u20ac149?<\/p>\n <div style=\"display: flex; gap: var(--space-md); justify-content: flex-end;\">\n <button class=\"btn btn-secondary\" onclick=\"document.getElementById('demoModal').classList.remove('active')\">Atcelt<\/button>\n <button class=\"btn btn-primary\" onclick=\"document.getElementById('demoModal').classList.remove('active')\">Apstiprin\u0101t<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n\/\/ Theme Toggle Functionality\nconst themeToggle = document.getElementById('themeToggle');\nconst themeIcon = document.getElementById('themeIcon');\nconst html = document.documentElement;\n\n\/\/ Check for saved theme preference or default to LIGHT\nconst currentTheme = localStorage.getItem('theme') || 'light';\nhtml.setAttribute('data-theme', currentTheme);\nupdateThemeIcon(currentTheme);\n\nthemeToggle.addEventListener('click', () => {\n const currentTheme = html.getAttribute('data-theme');\n const newTheme = currentTheme === 'light' ? 'dark' : 'light';\n \n html.setAttribute('data-theme', newTheme);\n localStorage.setItem('theme', newTheme);\n updateThemeIcon(newTheme);\n});\n\nfunction updateThemeIcon(theme) {\n themeIcon.textContent = theme === 'light' ? '\u2600\ufe0f' : '\ud83c\udf19';\n}\n\n \/\/ Interactive states demonstration\n document.querySelectorAll('.tag').forEach(tag => {\n tag.addEventListener('click', function() {\n this.classList.toggle('active');\n });\n });\n\n \/\/ Form validation simulation\n document.querySelectorAll('.form-input').forEach(input => {\n input.addEventListener('blur', function() {\n if (this.value.includes('@') && this.value.includes('.')) {\n this.classList.remove('error');\n this.classList.add('success');\n } else if (this.value && this.type === 'email') {\n this.classList.remove('success');\n this.classList.add('error');\n }\n });\n });\n\n \/\/ Ripple effect for buttons\n document.querySelectorAll('.btn').forEach(button => {\n button.addEventListener('click', function(e) {\n const rect = this.getBoundingClientRect();\n const x = e.clientX - rect.left;\n const y = e.clientY - rect.top;\n \n const ripple = document.createElement('span');\n ripple.style.cssText = `\n position: absolute;\n background: rgba(255,255,255,0.3);\n border-radius: 50%;\n transform: scale(0);\n animation: ripple 0.6s linear;\n pointer-events: none;\n width: 100px;\n height: 100px;\n left: ${x - 50}px;\n top: ${y - 50}px;\n `;\n \n this.style.position = 'relative';\n this.style.overflow = 'hidden';\n this.appendChild(ripple);\n \n setTimeout(() => ripple.remove(), 600);\n });\n });\n\n \/\/ Add ripple animation\n const style = document.createElement('style');\n style.textContent = `\n @keyframes ripple {\n to {\n transform: scale(4);\n opacity: 0;\n }\n }\n `;\n document.head.appendChild(style);\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>E-lekcijas Design System \ud83c\udf19 E-lekcijas.lv Kursi Par mums K\u0101 tas darbojas Kontakti Ien\u0101kt Design System Bento Grid Layout Featured Course Complete endocrinology program for medical professionals seeking certification. Uzzin\u0101t vair\u0101k Skat\u012bties preview \ud83d\udcca Progress 75% completed \ud83c\udfc6 12 Sertifik\u0101ti ieg\u016bti Buttons Primary Maks\u0101t \u20ac299 Secondary Saglab\u0101t Ghost Atcelt Gradient Red Dz\u0113st Gradient Blue Lejupiel\u0101d\u0113t Disabled … <a title=\"design-preview\" class=\"read-more\" href=\"https:\/\/nea.codes\/ru\/design-preview\/\" aria-label=\"\u041f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435 \u043e design-preview\">\u0427\u0438\u0442\u0430\u0442\u044c \u0434\u0430\u043b\u0435\u0435<\/a><\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-2643","page","type-page","status-publish"],"acf":[],"rankMath":{"parentDomain":"nea.codes","noFollowDomains":[],"noFollowExcludeDomains":[],"noFollowExternalLinks":false,"featuredImageNotice":"\u041f\u043e\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435 200 \u043d\u0430 200 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439, \u0447\u0442\u043e\u0431\u044b \u0435\u0433\u043e \u043c\u043e\u0433\u043b\u0438 \u0443\u0432\u0438\u0434\u0435\u0442\u044c Facebook \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0441\u0430\u0439\u0442\u044b \u0441\u043e\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u0435\u0442\u0435\u0439.","pluginReviewed":false,"postSettings":{"linkSuggestions":true,"useFocusKeyword":false},"frontEndScore":false,"postName":"design-preview","permalinkFormat":"https:\/\/nea.codes\/ru\/%pagename%\/","showLockModifiedDate":true,"assessor":{"focusKeywordLink":"https:\/\/nea.codes\/wp-admin\/edit.php?focus_keyword=%focus_keyword%&post_type=%post_type%","hasTOCPlugin":true,"primaryTaxonomy":false,"serpData":{"title":"","description":"","focusKeywords":"","pillarContent":false,"canonicalUrl":"","breadcrumbTitle":"","advancedRobots":{"max-snippet":"-1","max-video-preview":"-1","max-image-preview":"large"},"facebookTitle":"","facebookDescription":"","facebookImage":"","facebookImageID":"","facebookHasOverlay":false,"facebookImageOverlay":"","facebookAuthor":"","twitterCardType":"","twitterUseFacebook":true,"twitterTitle":"","twitterDescription":"","twitterImage":"","twitterImageID":"","twitterHasOverlay":false,"twitterImageOverlay":"","twitterPlayerUrl":"","twitterPlayerSize":"","twitterPlayerStream":"","twitterPlayerStreamCtype":"","twitterAppDescription":"","twitterAppIphoneName":"","twitterAppIphoneID":"","twitterAppIphoneUrl":"","twitterAppIpadName":"","twitterAppIpadID":"","twitterAppIpadUrl":"","twitterAppGoogleplayName":"","twitterAppGoogleplayID":"","twitterAppGoogleplayUrl":"","twitterAppCountry":"","robots":{"index":true},"twitterAuthor":"\u0438\u043c\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f","primaryTerm":0,"authorName":"eugene.novikoff","titleTemplate":"%title% %sep% %sitename%","descriptionTemplate":"%excerpt%","showScoreFrontend":true,"lockModifiedDate":false},"powerWords":[],"diacritics":{"A":"[\\u0410\\u0430]","B":"[\\u0411\\u0431]","V":"[\\u0412\\u0432]","G":"[\\u0413\\u0433]","D":"[\\u0414\\u0434]","YE":"[\\u0415\\u0435]","YO":"[\\u0401\\u0451]","ZH":"[\\u0416\\u0436]","Z":"[\\u0417\\u0437]","EE":"[\\u0418\\u0438]","YI":"[\\u0419\\u0439]","K":"[\\u041A\\u043A]","L":"[\\u041B\\u043B]","M":"[\\u041C\\u043c]","P":"[\\u041F\\u043F]","T":"[\\u0422\\u0442]","U":"[\\u0423\\u0443]","F":"[\\u0424\\u0444]","H":"[\\u0425\\u0445]","TS":"[\\u0426\\u0446]","CH":"[\\u0427\\u0447]","SH":"[\\u0428\\u0448\\u0429\\u0449]","I":"[\\u042B\\u044B]","E":"[\\u042D\\u044D]","YU":"[\\u042E\\u044E]","YA":"[\\u042F\\u044F]","N":"[\\u041D\\u043D]"},"researchesTests":["contentHasTOC","contentHasShortParagraphs","contentHasAssets","keywordInTitle","keywordInMetaDescription","keywordInPermalink","keywordIn10Percent","keywordInContent","keywordInSubheadings","keywordInImageAlt","keywordDensity","keywordNotUsed","lengthContent","lengthPermalink","linksHasInternal","linksHasExternals","linksNotAllExternals","titleStartWithKeyword","titleSentiment","titleHasPowerWords","titleHasNumber","hasContentAI"],"hasRedirection":false,"hasBreadcrumb":true},"homeUrl":"https:\/\/nea.codes\/ru","objectID":2643,"objectType":"post","locale":"ru","localeFull":"ru_RU","overlayImages":{"play":{"name":"Play \u0438\u043a\u043e\u043d\u043a\u0430","url":"https:\/\/nea.codes\/wp-content\/plugins\/seo-by-rank-math\/assets\/admin\/img\/icon-play.png","path":"\/home\/u646275238\/domains\/nea.codes\/public_html\/wp-content\/plugins\/seo-by-rank-math\/assets\/admin\/img\/icon-play.png","position":"middle_center"},"gif":{"name":"GIF \u0438\u043a\u043e\u043d\u043a\u0430","url":"https:\/\/nea.codes\/wp-content\/plugins\/seo-by-rank-math\/assets\/admin\/img\/icon-gif.png","path":"\/home\/u646275238\/domains\/nea.codes\/public_html\/wp-content\/plugins\/seo-by-rank-math\/assets\/admin\/img\/icon-gif.png","position":"middle_center"}},"defautOgImage":"https:\/\/nea.codes\/wp-content\/plugins\/seo-by-rank-math\/assets\/admin\/img\/social-placeholder.jpg","customPermalinks":true,"isUserRegistered":true,"autoSuggestKeywords":true,"connectSiteUrl":"https:\/\/rankmath.com\/auth?site=https%3A%2F%2Fnea.codes%2Fru&r=https%3A%2F%2Fnea.codes%2Fru%2Fwp-json%2Fwp%2Fv2%2Fpages%2F2643%3Fnonce%3D7089174d38&pro=1","maxTags":100,"trendsIcon":"<svg viewBox=\"0 0 610 610\"><path d=\"M18.85,446,174.32,290.48l58.08,58.08L76.93,504a14.54,14.54,0,0,1-20.55,0L18.83,466.48a14.54,14.54,0,0,1,0-20.55Z\" style=\"fill:#4285f4\"\/><path d=\"M242.65,242.66,377.59,377.6l-47.75,47.75a14.54,14.54,0,0,1-20.55,0L174.37,290.43l47.75-47.75A14.52,14.52,0,0,1,242.65,242.66Z\" style=\"fill:#ea4335\"\/><polygon points=\"319.53 319.53 479.26 159.8 537.34 217.88 377.61 377.62 319.53 319.53\" style=\"fill:#fabb05\"\/><path d=\"M594.26,262.73V118.61h0a16.94,16.94,0,0,0-16.94-16.94H433.2a16.94,16.94,0,0,0-12,28.92L565.34,274.71h0a16.94,16.94,0,0,0,28.92-12Z\" style=\"fill:#34a853\"\/><rect width=\"610\" height=\"610\" style=\"fill:none\"\/><\/svg>","showScore":true,"siteFavIcon":"https:\/\/nea.codes\/wp-content\/uploads\/2025\/01\/NEA-Favicon-512-150x150.png","canUser":{"general":false,"advanced":false,"snippet":false,"social":false,"analysis":false,"analytics":false,"content_ai":false},"isPro":true,"is_front_page":false,"trendsUpgradeLink":"https:\/\/rankmath.com\/pricing\/?utm_source=Plugin&utm_medium=CE%20General%20Tab%20Trends&utm_campaign=WP","trendsUpgradeLabel":"\u0410\u043f\u0433\u0440\u0435\u0439\u0434","trendsPreviewImage":"https:\/\/nea.codes\/wp-content\/plugins\/seo-by-rank-math\/assets\/admin\/img\/trends-preview.jpg","currentEditor":false,"homepageData":{"assessor":{"powerWords":[],"diacritics":true,"researchesTests":["contentHasTOC","contentHasShortParagraphs","contentHasAssets","keywordInTitle","keywordInMetaDescription","keywordInPermalink","keywordIn10Percent","keywordInContent","keywordInSubheadings","keywordInImageAlt","keywordDensity","keywordNotUsed","lengthContent","lengthPermalink","linksHasInternal","linksHasExternals","linksNotAllExternals","titleStartWithKeyword","titleSentiment","titleHasPowerWords","titleHasNumber","hasContentAI"],"hasBreadcrumb":true,"serpData":{"title":"%sitename% %page% %sep% %sitedesc%","description":"","titleTemplate":"%sitename% %page% %sep% %sitedesc%","descriptionTemplate":"","focusKeywords":"","breadcrumbTitle":"Home","robots":{"index":true},"advancedRobots":{"max-snippet":"-1","max-video-preview":"-1","max-image-preview":"large"},"facebookTitle":"","facebookDescription":"","facebookImage":"","facebookImageID":""}}},"isAnalyticsConnected":true,"tocTitle":"Table of Contents","tocExcludeHeadings":[],"listStyle":"ul"},"_links":{"self":[{"href":"https:\/\/nea.codes\/ru\/wp-json\/wp\/v2\/pages\/2643","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nea.codes\/ru\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nea.codes\/ru\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nea.codes\/ru\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nea.codes\/ru\/wp-json\/wp\/v2\/comments?post=2643"}],"version-history":[{"count":10,"href":"https:\/\/nea.codes\/ru\/wp-json\/wp\/v2\/pages\/2643\/revisions"}],"predecessor-version":[{"id":2653,"href":"https:\/\/nea.codes\/ru\/wp-json\/wp\/v2\/pages\/2643\/revisions\/2653"}],"wp:attachment":[{"href":"https:\/\/nea.codes\/ru\/wp-json\/wp\/v2\/media?parent=2643"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}