tecitheme 0.8.1 → 0.8.2

package/dist/components/Testimonial.svelte

@@ -0,0 +1,168 @@
+<script>
+import Button from './Button.svelte'
+import Icon from './Icon.svelte'
+
+  import { getColorStyles } from '../utils'
+  import { slide } from 'svelte/transition';
+  import { quintInOut } from 'svelte/easing';
+  import { onMount } from 'svelte'
+
+  export let data = {};
+
+  let index = 0;
+  let interval = 12000;
+  let auto = true;
+  let slideInterval;
+  let id;
+
+  if (data.name) {
+    id = encodeURIComponent(data.name).toLowerCase()
+  }
+
+  onMount(() => {
+    setSlideAutomation();
+  })
+
+  function setSlideAutomation() {
+    if (auto) {
+      clearInterval(slideInterval);
+      slideInterval = setInterval(next, interval);
+    }
+  }
+
+  const prev = () => {
+    let amount;
+    if (index == 0) {
+      index = data.quotes.length - 1;
+    } else if (index <= data.quotes.length) {
+      index = (index - 1) % data.quotes.length;
+    }
+    setSlideAutomation();
+  };
+
+  const next = () => {
+    index = (index + 1) % data.quotes.length;
+    setSlideAutomation();
+  };
+</script>
+
+<section {id} class="overflow-hidden">
+  <div class="relative mx-auto max-w-4xl lg:max-w-none mt-10 lg:px-4 lg:py-8 lg:mt-0">
+    <svg
+      class="absolute right-full top-1/2 hidden translate-x-1/2 -translate-y-1/2 transform lg:block"
+      width="404"
+      height="784"
+      fill="none"
+      viewBox="0 0 404 784"
+      aria-hidden="true"
+    >
+      <defs>
+        <pattern
+          id="56409614-3d62-4985-9a10-7ca758a8f4f0"
+          x="0"
+          y="0"
+          width="20"
+          height="20"
+          patternUnits="userSpaceOnUse"
+        >
+          <rect
+            x="0"
+            y="0"
+            width="4"
+            height="4"
+            class="{getColorStyles('text', data.color)} opacity-20"
+            fill="currentColor"></rect>
+        </pattern>
+      </defs>
+      <rect
+        width="404"
+        height="784"
+        fill="url(#56409614-3d62-4985-9a10-7ca758a8f4f0)"></rect>
+    </svg>
+    <div
+      class="relative flex h-auto flex-col items-center justify-items-center"
+    >
+      {#each [data.quotes[index]] as quote (index)}
+        <div transition:slide={{ duration: 1000, easing:quintInOut, axis: 'y' }}
+          class="relative mx-auto w-full lg:flex lg:items-center"
+        >
+          <div class="hidden lg:block lg:flex-shrink-0">
+            <img
+              class="h-64 w-64 rounded-full xl:h-80 xl:w-80"
+              src="https://teci.imgix.net/www/images/{quote.image}?w=320&fit=facearea,crop&facepad=3&monochrome=9B9B9B&auto=compress&auto=format"
+              alt="Image of {quote.fullname}"
+              title="{quote.fullname}"
+            />
+          </div>
+          <div class="relative w-full lg:ml-10">
+            <svg
+              class="absolute top-0 left-0 h-24 w-24 -translate-x-0 -translate-y-12 transform text-teci-blue-light opacity-10 lg:-translate-x-8 lg:-translate-y-10"
+              stroke="currentColor"
+              fill="none"
+              viewBox="0 0 144 144"
+              aria-hidden="true"
+            >
+              <path
+                stroke-width="2"
+                d="M41.485 15C17.753 31.753 1 59.208 1 89.455c0 24.664 14.891 39.09 32.109 39.09 16.287 0 28.386-13.03 28.386-28.387 0-15.356-10.703-26.524-24.663-26.524-2.792 0-6.515.465-7.446.93 2.327-15.821 17.218-34.435 32.11-43.742L41.485 15zm80.04 0c-23.268 16.753-40.02 44.208-40.02 74.455 0 24.664 14.891 39.09 32.109 39.09 15.822 0 28.386-13.03 28.386-28.387 0-15.356-11.168-26.524-25.129-26.524-2.792 0-6.049.465-6.98.93 2.327-15.821 16.753-34.435 31.644-43.742L121.525 15z"
+              ></path>
+            </svg>
+            <blockquote class="relative block w-full min-w-full">
+              <div class="relative w-full text-2xl font-medium leading-9 text-gray-700">
+                <p>{@html quote.text}</p>
+                <svg
+                  class="absolute bottom-0 right-0 h-24 w-24 translate-y-8 rotate-180 transform text-teci-blue-light opacity-10"
+                  stroke="currentColor"
+                  fill="none"
+                  viewBox="0 0 144 144"
+                  aria-hidden="true"
+                >
+                  <path
+                    stroke-width="2"
+                    d="M41.485 15C17.753 31.753 1 59.208 1 89.455c0 24.664 14.891 39.09 32.109 39.09 16.287 0 28.386-13.03 28.386-28.387 0-15.356-10.703-26.524-24.663-26.524-2.792 0-6.515.465-7.446.93 2.327-15.821 17.218-34.435 32.11-43.742L41.485 15zm80.04 0c-23.268 16.753-40.02 44.208-40.02 74.455 0 24.664 14.891 39.09 32.109 39.09 15.822 0 28.386-13.03 28.386-28.387 0-15.356-11.168-26.524-25.129-26.524-2.792 0-6.049.465-6.98.93 2.327-15.821 16.753-34.435 31.644-43.742L121.525 15z"
+                  ></path>
+                </svg>
+              </div>
+              <footer class="mt-8">
+                <div class="flex flex-col sm:flex-row justify-between">
+                  <div class="flex flex-row">
+                    <div class="flex-shrink-0 lg:hidden">
+                      <img
+                        class="h-12 w-12 rounded-full"
+                        src="https://teci.imgix.net/www/images/{quote.image}?w=48&fit=clip&monochrome=9B9B9B&auto=compress&auto=format"
+                        alt="Thumbnail Image of {quote.fullname}"
+                      />
+                    </div>
+                    <div class="ml-4 lg:ml-0">
+                      <div class="text-base text-gray-900">
+                        {quote.fullname}
+                      </div>
+                      <div
+                        class="text-base font-medium {getColorStyles('text', data.color)}"
+                      >
+                        {quote.fulltitle}
+                      </div>
+                    </div>
+                  </div>
+                  {#if quote.url}
+                  <div class="sm:pl-4 pb-2 lg:pb-0 pt-4">
+                    <Button text={quote.link_text || "Read More"} url={quote.url} justify="right" fullwidth=true color={data.color} />
+                  </div>
+                  {/if}
+                </div>
+              </footer>
+            </blockquote>
+          </div>
+        </div>
+      {/each}
+      <div class="bg-white relative w-half pt-6 md:pt-2 lg:pt-4 flex flex-row space-x-8 justify-center">
+        <button type="button" title="Previous" on:click="{prev}">
+          <Icon icon="icon-arrow_left" classes="text-4xl text-gray-400" />
+        </button>
+        <button type="button" title="Next" on:click="{next}">
+          <Icon icon="icon-arrow_right" classes="text-4xl text-gray-400" />
+        </button>
+    </div>
+  </div>
+</div>
+</section>

package/dist/components/Testimonial.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  TestimonialProps */
+/** @typedef {typeof __propDef.events}  TestimonialEvents */
+/** @typedef {typeof __propDef.slots}  TestimonialSlots */
+export default class Testimonial extends SvelteComponent<{
+    data?: {};
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type TestimonialProps = typeof __propDef.props;
+export type TestimonialEvents = typeof __propDef.events;
+export type TestimonialSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        data?: {};
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/components/ThreeColumn.svelte

@@ -0,0 +1,20 @@
+<script>
+  import Card from "./Card.svelte";
+  export let data = {};
+  let id
+
+  if (data.name) {
+    id = encodeURIComponent(data.name).toLowerCase()
+  }
+</script>
+
+<section {id} class="mx-auto w-full">
+  {#if data.title}
+    <h2 class="sr-only">{data.title}</h2>
+  {/if}
+  <div class="grid grid-cols-1 gap-4 md:grid-cols-3">
+    {#each data.cards as card}
+      <Card bind:data={card} bind:halfHeight={data.halfHeight} />
+    {/each}
+  </div>
+</section>

package/dist/components/ThreeColumn.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  ThreeColumnProps */
+/** @typedef {typeof __propDef.events}  ThreeColumnEvents */
+/** @typedef {typeof __propDef.slots}  ThreeColumnSlots */
+export default class ThreeColumn extends SvelteComponent<{
+    data?: {};
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type ThreeColumnProps = typeof __propDef.props;
+export type ThreeColumnEvents = typeof __propDef.events;
+export type ThreeColumnSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        data?: {};
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/components/TrialForm.svelte

@@ -0,0 +1,296 @@
+<script>import CountrySelector from "./CountrySelector.svelte";
+import Icon from "./Icon.svelte";
+import { onMount } from "svelte";
+import { scrollTo, validateEmail } from "../utils.js";
+import { variables } from "../variables";
+onMount(() => {
+    setTimeout(() => {
+        timePassed = true;
+    }, 3000);
+});
+let resellerModal = false;
+let country = "sel";
+let name = "";
+let email = "";
+let product = 0;
+let valid = false;
+let message = "";
+let error = "";
+let answer = "";
+let submitted = false;
+let waiting = false;
+let timePassed = false;
+$: if (country != "sel" &&
+    name != "" &&
+    validateEmail(email) &&
+    product != 0 &&
+    answer == "" &&
+    timePassed) {
+    valid = true;
+}
+else {
+    valid = false;
+}
+$: if (submitted == true && message == "") {
+    waiting = true;
+    scrollTo("trial-request");
+}
+else {
+    waiting = false;
+}
+const submitForm = async () => {
+    submitted = true;
+    error = "";
+    try {
+        const submit = await fetch(variables.trialEndpoint, {
+            method: "POST",
+            body: JSON.stringify({
+                name,
+                email,
+                country,
+                product,
+            }),
+        });
+        message = await submit.json();
+    }
+    catch (err) {
+        console.log(err);
+    }
+};
+</script>
+
+<div class="mt-10 sm:mt-0">
+  <div class="mt-8 md:grid md:grid-cols-3 md:gap-6">
+    <div class="md:col-span-1">
+      <div class="prose px-4 sm:px-0">
+        <h2>30-day Trial Request</h2>
+        <p>
+          Please complete the form and click "Send Request". <b
+            >All fields are required.</b
+          >
+        </p>
+        <p>
+          Within a few minutes, you will receive an email message containing a
+          download link.
+        </p>
+        <p>
+          If you need assistance, please send an email to <a
+            href="mailto:sales@thunderheadeng.com">sales</a
+          >.
+        </p>
+      </div>
+    </div>
+    <div class="mt-5 md:col-span-2 md:mt-0">
+      <form id="trial-request" on:submit|preventDefault={submitForm}>
+        <div class="overflow-hidden border shadow">
+          {#if message}
+            <div class="prose bg-white px-4 py-5 sm:p-6">
+              <p>
+                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 />
+                You will receive an email to <strong>{message.email}</strong>
+                with your activation key{#if message.product == 3}s{/if}
+                in a few moments.
+              </p>
+              {#if message.product == 1}
+                <h3>PyroSim</h3>
+                <p>
+                  To download the most recent version visit the <a
+                    href="https://support.thunderheadeng.com/pyrosim/"
+                    >PyroSim Support</a
+                  > page.
+                </p>
+              {:else if message.product == 2}
+                <h3>Pathfinder</h3>
+                <p>
+                  To download the most recent version visit the <a
+                    href="https://support.thunderheadeng.com/pathfinder/"
+                    >Pathfinder Support</a
+                  > page.
+                </p>
+              {:else if message.product == 3}
+                <h3>PyroSim</h3>
+                <p>
+                  To download the most recent version visit the <a
+                    href="https://support.thunderheadeng.com/pyrosim/"
+                    >PyroSim Support</a
+                  > page.
+                </p>
+                <h3>Pathfinder</h3>
+                <p>
+                  To download the most recent version visit the <a
+                    href="https://support.thunderheadeng.com/pathfinder/"
+                    >Pathfinder Support</a
+                  > page.
+                </p>
+              {/if}
+              <h3>Need Help?</h3>
+              <p>
+                Please email <a href="mailto:support@thunderheadeng.com"
+                  >support@thunderheadeng.com</a
+                > if you have any questions.
+              </p>
+            </div>
+          {:else if error}
+            <p>There was an error: {error}</p>
+          {:else if waiting}
+            <div id="waiting" class="mx-auto p-12">
+              <p class="pb-8 text-center font-bold">
+                Waiting for Trial Approval...
+              </p>
+              <Icon classes="h-24 w-24 mx-auto animate-pulse" />
+            </div>
+          {:else}
+            <div class="space-y-6 bg-white px-4 py-5 sm:p-6">
+              <fieldset>
+                <div>
+                  <legend class="text-lg font-bold text-gray-900">
+                    Personal Information
+                  </legend>
+                </div>
+                <div class="flex flex-row items-center pt-4 align-middle">
+                  <label
+                    for="name"
+                    class="block whitespace-nowrap pr-2 font-medium text-gray-700"
+                  >
+                    Full Name:
+                  </label>
+                  <input
+                    id="name"
+                    type="text"
+                    name="name"
+                    bind:value={name}
+                    class="w-full border-0 border-b-2 border-gray-500 p-1"
+                  />
+                </div>
+                <div class="flex flex-row items-center pt-4 align-middle">
+                  <label
+                    for="email"
+                    class="block pr-2 font-medium text-gray-700"
+                  >
+                    Email:
+                  </label>
+                  <input
+                    id="email"
+                    type="text"
+                    name="email"
+                    bind:value={email}
+                    class="w-full border-0 border-b-2 border-gray-500 p-1"
+                  />
+                </div>
+                <div class="flex flex-row items-center pt-4 align-middle">
+                  <label
+                    for="country"
+                    class="block pr-2 font-medium text-gray-700"
+                  >
+                    Country:
+                  </label>
+                  <input
+                    id="country"
+                    type="hidden"
+                    name="country"
+                    value={country}
+                  />
+                  <CountrySelector
+                    bind:selection={country}
+                    bind:resellerModal
+                  />
+                </div>
+              </fieldset>
+              <fieldset>
+                <div>
+                  <legend class="text-lg font-bold text-gray-900">
+                    What would you like to try?
+                  </legend>
+                </div>
+                <div class="mt-4 space-y-4">
+                  <div class="flex items-center">
+                    <input
+                      id="pyrosim"
+                      name="product"
+                      type="radio"
+                      value={1}
+                      bind:group={product}
+                      class="h-4 w-4 border-gray-300 text-blue-600 focus:ring-teci-blue-dark"
+                    />
+                    <label
+                      for="pyrosim"
+                      class="ml-3 block text-sm font-medium text-gray-700"
+                    >
+                      PyroSim
+                    </label>
+                  </div>
+                  <div class="flex items-center">
+                    <input
+                      id="pathfinder"
+                      name="product"
+                      type="radio"
+                      value={2}
+                      bind:group={product}
+                      class="h-4 w-4 border-gray-300 text-blue-600 focus:ring-teci-blue-dark"
+                    />
+                    <label
+                      for="pathfinder"
+                      class="ml-3 block text-sm font-medium text-gray-700"
+                    >
+                      Pathfinder
+                    </label>
+                  </div>
+                  <div class="flex items-center">
+                    <input
+                      id="pyropath"
+                      name="product"
+                      type="radio"
+                      value={3}
+                      bind:group={product}
+                      class="h-4 w-4 border-gray-300 text-blue-600 focus:ring-teci-blue-dark"
+                    />
+                    <label
+                      for="pyropath"
+                      class="ml-3 block text-sm font-medium text-gray-700"
+                    >
+                      PyroSim and Pathfinder
+                    </label>
+                  </div>
+                </div>
+              </fieldset>
+              <input
+                class="confident"
+                id="answer"
+                type="text"
+                name="answer"
+                bind:value={answer}
+                placeholder="Correct answers only..."
+              />
+            </div>
+            <div class="px-4 py-3 text-right sm:px-6">
+              <button
+                type="submit"
+                disabled={!valid}
+                class="inline-flex justify-center border border-transparent py-2 px-4 text-sm font-medium text-white shadow-sm {valid ===
+                true
+                  ? 'bg-teci-blue-light hover:bg-teci-blue-dark focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2'
+                  : 'cursor-not-allowed bg-gray-300'}"
+              >
+                Send Request
+              </button>
+              {#if answer}
+                <p>
+                  Something is wrong with the form, please email
+                  support@thunderheadeng.com.
+                </p>
+              {/if}
+            </div>
+          {/if}
+        </div>
+      </form>
+    </div>
+  </div>
+</div>
+
+<style>
+  .confident {
+    @apply hidden;
+  }
+</style>

package/dist/components/TrialForm.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TrialFormProps = typeof __propDef.props;
+export type TrialFormEvents = typeof __propDef.events;
+export type TrialFormSlots = typeof __propDef.slots;
+export default class TrialForm extends SvelteComponent<TrialFormProps, TrialFormEvents, TrialFormSlots> {
+}
+export {};

package/dist/components/Video.svelte

@@ -0,0 +1,125 @@
+<script>
+  import { onMount } from 'svelte'
+
+  export let data={};
+  export let v = undefined;
+  export let thumbnail = undefined;
+
+  let videoID="";
+  let thumb="";
+  let youtube=false;
+  let videoURL="";
+  let id
+
+  if (data.v) {
+    id = `video-${encodeURIComponent(data.v).toLowerCase()}`
+  } else if (v) {
+    id = `video-${encodeURIComponent(v).toLowerCase()}`
+  }
+
+  onMount(() => {
+    var lazyVideos = [].slice.call(document.querySelectorAll("video.lazy"));
+
+    if ("IntersectionObserver" in window) {
+      var lazyVideoObserver = new IntersectionObserver(function(entries, observer) {
+        entries.forEach(function(video) {
+          if (video.isIntersecting) {
+            for (var source in video.target.children) {
+              var videoSource = video.target.children[source];
+              if (typeof videoSource.tagName === "string" && videoSource.tagName === "SOURCE") {
+                videoSource.src = videoSource.dataset.src;
+              }
+            }
+
+            video.target.load();
+            video.target.classList.remove("lazy");
+            lazyVideoObserver.unobserve(video.target);
+          }
+        });
+      });
+
+      lazyVideos.forEach(function(lazyVideo) {
+        lazyVideoObserver.observe(lazyVideo);
+      });
+    }
+  })
+
+  if (v) {
+    if (v.includes("mp4")) {
+      youtube = false;
+      videoURL = `https://teci.imgix.net/www/videos/${v}`;
+    } else {
+      youtube = true;
+      videoID = v;
+    };
+  } else if (data.v) {
+    if (data.v.includes("mp4")) {
+      youtube = false;
+      videoURL = `https://teci.imgix.net/www/videos/${data.v}`;
+    } else {
+      youtube = true;
+      videoID = data.v;
+    };
+  } else {
+    videoID = "";
+    videoURL = "";
+  };
+
+  if (thumbnail) {
+    thumb = `https://teci.imgix.net/www/images/${thumbnail}?w=1214&fit=clip&auto=compress&auto=format`;
+  } else if (data.thumbnail) {
+    thumb = `https://teci.imgix.net/www/images/${data.thumbnail}?w=1214&fit=clip&auto=compress&auto=format`;
+  } else if (videoID) {
+    if (youtube) {
+      thumb = `https://i.ytimg.com/vi/${videoID}/maxresdefault.jpg`;
+    }
+  }
+</script>
+
+<section {id} class="aspect-video not-prose w-full border border-gray-200 bg-black shadow-md">
+  {#if youtube}
+    <iframe
+    title="YouTube Video ID {videoID}"
+    class="aspect-video w-full"
+    frameborder="0"
+    allow="autoplay; encrypted-media"
+    allowfullscreen
+    src="https://www.youtube.com/embed/${videoID}?autoplay=1&start=0&mute=1"
+    srcdoc="{`
+      <style>
+        body, .youtubeembed {
+        width: 100%;
+        height: 100%;
+        margin: 0;
+        position: absolute;
+        display: flex;
+        justify-content: center;
+        object-fit: cover;
+        }
+      </style>
+      <a
+        href='https://www.youtube.com/embed/${videoID}?autoplay=1&start=0&mute=1'
+        class='youtubeembed'
+      >
+        <img
+          src='${thumb}'
+          class='youtubeembed'
+        />
+        <svg
+          version='1.1'
+          viewBox='0 0 68 48'
+          width='68px'
+          style='position: relative;'
+        >
+          <path d='M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z' fill='#f00'></path>
+          <path d='M 45,24 27,14 27,34' fill='#fff'></path>
+        </svg>
+      </a>
+    `}"
+  />
+  {:else}
+    <video class="lazy aspect-video w-full" autoplay muted loop playsinline controls poster={thumb}>
+      <source data-src={videoURL} type="video/mp4">
+    </video>
+  {/if}  
+</section>