quotation-web-component/index.html at main · shipthisco/quotation-web-component · 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
<!DOCTYPE html>
<html>
  <body>
   <shipthis-quotation
    organisation-id="base-dev"
    api-key="WyJhbGlAc2hpcHRoaXMuY28iLCJiYXNlLWRldiJd.Z-ZHng.aL9aSv9CXTnZUcYAqEgq-mjmh4E"
    captcha-key="6LeVRBIkAAAAADAveKEtuoPUwsWIaBrNLdph7lYC"
    title="Premium Quote Request"
    description="Get instant rates with our customized theme system"
    layout="stepper"
    show-header="true"
    show-footer="true"
    submit-button-text="Send My Request"
    clear-button-text="Start From Scratch"
    show-clear-button="true"
    success-message="Thank you! Our team will contact you with the best rates shortly."
    locale="en"
    debug="true"
    track-events="true"
    auto-scroll="mobile"
    theme='{
    "mode":"dark",
    "radius":"0px",
    "dark":{
      "background":"#0d0221",
      "primary":"#00ffc8",
      "secondary":"#ff00ff",
      "accent":"#7a00ff",
      "text":"#ffffff",
      "submitButton": { "background": "#00ffc8", "text": "#0d0221" }
    }
  }'
>
<!--
  CRAZY THEME SAMPLES TO TEST:

  1. CYBERPUNK NEON:
  theme='\''{
    "mode":"dark",
    "radius":"0px",
    "dark":{
      "background":"#0d0221",
      "primary":"#00ffc8",
      "secondary":"#ff00ff",
      "accent":"#7a00ff",
      "text":"#ffffff",
      "submitButton": { "background": "#00ffc8", "text": "#0d0221" }
    }
  }'\''

  2. FOREST NATURE:
  theme='\''{
    "mode":"light",
    "radius":"20px",
    "light":{
      "background":"#f0f4ed",
      "primary":"#2d5a27",
      "secondary":"#4a7c44",
      "accent":"#8b4513",
      "text":"#1a2f18",
      "submitButton": { "background": "#2d5a27", "text": "#ffffff" }
    }
  }'\''

  3. MIDNIGHT GOLD:
  theme='\''{
    "mode":"dark",
    "radius":"8px",
    "dark":{
      "background":"#121212",
      "primary":"#d4af37",
      "secondary":"#333333",
      "accent":"#ffd700",
      "text":"#e0e0e0",
      "submitButton": { "background": "#d4af37", "text": "#000000" }
    }
  }'\''
-->

<div slot="footer">
    Powered by shipthis.co
  </div></shipthis-quotation>
    <script type="module" src="/src/loader.ts"></script>

    <!-- REACTIVITY TEST PANEL -->
    <div id="test-controls" style="
      position: fixed;
      bottom: 24px;
      right: 24px;
      background: #1e293b;
      color: white;
      padding: 20px;
      border-radius: 12px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.5);
      z-index: 10000;
      display: flex;
      flex-direction: column;
      gap: 12px;
      font-family: system-ui, sans-serif;
      border: 1px solid rgba(255,255,255,0.1);
      backdrop-filter: blur(10px);
    ">
      <h4 style="margin: 0 0 8px; font-size: 14px; opacity: 0.8; letter-spacing: 0.5px;">PROD READINESS TEST</h4>
      <button onclick="toggleTheme()" style="cursor:pointer; padding: 10px; border-radius: 6px; border: none; background: #334155; color: white; font-weight: 600;">🌗 Toggle Mode</button>
      <button onclick="changeTitle()" style="cursor:pointer; padding: 10px; border-radius: 6px; border: none; background: #334155; color: white; font-weight: 600;">📝 Change Title</button>
      <button onclick="switchLayout()" style="cursor:pointer; padding: 10px; border-radius: 6px; border: none; background: #334155; color: white; font-weight: 600;">🔄 Switch Layout</button>
    </div>

    <script>
      function toggleTheme() {
        const el = document.querySelector('shipthis-quotation');
        const theme = JSON.parse(el.getAttribute('theme'));
        theme.mode = theme.mode === 'dark' ? 'light' : 'dark';
        el.setAttribute('theme', JSON.stringify(theme));
        console.log('Test: Theme toggled to', theme.mode);
      }

      function changeTitle() {
        const el = document.querySelector('shipthis-quotation');
        const titles = ["Ready for Prod?", "Instant Rates", "Shipping Calculator", "Premium Portal"];
        const randomTitle = titles[Math.floor(Math.random() * titles.length)];
        el.setAttribute('title', randomTitle);
        console.log('Test: Title changed to', randomTitle);
      }

      function switchLayout() {
        const el = document.querySelector('shipthis-quotation');
        const current = el.getAttribute('layout');
        const next = current === 'stepper' ? 'fullform' : 'stepper';
        el.setAttribute('layout', next);
        console.log('Test: Layout switched to', next);
      }
    </script>
  </body>
</html>