tecitheme 0.0.1 → 0.0.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.
- package/README.md +5 -1
- package/components/Banner.svelte +57 -0
- package/components/Banner.svelte.d.ts +31 -0
- package/components/{CountrySelector/index.svelte → CountrySelector.svelte} +1 -1
- package/components/CountrySelector.svelte.d.ts +27 -0
- package/components/{Footer/index.svelte → Footer.svelte} +0 -0
- package/components/Footer.svelte.d.ts +26 -0
- package/components/{Header/index.svelte → Header.svelte} +3 -3
- package/components/Header.svelte.d.ts +19 -0
- package/components/{Modal/index.svelte → Modal.svelte} +0 -0
- package/components/{Modal/index.svelte.d.ts → Modal.svelte.d.ts} +7 -7
- package/components/TrialForm.svelte +230 -0
- package/components/TrialForm.svelte.d.ts +19 -0
- package/demodata.d.ts +8 -0
- package/demodata.js +8 -0
- package/package.json +10 -7
- package/components/CountrySelector/index.svelte.d.ts +0 -27
- package/components/Footer/index.svelte.d.ts +0 -26
- package/components/Header/index.svelte.d.ts +0 -19
- package/components/TrialForm/index.svelte +0 -210
- package/components/TrialForm/index.svelte.d.ts +0 -19
package/README.md
CHANGED
|
@@ -1,3 +1,7 @@
|
|
|
1
1
|
# ThunderTheme
|
|
2
2
|
|
|
3
|
-
Design System for Thunderhead
|
|
3
|
+
SvelteKit Design System for Thunderhead web properties.
|
|
4
|
+
|
|
5
|
+
NPM package available at: https://www.npmjs.com/package/tecitheme
|
|
6
|
+
|
|
7
|
+
See the hosted site in this project for documentation and component details.
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
export let showCTA
|
|
3
|
+
export let shortText
|
|
4
|
+
export let longText
|
|
5
|
+
export let ctaText
|
|
6
|
+
export let ctaLink
|
|
7
|
+
</script>
|
|
8
|
+
|
|
9
|
+
<div x-data="banner">
|
|
10
|
+
<div x-show="open" class="bg-teci-blue-light">
|
|
11
|
+
<div class="max-w-screen-xl mx-auto py-3 px-3 sm:px-6 lg:px-8">
|
|
12
|
+
<div class="flex items-center justify-between flex-wrap">
|
|
13
|
+
<div class="w-0 flex-1 flex items-center">
|
|
14
|
+
<!-- Banner Text -->
|
|
15
|
+
<p class="font-medium text-white truncate">
|
|
16
|
+
<!-- Short Text -->
|
|
17
|
+
<span class="md:hidden">
|
|
18
|
+
{shortText}
|
|
19
|
+
</span>
|
|
20
|
+
<!-- Long Text-->
|
|
21
|
+
<span class="hidden md:inline">
|
|
22
|
+
{longText}
|
|
23
|
+
</span>
|
|
24
|
+
</p>
|
|
25
|
+
</div>
|
|
26
|
+
|
|
27
|
+
{#if showCTA}
|
|
28
|
+
<!-- CTA Button -->
|
|
29
|
+
<div class="order-3 mt-2 flex-shrink-0 w-full sm:order-2 sm:mt-0 sm:w-auto">
|
|
30
|
+
<div class="rounded-md shadow-sm">
|
|
31
|
+
<a href={ctaLink}
|
|
32
|
+
class="flex items-center justify-center px-4 py-2 border shadow-md border-transparent text-sm leading-5 font-medium text-teci-blue-light bg-white hover:text-white hover:bg-teci-blue-dark focus:outline-none focus:shadow-outline transition ease-in-out duration-150"
|
|
33
|
+
aria-label="Button to {ctaText}"
|
|
34
|
+
title="Click to {ctaText}"
|
|
35
|
+
>
|
|
36
|
+
{ctaText}
|
|
37
|
+
</a>
|
|
38
|
+
</div>
|
|
39
|
+
</div>
|
|
40
|
+
{/if}
|
|
41
|
+
<!-- Hide Banner Button -->
|
|
42
|
+
<div class="order-2 flex-shrink-0 sm:order-3 sm:ml-3">
|
|
43
|
+
<button x-on:click="toggle" type="button"
|
|
44
|
+
class="-mr-1 flex p-2 rounded-md hover:bg-teci-blue-dark focus:outline-none focus:bg-teci-blue-dark sm:-mr-2 transition ease-in-out duration-150"
|
|
45
|
+
aria-label="Dismiss"
|
|
46
|
+
title="Dismiss Banner"
|
|
47
|
+
>
|
|
48
|
+
<svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
49
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
|
50
|
+
</svg>
|
|
51
|
+
</button>
|
|
52
|
+
</div>
|
|
53
|
+
</div>
|
|
54
|
+
</div>
|
|
55
|
+
</div>
|
|
56
|
+
</div>
|
|
57
|
+
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
/** @typedef {typeof __propDef.props} BannerProps */
|
|
2
|
+
/** @typedef {typeof __propDef.events} BannerEvents */
|
|
3
|
+
/** @typedef {typeof __propDef.slots} BannerSlots */
|
|
4
|
+
export default class Banner extends SvelteComponentTyped<{
|
|
5
|
+
showCTA: any;
|
|
6
|
+
shortText: any;
|
|
7
|
+
longText: any;
|
|
8
|
+
ctaText: any;
|
|
9
|
+
ctaLink: any;
|
|
10
|
+
}, {
|
|
11
|
+
[evt: string]: CustomEvent<any>;
|
|
12
|
+
}, {}> {
|
|
13
|
+
}
|
|
14
|
+
export type BannerProps = typeof __propDef.props;
|
|
15
|
+
export type BannerEvents = typeof __propDef.events;
|
|
16
|
+
export type BannerSlots = typeof __propDef.slots;
|
|
17
|
+
import { SvelteComponentTyped } from "svelte";
|
|
18
|
+
declare const __propDef: {
|
|
19
|
+
props: {
|
|
20
|
+
showCTA: any;
|
|
21
|
+
shortText: any;
|
|
22
|
+
longText: any;
|
|
23
|
+
ctaText: any;
|
|
24
|
+
ctaLink: any;
|
|
25
|
+
};
|
|
26
|
+
events: {
|
|
27
|
+
[evt: string]: CustomEvent<any>;
|
|
28
|
+
};
|
|
29
|
+
slots: {};
|
|
30
|
+
};
|
|
31
|
+
export {};
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
/** @typedef {typeof __propDef.props} CountrySelectorProps */
|
|
2
|
+
/** @typedef {typeof __propDef.events} CountrySelectorEvents */
|
|
3
|
+
/** @typedef {typeof __propDef.slots} CountrySelectorSlots */
|
|
4
|
+
export default class CountrySelector extends SvelteComponentTyped<{
|
|
5
|
+
resellerModal?: boolean;
|
|
6
|
+
selection?: string;
|
|
7
|
+
allowContinue?: boolean;
|
|
8
|
+
}, {
|
|
9
|
+
[evt: string]: CustomEvent<any>;
|
|
10
|
+
}, {}> {
|
|
11
|
+
}
|
|
12
|
+
export type CountrySelectorProps = typeof __propDef.props;
|
|
13
|
+
export type CountrySelectorEvents = typeof __propDef.events;
|
|
14
|
+
export type CountrySelectorSlots = typeof __propDef.slots;
|
|
15
|
+
import { SvelteComponentTyped } from "svelte";
|
|
16
|
+
declare const __propDef: {
|
|
17
|
+
props: {
|
|
18
|
+
resellerModal?: boolean;
|
|
19
|
+
selection?: string;
|
|
20
|
+
allowContinue?: boolean;
|
|
21
|
+
};
|
|
22
|
+
events: {
|
|
23
|
+
[evt: string]: CustomEvent<any>;
|
|
24
|
+
};
|
|
25
|
+
slots: {};
|
|
26
|
+
};
|
|
27
|
+
export {};
|
|
File without changes
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
/** @typedef {typeof __propDef.props} FooterProps */
|
|
2
|
+
/** @typedef {typeof __propDef.events} FooterEvents */
|
|
3
|
+
/** @typedef {typeof __propDef.slots} FooterSlots */
|
|
4
|
+
export default class Footer extends SvelteComponentTyped<{
|
|
5
|
+
token?: any;
|
|
6
|
+
login?: boolean;
|
|
7
|
+
}, {
|
|
8
|
+
[evt: string]: CustomEvent<any>;
|
|
9
|
+
}, {}> {
|
|
10
|
+
get token(): any;
|
|
11
|
+
}
|
|
12
|
+
export type FooterProps = typeof __propDef.props;
|
|
13
|
+
export type FooterEvents = typeof __propDef.events;
|
|
14
|
+
export type FooterSlots = typeof __propDef.slots;
|
|
15
|
+
import { SvelteComponentTyped } from "svelte";
|
|
16
|
+
declare const __propDef: {
|
|
17
|
+
props: {
|
|
18
|
+
token?: any;
|
|
19
|
+
login?: boolean;
|
|
20
|
+
};
|
|
21
|
+
events: {
|
|
22
|
+
[evt: string]: CustomEvent<any>;
|
|
23
|
+
};
|
|
24
|
+
slots: {};
|
|
25
|
+
};
|
|
26
|
+
export {};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<script>
|
|
2
|
-
import
|
|
2
|
+
import IconTE from "../Logos/TECi_icon_250.svelte";
|
|
3
3
|
</script>
|
|
4
4
|
|
|
5
5
|
<header>
|
|
@@ -7,11 +7,11 @@
|
|
|
7
7
|
<div class="absolute inset-0 shadow z-30 pointer-events-none" aria-hidden="true"></div>
|
|
8
8
|
<div class="relative">
|
|
9
9
|
<div class="max-w-7xl mx-auto flex justify-between items-center px-4 py-5 md:space-x-6 sm:px-6 sm:py-4 lg:px-8 md:justify-start lg:space-x-10">
|
|
10
|
-
<!-- Nav
|
|
10
|
+
<!-- Nav IconTE Linked to WWW Homepage -->
|
|
11
11
|
<div class="flex-shrink-0">
|
|
12
12
|
<a href="https://www.thunderheadeng.com" class="flex">
|
|
13
13
|
<span class="sr-only">Thunderhead Engineering</span>
|
|
14
|
-
<
|
|
14
|
+
<IconTE classes="h-10 w-auto"/>
|
|
15
15
|
</a>
|
|
16
16
|
</div>
|
|
17
17
|
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
/** @typedef {typeof __propDef.props} HeaderProps */
|
|
2
|
+
/** @typedef {typeof __propDef.events} HeaderEvents */
|
|
3
|
+
/** @typedef {typeof __propDef.slots} HeaderSlots */
|
|
4
|
+
export default class Header extends SvelteComponentTyped<{}, {
|
|
5
|
+
[evt: string]: CustomEvent<any>;
|
|
6
|
+
}, {}> {
|
|
7
|
+
}
|
|
8
|
+
export type HeaderProps = typeof __propDef.props;
|
|
9
|
+
export type HeaderEvents = typeof __propDef.events;
|
|
10
|
+
export type HeaderSlots = typeof __propDef.slots;
|
|
11
|
+
import { SvelteComponentTyped } from "svelte";
|
|
12
|
+
declare const __propDef: {
|
|
13
|
+
props: {};
|
|
14
|
+
events: {
|
|
15
|
+
[evt: string]: CustomEvent<any>;
|
|
16
|
+
};
|
|
17
|
+
slots: {};
|
|
18
|
+
};
|
|
19
|
+
export {};
|
|
File without changes
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
/** @typedef {typeof __propDef.props}
|
|
2
|
-
/** @typedef {typeof __propDef.events}
|
|
3
|
-
/** @typedef {typeof __propDef.slots}
|
|
4
|
-
export default class
|
|
1
|
+
/** @typedef {typeof __propDef.props} ModalProps */
|
|
2
|
+
/** @typedef {typeof __propDef.events} ModalEvents */
|
|
3
|
+
/** @typedef {typeof __propDef.slots} ModalSlots */
|
|
4
|
+
export default class Modal extends SvelteComponentTyped<{
|
|
5
5
|
show?: () => void;
|
|
6
6
|
hide?: () => void;
|
|
7
7
|
}, {
|
|
@@ -12,9 +12,9 @@ export default class Index extends SvelteComponentTyped<{
|
|
|
12
12
|
get show(): () => void;
|
|
13
13
|
get hide(): () => void;
|
|
14
14
|
}
|
|
15
|
-
export type
|
|
16
|
-
export type
|
|
17
|
-
export type
|
|
15
|
+
export type ModalProps = typeof __propDef.props;
|
|
16
|
+
export type ModalEvents = typeof __propDef.events;
|
|
17
|
+
export type ModalSlots = typeof __propDef.slots;
|
|
18
18
|
import { SvelteComponentTyped } from "svelte";
|
|
19
19
|
declare const __propDef: {
|
|
20
20
|
props: {
|
|
@@ -0,0 +1,230 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
import CountrySelector from '../CountrySelector/index.svelte';
|
|
3
|
+
import IconTE from '../Logos/TECi_icon_250.svelte';
|
|
4
|
+
import { onMount } from 'svelte';
|
|
5
|
+
import { scrollTo, validateEmail } from '../utils.js';
|
|
6
|
+
|
|
7
|
+
onMount(() => {
|
|
8
|
+
setTimeout(() => {
|
|
9
|
+
timePassed = true;
|
|
10
|
+
}, 3000);
|
|
11
|
+
});
|
|
12
|
+
|
|
13
|
+
let resellerModal = false;
|
|
14
|
+
let country = 'sel';
|
|
15
|
+
let name = '';
|
|
16
|
+
let email = '';
|
|
17
|
+
let product = 0;
|
|
18
|
+
let valid = false;
|
|
19
|
+
let message = '';
|
|
20
|
+
let error = '';
|
|
21
|
+
let answer = '';
|
|
22
|
+
let submitted = false;
|
|
23
|
+
let waiting = false;
|
|
24
|
+
let timePassed = false;
|
|
25
|
+
|
|
26
|
+
$: if (
|
|
27
|
+
country != 'sel' &&
|
|
28
|
+
name != '' &&
|
|
29
|
+
validateEmail(email) &&
|
|
30
|
+
product != 0 &&
|
|
31
|
+
answer == '' &&
|
|
32
|
+
timePassed
|
|
33
|
+
) {
|
|
34
|
+
valid = true;
|
|
35
|
+
} else {
|
|
36
|
+
valid = false;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
$: if (submitted == true && message == '') {
|
|
40
|
+
waiting = true;
|
|
41
|
+
scrollTo('trial-request');
|
|
42
|
+
} else {
|
|
43
|
+
waiting = false;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
const submitForm = async () => {
|
|
47
|
+
submitted = true;
|
|
48
|
+
error = '';
|
|
49
|
+
|
|
50
|
+
try {
|
|
51
|
+
const submit = await fetch('https://hook.integromat.com/6btizsespvl1na5lrrs9617vwlfnhmvn', {
|
|
52
|
+
method: 'POST',
|
|
53
|
+
body: JSON.stringify({
|
|
54
|
+
name,
|
|
55
|
+
email,
|
|
56
|
+
country,
|
|
57
|
+
product
|
|
58
|
+
})
|
|
59
|
+
});
|
|
60
|
+
message = await submit.json();
|
|
61
|
+
} catch (err) {
|
|
62
|
+
console.log(err);
|
|
63
|
+
}
|
|
64
|
+
};
|
|
65
|
+
</script>
|
|
66
|
+
|
|
67
|
+
<form id="trial-request" on:submit|preventDefault={submitForm}>
|
|
68
|
+
<div class=" border shadow overflow-hidden">
|
|
69
|
+
{#if message}
|
|
70
|
+
<div class="px-4 py-5 bg-white sm:p-6 prose">
|
|
71
|
+
<p>
|
|
72
|
+
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
|
|
73
|
+
and Pathfinder{/if}!<br />
|
|
74
|
+
You will receive an email to <strong>{message.email}</strong> with your activation key{#if message.product == 3}s{/if}
|
|
75
|
+
in a few moments.
|
|
76
|
+
</p>
|
|
77
|
+
{#if message.product == 1}
|
|
78
|
+
<h3>PyroSim</h3>
|
|
79
|
+
<p>
|
|
80
|
+
To download the most recent version visit the <a
|
|
81
|
+
href="https://support.thunderheadeng.com/pyrosim/">PyroSim Support</a
|
|
82
|
+
> page.
|
|
83
|
+
</p>
|
|
84
|
+
{:else if message.product == 2}
|
|
85
|
+
<h3>Pathfinder</h3>
|
|
86
|
+
<p>
|
|
87
|
+
To download the most recent version visit the <a
|
|
88
|
+
href="https://support.thunderheadeng.com/pathfinder/">Pathfinder Support</a
|
|
89
|
+
> page.
|
|
90
|
+
</p>
|
|
91
|
+
{:else if message.product == 3}
|
|
92
|
+
<h3>PyroSim</h3>
|
|
93
|
+
<p>
|
|
94
|
+
To download the most recent version visit the <a
|
|
95
|
+
href="https://support.thunderheadeng.com/pyrosim/">PyroSim Support</a
|
|
96
|
+
> page.
|
|
97
|
+
</p>
|
|
98
|
+
<h3>Pathfinder</h3>
|
|
99
|
+
<p>
|
|
100
|
+
To download the most recent version visit the <a
|
|
101
|
+
href="https://support.thunderheadeng.com/pathfinder/">Pathfinder Support</a
|
|
102
|
+
> page.
|
|
103
|
+
</p>
|
|
104
|
+
{/if}
|
|
105
|
+
<h3>Need Help?</h3>
|
|
106
|
+
<p>
|
|
107
|
+
Please email <a href="mailto:support@thunderheadeng.com">support@thunderheadeng.com</a> if
|
|
108
|
+
you have any questions.
|
|
109
|
+
</p>
|
|
110
|
+
</div>
|
|
111
|
+
{:else if error}
|
|
112
|
+
<p>There was an error: {error}</p>
|
|
113
|
+
{:else if waiting}
|
|
114
|
+
<div id="waiting" class="p-12 mx-auto">
|
|
115
|
+
<p class="text-center pb-8 font-bold">Waiting for Trial Approval...</p>
|
|
116
|
+
<IconTE classes="h-24 w-24 mx-auto animate-pulse" />
|
|
117
|
+
</div>
|
|
118
|
+
{:else}
|
|
119
|
+
<div class="px-4 py-5 bg-white space-y-6 sm:p-6">
|
|
120
|
+
<fieldset>
|
|
121
|
+
<div>
|
|
122
|
+
<legend class="text-lg font-bold text-gray-900"> Personal Information </legend>
|
|
123
|
+
</div>
|
|
124
|
+
<div class="flex flex-row align-middle items-center pt-4">
|
|
125
|
+
<label for="name" class="whitespace-nowrap pr-2 block font-medium text-gray-700">
|
|
126
|
+
Full Name:
|
|
127
|
+
</label>
|
|
128
|
+
<input
|
|
129
|
+
id="name"
|
|
130
|
+
type="text"
|
|
131
|
+
name="name"
|
|
132
|
+
bind:value={name}
|
|
133
|
+
class="w-full p-1 border-0 border-b-2 border-gray-500"
|
|
134
|
+
/>
|
|
135
|
+
</div>
|
|
136
|
+
<div class="flex flex-row align-middle items-center pt-4">
|
|
137
|
+
<label for="email" class="pr-2 block font-medium text-gray-700"> Email: </label>
|
|
138
|
+
<input
|
|
139
|
+
id="email"
|
|
140
|
+
type="text"
|
|
141
|
+
name="email"
|
|
142
|
+
bind:value={email}
|
|
143
|
+
class="w-full p-1 border-0 border-b-2 border-gray-500"
|
|
144
|
+
/>
|
|
145
|
+
</div>
|
|
146
|
+
<div class="flex flex-row align-middle items-center pt-4">
|
|
147
|
+
<label for="country" class="pr-2 block font-medium text-gray-700"> Country: </label>
|
|
148
|
+
<input id="country" type="hidden" name="country" value={country} />
|
|
149
|
+
<CountrySelector bind:selection={country} bind:resellerModal />
|
|
150
|
+
</div>
|
|
151
|
+
</fieldset>
|
|
152
|
+
<fieldset>
|
|
153
|
+
<div>
|
|
154
|
+
<legend class="text-lg font-bold text-gray-900"> What would you like to try? </legend>
|
|
155
|
+
</div>
|
|
156
|
+
<div class="mt-4 space-y-4">
|
|
157
|
+
<div class="flex items-center">
|
|
158
|
+
<input
|
|
159
|
+
id="pyrosim"
|
|
160
|
+
name="product"
|
|
161
|
+
type="radio"
|
|
162
|
+
value={1}
|
|
163
|
+
bind:group={product}
|
|
164
|
+
class="focus:ring-teci-blue-dark h-4 w-4 text-blue-600 border-gray-300"
|
|
165
|
+
/>
|
|
166
|
+
<label for="pyrosim" class="ml-3 block text-sm font-medium text-gray-700">
|
|
167
|
+
PyroSim
|
|
168
|
+
</label>
|
|
169
|
+
</div>
|
|
170
|
+
<div class="flex items-center">
|
|
171
|
+
<input
|
|
172
|
+
id="pathfinder"
|
|
173
|
+
name="product"
|
|
174
|
+
type="radio"
|
|
175
|
+
value={2}
|
|
176
|
+
bind:group={product}
|
|
177
|
+
class="focus:ring-teci-blue-dark h-4 w-4 text-blue-600 border-gray-300"
|
|
178
|
+
/>
|
|
179
|
+
<label for="pathfinder" class="ml-3 block text-sm font-medium text-gray-700">
|
|
180
|
+
Pathfinder
|
|
181
|
+
</label>
|
|
182
|
+
</div>
|
|
183
|
+
<div class="flex items-center">
|
|
184
|
+
<input
|
|
185
|
+
id="pyropath"
|
|
186
|
+
name="product"
|
|
187
|
+
type="radio"
|
|
188
|
+
value={3}
|
|
189
|
+
bind:group={product}
|
|
190
|
+
class="focus:ring-teci-blue-dark h-4 w-4 text-blue-600 border-gray-300"
|
|
191
|
+
/>
|
|
192
|
+
<label for="pyropath" class="ml-3 block text-sm font-medium text-gray-700">
|
|
193
|
+
PyroSim and Pathfinder
|
|
194
|
+
</label>
|
|
195
|
+
</div>
|
|
196
|
+
</div>
|
|
197
|
+
</fieldset>
|
|
198
|
+
<input
|
|
199
|
+
class="confident"
|
|
200
|
+
id="answer"
|
|
201
|
+
type="text"
|
|
202
|
+
name="answer"
|
|
203
|
+
bind:value={answer}
|
|
204
|
+
placeholder="Correct answers only..."
|
|
205
|
+
/>
|
|
206
|
+
</div>
|
|
207
|
+
<div class="px-4 py-3 text-right sm:px-6">
|
|
208
|
+
<button
|
|
209
|
+
type="submit"
|
|
210
|
+
disabled={!valid}
|
|
211
|
+
class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium text-white {valid ===
|
|
212
|
+
true
|
|
213
|
+
? 'bg-teci-blue-light hover:bg-teci-blue-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500'
|
|
214
|
+
: 'bg-gray-300 cursor-not-allowed'}"
|
|
215
|
+
>
|
|
216
|
+
Send Request
|
|
217
|
+
</button>
|
|
218
|
+
{#if answer}
|
|
219
|
+
<p>Something is wrong with the form, please email support@thunderheadeng.com.</p>
|
|
220
|
+
{/if}
|
|
221
|
+
</div>
|
|
222
|
+
{/if}
|
|
223
|
+
</div>
|
|
224
|
+
</form>
|
|
225
|
+
|
|
226
|
+
<style >
|
|
227
|
+
.confident {
|
|
228
|
+
@apply hidden;
|
|
229
|
+
}
|
|
230
|
+
</style>
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
/** @typedef {typeof __propDef.props} TrialFormProps */
|
|
2
|
+
/** @typedef {typeof __propDef.events} TrialFormEvents */
|
|
3
|
+
/** @typedef {typeof __propDef.slots} TrialFormSlots */
|
|
4
|
+
export default class TrialForm extends SvelteComponentTyped<{}, {
|
|
5
|
+
[evt: string]: CustomEvent<any>;
|
|
6
|
+
}, {}> {
|
|
7
|
+
}
|
|
8
|
+
export type TrialFormProps = typeof __propDef.props;
|
|
9
|
+
export type TrialFormEvents = typeof __propDef.events;
|
|
10
|
+
export type TrialFormSlots = typeof __propDef.slots;
|
|
11
|
+
import { SvelteComponentTyped } from "svelte";
|
|
12
|
+
declare const __propDef: {
|
|
13
|
+
props: {};
|
|
14
|
+
events: {
|
|
15
|
+
[evt: string]: CustomEvent<any>;
|
|
16
|
+
};
|
|
17
|
+
slots: {};
|
|
18
|
+
};
|
|
19
|
+
export {};
|
package/demodata.d.ts
ADDED
package/demodata.js
ADDED
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export const bannerData = {
|
|
2
|
+
showLogo: true,
|
|
3
|
+
showCTA: true,
|
|
4
|
+
shortText: "Some Banner Short text in a few words.",
|
|
5
|
+
longText: "Some Banner Long test text that goes on and on for a while with some information about something.",
|
|
6
|
+
ctaText: "Take Action",
|
|
7
|
+
ctaLink: "https://www.thunderheadeng.com"
|
|
8
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "tecitheme",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.2",
|
|
4
|
+
"svelte": true,
|
|
4
5
|
"devDependencies": {
|
|
5
6
|
"@sveltejs/adapter-auto": "next",
|
|
6
7
|
"@sveltejs/kit": "next",
|
|
@@ -25,7 +26,7 @@
|
|
|
25
26
|
"svelte-cubed": "^0.2.1",
|
|
26
27
|
"svelte-preprocess": "^4.10.1",
|
|
27
28
|
"svelte2tsx": "^0.4.12",
|
|
28
|
-
"tailwindcss": "^3.0.
|
|
29
|
+
"tailwindcss": "^3.0.16",
|
|
29
30
|
"three": "^0.136.0",
|
|
30
31
|
"tslib": "^2.3.1",
|
|
31
32
|
"typescript": "^4.4.3",
|
|
@@ -41,11 +42,13 @@
|
|
|
41
42
|
"./package.json": "./package.json",
|
|
42
43
|
"./Logos/TECi_icon_250.svelte": "./Logos/TECi_icon_250.svelte",
|
|
43
44
|
"./Logos/TECi_logo.svelte": "./Logos/TECi_logo.svelte",
|
|
44
|
-
"./components/
|
|
45
|
-
"./components/
|
|
46
|
-
"./components/
|
|
47
|
-
"./components/
|
|
48
|
-
"./components/
|
|
45
|
+
"./components/Banner.svelte": "./components/Banner.svelte",
|
|
46
|
+
"./components/CountrySelector.svelte": "./components/CountrySelector.svelte",
|
|
47
|
+
"./components/Footer.svelte": "./components/Footer.svelte",
|
|
48
|
+
"./components/Header.svelte": "./components/Header.svelte",
|
|
49
|
+
"./components/Modal.svelte": "./components/Modal.svelte",
|
|
50
|
+
"./components/TrialForm.svelte": "./components/TrialForm.svelte",
|
|
51
|
+
"./demodata": "./demodata.js",
|
|
49
52
|
"./req_utils": "./req_utils.js",
|
|
50
53
|
"./utils": "./utils.js"
|
|
51
54
|
}
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
/** @typedef {typeof __propDef.props} IndexProps */
|
|
2
|
-
/** @typedef {typeof __propDef.events} IndexEvents */
|
|
3
|
-
/** @typedef {typeof __propDef.slots} IndexSlots */
|
|
4
|
-
export default class Index extends SvelteComponentTyped<{
|
|
5
|
-
resellerModal?: boolean;
|
|
6
|
-
selection?: string;
|
|
7
|
-
allowContinue?: boolean;
|
|
8
|
-
}, {
|
|
9
|
-
[evt: string]: CustomEvent<any>;
|
|
10
|
-
}, {}> {
|
|
11
|
-
}
|
|
12
|
-
export type IndexProps = typeof __propDef.props;
|
|
13
|
-
export type IndexEvents = typeof __propDef.events;
|
|
14
|
-
export type IndexSlots = typeof __propDef.slots;
|
|
15
|
-
import { SvelteComponentTyped } from "svelte";
|
|
16
|
-
declare const __propDef: {
|
|
17
|
-
props: {
|
|
18
|
-
resellerModal?: boolean;
|
|
19
|
-
selection?: string;
|
|
20
|
-
allowContinue?: boolean;
|
|
21
|
-
};
|
|
22
|
-
events: {
|
|
23
|
-
[evt: string]: CustomEvent<any>;
|
|
24
|
-
};
|
|
25
|
-
slots: {};
|
|
26
|
-
};
|
|
27
|
-
export {};
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
/** @typedef {typeof __propDef.props} IndexProps */
|
|
2
|
-
/** @typedef {typeof __propDef.events} IndexEvents */
|
|
3
|
-
/** @typedef {typeof __propDef.slots} IndexSlots */
|
|
4
|
-
export default class Index extends SvelteComponentTyped<{
|
|
5
|
-
token?: any;
|
|
6
|
-
login?: boolean;
|
|
7
|
-
}, {
|
|
8
|
-
[evt: string]: CustomEvent<any>;
|
|
9
|
-
}, {}> {
|
|
10
|
-
get token(): any;
|
|
11
|
-
}
|
|
12
|
-
export type IndexProps = typeof __propDef.props;
|
|
13
|
-
export type IndexEvents = typeof __propDef.events;
|
|
14
|
-
export type IndexSlots = typeof __propDef.slots;
|
|
15
|
-
import { SvelteComponentTyped } from "svelte";
|
|
16
|
-
declare const __propDef: {
|
|
17
|
-
props: {
|
|
18
|
-
token?: any;
|
|
19
|
-
login?: boolean;
|
|
20
|
-
};
|
|
21
|
-
events: {
|
|
22
|
-
[evt: string]: CustomEvent<any>;
|
|
23
|
-
};
|
|
24
|
-
slots: {};
|
|
25
|
-
};
|
|
26
|
-
export {};
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
/** @typedef {typeof __propDef.props} IndexProps */
|
|
2
|
-
/** @typedef {typeof __propDef.events} IndexEvents */
|
|
3
|
-
/** @typedef {typeof __propDef.slots} IndexSlots */
|
|
4
|
-
export default class Index extends SvelteComponentTyped<{}, {
|
|
5
|
-
[evt: string]: CustomEvent<any>;
|
|
6
|
-
}, {}> {
|
|
7
|
-
}
|
|
8
|
-
export type IndexProps = typeof __propDef.props;
|
|
9
|
-
export type IndexEvents = typeof __propDef.events;
|
|
10
|
-
export type IndexSlots = typeof __propDef.slots;
|
|
11
|
-
import { SvelteComponentTyped } from "svelte";
|
|
12
|
-
declare const __propDef: {
|
|
13
|
-
props: {};
|
|
14
|
-
events: {
|
|
15
|
-
[evt: string]: CustomEvent<any>;
|
|
16
|
-
};
|
|
17
|
-
slots: {};
|
|
18
|
-
};
|
|
19
|
-
export {};
|
|
@@ -1,210 +0,0 @@
|
|
|
1
|
-
<script>
|
|
2
|
-
import CountrySelector from '../../CountrySelector/index.svelte';
|
|
3
|
-
import Icon from "../../Logos/TECi_icon_250.svelte";
|
|
4
|
-
import { onMount } from 'svelte';
|
|
5
|
-
import { scrollTo, validateEmail } from "../../utils.js";
|
|
6
|
-
|
|
7
|
-
onMount(() => {
|
|
8
|
-
setTimeout(() => {
|
|
9
|
-
timePassed = true
|
|
10
|
-
}, 3000);
|
|
11
|
-
});
|
|
12
|
-
|
|
13
|
-
let resellerModal = false
|
|
14
|
-
let country = "sel"
|
|
15
|
-
let name = ""
|
|
16
|
-
let email = ""
|
|
17
|
-
let product = 0
|
|
18
|
-
let valid = false
|
|
19
|
-
let message = ""
|
|
20
|
-
let error = ""
|
|
21
|
-
let answer = ""
|
|
22
|
-
let submitted = false
|
|
23
|
-
let waiting = false
|
|
24
|
-
let timePassed = false
|
|
25
|
-
|
|
26
|
-
$: if ((country != "sel") && (name != "") && (validateEmail(email)) && (product != 0) && (answer == "") && timePassed ) {
|
|
27
|
-
valid = true
|
|
28
|
-
} else {
|
|
29
|
-
valid = false
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
$: if ((submitted == true) && (message == "")) {
|
|
33
|
-
waiting = true
|
|
34
|
-
scrollTo("trial-request")
|
|
35
|
-
} else {
|
|
36
|
-
waiting = false
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
const submitForm = async () => {
|
|
40
|
-
submitted = true;
|
|
41
|
-
error = '';
|
|
42
|
-
|
|
43
|
-
try {
|
|
44
|
-
const submit = await fetch("https://hook.integromat.com/6btizsespvl1na5lrrs9617vwlfnhmvn",{
|
|
45
|
-
method: "POST",
|
|
46
|
-
body: JSON.stringify({
|
|
47
|
-
name,
|
|
48
|
-
email,
|
|
49
|
-
country,
|
|
50
|
-
product
|
|
51
|
-
}),
|
|
52
|
-
});
|
|
53
|
-
message = await submit.json();
|
|
54
|
-
} catch (err) {
|
|
55
|
-
console.log(err);
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
};
|
|
59
|
-
|
|
60
|
-
</script>
|
|
61
|
-
|
|
62
|
-
<form id='trial-request' on:submit|preventDefault={submitForm}>
|
|
63
|
-
<div class=" border shadow overflow-hidden">
|
|
64
|
-
{#if message}
|
|
65
|
-
<div class="px-4 py-5 bg-white sm:p-6 prose">
|
|
66
|
-
<p>
|
|
67
|
-
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 and Pathfinder{/if}!<br>
|
|
68
|
-
You will receive an email to <strong>{message.email}</strong> with your activation key{#if message.product == 3}s{/if} in a few moments.
|
|
69
|
-
</p>
|
|
70
|
-
{#if message.product == 1}
|
|
71
|
-
<h3>PyroSim</h3>
|
|
72
|
-
<p>To download the most recent version visit the <a href="https://support.thunderheadeng.com/pyrosim/">PyroSim Support</a> page.</p>
|
|
73
|
-
{:else if message.product == 2}
|
|
74
|
-
<h3>Pathfinder</h3>
|
|
75
|
-
<p>To download the most recent version visit the <a href="https://support.thunderheadeng.com/pathfinder/">Pathfinder Support</a> page.</p>
|
|
76
|
-
{:else if message.product == 3}
|
|
77
|
-
<h3>PyroSim</h3>
|
|
78
|
-
<p>To download the most recent version visit the <a href="https://support.thunderheadeng.com/pyrosim/">PyroSim Support</a> page.</p>
|
|
79
|
-
<h3>Pathfinder</h3>
|
|
80
|
-
<p>To download the most recent version visit the <a href="https://support.thunderheadeng.com/pathfinder/">Pathfinder Support</a> page.</p>
|
|
81
|
-
{/if}
|
|
82
|
-
<h3>Need Help?</h3>
|
|
83
|
-
<p>Please email <a href="mailto:support@thunderheadeng.com">support@thunderheadeng.com</a> if you have any questions.</p>
|
|
84
|
-
</div>
|
|
85
|
-
{:else if error}
|
|
86
|
-
<p>There was an error: {error}</p>
|
|
87
|
-
{:else if waiting}
|
|
88
|
-
<div id="waiting" class="p-12 mx-auto">
|
|
89
|
-
<p class="text-center pb-8 font-bold">Waiting for Trial Approval...</p>
|
|
90
|
-
<Icon classes="h-24 w-24 mx-auto animate-pulse"/>
|
|
91
|
-
</div>
|
|
92
|
-
{:else}
|
|
93
|
-
<div class="px-4 py-5 bg-white space-y-6 sm:p-6">
|
|
94
|
-
<fieldset>
|
|
95
|
-
<div>
|
|
96
|
-
<legend class="text-lg font-bold text-gray-900">
|
|
97
|
-
Personal Information
|
|
98
|
-
</legend>
|
|
99
|
-
</div>
|
|
100
|
-
<div class="flex flex-row align-middle items-center pt-4">
|
|
101
|
-
<label
|
|
102
|
-
for="name"
|
|
103
|
-
class="whitespace-nowrap pr-2 block font-medium text-gray-700"
|
|
104
|
-
>
|
|
105
|
-
Full Name:
|
|
106
|
-
</label>
|
|
107
|
-
<input id="name" type="text" name="name" bind:value={name}
|
|
108
|
-
class="w-full p-1 border-0 border-b-2 border-gray-500"
|
|
109
|
-
/>
|
|
110
|
-
</div>
|
|
111
|
-
<div class="flex flex-row align-middle items-center pt-4">
|
|
112
|
-
<label
|
|
113
|
-
for="email"
|
|
114
|
-
class="pr-2 block font-medium text-gray-700"
|
|
115
|
-
>
|
|
116
|
-
Email:
|
|
117
|
-
</label>
|
|
118
|
-
<input id="email" type="text" name="email" bind:value={email}
|
|
119
|
-
class="w-full p-1 border-0 border-b-2 border-gray-500"
|
|
120
|
-
/>
|
|
121
|
-
</div>
|
|
122
|
-
<div class="flex flex-row align-middle items-center pt-4">
|
|
123
|
-
<label
|
|
124
|
-
for="country"
|
|
125
|
-
class="pr-2 block font-medium text-gray-700"
|
|
126
|
-
>
|
|
127
|
-
Country:
|
|
128
|
-
</label>
|
|
129
|
-
<input id="country" type="hidden" name="country" value={country}/>
|
|
130
|
-
<CountrySelector bind:selection={country} bind:resellerModal={resellerModal} />
|
|
131
|
-
</div>
|
|
132
|
-
</fieldset>
|
|
133
|
-
<fieldset>
|
|
134
|
-
<div>
|
|
135
|
-
<legend class="text-lg font-bold text-gray-900">
|
|
136
|
-
What would you like to try?
|
|
137
|
-
</legend>
|
|
138
|
-
</div>
|
|
139
|
-
<div class="mt-4 space-y-4">
|
|
140
|
-
<div class="flex items-center">
|
|
141
|
-
<input
|
|
142
|
-
id="pyrosim"
|
|
143
|
-
name="product"
|
|
144
|
-
type="radio"
|
|
145
|
-
value={1}
|
|
146
|
-
bind:group={product}
|
|
147
|
-
class="focus:ring-teci-blue-dark h-4 w-4 text-blue-600 border-gray-300"
|
|
148
|
-
/>
|
|
149
|
-
<label
|
|
150
|
-
for="pyrosim"
|
|
151
|
-
class="ml-3 block text-sm font-medium text-gray-700"
|
|
152
|
-
>
|
|
153
|
-
PyroSim
|
|
154
|
-
</label>
|
|
155
|
-
</div>
|
|
156
|
-
<div class="flex items-center">
|
|
157
|
-
<input
|
|
158
|
-
id="pathfinder"
|
|
159
|
-
name="product"
|
|
160
|
-
type="radio"
|
|
161
|
-
value={2}
|
|
162
|
-
bind:group={product}
|
|
163
|
-
class="focus:ring-teci-blue-dark h-4 w-4 text-blue-600 border-gray-300"
|
|
164
|
-
/>
|
|
165
|
-
<label
|
|
166
|
-
for="pathfinder"
|
|
167
|
-
class="ml-3 block text-sm font-medium text-gray-700"
|
|
168
|
-
>
|
|
169
|
-
Pathfinder
|
|
170
|
-
</label>
|
|
171
|
-
</div>
|
|
172
|
-
<div class="flex items-center">
|
|
173
|
-
<input
|
|
174
|
-
id="pyropath"
|
|
175
|
-
name="product"
|
|
176
|
-
type="radio"
|
|
177
|
-
value={3}
|
|
178
|
-
bind:group={product}
|
|
179
|
-
class="focus:ring-teci-blue-dark h-4 w-4 text-blue-600 border-gray-300"
|
|
180
|
-
/>
|
|
181
|
-
<label
|
|
182
|
-
for="pyropath"
|
|
183
|
-
class="ml-3 block text-sm font-medium text-gray-700"
|
|
184
|
-
>
|
|
185
|
-
PyroSim and Pathfinder
|
|
186
|
-
</label>
|
|
187
|
-
</div>
|
|
188
|
-
</div>
|
|
189
|
-
</fieldset>
|
|
190
|
-
<input class="confident" id="answer" type="text" name="answer" bind:value={answer} placeholder="Correct answers only..."/>
|
|
191
|
-
</div>
|
|
192
|
-
<div class="px-4 py-3 text-right sm:px-6">
|
|
193
|
-
<button type="submit" disabled={!valid}
|
|
194
|
-
class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium text-white {valid === true ? 'bg-teci-blue-light hover:bg-teci-blue-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500' : 'bg-gray-300 cursor-not-allowed'}"
|
|
195
|
-
>
|
|
196
|
-
Send Request
|
|
197
|
-
</button>
|
|
198
|
-
{#if answer}
|
|
199
|
-
<p>Something is wrong with the form, please email support@thunderheadeng.com.</p>
|
|
200
|
-
{/if}
|
|
201
|
-
</div>
|
|
202
|
-
{/if}
|
|
203
|
-
</div>
|
|
204
|
-
</form>
|
|
205
|
-
|
|
206
|
-
<style >
|
|
207
|
-
.confident {
|
|
208
|
-
@apply hidden
|
|
209
|
-
}
|
|
210
|
-
</style>
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
/** @typedef {typeof __propDef.props} IndexProps */
|
|
2
|
-
/** @typedef {typeof __propDef.events} IndexEvents */
|
|
3
|
-
/** @typedef {typeof __propDef.slots} IndexSlots */
|
|
4
|
-
export default class Index extends SvelteComponentTyped<{}, {
|
|
5
|
-
[evt: string]: CustomEvent<any>;
|
|
6
|
-
}, {}> {
|
|
7
|
-
}
|
|
8
|
-
export type IndexProps = typeof __propDef.props;
|
|
9
|
-
export type IndexEvents = typeof __propDef.events;
|
|
10
|
-
export type IndexSlots = typeof __propDef.slots;
|
|
11
|
-
import { SvelteComponentTyped } from "svelte";
|
|
12
|
-
declare const __propDef: {
|
|
13
|
-
props: {};
|
|
14
|
-
events: {
|
|
15
|
-
[evt: string]: CustomEvent<any>;
|
|
16
|
-
};
|
|
17
|
-
slots: {};
|
|
18
|
-
};
|
|
19
|
-
export {};
|