vp-cloud-chrome-ext/script_generator.html at develop · webmonitoring/vp-cloud-chrome-ext · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Visualping Script Generator</title>
    <link rel="stylesheet" href="script_generator.css" />
  </head>
  <body>
    <header class="topbar">
      <div class="topbar-left">
        <img class="topbar-logo" src="icons/logo.svg" alt="Visualping" />
        <span class="topbar-title">Visualping Cloud Jobs</span>
      </div>
      <div class="topbar-right">
<button class="topbar-icon-btn" type="button" title="Close" aria-label="Close" onclick="window.close()">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M18 6 6 18M6 6l12 12" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
          </svg>
        </button>
      </div>
    </header>
    <main class="shell">
      <section class="recording-panel" id="recording-panel">
        <ol class="rec-steps">
          <li class="rec-step is-active" id="rec-step-1">
            <div class="rec-step-left">
              <div class="rec-step-indicator">
                <span class="rec-step-number">1</span>
                <svg class="rec-step-check" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M2 6.5l2.8 2.8 5.2-5.6" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </div>
              <div class="rec-step-line"></div>
            </div>
            <div class="rec-step-body">
              <div class="rec-step-header">
                <span class="rec-step-title">Start recording</span>
              </div>
              <div class="rec-step-content">
                <p class="rec-step-desc">We'll capture every click, text entry and page navigation as a replayable step.</p>
                <button id="start-recording" class="button-record-big" type="button">
                  <span class="rec-dot-btn"></span>Start recording
                </button>
              </div>
            </div>
          </li>

          <li class="rec-step" id="rec-step-2">
            <div class="rec-step-left">
              <div class="rec-step-indicator">
                <span class="rec-step-number">2</span>
                <svg class="rec-step-check" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M2 6.5l2.8 2.8 5.2-5.6" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </div>
              <div class="rec-step-line"></div>
            </div>
            <div class="rec-step-body">
              <div class="rec-step-header">
                <span class="rec-step-title">Interact with the page</span>
              </div>
              <div class="rec-step-content">
                <div class="rec-live-indicator" id="rec-live-indicator">
                  <span class="rec-live-dot"></span>
                  <span class="rec-live-label">Recording</span>
                  <span class="rec-live-sep">·</span>
                  <span id="rec-timer">0:00</span>
                  <span class="rec-live-sep">·</span>
                  <span id="rec-live-count">0 actions</span>
                </div>
                <ol id="recorded-actions-list" class="recorded-actions-list"></ol>
              </div>
            </div>
          </li>

          <li class="rec-step" id="rec-step-3">
            <div class="rec-step-left">
              <div class="rec-step-indicator">
                <span class="rec-step-number">3</span>
                <svg class="rec-step-check" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M2 6.5l2.8 2.8 5.2-5.6" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </div>
              <div class="rec-step-line"></div>
            </div>
            <div class="rec-step-body">
              <div class="rec-step-header">
                <span class="rec-step-title">Stop recording</span>
              </div>
              <div class="rec-step-content">
                <p class="rec-step-desc">Done interacting? Stop to review the steps you captured.</p>
                <button id="stop-recording" class="button-stop-big" type="button">
                  <span class="stop-sq"></span>Stop recording
                </button>
              </div>
            </div>
          </li>

          <li class="rec-step" id="rec-step-4">
            <div class="rec-step-left">
              <div class="rec-step-indicator">
                <span class="rec-step-number">4</span>
                <svg class="rec-step-check" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M2 6.5l2.8 2.8 5.2-5.6" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </div>
            </div>
            <div class="rec-step-body">
              <div class="rec-step-header">
                <span class="rec-step-title">Save to actions</span>
              </div>
              <div class="rec-step-content">
                <p class="rec-step-desc">Review your <span id="rec-captured-count">0</span> captured steps — remove any you don't want.</p>
                <ol id="save-actions-list" class="save-actions-list"></ol>
                <button id="save-as-preactions" class="button-save-big" type="button">
                  <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M3 8.5l3.5 3.5 6.5-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                  Save <span id="rec-save-count">0</span> actions to job
                </button>
                <button id="discard-recording" class="button-link-discard" type="button">Discard &amp; record again</button>

              </div>
            </div>
          </li>
        </ol>

        <p id="recording-status" class="status rec-status"></p>
        <div id="use-recording-actions" hidden></div>
      </section>

      <!-- hidden stubs keep JS element refs valid -->
      <div hidden>
        <p id="job-context"></p>
        <div id="rec-job-favicon"></div>
        <span id="rec-job-name"></span>
        <span id="rec-job-url"></span>
        <span id="rec-job-id"></span>
        <button id="use-recording"></button>
        <textarea id="action-request"></textarea>
        <button id="generate-script"></button>
        <button id="stop-generation"></button>
        <button id="save-script"></button>
        <p id="status"></p>
        <pre id="thinking-log"></pre>
        <textarea id="generated-script"></textarea>
      </div>
    </main>

    <script type="module" src="script_generator.js"></script>
  </body>
</html>