tecitheme 0.0.1 → 0.0.5
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/{Logos → assets}/TECi_logo.svelte +0 -0
- package/{Logos → assets}/TECi_logo.svelte.d.ts +0 -0
- package/components/Banner.svelte +57 -0
- package/components/Banner.svelte.d.ts +31 -0
- package/components/{CountrySelector/index.svelte → CountrySelector.svelte} +4 -4
- 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} +5 -5
- package/components/Header.svelte.d.ts +19 -0
- package/components/Icon.svelte +45 -0
- package/components/Icon.svelte.d.ts +25 -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/SectionHeaderCentered.svelte +24 -0
- package/components/SectionHeaderCentered.svelte.d.ts +31 -0
- package/components/ThreeColumn.svelte +67 -0
- package/components/ThreeColumn.svelte.d.ts +41 -0
- package/components/TrialForm.svelte +251 -0
- package/components/TrialForm.svelte.d.ts +14 -0
- package/demodata.d.ts +7 -0
- package/demodata.js +7 -0
- package/package.json +31 -24
- package/variables.d.ts +3 -0
- package/variables.js +3 -0
- package/Logos/TECi_icon_250.svelte +0 -21
- package/Logos/TECi_icon_250.svelte.d.ts +0 -23
- 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 https://tecitheme.netlify.app/ for demo, documentation and component details.
|
|
File without changes
|
|
File without changes
|
|
@@ -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 {};
|
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
<script>
|
|
2
2
|
import { createEventDispatcher } from 'svelte';
|
|
3
|
-
import Modal from "
|
|
3
|
+
import Modal from "./Modal.svelte";
|
|
4
4
|
|
|
5
5
|
export let resellerModal = true;
|
|
6
|
-
let modal;
|
|
7
6
|
export let selection = 'sel';
|
|
7
|
+
export let allowContinue = false;
|
|
8
|
+
|
|
9
|
+
let modal;
|
|
8
10
|
let resellerIndex = -1;
|
|
9
11
|
let resellerArray = [
|
|
10
12
|
["BE", "NL", "LU"],
|
|
@@ -24,8 +26,6 @@
|
|
|
24
26
|
["ES"]
|
|
25
27
|
]
|
|
26
28
|
|
|
27
|
-
export let allowContinue = false;
|
|
28
|
-
|
|
29
29
|
function isReseller() {
|
|
30
30
|
resellerIndex = resellerArray.findIndex(arr => arr.includes(selection))
|
|
31
31
|
return resellerIndex > -1
|
|
@@ -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 Icon from "
|
|
2
|
+
import Icon from "./Icon.svelte";
|
|
3
3
|
</script>
|
|
4
4
|
|
|
5
5
|
<header>
|
|
@@ -11,7 +11,7 @@
|
|
|
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
|
-
<Icon classes="h-10 w-auto"/>
|
|
14
|
+
<Icon classes="h-10 w-auto" />
|
|
15
15
|
</a>
|
|
16
16
|
</div>
|
|
17
17
|
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
<a href="https://www.thunderheadeng.com/pyrosim/" class="-m-3 p-3 flex flex-col justify-between rounded-lg hover:bg-gray-50">
|
|
51
51
|
<div class="flex md:h-full lg:flex-col">
|
|
52
52
|
<div class="flex-shrink-0">
|
|
53
|
-
<
|
|
53
|
+
<Icon classes="h-12 w-auto" icon="pyrosim" />
|
|
54
54
|
</div>
|
|
55
55
|
<div class="ml-4 md:flex-1 md:flex md:flex-col md:justify-between lg:ml-0 lg:mt-4">
|
|
56
56
|
<div>
|
|
@@ -71,7 +71,7 @@
|
|
|
71
71
|
<a href="https://www.thunderheadeng.com/pathfinder/" class="-m-3 p-3 flex flex-col justify-between rounded-lg hover:bg-gray-50">
|
|
72
72
|
<div class="flex md:h-full lg:flex-col">
|
|
73
73
|
<div class="flex-shrink-0">
|
|
74
|
-
<
|
|
74
|
+
<Icon classes="h-12 w-auto" icon="pathfinder" />
|
|
75
75
|
</div>
|
|
76
76
|
<div class="ml-4 md:flex-1 md:flex md:flex-col md:justify-between lg:ml-0 lg:mt-4">
|
|
77
77
|
<div>
|
|
@@ -92,7 +92,7 @@
|
|
|
92
92
|
<a href="https://www.thunderheadeng.com/petrasim/" class="-m-3 p-3 flex flex-col justify-between rounded-lg hover:bg-gray-50">
|
|
93
93
|
<div class="flex md:h-full lg:flex-col">
|
|
94
94
|
<div class="flex-shrink-0">
|
|
95
|
-
<
|
|
95
|
+
<Icon classes="h-12 w-auto" icon='petrasim' />
|
|
96
96
|
</div>
|
|
97
97
|
<div class="ml-4 md:flex-1 md:flex md:flex-col md:justify-between lg:ml-0 lg:mt-4">
|
|
98
98
|
<div>
|
|
@@ -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 {};
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
export let icon;
|
|
3
|
+
export let classes;
|
|
4
|
+
</script>
|
|
5
|
+
|
|
6
|
+
{#if icon == 'pyrosim'}
|
|
7
|
+
<img
|
|
8
|
+
class={classes}
|
|
9
|
+
src="https://files.thunderheadeng.com/www/images/pyrosim_icon.svg"
|
|
10
|
+
alt="PyroSim"
|
|
11
|
+
title="PyroSim Icon"
|
|
12
|
+
/>
|
|
13
|
+
{:else if icon == 'pathfinder'}
|
|
14
|
+
<img
|
|
15
|
+
class={classes}
|
|
16
|
+
src="https://files.thunderheadeng.com/www/images/pathfinder_icon.svg"
|
|
17
|
+
alt="Pathfinder"
|
|
18
|
+
title="Pathfinder Icon"
|
|
19
|
+
/>
|
|
20
|
+
{:else if icon == 'petrasim'}
|
|
21
|
+
<img
|
|
22
|
+
class={classes}
|
|
23
|
+
src="https://files.thunderheadeng.com/www/images/petrasim_icon.svg"
|
|
24
|
+
alt="PetraSim"
|
|
25
|
+
title="PetraSim Icon"
|
|
26
|
+
/>
|
|
27
|
+
{:else}
|
|
28
|
+
<svg class={classes} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 250">
|
|
29
|
+
<path
|
|
30
|
+
style="fill:#0c3879;fill-rule:evenodd;stroke:none"
|
|
31
|
+
d="M88.113 220.536h97.672v97.672H88.113z"
|
|
32
|
+
transform="matrix(2.5596 0 0 2.5596 -225.533 -564.483)"
|
|
33
|
+
/>
|
|
34
|
+
<path
|
|
35
|
+
style="fill:#fff;fill-rule:evenodd;stroke:none"
|
|
36
|
+
d="M145.864 260.176h22.042c2.792 0 4.883.835 6.559 2.651 1.532 1.673 2.232 3.764 2.232 6.278 0 2.37-.7 4.464-2.232 6.277-1.676 1.675-3.767 2.651-6.559 2.651h-22.042v-17.857m0 23.159h22.042c2.792 0 4.883.838 6.559 2.65 1.532 1.674 2.232 3.768 2.232 6.278 0 2.373-.7 4.464-2.232 6.278-1.676 1.675-3.767 2.65-6.559 2.65h-22.042v-17.856"
|
|
37
|
+
transform="matrix(2.5596 0 0 2.5596 -225.533 -564.483)"
|
|
38
|
+
/>
|
|
39
|
+
<path
|
|
40
|
+
style="fill:#fff;fill-rule:evenodd;stroke:none"
|
|
41
|
+
d="M132.471 301.192c-5.861 0-8.79-3.07-8.79-8.929l-.138-37.389-20.648-.14c-7.116-1.254-10.185-9.626-5.165-15.206 1.535-1.535 3.63-2.373 6.14-2.651h26.926l1.675.14h35.435c2.792 0 4.883.836 6.559 2.649 1.532 1.675 2.232 3.767 2.232 6.28 0 2.37-.7 4.464-2.232 6.277-1.676 1.673-3.767 2.651-6.559 2.651H141.26V301.192h-8.788"
|
|
42
|
+
transform="matrix(2.5596 0 0 2.5596 -225.533 -564.483)"
|
|
43
|
+
/>
|
|
44
|
+
</svg>
|
|
45
|
+
{/if}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
/** @typedef {typeof __propDef.props} IconProps */
|
|
2
|
+
/** @typedef {typeof __propDef.events} IconEvents */
|
|
3
|
+
/** @typedef {typeof __propDef.slots} IconSlots */
|
|
4
|
+
export default class Icon extends SvelteComponentTyped<{
|
|
5
|
+
icon: any;
|
|
6
|
+
classes: any;
|
|
7
|
+
}, {
|
|
8
|
+
[evt: string]: CustomEvent<any>;
|
|
9
|
+
}, {}> {
|
|
10
|
+
}
|
|
11
|
+
export type IconProps = typeof __propDef.props;
|
|
12
|
+
export type IconEvents = typeof __propDef.events;
|
|
13
|
+
export type IconSlots = typeof __propDef.slots;
|
|
14
|
+
import { SvelteComponentTyped } from "svelte";
|
|
15
|
+
declare const __propDef: {
|
|
16
|
+
props: {
|
|
17
|
+
icon: any;
|
|
18
|
+
classes: any;
|
|
19
|
+
};
|
|
20
|
+
events: {
|
|
21
|
+
[evt: string]: CustomEvent<any>;
|
|
22
|
+
};
|
|
23
|
+
slots: {};
|
|
24
|
+
};
|
|
25
|
+
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,24 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
//Based on: https://tailwindui.com/components/marketing/sections/header#component-2c3b25e7b9e4490edd7b6950692c0a11
|
|
3
|
+
|
|
4
|
+
export let data = {
|
|
5
|
+
toptext: 'Small Top Text ',
|
|
6
|
+
title: 'Big Title Text',
|
|
7
|
+
subtitle: 'Subtitle Text'
|
|
8
|
+
};
|
|
9
|
+
</script>
|
|
10
|
+
|
|
11
|
+
<!-- This example requires Tailwind CSS v2.0+ -->
|
|
12
|
+
<div class="text-center">
|
|
13
|
+
{#if data.toptext}
|
|
14
|
+
<h2 class="text-base font-semibold text-indigo-600 tracking-wide uppercase">
|
|
15
|
+
{data.toptext}
|
|
16
|
+
</h2>
|
|
17
|
+
{/if}
|
|
18
|
+
<p class="mt-1 text-4xl font-extrabold text-gray-900 sm:text-5xl sm:tracking-tight lg:text-6xl">
|
|
19
|
+
{data.title}
|
|
20
|
+
</p>
|
|
21
|
+
<p class="max-w-xl mt-5 mx-auto text-xl text-gray-500">
|
|
22
|
+
{data.subtitle}
|
|
23
|
+
</p>
|
|
24
|
+
</div>
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
/** @typedef {typeof __propDef.props} SectionHeaderCenteredProps */
|
|
2
|
+
/** @typedef {typeof __propDef.events} SectionHeaderCenteredEvents */
|
|
3
|
+
/** @typedef {typeof __propDef.slots} SectionHeaderCenteredSlots */
|
|
4
|
+
export default class SectionHeaderCentered extends SvelteComponentTyped<{
|
|
5
|
+
data?: {
|
|
6
|
+
toptext: string;
|
|
7
|
+
title: string;
|
|
8
|
+
subtitle: string;
|
|
9
|
+
};
|
|
10
|
+
}, {
|
|
11
|
+
[evt: string]: CustomEvent<any>;
|
|
12
|
+
}, {}> {
|
|
13
|
+
}
|
|
14
|
+
export type SectionHeaderCenteredProps = typeof __propDef.props;
|
|
15
|
+
export type SectionHeaderCenteredEvents = typeof __propDef.events;
|
|
16
|
+
export type SectionHeaderCenteredSlots = typeof __propDef.slots;
|
|
17
|
+
import { SvelteComponentTyped } from "svelte";
|
|
18
|
+
declare const __propDef: {
|
|
19
|
+
props: {
|
|
20
|
+
data?: {
|
|
21
|
+
toptext: string;
|
|
22
|
+
title: string;
|
|
23
|
+
subtitle: string;
|
|
24
|
+
};
|
|
25
|
+
};
|
|
26
|
+
events: {
|
|
27
|
+
[evt: string]: CustomEvent<any>;
|
|
28
|
+
};
|
|
29
|
+
slots: {};
|
|
30
|
+
};
|
|
31
|
+
export {};
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
//Based on:
|
|
3
|
+
//https://tailwindui.com/components/marketing/sections/feature-sections#component-c683653471044e6ffc32739e199dfbf2
|
|
4
|
+
//https://tailwindui.com/components/marketing/sections/team-sections#component-0efa5ebc92e2aa72bc2332fcf5578869
|
|
5
|
+
|
|
6
|
+
import Icon from './Icon.svelte';
|
|
7
|
+
|
|
8
|
+
export let title = 'A better way to send money.';
|
|
9
|
+
|
|
10
|
+
export let data = [
|
|
11
|
+
{
|
|
12
|
+
icon: 'pyrosim',
|
|
13
|
+
image: 'https://www.thunderheadeng.com/wp-content/uploads/2013/09/company_pyrosim.jpg',
|
|
14
|
+
heading: 'PyroSim',
|
|
15
|
+
subheading: 'Fire & Smoke',
|
|
16
|
+
text: 'Analyze fire control and smoke dissipation in various structures for fire protection and safety or investigation.',
|
|
17
|
+
linkText: 'Learn More »',
|
|
18
|
+
linkURL: '/pyrosim'
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
icon: 'pathfinder',
|
|
22
|
+
image: 'https://www.thunderheadeng.com/wp-content/uploads/2013/08/company_pathfinder.png',
|
|
23
|
+
heading: 'Pathfinder',
|
|
24
|
+
subheading: 'Evacuation',
|
|
25
|
+
text: 'Understand pedestrian egress and congestion hazards for fire protection and safety or urban planning.',
|
|
26
|
+
linkText: 'Learn More »',
|
|
27
|
+
linkURL: '/pathfinder'
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
icon: 'petrasim',
|
|
31
|
+
image: 'https://www.thunderheadeng.com/wp-content/uploads/2013/08/company_petrasim.png',
|
|
32
|
+
heading: 'PetraSim',
|
|
33
|
+
subheading: 'Subsurface Flow',
|
|
34
|
+
text: 'Model nonisothermal multiphase flow and transport in fractured and porous media for environmental engineering.',
|
|
35
|
+
linkText: 'Learn More »',
|
|
36
|
+
linkURL: '/petrasim'
|
|
37
|
+
}
|
|
38
|
+
];
|
|
39
|
+
</script>
|
|
40
|
+
|
|
41
|
+
<!-- This example requires Tailwind CSS v2.0+ -->
|
|
42
|
+
<div class="py-12 bg-white mx-auto">
|
|
43
|
+
<h2 class="sr-only">{title}</h2>
|
|
44
|
+
<dl class="space-y-10 sm:grid sm:grid-cols-2 sm:gap-8 sm:space-y-0 lg:grid-cols-3">
|
|
45
|
+
{#each data as col}
|
|
46
|
+
<div>
|
|
47
|
+
<a href={col.linkURL}>
|
|
48
|
+
<div class="space-y-4">
|
|
49
|
+
<div class="aspect-w-3 aspect-h-2">
|
|
50
|
+
<img class="object-cover shadow-lg rounded-lg" src={col.image} alt="" />
|
|
51
|
+
</div>
|
|
52
|
+
<div class="flex flex-row items-center space-x-4">
|
|
53
|
+
<Icon classes="h-12 w-auto" icon={col.icon} />
|
|
54
|
+
<div class="leading-6 font-medium">
|
|
55
|
+
<h3 class="text-2xl">{col.heading}</h3>
|
|
56
|
+
<p class="text-teci-blue-dark">{col.subheading}</p>
|
|
57
|
+
</div>
|
|
58
|
+
</div>
|
|
59
|
+
<div class="text-lg">
|
|
60
|
+
<p class="text-gray-500">{col.text}</p>
|
|
61
|
+
</div>
|
|
62
|
+
</div>
|
|
63
|
+
</a>
|
|
64
|
+
</div>
|
|
65
|
+
{/each}
|
|
66
|
+
</dl>
|
|
67
|
+
</div>
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
/** @typedef {typeof __propDef.props} ThreeColumnProps */
|
|
2
|
+
/** @typedef {typeof __propDef.events} ThreeColumnEvents */
|
|
3
|
+
/** @typedef {typeof __propDef.slots} ThreeColumnSlots */
|
|
4
|
+
export default class ThreeColumn extends SvelteComponentTyped<{
|
|
5
|
+
data?: {
|
|
6
|
+
icon: string;
|
|
7
|
+
image: string;
|
|
8
|
+
heading: string;
|
|
9
|
+
subheading: string;
|
|
10
|
+
text: string;
|
|
11
|
+
linkText: string;
|
|
12
|
+
linkURL: string;
|
|
13
|
+
}[];
|
|
14
|
+
title?: string;
|
|
15
|
+
}, {
|
|
16
|
+
[evt: string]: CustomEvent<any>;
|
|
17
|
+
}, {}> {
|
|
18
|
+
}
|
|
19
|
+
export type ThreeColumnProps = typeof __propDef.props;
|
|
20
|
+
export type ThreeColumnEvents = typeof __propDef.events;
|
|
21
|
+
export type ThreeColumnSlots = typeof __propDef.slots;
|
|
22
|
+
import { SvelteComponentTyped } from "svelte";
|
|
23
|
+
declare const __propDef: {
|
|
24
|
+
props: {
|
|
25
|
+
data?: {
|
|
26
|
+
icon: string;
|
|
27
|
+
image: string;
|
|
28
|
+
heading: string;
|
|
29
|
+
subheading: string;
|
|
30
|
+
text: string;
|
|
31
|
+
linkText: string;
|
|
32
|
+
linkURL: string;
|
|
33
|
+
}[];
|
|
34
|
+
title?: string;
|
|
35
|
+
};
|
|
36
|
+
events: {
|
|
37
|
+
[evt: string]: CustomEvent<any>;
|
|
38
|
+
};
|
|
39
|
+
slots: {};
|
|
40
|
+
};
|
|
41
|
+
export {};
|
|
@@ -0,0 +1,251 @@
|
|
|
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
|
+
onMount(() => {
|
|
7
|
+
setTimeout(() => {
|
|
8
|
+
timePassed = true;
|
|
9
|
+
}, 3000);
|
|
10
|
+
});
|
|
11
|
+
let resellerModal = false;
|
|
12
|
+
let country = 'sel';
|
|
13
|
+
let name = '';
|
|
14
|
+
let email = '';
|
|
15
|
+
let product = 0;
|
|
16
|
+
let valid = false;
|
|
17
|
+
let message = '';
|
|
18
|
+
let error = '';
|
|
19
|
+
let answer = '';
|
|
20
|
+
let submitted = false;
|
|
21
|
+
let waiting = false;
|
|
22
|
+
let timePassed = false;
|
|
23
|
+
$: if (country != 'sel' &&
|
|
24
|
+
name != '' &&
|
|
25
|
+
validateEmail(email) &&
|
|
26
|
+
product != 0 &&
|
|
27
|
+
answer == '' &&
|
|
28
|
+
timePassed) {
|
|
29
|
+
valid = true;
|
|
30
|
+
}
|
|
31
|
+
else {
|
|
32
|
+
valid = false;
|
|
33
|
+
}
|
|
34
|
+
$: if (submitted == true && message == '') {
|
|
35
|
+
waiting = true;
|
|
36
|
+
scrollTo('trial-request');
|
|
37
|
+
}
|
|
38
|
+
else {
|
|
39
|
+
waiting = false;
|
|
40
|
+
}
|
|
41
|
+
const submitForm = async () => {
|
|
42
|
+
submitted = true;
|
|
43
|
+
error = '';
|
|
44
|
+
try {
|
|
45
|
+
const submit = await fetch(variables.trialEndpoint, {
|
|
46
|
+
method: 'POST',
|
|
47
|
+
body: JSON.stringify({
|
|
48
|
+
name,
|
|
49
|
+
email,
|
|
50
|
+
country,
|
|
51
|
+
product
|
|
52
|
+
})
|
|
53
|
+
});
|
|
54
|
+
message = await submit.json();
|
|
55
|
+
}
|
|
56
|
+
catch (err) {
|
|
57
|
+
console.log(err);
|
|
58
|
+
}
|
|
59
|
+
};
|
|
60
|
+
</script>
|
|
61
|
+
|
|
62
|
+
<div class="prose">
|
|
63
|
+
<h2>30-day Trial Request</h2>
|
|
64
|
+
</div>
|
|
65
|
+
<div class="mt-10 sm:mt-0">
|
|
66
|
+
<div class="md:grid md:grid-cols-3 md:gap-6 mt-8">
|
|
67
|
+
<div class="md:col-span-1">
|
|
68
|
+
<div class=" prose px-4 sm:px-0">
|
|
69
|
+
<p>
|
|
70
|
+
Please complete the form and click "Send Request". <b>All fields are required.</b>
|
|
71
|
+
</p>
|
|
72
|
+
<p>Within a few minutes, you will receive an email message containing a download link.</p>
|
|
73
|
+
<p>
|
|
74
|
+
If you need assistance, please send an email to <a href="mailto:sales@thunderheadeng.com">sales</a>.
|
|
75
|
+
</p>
|
|
76
|
+
</div>
|
|
77
|
+
</div>
|
|
78
|
+
<div class="mt-5 md:mt-0 md:col-span-2">
|
|
79
|
+
<form id="trial-request" on:submit|preventDefault={submitForm}>
|
|
80
|
+
<div class="border shadow overflow-hidden">
|
|
81
|
+
{#if message}
|
|
82
|
+
<div class="px-4 py-5 bg-white sm:p-6 prose">
|
|
83
|
+
<p>
|
|
84
|
+
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
|
|
85
|
+
and Pathfinder{/if}!<br />
|
|
86
|
+
You will receive an email to <strong>{message.email}</strong> with your activation
|
|
87
|
+
key{#if message.product == 3}s{/if}
|
|
88
|
+
in a few moments.
|
|
89
|
+
</p>
|
|
90
|
+
{#if message.product == 1}
|
|
91
|
+
<h3>PyroSim</h3>
|
|
92
|
+
<p>
|
|
93
|
+
To download the most recent version visit the <a
|
|
94
|
+
href="https://support.thunderheadeng.com/pyrosim/">PyroSim Support</a
|
|
95
|
+
> page.
|
|
96
|
+
</p>
|
|
97
|
+
{:else if message.product == 2}
|
|
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
|
+
{:else if message.product == 3}
|
|
105
|
+
<h3>PyroSim</h3>
|
|
106
|
+
<p>
|
|
107
|
+
To download the most recent version visit the <a
|
|
108
|
+
href="https://support.thunderheadeng.com/pyrosim/">PyroSim Support</a
|
|
109
|
+
> page.
|
|
110
|
+
</p>
|
|
111
|
+
<h3>Pathfinder</h3>
|
|
112
|
+
<p>
|
|
113
|
+
To download the most recent version visit the <a
|
|
114
|
+
href="https://support.thunderheadeng.com/pathfinder/">Pathfinder Support</a
|
|
115
|
+
> page.
|
|
116
|
+
</p>
|
|
117
|
+
{/if}
|
|
118
|
+
<h3>Need Help?</h3>
|
|
119
|
+
<p>
|
|
120
|
+
Please email <a href="mailto:support@thunderheadeng.com"
|
|
121
|
+
>support@thunderheadeng.com</a
|
|
122
|
+
> if you have any questions.
|
|
123
|
+
</p>
|
|
124
|
+
</div>
|
|
125
|
+
{:else if error}
|
|
126
|
+
<p>There was an error: {error}</p>
|
|
127
|
+
{:else if waiting}
|
|
128
|
+
<div id="waiting" class="p-12 mx-auto">
|
|
129
|
+
<p class="text-center pb-8 font-bold">Waiting for Trial Approval...</p>
|
|
130
|
+
<Icon classes="h-24 w-24 mx-auto animate-pulse" />
|
|
131
|
+
</div>
|
|
132
|
+
{:else}
|
|
133
|
+
<div class="px-4 py-5 bg-white space-y-6 sm:p-6">
|
|
134
|
+
<fieldset>
|
|
135
|
+
<div>
|
|
136
|
+
<legend class="text-lg font-bold text-gray-900"> Personal Information </legend>
|
|
137
|
+
</div>
|
|
138
|
+
<div class="flex flex-row align-middle items-center pt-4">
|
|
139
|
+
<label for="name" class="whitespace-nowrap pr-2 block font-medium text-gray-700">
|
|
140
|
+
Full Name:
|
|
141
|
+
</label>
|
|
142
|
+
<input
|
|
143
|
+
id="name"
|
|
144
|
+
type="text"
|
|
145
|
+
name="name"
|
|
146
|
+
bind:value={name}
|
|
147
|
+
class="w-full p-1 border-0 border-b-2 border-gray-500"
|
|
148
|
+
/>
|
|
149
|
+
</div>
|
|
150
|
+
<div class="flex flex-row align-middle items-center pt-4">
|
|
151
|
+
<label for="email" class="pr-2 block font-medium text-gray-700"> Email: </label>
|
|
152
|
+
<input
|
|
153
|
+
id="email"
|
|
154
|
+
type="text"
|
|
155
|
+
name="email"
|
|
156
|
+
bind:value={email}
|
|
157
|
+
class="w-full p-1 border-0 border-b-2 border-gray-500"
|
|
158
|
+
/>
|
|
159
|
+
</div>
|
|
160
|
+
<div class="flex flex-row align-middle items-center pt-4">
|
|
161
|
+
<label for="country" class="pr-2 block font-medium text-gray-700">
|
|
162
|
+
Country:
|
|
163
|
+
</label>
|
|
164
|
+
<input id="country" type="hidden" name="country" value={country} />
|
|
165
|
+
<CountrySelector bind:selection={country} bind:resellerModal />
|
|
166
|
+
</div>
|
|
167
|
+
</fieldset>
|
|
168
|
+
<fieldset>
|
|
169
|
+
<div>
|
|
170
|
+
<legend class="text-lg font-bold text-gray-900">
|
|
171
|
+
What would you like to try?
|
|
172
|
+
</legend>
|
|
173
|
+
</div>
|
|
174
|
+
<div class="mt-4 space-y-4">
|
|
175
|
+
<div class="flex items-center">
|
|
176
|
+
<input
|
|
177
|
+
id="pyrosim"
|
|
178
|
+
name="product"
|
|
179
|
+
type="radio"
|
|
180
|
+
value={1}
|
|
181
|
+
bind:group={product}
|
|
182
|
+
class="focus:ring-teci-blue-dark h-4 w-4 text-blue-600 border-gray-300"
|
|
183
|
+
/>
|
|
184
|
+
<label for="pyrosim" class="ml-3 block text-sm font-medium text-gray-700">
|
|
185
|
+
PyroSim
|
|
186
|
+
</label>
|
|
187
|
+
</div>
|
|
188
|
+
<div class="flex items-center">
|
|
189
|
+
<input
|
|
190
|
+
id="pathfinder"
|
|
191
|
+
name="product"
|
|
192
|
+
type="radio"
|
|
193
|
+
value={2}
|
|
194
|
+
bind:group={product}
|
|
195
|
+
class="focus:ring-teci-blue-dark h-4 w-4 text-blue-600 border-gray-300"
|
|
196
|
+
/>
|
|
197
|
+
<label for="pathfinder" class="ml-3 block text-sm font-medium text-gray-700">
|
|
198
|
+
Pathfinder
|
|
199
|
+
</label>
|
|
200
|
+
</div>
|
|
201
|
+
<div class="flex items-center">
|
|
202
|
+
<input
|
|
203
|
+
id="pyropath"
|
|
204
|
+
name="product"
|
|
205
|
+
type="radio"
|
|
206
|
+
value={3}
|
|
207
|
+
bind:group={product}
|
|
208
|
+
class="focus:ring-teci-blue-dark h-4 w-4 text-blue-600 border-gray-300"
|
|
209
|
+
/>
|
|
210
|
+
<label for="pyropath" class="ml-3 block text-sm font-medium text-gray-700">
|
|
211
|
+
PyroSim and Pathfinder
|
|
212
|
+
</label>
|
|
213
|
+
</div>
|
|
214
|
+
</div>
|
|
215
|
+
</fieldset>
|
|
216
|
+
<input
|
|
217
|
+
class="confident"
|
|
218
|
+
id="answer"
|
|
219
|
+
type="text"
|
|
220
|
+
name="answer"
|
|
221
|
+
bind:value={answer}
|
|
222
|
+
placeholder="Correct answers only..."
|
|
223
|
+
/>
|
|
224
|
+
</div>
|
|
225
|
+
<div class="px-4 py-3 text-right sm:px-6">
|
|
226
|
+
<button
|
|
227
|
+
type="submit"
|
|
228
|
+
disabled={!valid}
|
|
229
|
+
class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium text-white {valid ===
|
|
230
|
+
true
|
|
231
|
+
? 'bg-teci-blue-light hover:bg-teci-blue-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500'
|
|
232
|
+
: 'bg-gray-300 cursor-not-allowed'}"
|
|
233
|
+
>
|
|
234
|
+
Send Request
|
|
235
|
+
</button>
|
|
236
|
+
{#if answer}
|
|
237
|
+
<p>Something is wrong with the form, please email support@thunderheadeng.com.</p>
|
|
238
|
+
{/if}
|
|
239
|
+
</div>
|
|
240
|
+
{/if}
|
|
241
|
+
</div>
|
|
242
|
+
</form>
|
|
243
|
+
</div>
|
|
244
|
+
</div>
|
|
245
|
+
</div>
|
|
246
|
+
|
|
247
|
+
<style >
|
|
248
|
+
.confident {
|
|
249
|
+
@apply hidden;
|
|
250
|
+
}
|
|
251
|
+
</style>
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { SvelteComponentTyped } from "svelte";
|
|
2
|
+
declare const __propDef: {
|
|
3
|
+
props: {};
|
|
4
|
+
events: {
|
|
5
|
+
[evt: string]: CustomEvent<any>;
|
|
6
|
+
};
|
|
7
|
+
slots: {};
|
|
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;
|
|
12
|
+
export default class TrialForm extends SvelteComponentTyped<TrialFormProps, TrialFormEvents, TrialFormSlots> {
|
|
13
|
+
}
|
|
14
|
+
export {};
|
package/demodata.d.ts
ADDED
package/demodata.js
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export const bannerData = {
|
|
2
|
+
showCTA: true,
|
|
3
|
+
shortText: "Some Banner Short text in a few words.",
|
|
4
|
+
longText: "Some Banner Long test text that goes on and on for a while with some information about something.",
|
|
5
|
+
ctaText: "Take Action",
|
|
6
|
+
ctaLink: "https://www.thunderheadeng.com"
|
|
7
|
+
}
|
package/package.json
CHANGED
|
@@ -1,35 +1,37 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "tecitheme",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.5",
|
|
4
|
+
"svelte": true,
|
|
4
5
|
"devDependencies": {
|
|
5
6
|
"@sveltejs/adapter-auto": "next",
|
|
7
|
+
"@sveltejs/adapter-netlify": "^1.0.0-next.44",
|
|
6
8
|
"@sveltejs/kit": "next",
|
|
7
9
|
"@tailwindcss/forms": "^0.4.0",
|
|
8
|
-
"@tailwindcss/typography": "^0.5.
|
|
10
|
+
"@tailwindcss/typography": "^0.5.1",
|
|
9
11
|
"@types/cookie": "^0.4.1",
|
|
10
12
|
"@typescript-eslint/eslint-plugin": "^4.31.1",
|
|
11
13
|
"@typescript-eslint/parser": "^4.31.1",
|
|
12
14
|
"autoprefixer": "^10.4.2",
|
|
13
|
-
"dotenv": "^
|
|
15
|
+
"dotenv": "^16.0.0",
|
|
14
16
|
"encoding": "^0.1.13",
|
|
15
17
|
"eslint": "^7.32.0",
|
|
16
18
|
"eslint-config-prettier": "^8.3.0",
|
|
17
|
-
"eslint-plugin-svelte3": "^3.
|
|
18
|
-
"mdsvex": "^0.
|
|
19
|
-
"postcss": "^8.4.
|
|
20
|
-
"prettier": "^2.
|
|
21
|
-
"prettier-plugin-svelte": "^2.
|
|
19
|
+
"eslint-plugin-svelte3": "^3.4.0",
|
|
20
|
+
"mdsvex": "^0.10.5",
|
|
21
|
+
"postcss": "^8.4.6",
|
|
22
|
+
"prettier": "^2.5.1",
|
|
23
|
+
"prettier-plugin-svelte": "^2.6.0",
|
|
22
24
|
"stream": "^0.0.2",
|
|
23
|
-
"svelte": "^3.
|
|
24
|
-
"svelte-check": "^2.2
|
|
25
|
+
"svelte": "^3.46.3",
|
|
26
|
+
"svelte-check": "^2.4.2",
|
|
25
27
|
"svelte-cubed": "^0.2.1",
|
|
26
|
-
"svelte-preprocess": "^4.10.
|
|
27
|
-
"svelte2tsx": "^0.
|
|
28
|
-
"tailwindcss": "^3.0.
|
|
29
|
-
"three": "^0.
|
|
28
|
+
"svelte-preprocess": "^4.10.2",
|
|
29
|
+
"svelte2tsx": "^0.5.2",
|
|
30
|
+
"tailwindcss": "^3.0.18",
|
|
31
|
+
"three": "^0.137.5",
|
|
30
32
|
"tslib": "^2.3.1",
|
|
31
|
-
"typescript": "^4.
|
|
32
|
-
"vite": "^2.7.
|
|
33
|
+
"typescript": "^4.5.5",
|
|
34
|
+
"vite": "^2.7.13"
|
|
33
35
|
},
|
|
34
36
|
"type": "module",
|
|
35
37
|
"dependencies": {
|
|
@@ -39,14 +41,19 @@
|
|
|
39
41
|
},
|
|
40
42
|
"exports": {
|
|
41
43
|
"./package.json": "./package.json",
|
|
42
|
-
"./
|
|
43
|
-
"./
|
|
44
|
-
"./components/CountrySelector
|
|
45
|
-
"./components/Footer
|
|
46
|
-
"./components/Header
|
|
47
|
-
"./components/
|
|
48
|
-
"./components/
|
|
44
|
+
"./assets/TECi_logo.svelte": "./assets/TECi_logo.svelte",
|
|
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/Icon.svelte": "./components/Icon.svelte",
|
|
50
|
+
"./components/Modal.svelte": "./components/Modal.svelte",
|
|
51
|
+
"./components/SectionHeaderCentered.svelte": "./components/SectionHeaderCentered.svelte",
|
|
52
|
+
"./components/ThreeColumn.svelte": "./components/ThreeColumn.svelte",
|
|
53
|
+
"./components/TrialForm.svelte": "./components/TrialForm.svelte",
|
|
54
|
+
"./demodata": "./demodata.js",
|
|
49
55
|
"./req_utils": "./req_utils.js",
|
|
50
|
-
"./utils": "./utils.js"
|
|
56
|
+
"./utils": "./utils.js",
|
|
57
|
+
"./variables": "./variables.js"
|
|
51
58
|
}
|
|
52
59
|
}
|
package/variables.d.ts
ADDED
package/variables.js
ADDED
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
<script>
|
|
2
|
-
export let classes = ""
|
|
3
|
-
</script>
|
|
4
|
-
|
|
5
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 250" class={classes}>
|
|
6
|
-
<path
|
|
7
|
-
style="fill:#0c3879;fill-rule:evenodd;stroke:none"
|
|
8
|
-
d="M88.113 220.536h97.672v97.672H88.113z"
|
|
9
|
-
transform="matrix(2.5596 0 0 2.5596 -225.533 -564.483)">
|
|
10
|
-
</path>
|
|
11
|
-
<path
|
|
12
|
-
style="fill:#fff;fill-rule:evenodd;stroke:none"
|
|
13
|
-
d="M145.864 260.176h22.042c2.792 0 4.883.835 6.559 2.651 1.532 1.673 2.232 3.764 2.232 6.278 0 2.37-.7 4.464-2.232 6.277-1.676 1.675-3.767 2.651-6.559 2.651h-22.042v-17.857m0 23.159h22.042c2.792 0 4.883.838 6.559 2.65 1.532 1.674 2.232 3.768 2.232 6.278 0 2.373-.7 4.464-2.232 6.278-1.676 1.675-3.767 2.65-6.559 2.65h-22.042v-17.856"
|
|
14
|
-
transform="matrix(2.5596 0 0 2.5596 -225.533 -564.483)">
|
|
15
|
-
</path>
|
|
16
|
-
<path
|
|
17
|
-
style="fill:#fff;fill-rule:evenodd;stroke:none"
|
|
18
|
-
d="M132.471 301.192c-5.861 0-8.79-3.07-8.79-8.929l-.138-37.389-20.648-.14c-7.116-1.254-10.185-9.626-5.165-15.206 1.535-1.535 3.63-2.373 6.14-2.651h26.926l1.675.14h35.435c2.792 0 4.883.836 6.559 2.649 1.532 1.675 2.232 3.767 2.232 6.28 0 2.37-.7 4.464-2.232 6.277-1.676 1.673-3.767 2.651-6.559 2.651H141.26V301.192h-8.788"
|
|
19
|
-
transform="matrix(2.5596 0 0 2.5596 -225.533 -564.483)">
|
|
20
|
-
</path>
|
|
21
|
-
</svg>
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
/** @typedef {typeof __propDef.props} TeCiIcon_250Props */
|
|
2
|
-
/** @typedef {typeof __propDef.events} TeCiIcon_250Events */
|
|
3
|
-
/** @typedef {typeof __propDef.slots} TeCiIcon_250Slots */
|
|
4
|
-
export default class TeCiIcon_250 extends SvelteComponentTyped<{
|
|
5
|
-
classes?: string;
|
|
6
|
-
}, {
|
|
7
|
-
[evt: string]: CustomEvent<any>;
|
|
8
|
-
}, {}> {
|
|
9
|
-
}
|
|
10
|
-
export type TeCiIcon_250Props = typeof __propDef.props;
|
|
11
|
-
export type TeCiIcon_250Events = typeof __propDef.events;
|
|
12
|
-
export type TeCiIcon_250Slots = typeof __propDef.slots;
|
|
13
|
-
import { SvelteComponentTyped } from "svelte";
|
|
14
|
-
declare const __propDef: {
|
|
15
|
-
props: {
|
|
16
|
-
classes?: string;
|
|
17
|
-
};
|
|
18
|
-
events: {
|
|
19
|
-
[evt: string]: CustomEvent<any>;
|
|
20
|
-
};
|
|
21
|
-
slots: {};
|
|
22
|
-
};
|
|
23
|
-
export {};
|
|
@@ -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 {};
|