Загрузка данных


// ==UserScript==
// @name         Pocket Option — симуляция для видео
// @namespace    local.pocket-demo-video
// @version      1.1.0
// @description  Отдельные постановочные сделки с таймером и явной маркировкой симуляции.
// @match        https://pocketoption.com/*/cabinet/demo-quick-high-low/*
// @match        https://pocketoption.com/*/cabinet/demo-quick-high-low/
// @grant        none
// @noframes
// @run-at       document-idle
// ==/UserScript==

(() => {
    'use strict';

    const HOST_ID = 'po-video-simulation';
    const allowed = () => location.hostname === 'pocketoption.com' &&
        /^\/[a-z]{2}(?:-[a-z]{2})?\/cabinet\/demo-quick-high-low\/?$/i.test(location.pathname);
    if (!allowed() || document.getElementById(HOST_ID)) return;

    const host = document.createElement('div');
    host.id = HOST_ID;
    host.style.cssText = 'all:initial!important;position:fixed!important;left:16px!important;bottom:16px!important;z-index:2147483647!important;display:block!important;';
    const root = host.attachShadow({ mode: 'open' });
    root.innerHTML = `
      <style>
        :host { color-scheme:dark; }
        * { box-sizing:border-box; }
        .panel { width:358px; max-width:calc(100vw - 32px); background:#151d2b;
          color:#edf3ff; border:1px solid #3e5068; border-radius:16px;
          box-shadow:0 12px 44px #0008; font:13px/1.45 system-ui,sans-serif; overflow:hidden; }
        header { padding:15px 16px 12px; background:#1e2b40; }
        .top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
        strong { font-size:13px; letter-spacing:.05em; }
        .badge { color:#ffdc91; font-size:11px; font-weight:800; }
        .note { margin-top:5px; color:#c2cee1; font-size:11px; }
        .body { padding:12px 16px 16px; }
        .fields { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
        label { display:block; font-size:11px; color:#c2cee1; }
        input { width:100%; margin-top:4px; padding:8px; background:#0d1522;
          color:#fff; border:1px solid #485971; border-radius:7px; font:inherit; }
        button { cursor:pointer; font:600 12px system-ui,sans-serif; border:1px solid #485971;
          border-radius:8px; background:#26354b; color:#edf3ff; padding:9px 10px; }
        button:hover { filter:brightness(1.15); }
        button:focus-visible, input:focus-visible, summary:focus-visible { outline:2px solid #96d4ff; outline-offset:2px; }
        button:disabled { opacity:.5; cursor:default; }
        #toggle { padding:3px 8px; font-size:16px; }
        .actions { display:flex; gap:8px; margin-top:10px; }
        .actions button { flex:1; }
        #up { background:#087144; border-color:#179b65; }
        #down { background:#304d7d; border-color:#537fb2; }
        #status { min-height:30px; margin-top:10px; color:#c2cee1; font-size:11px; }
        #trades { display:grid; gap:8px; max-height:280px; overflow:auto; margin:8px 0; }
        .trade { border:1px solid #19784d; background:#102c25; border-radius:10px; padding:10px; }
        .trade-top { display:flex; justify-content:space-between; gap:8px; }
        .value { color:#5aefa1; font-size:21px; font-weight:750; font-variant-numeric:tabular-nums; }
        .meta { color:#bad2c8; font-size:11px; }
        .tag { color:#ffd991; font-size:10px; font-weight:800; letter-spacing:.04em; }
        progress { width:100%; height:5px; accent-color:#3fe28c; display:block; margin-top:9px; }
        details { margin-top:10px; border-top:1px solid #34445c; padding-top:10px; }
        summary { cursor:pointer; color:#c2cee1; font-size:12px; }
        p { margin:8px 0; font-size:11px; color:#c2cee1; }
        .small { font-size:11px; padding:7px; }
        #clear { width:100%; margin-top:6px; }
        [hidden] { display:none!important; }
        .empty { color:#a9b9ce; padding:12px 0; text-align:center; }
        @media (prefers-reduced-motion:no-preference) { .trade { animation:appear .18s ease-out; } }
        @keyframes appear { from { opacity:0; transform:translateY(5px); } }
      </style>
      <section class="panel" aria-label="Симуляция сделок для видео">
        <header>
          <div class="top"><strong>ДЕМО / СИМУЛЯЦИЯ</strong><button id="toggle" aria-expanded="true" aria-label="Свернуть панель">−</button></div>
          <div class="note">Постановочные результаты для видео · не данные счёта</div>
        </header>
        <div class="body" id="body">
          <div class="fields">
            <label>Сумма, $<input id="amount" type="number" value="100" min="1" max="100000" step="0.01"></label>
            <label>Прибыль, %<input id="payout" type="number" value="92" min="1" max="100" step="0.01"></label>
            <label>Время, сек.<input id="seconds" type="number" value="10" min="1" max="3600" step="1"></label>
          </div>
          <div class="actions"><button id="up">↑ Сцена «Выше»</button><button id="down">↓ Сцена «Ниже»</button></div>
          <div class="actions"><button id="place-chart" class="small">Разместить на графике</button><button id="hide-chart" class="small">Скрыть график сцены</button></div>
          <div id="status" role="status" aria-live="polite">Создай сцену или привяжи кнопки сайта ниже.</div>
          <div id="trades" aria-label="Постановочные сделки"></div>
          <button id="clear" class="small">Очистить сцены</button>
          <details>
            <summary>Привязать к нажатию кнопок сайта</summary>
            <p>Выбери направление, затем нажми соответствующую кнопку сайта. Клик выбора будет перехвачен. Следующие клики выполняют обычное действие сайта и добавляют сцену здесь.</p>
            <div class="actions"><button id="bind-up" class="small">Выбрать «Выше»</button><button id="bind-down" class="small">Выбрать «Ниже»</button></div>
            <div class="actions"><button id="unbind" class="small">Убрать привязки</button><button id="cancel" class="small">Отмена выбора</button></div>
            <p>Сумма, процент и время берутся из этой панели. Привязки действуют до перезагрузки; при замене кнопки сайтом выбери её заново. Esc отменяет выбор.</p>
          </details>
        </div>
      </section>`;
    document.body.append(host);

    const $ = id => root.getElementById(id);
    const money = value => '$' + value.toFixed(2);
    const directions = { up: '↑ Выше', down: '↓ Ниже' };
    const bindings = new Map();
    let selection = null;
    let counter = 0;
    let trades = [];
    const status = message => { $('status').textContent = message; };

    const chartHost = document.createElement('div');
    chartHost.id = 'po-video-chart';
    chartHost.style.cssText = 'all:initial!important;position:fixed!important;z-index:2147483646!important;display:none!important;';
    const chart = chartHost.attachShadow({ mode: 'open' });
    chart.innerHTML = `
      <style>
        * { box-sizing:border-box; }
        section { width:100%; height:100%; display:flex; flex-direction:column; overflow:hidden;
          background:#101827; border:1px solid #4b647e; border-radius:12px; color:#dce9fa; font:13px/1.4 system-ui,sans-serif; }
        header { padding:12px 16px; display:flex; justify-content:space-between; align-items:center; gap:8px; }
        strong { color:#ffdc91; font-size:13px; } small { display:block; color:#aabdce; font-size:11px; }
        button { background:#293b52; border:1px solid #4b647e; border-radius:6px; padding:5px 9px; color:white; cursor:pointer; }
        svg { display:block; flex:1; min-height:0; width:100%; }
        footer { display:flex; justify-content:space-between; gap:8px; padding:10px 16px; font-size:12px; border-top:1px solid #293b52; }
        #result { color:#5aefa1; font-weight:700; }
      </style>
      <section aria-label="График постановочной сцены">
        <header><div><strong>ДЕМО / СИМУЛЯЦИЯ</strong><small>Синтетический график · условный индекс · не котировки</small></div><button id="close" aria-label="Скрыть график симуляции">×</button></header>
        <svg viewBox="0 0 800 380" preserveAspectRatio="none" role="img" aria-label="Синтетическое движение цены выбранной сцены">
          <defs><pattern id="grid" width="80" height="55" patternUnits="userSpaceOnUse"><path d="M 80 0 L 0 0 0 55" fill="none" stroke="#253247" stroke-width="1"/></pattern></defs>
          <rect width="800" height="380" fill="url(#grid)"/>
          <path d="M 24 234 L 31 227 L 38 230 L 45 215 L 52 224 L 59 217 L 66 225 L 73 222 L 80 220" fill="none" stroke="#7999b5" stroke-width="2"/>
          <line x1="80" y1="220" x2="680" y2="220" stroke="#8193ae" stroke-dasharray="5 5"/>
          <text x="85" y="243" fill="#adbed3" font-family="sans-serif" font-size="13">Вход сцены · 100.000</text>
          <path id="trace" fill="none" stroke="#50e99c" stroke-width="3" stroke-linejoin="round" stroke-linecap="round"/>
          <line id="price-line" x1="80" x2="680" stroke="#50e99c" stroke-dasharray="3 4" opacity=".5"/>
          <circle id="dot" r="5" fill="#50e99c"/>
          <text id="price" x="690" fill="#50e99c" font-family="sans-serif" font-size="16"/>
          <text x="24" y="364" fill="#b3c3d7" font-family="sans-serif" font-size="15">ПОСТАНОВОЧНАЯ СЦЕНА</text>
        </svg>
        <footer><span id="scene">Создай сцену</span><span id="result"></span></footer>
      </section>`;
    document.body.append(chartHost);
    const c$ = id => chart.getElementById(id);
    let chartTarget = null;
    let chartVisible = false;
    let chartScene = null;

    function hideChart() {
        chartVisible = false;
        chartHost.style.setProperty('display', 'none', 'important');
    }

    function positionChart() {
        if (!chartVisible) return;
        if (chartTarget && !chartTarget.isConnected) {
            chartTarget = null;
            hideChart();
            status('Сайт заменил область графика. Размести сцену заново.');
            return;
        }
        const rect = chartTarget?.getBoundingClientRect();
        if (rect && (rect.width < 240 || rect.height < 180 || rect.bottom <= 0 || rect.right <= 0 || rect.top >= innerHeight || rect.left >= innerWidth)) {
            chartHost.style.setProperty('display', 'none', 'important');
            return;
        }
        const left = rect ? rect.left : innerWidth > 850 ? 390 : 16;
        const top = rect ? rect.top : 24;
        const width = rect ? rect.width : Math.max(240, innerWidth - left - 24);
        const height = rect ? rect.height : Math.min(480, Math.max(240, innerHeight * .55));
        for (const [key, value] of Object.entries({ left, top, width, height })) chartHost.style.setProperty(key, `${value}px`, 'important');
        chartHost.style.setProperty('display', 'block', 'important');
    }

    function updateChart(now) {
        if (!chartScene) return;
        const t = Math.min(1, Math.max(0, (now - chartScene.start) / chartScene.duration));
        const sign = chartScene.direction === 'up' ? 1 : -1;
        // Fixed, reproducible synthetic trajectory; its sign stays favorable after entry.
        const displacement = fraction => sign * (100 * fraction + 2 * Math.sin(fraction * Math.PI * 18) * Math.sin(Math.PI * fraction));
        const coordinates = fraction => [80 + fraction * 560, 220 - displacement(fraction)];
        const points = [];
        for (let i = 0; i <= Math.floor(t * 160); i++) points.push(coordinates(i / 160));
        points.push(coordinates(t));
        c$('trace').setAttribute('d', points.map(([x, y], i) => `${i ? 'L' : 'M'}${x.toFixed(2)} ${y.toFixed(2)}`).join(' '));
        const [x, y] = coordinates(t);
        c$('dot').setAttribute('cx', x);
        c$('dot').setAttribute('cy', y);
        c$('price-line').setAttribute('y1', y);
        c$('price-line').setAttribute('y2', y);
        c$('price').setAttribute('y', y + 5);
        c$('price').textContent = (100 + displacement(t) / 100).toFixed(3);
        c$('scene').textContent = `Сцена #${chartScene.id} · ${directions[chartScene.direction]} · ${t === 1 ? 'закрыта' : Math.ceil((chartScene.end - now) / 1000) + ' сек.'}`;
        c$('result').textContent = chartScene.value.textContent;
    }
    c$('close').onclick = hideChart;

    function settings() {
        const amount = Number($('amount').value);
        const payout = Number($('payout').value);
        const seconds = Number($('seconds').value);
        if (!Number.isFinite(amount) || amount < 1 || amount > 100000 ||
            !Number.isFinite(payout) || payout < 1 || payout > 100 ||
            !Number.isInteger(seconds) || seconds < 1 || seconds > 3600) {
            status('Проверь поля: сумма 1–100 000 $, прибыль 1–100 %, время 1–3600 целых секунд.');
            return null;
        }
        return { amount: Math.round(amount * 100) / 100, payout, seconds };
    }

    function renderEmpty() {
        if (!trades.length) {
            const empty = document.createElement('div');
            empty.className = 'empty';
            empty.textContent = 'Сцен пока нет';
            $('trades').replaceChildren(empty);
        }
    }

    function updateTrade(trade, now) {
        const remaining = Math.max(0, trade.end - now);
        const fraction = Math.min(1, Math.max(0, 1 - remaining / trade.duration));
        // This is a scripted positive animation, not a quote or a platform P/L.
        const cents = remaining === 0 ? trade.profitCents :
            Math.max(1, Math.min(trade.profitCents, Math.round(trade.profitCents * (0.05 + 0.95 * fraction))));
        trade.value.textContent = '+' + money(cents / 100);
        trade.state.textContent = remaining === 0 ? 'Сцена закрыта в плюс' : `Симуляция · ${Math.ceil(remaining / 1000)} сек.`;
        trade.progress.value = fraction;
    }

    function addTrade(direction) {
        if (!allowed()) return;
        const config = settings();
        if (!config) return;
        if (trades.filter(t => t.end > Date.now()).length >= 20) {
            status('Уже запущено 20 сцен. Дождись закрытия или очисти список.');
            return;
        }
        if (!trades.length) $('trades').replaceChildren();
        const card = document.createElement('article');
        card.className = 'trade';
        card.innerHTML = '<div class="tag">ДЕМО / СИМУЛЯЦИЯ</div><div class="trade-top"><div><b class="name"></b><div class="meta settings"></div></div><div class="value"></div></div><div class="meta state"></div><progress max="1" aria-label="Время сцены"></progress>';
        card.querySelector('.name').textContent = `#${++counter} · ${directions[direction]}`;
        card.querySelector('.settings').textContent = `${money(config.amount)} · ${config.payout}%`;
        const trade = {
            id: counter, direction, start: Date.now(),
            card, end: Date.now() + config.seconds * 1000, duration: config.seconds * 1000,
            profitCents: Math.round(config.amount * config.payout),
            value: card.querySelector('.value'), state: card.querySelector('.state'),
            progress: card.querySelector('progress')
        };
        trades.unshift(trade);
        // Retain every running scene; discard the oldest completed scenes first.
        while (trades.length > 20) {
            const old = trades.findLastIndex(t => t.end <= Date.now());
            if (old < 0) break;
            trades.splice(old, 1)[0].card.remove();
        }
        $('trades').prepend(card);
        updateTrade(trade, Date.now());
        chartScene = trade;
        chartVisible = true;
        positionChart();
        updateChart(Date.now());
        status(`Сцена #${counter} запущена. Результат задан сценарием.`);
    }

    function choose(direction) {
        selection = direction;
        status(`Нажми кнопку «${direction === 'up' ? 'Выше' : 'Ниже'}» на сайте. Esc — отмена.`);
    }

    function intercept(event) {
        if (!allowed() || event.composedPath().includes(host) || event.composedPath().includes(chartHost)) return;
        if (selection) {
            // Block the selection gesture before the site receives it.
            event.preventDefault();
            event.stopImmediatePropagation();
            if (event.type !== 'click') return;
            const target = event.target instanceof Element ? event.target : null;
            if (!target) return;
            if (selection === 'chart') {
                const rect = target.getBoundingClientRect();
                if (target === document.body || target === document.documentElement ||
                    target.contains(host) || target.contains(chartHost) || rect.width < 240 || rect.height < 180) {
                    status('Нажми на большую область самого графика (от 240 × 180). Esc — отмена.');
                    return;
                }
                chartTarget = target;
                chartVisible = true;
                selection = null;
                positionChart();
                status('График симуляции размещён. Запусти сцену «Выше» или «Ниже».');
                return;
            }
            let control = target.closest('button, a, [role="button"], input[type="button"], input[type="submit"]');
            if (!control) {
                control = target;
                while (control.parentElement && control.parentElement !== document.body &&
                    getComputedStyle(control.parentElement).cursor === 'pointer') control = control.parentElement;
            }
            if (control === document.body || control === document.documentElement || control.contains(host)) {
                status('Выбери саму кнопку сайта. Esc — отмена.');
                return;
            }
            for (const [key, value] of bindings) if (value === control) bindings.delete(key);
            bindings.set(selection, control);
            status(`«${selection === 'up' ? 'Выше' : 'Ниже'}» привязана. Следующие нажатия добавят сцену.`);
            selection = null;
            return;
        }
        if (event.type !== 'click') return;
        for (const [direction, control] of bindings) {
            if (control.isConnected && event.composedPath().includes(control)) {
                if (!control.matches(':disabled, [aria-disabled="true"]')) addTrade(direction);
                break;
            }
        }
    }

    const eventTypes = ['pointerdown', 'pointerup', 'mousedown', 'mouseup', 'touchstart', 'touchend', 'click'];
    const eventOptions = { capture: true, passive: false };
    for (const type of eventTypes) window.addEventListener(type, intercept, eventOptions);
    const keydown = event => {
        if (event.key === 'Escape' && selection) { selection = null; status('Выбор отменён.'); }
    };
    window.addEventListener('keydown', keydown, true);
    $('up').onclick = () => addTrade('up');
    $('down').onclick = () => addTrade('down');
    $('place-chart').onclick = () => {
        hideChart();
        selection = 'chart';
        status('Нажми на область графика сайта. Здесь появится график симуляции. Esc — отмена.');
    };
    $('hide-chart').onclick = hideChart;
    $('bind-up').onclick = () => choose('up');
    $('bind-down').onclick = () => choose('down');
    $('cancel').onclick = () => { selection = null; status('Выбор отменён.'); };
    $('unbind').onclick = () => { bindings.clear(); selection = null; status('Привязки удалены.'); };
    $('clear').onclick = () => { trades = []; chartScene = null; hideChart(); $('trades').replaceChildren(); renderEmpty(); status('Сцены очищены.'); };
    $('toggle').onclick = () => {
        $('body').hidden = !$('body').hidden;
        if ($('body').hidden) selection = null;
        $('toggle').textContent = $('body').hidden ? '+' : '−';
        $('toggle').setAttribute('aria-expanded', String(!$('body').hidden));
        $('toggle').setAttribute('aria-label', $('body').hidden ? 'Развернуть панель' : 'Свернуть панель');
    };
    renderEmpty();

    const timer = window.setInterval(() => {
        if (!allowed() || !host.isConnected) {
            window.clearInterval(timer);
            for (const type of eventTypes) window.removeEventListener(type, intercept, eventOptions);
            window.removeEventListener('keydown', keydown, true);
            host.remove();
            chartHost.remove();
            return;
        }
        for (const [direction, control] of bindings) {
            if (!control.isConnected) {
                bindings.delete(direction);
                status('Сайт заменил привязанную кнопку. Выбери её заново.');
            }
        }
        const now = Date.now();
        for (const trade of trades) updateTrade(trade, now);
        if (chartVisible) { positionChart(); updateChart(now); }
    }, 100);
})();