tecitheme 0.2.0 → 0.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,55 +1,55 @@
1
- <script>import CountrySelector from './CountrySelector.svelte';
2
- import Icon from './Icon.svelte';
3
- import { onMount } from 'svelte';
4
- import { scrollTo, validateEmail } from '../utils.js';
5
- import { variables } from '../variables';
1
+ <script>import CountrySelector from "./CountrySelector.svelte";
2
+ import Icon from "./Icon.svelte";
3
+ import { onMount } from "svelte";
4
+ import { scrollTo, validateEmail } from "../utils.js";
5
+ import { variables } from "../variables";
6
6
  onMount(() => {
7
7
  setTimeout(() => {
8
8
  timePassed = true;
9
9
  }, 3000);
10
10
  });
11
11
  let resellerModal = false;
12
- let country = 'sel';
13
- let name = '';
14
- let email = '';
12
+ let country = "sel";
13
+ let name = "";
14
+ let email = "";
15
15
  let product = 0;
16
16
  let valid = false;
17
- let message = '';
18
- let error = '';
19
- let answer = '';
17
+ let message = "";
18
+ let error = "";
19
+ let answer = "";
20
20
  let submitted = false;
21
21
  let waiting = false;
22
22
  let timePassed = false;
23
- $: if (country != 'sel' &&
24
- name != '' &&
23
+ $: if (country != "sel" &&
24
+ name != "" &&
25
25
  validateEmail(email) &&
26
26
  product != 0 &&
27
- answer == '' &&
27
+ answer == "" &&
28
28
  timePassed) {
29
29
  valid = true;
30
30
  }
31
31
  else {
32
32
  valid = false;
33
33
  }
34
- $: if (submitted == true && message == '') {
34
+ $: if (submitted == true && message == "") {
35
35
  waiting = true;
36
- scrollTo('trial-request');
36
+ scrollTo("trial-request");
37
37
  }
38
38
  else {
39
39
  waiting = false;
40
40
  }
41
41
  const submitForm = async () => {
42
42
  submitted = true;
43
- error = '';
43
+ error = "";
44
44
  try {
45
45
  const submit = await fetch(variables.trialEndpoint, {
46
- method: 'POST',
46
+ method: "POST",
47
47
  body: JSON.stringify({
48
48
  name,
49
49
  email,
50
50
  country,
51
- product
52
- })
51
+ product,
52
+ }),
53
53
  });
54
54
  message = await submit.json();
55
55
  }
@@ -60,190 +60,237 @@ const submitForm = async () => {
60
60
  </script>
61
61
 
62
62
  <div class="mt-10 sm:mt-0">
63
- <div class="md:grid md:grid-cols-3 md:gap-6 mt-8">
64
- <div class="md:col-span-1">
65
- <div class="prose px-4 sm:px-0">
63
+ <div class="mt-8 md:grid md:grid-cols-3 md:gap-6">
64
+ <div class="md:col-span-1">
65
+ <div class="prose px-4 sm:px-0">
66
66
  <h2>30-day Trial Request</h2>
67
- <p>
68
- Please complete the form and click "Send Request". <b>All fields are required.</b>
69
- </p>
70
- <p>Within a few minutes, you will receive an email message containing a download link.</p>
71
- <p>
72
- If you need assistance, please send an email to <a href="mailto:sales@thunderheadeng.com">sales</a>.
73
- </p>
74
- </div>
75
- </div>
76
- <div class="mt-5 md:mt-0 md:col-span-2">
77
- <form id="trial-request" on:submit|preventDefault={submitForm}>
78
- <div class="border shadow overflow-hidden">
79
- {#if message}
80
- <div class="px-4 py-5 bg-white sm:p-6 prose">
81
- <p>
82
- Thank you <strong>{message.name}</strong> for requesting a trial of {#if message.product == 1}PyroSim{:else if message.product == 2}Pathfinder{:else if message.product == 3}PyroSim
83
- and Pathfinder{/if}!<br />
84
- You will receive an email to <strong>{message.email}</strong> with your activation
85
- key{#if message.product == 3}s{/if}
86
- in a few moments.
87
- </p>
88
- {#if message.product == 1}
89
- <h3>PyroSim</h3>
90
- <p>
91
- To download the most recent version visit the <a
92
- href="https://support.thunderheadeng.com/pyrosim/">PyroSim Support</a
93
- > page.
94
- </p>
95
- {:else if message.product == 2}
96
- <h3>Pathfinder</h3>
97
- <p>
98
- To download the most recent version visit the <a
99
- href="https://support.thunderheadeng.com/pathfinder/">Pathfinder Support</a
100
- > page.
101
- </p>
102
- {:else if message.product == 3}
103
- <h3>PyroSim</h3>
104
- <p>
105
- To download the most recent version visit the <a
106
- href="https://support.thunderheadeng.com/pyrosim/">PyroSim Support</a
107
- > page.
108
- </p>
109
- <h3>Pathfinder</h3>
110
- <p>
111
- To download the most recent version visit the <a
112
- href="https://support.thunderheadeng.com/pathfinder/">Pathfinder Support</a
113
- > page.
114
- </p>
115
- {/if}
116
- <h3>Need Help?</h3>
117
- <p>
118
- Please email <a href="mailto:support@thunderheadeng.com"
119
- >support@thunderheadeng.com</a
120
- > if you have any questions.
121
- </p>
122
- </div>
123
- {:else if error}
124
- <p>There was an error: {error}</p>
125
- {:else if waiting}
126
- <div id="waiting" class="p-12 mx-auto">
127
- <p class="text-center pb-8 font-bold">Waiting for Trial Approval...</p>
128
- <Icon classes="h-24 w-24 mx-auto animate-pulse" />
129
- </div>
130
- {:else}
131
- <div class="px-4 py-5 bg-white space-y-6 sm:p-6">
132
- <fieldset>
133
- <div>
134
- <legend class="text-lg font-bold text-gray-900"> Personal Information </legend>
135
- </div>
136
- <div class="flex flex-row align-middle items-center pt-4">
137
- <label for="name" class="whitespace-nowrap pr-2 block font-medium text-gray-700">
138
- Full Name:
139
- </label>
140
- <input
141
- id="name"
142
- type="text"
143
- name="name"
144
- bind:value={name}
145
- class="w-full p-1 border-0 border-b-2 border-gray-500"
146
- />
147
- </div>
148
- <div class="flex flex-row align-middle items-center pt-4">
149
- <label for="email" class="pr-2 block font-medium text-gray-700"> Email: </label>
150
- <input
151
- id="email"
152
- type="text"
153
- name="email"
154
- bind:value={email}
155
- class="w-full p-1 border-0 border-b-2 border-gray-500"
156
- />
157
- </div>
158
- <div class="flex flex-row align-middle items-center pt-4">
159
- <label for="country" class="pr-2 block font-medium text-gray-700">
160
- Country:
161
- </label>
162
- <input id="country" type="hidden" name="country" value={country} />
163
- <CountrySelector bind:selection={country} bind:resellerModal />
164
- </div>
165
- </fieldset>
166
- <fieldset>
167
- <div>
168
- <legend class="text-lg font-bold text-gray-900">
169
- What would you like to try?
170
- </legend>
171
- </div>
172
- <div class="mt-4 space-y-4">
173
- <div class="flex items-center">
174
- <input
175
- id="pyrosim"
176
- name="product"
177
- type="radio"
178
- value={1}
179
- bind:group={product}
180
- class="focus:ring-teci-blue-dark h-4 w-4 text-blue-600 border-gray-300"
181
- />
182
- <label for="pyrosim" class="ml-3 block text-sm font-medium text-gray-700">
183
- PyroSim
184
- </label>
185
- </div>
186
- <div class="flex items-center">
187
- <input
188
- id="pathfinder"
189
- name="product"
190
- type="radio"
191
- value={2}
192
- bind:group={product}
193
- class="focus:ring-teci-blue-dark h-4 w-4 text-blue-600 border-gray-300"
194
- />
195
- <label for="pathfinder" class="ml-3 block text-sm font-medium text-gray-700">
196
- Pathfinder
197
- </label>
198
- </div>
199
- <div class="flex items-center">
200
- <input
201
- id="pyropath"
202
- name="product"
203
- type="radio"
204
- value={3}
205
- bind:group={product}
206
- class="focus:ring-teci-blue-dark h-4 w-4 text-blue-600 border-gray-300"
207
- />
208
- <label for="pyropath" class="ml-3 block text-sm font-medium text-gray-700">
209
- PyroSim and Pathfinder
210
- </label>
211
- </div>
212
- </div>
213
- </fieldset>
214
- <input
215
- class="confident"
216
- id="answer"
217
- type="text"
218
- name="answer"
219
- bind:value={answer}
220
- placeholder="Correct answers only..."
221
- />
222
- </div>
223
- <div class="px-4 py-3 text-right sm:px-6">
224
- <button
225
- type="submit"
226
- disabled={!valid}
227
- class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium text-white {valid ===
228
- true
229
- ? 'bg-teci-blue-light hover:bg-teci-blue-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500'
230
- : 'bg-gray-300 cursor-not-allowed'}"
231
- >
232
- Send Request
233
- </button>
234
- {#if answer}
235
- <p>Something is wrong with the form, please email support@thunderheadeng.com.</p>
236
- {/if}
237
- </div>
238
- {/if}
239
- </div>
240
- </form>
241
- </div>
242
- </div>
67
+ <p>
68
+ Please complete the form and click "Send Request". <b
69
+ >All fields are required.</b
70
+ >
71
+ </p>
72
+ <p>
73
+ Within a few minutes, you will receive an email message containing a
74
+ download link.
75
+ </p>
76
+ <p>
77
+ If you need assistance, please send an email to <a
78
+ href="mailto:sales@thunderheadeng.com">sales</a
79
+ >.
80
+ </p>
81
+ </div>
82
+ </div>
83
+ <div class="mt-5 md:col-span-2 md:mt-0">
84
+ <form id="trial-request" on:submit|preventDefault={submitForm}>
85
+ <div class="overflow-hidden border shadow">
86
+ {#if message}
87
+ <div class="prose bg-white px-4 py-5 sm:p-6">
88
+ <p>
89
+ Thank you <strong>{message.name}</strong> for requesting a trial
90
+ of {#if message.product == 1}PyroSim{:else if message.product == 2}Pathfinder{:else if message.product == 3}PyroSim
91
+ and Pathfinder{/if}!<br />
92
+ You will receive an email to <strong>{message.email}</strong>
93
+ with your activation key{#if message.product == 3}s{/if}
94
+ in a few moments.
95
+ </p>
96
+ {#if message.product == 1}
97
+ <h3>PyroSim</h3>
98
+ <p>
99
+ To download the most recent version visit the <a
100
+ href="https://support.thunderheadeng.com/pyrosim/"
101
+ >PyroSim Support</a
102
+ > page.
103
+ </p>
104
+ {:else if message.product == 2}
105
+ <h3>Pathfinder</h3>
106
+ <p>
107
+ To download the most recent version visit the <a
108
+ href="https://support.thunderheadeng.com/pathfinder/"
109
+ >Pathfinder Support</a
110
+ > page.
111
+ </p>
112
+ {:else if message.product == 3}
113
+ <h3>PyroSim</h3>
114
+ <p>
115
+ To download the most recent version visit the <a
116
+ href="https://support.thunderheadeng.com/pyrosim/"
117
+ >PyroSim Support</a
118
+ > page.
119
+ </p>
120
+ <h3>Pathfinder</h3>
121
+ <p>
122
+ To download the most recent version visit the <a
123
+ href="https://support.thunderheadeng.com/pathfinder/"
124
+ >Pathfinder Support</a
125
+ > page.
126
+ </p>
127
+ {/if}
128
+ <h3>Need Help?</h3>
129
+ <p>
130
+ Please email <a href="mailto:support@thunderheadeng.com"
131
+ >support@thunderheadeng.com</a
132
+ > if you have any questions.
133
+ </p>
134
+ </div>
135
+ {:else if error}
136
+ <p>There was an error: {error}</p>
137
+ {:else if waiting}
138
+ <div id="waiting" class="mx-auto p-12">
139
+ <p class="pb-8 text-center font-bold">
140
+ Waiting for Trial Approval...
141
+ </p>
142
+ <Icon classes="h-24 w-24 mx-auto animate-pulse" />
143
+ </div>
144
+ {:else}
145
+ <div class="space-y-6 bg-white px-4 py-5 sm:p-6">
146
+ <fieldset>
147
+ <div>
148
+ <legend class="text-lg font-bold text-gray-900">
149
+ Personal Information
150
+ </legend>
151
+ </div>
152
+ <div class="flex flex-row items-center pt-4 align-middle">
153
+ <label
154
+ for="name"
155
+ class="block whitespace-nowrap pr-2 font-medium text-gray-700"
156
+ >
157
+ Full Name:
158
+ </label>
159
+ <input
160
+ id="name"
161
+ type="text"
162
+ name="name"
163
+ bind:value={name}
164
+ class="w-full border-0 border-b-2 border-gray-500 p-1"
165
+ />
166
+ </div>
167
+ <div class="flex flex-row items-center pt-4 align-middle">
168
+ <label
169
+ for="email"
170
+ class="block pr-2 font-medium text-gray-700"
171
+ >
172
+ Email:
173
+ </label>
174
+ <input
175
+ id="email"
176
+ type="text"
177
+ name="email"
178
+ bind:value={email}
179
+ class="w-full border-0 border-b-2 border-gray-500 p-1"
180
+ />
181
+ </div>
182
+ <div class="flex flex-row items-center pt-4 align-middle">
183
+ <label
184
+ for="country"
185
+ class="block pr-2 font-medium text-gray-700"
186
+ >
187
+ Country:
188
+ </label>
189
+ <input
190
+ id="country"
191
+ type="hidden"
192
+ name="country"
193
+ value={country}
194
+ />
195
+ <CountrySelector
196
+ bind:selection={country}
197
+ bind:resellerModal
198
+ />
199
+ </div>
200
+ </fieldset>
201
+ <fieldset>
202
+ <div>
203
+ <legend class="text-lg font-bold text-gray-900">
204
+ What would you like to try?
205
+ </legend>
206
+ </div>
207
+ <div class="mt-4 space-y-4">
208
+ <div class="flex items-center">
209
+ <input
210
+ id="pyrosim"
211
+ name="product"
212
+ type="radio"
213
+ value={1}
214
+ bind:group={product}
215
+ class="h-4 w-4 border-gray-300 text-blue-600 focus:ring-teci-blue-dark"
216
+ />
217
+ <label
218
+ for="pyrosim"
219
+ class="ml-3 block text-sm font-medium text-gray-700"
220
+ >
221
+ PyroSim
222
+ </label>
223
+ </div>
224
+ <div class="flex items-center">
225
+ <input
226
+ id="pathfinder"
227
+ name="product"
228
+ type="radio"
229
+ value={2}
230
+ bind:group={product}
231
+ class="h-4 w-4 border-gray-300 text-blue-600 focus:ring-teci-blue-dark"
232
+ />
233
+ <label
234
+ for="pathfinder"
235
+ class="ml-3 block text-sm font-medium text-gray-700"
236
+ >
237
+ Pathfinder
238
+ </label>
239
+ </div>
240
+ <div class="flex items-center">
241
+ <input
242
+ id="pyropath"
243
+ name="product"
244
+ type="radio"
245
+ value={3}
246
+ bind:group={product}
247
+ class="h-4 w-4 border-gray-300 text-blue-600 focus:ring-teci-blue-dark"
248
+ />
249
+ <label
250
+ for="pyropath"
251
+ class="ml-3 block text-sm font-medium text-gray-700"
252
+ >
253
+ PyroSim and Pathfinder
254
+ </label>
255
+ </div>
256
+ </div>
257
+ </fieldset>
258
+ <input
259
+ class="confident"
260
+ id="answer"
261
+ type="text"
262
+ name="answer"
263
+ bind:value={answer}
264
+ placeholder="Correct answers only..."
265
+ />
266
+ </div>
267
+ <div class="px-4 py-3 text-right sm:px-6">
268
+ <button
269
+ type="submit"
270
+ disabled={!valid}
271
+ class="inline-flex justify-center border border-transparent py-2 px-4 text-sm font-medium text-white shadow-sm {valid ===
272
+ true
273
+ ? 'bg-teci-blue-light hover:bg-teci-blue-dark focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2'
274
+ : 'cursor-not-allowed bg-gray-300'}"
275
+ >
276
+ Send Request
277
+ </button>
278
+ {#if answer}
279
+ <p>
280
+ Something is wrong with the form, please email
281
+ support@thunderheadeng.com.
282
+ </p>
283
+ {/if}
284
+ </div>
285
+ {/if}
286
+ </div>
287
+ </form>
288
+ </div>
289
+ </div>
243
290
  </div>
244
291
 
245
292
  <style>
246
- .confident {
247
- @apply hidden;
248
- }
293
+ .confident {
294
+ @apply hidden;
295
+ }
249
296
  </style>
@@ -6,9 +6,9 @@ declare const __propDef: {
6
6
  };
7
7
  slots: {};
8
8
  };
9
- export declare type TrialFormProps = typeof __propDef.props;
10
- export declare type TrialFormEvents = typeof __propDef.events;
11
- export declare type TrialFormSlots = typeof __propDef.slots;
9
+ export type TrialFormProps = typeof __propDef.props;
10
+ export type TrialFormEvents = typeof __propDef.events;
11
+ export type TrialFormSlots = typeof __propDef.slots;
12
12
  export default class TrialForm extends SvelteComponentTyped<TrialFormProps, TrialFormEvents, TrialFormSlots> {
13
13
  }
14
14
  export {};
@@ -1,26 +1,24 @@
1
1
  <script>
2
2
  export let data = {};
3
- export let v = '';
3
+ export let v = "";
4
4
  let id;
5
-
5
+
6
6
  if (v) {
7
7
  id = v;
8
- }
9
- else if (data) {
10
- id = data.v;
11
- }
12
- else {
13
- id = '';
14
- }
8
+ } else if (data) {
9
+ id = data.v;
10
+ } else {
11
+ id = "";
12
+ }
15
13
  </script>
16
14
 
17
- <section class="w-full aspect-video border bg-black border-gray-200 shadow-md">
18
- <iframe
19
- src="https://www.youtube.com/embed/{id}"
15
+ <section class="aspect-video w-full border border-gray-200 bg-black shadow-md">
16
+ <iframe
17
+ src="https://www.youtube.com/embed/{id}"
20
18
  title="YouTube Video ID {id}"
21
- class="w-full aspect-video"
22
- frameborder="0"
19
+ class="aspect-video w-full"
20
+ frameborder="0"
23
21
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
24
- allowfullscreen>
25
- </iframe>
22
+ allowfullscreen
23
+ />
26
24
  </section>
@@ -1,12 +1,12 @@
1
1
  <script>
2
- export let tag = 'div';
3
- export let when = true;
2
+ export let tag = "div";
3
+ export let when = true;
4
4
  </script>
5
5
 
6
6
  {#if when}
7
- <svelte:element this={tag} {...$$restProps}>
8
- <slot/>
9
- </svelte:element>
7
+ <svelte:element this={tag} {...$$restProps}>
8
+ <slot />
9
+ </svelte:element>
10
10
  {:else}
11
- <slot/>
12
- {/if}
11
+ <slot />
12
+ {/if}