hypnagaga/src/components/HeroHeadline/stories/graphics/crash.svelte

<script>
  // export let assetsPath = './';
  let width = $state(null);

  // @ts-ignore img
  import chartXs from './CRASH_1-xs.jpeg';
  // @ts-ignore img
  import chartSm from './CRASH_1-sm.jpeg';
  // @ts-ignore img
  import chartMd from './CRASH_1-md.jpeg';
  // @ts-ignore img
  import chartLg from './CRASH_1-lg.jpeg';
  // @ts-ignore img
  import chartXl from './CRASH_1-xl.jpeg';
  // @ts-ignore img
  import chartXxl from './CRASH_1-xl_copy.jpeg';
</script>

<!-- Generated by ai2html v0.100.0 - 2022-03-29 17:01 -->

<div id="g-CRASH_1-box" bind:clientWidth={width}>
  <!-- Artboard: xs -->
  {#if width && width >= 0 && width < 510}
    <div id="g-CRASH_1-xs" class="g-artboard" style="">
      <div style="padding: 0 0 93.0303% 0;"></div>
      <div
        id="g-CRASH_1-xs-img"
        class="g-aiImg"
        alt=""
        style={`background-image: url(${chartXs});`}
      ></div>
      <div
        id="g-ai0-1"
        class="g-xs-text g-aiAbs g-aiPointText"
        style="top:18.0723%;margin-top:-14.5px;left:7.0539%;width:76px;"
      >
        <p class="g-pstyle0">Cruising at</p>
        <p class="g-pstyle0">29,100 feet</p>
      </div>
      <div
        id="g-ai0-2"
        class="g-xs-text g-aiAbs g-aiPointText"
        style="top:20.271%;margin-top:-21.2px;left:26.8941%;width:103px;"
      >
        <p class="g-pstyle1">2.21 pm</p>
        <p class="g-pstyle0">Steep drop from</p>
        <p class="g-pstyle0">27,025 feet</p>
      </div>
      <div
        id="g-ai0-3"
        class="g-xs-text g-aiAbs g-aiPointText"
        style="top:42.7133%;margin-top:-15.1px;right:3.3749%;width:96px;"
      >
        <p class="g-pstyle2">Typical path to</p>
        <p class="g-pstyle2">Guangzhou</p>
      </div>
      <div
        id="g-ai0-4"
        class="g-xs-text g-aiAbs g-aiPointText"
        style="top:70.482%;margin-top:-15.4px;right:2.4487%;width:79px;"
      >
        <p class="g-pstyle2">Last known</p>
        <p class="g-pstyle2">location</p>
      </div>
      <div
        id="g-ai0-5"
        class="g-xs-text g-aiAbs g-aiPointText"
        style="top:87.4202%;margin-top:-15.4px;right:16.3453%;width:50px;"
      >
        <p class="g-pstyle2">Crash</p>
        <p class="g-pstyle2">site</p>
      </div>
    </div>
  {/if}
  <!-- Artboard: sm -->
  {#if width && width >= 510 && width < 660}
    <div id="g-CRASH_1-sm" class="g-artboard" style="">
      <div style="padding: 0 0 77.8431% 0;"></div>
      <div
        id="g-CRASH_1-sm-img"
        class="g-aiImg"
        alt=""
        style={`background-image: url(${chartSm});`}
      ></div>
      <div
        id="g-ai1-1"
        class="g-sm-text g-aiAbs g-aiPointText"
        style="top:17.3436%;margin-top:-16.9px;left:16.4992%;width:86px;"
      >
        <p class="g-pstyle0">Cruising at</p>
        <p class="g-pstyle0">29,100 feet</p>
      </div>
      <div
        id="g-ai1-2"
        class="g-sm-text g-aiAbs g-aiPointText"
        style="top:20.87%;margin-top:-24.9px;left:32.8523%;width:117px;"
      >
        <p class="g-pstyle1">2.21 pm</p>
        <p class="g-pstyle0">Steep drop from</p>
        <p class="g-pstyle0">27,025 feet</p>
      </div>
      <div
        id="g-ai1-3"
        class="g-sm-text g-aiAbs g-aiPointText"
        style="top:43.9824%;margin-top:-17.6px;right:4.7685%;width:108px;"
      >
        <p class="g-pstyle2">Typical path to</p>
        <p class="g-pstyle2">Guangzhou</p>
      </div>
      <div
        id="g-ai1-4"
        class="g-sm-text g-aiAbs g-aiPointText"
        style="top:71.9421%;margin-top:-17.6px;right:4.6892%;width:89px;"
      >
        <p class="g-pstyle2">Last known</p>
        <p class="g-pstyle2">location</p>
      </div>
      <div
        id="g-ai1-5"
        class="g-sm-text g-aiAbs g-aiPointText"
        style="top:87.0554%;margin-top:-17.6px;right:19.7924%;width:55px;"
      >
        <p class="g-pstyle2">Crash</p>
        <p class="g-pstyle2">site</p>
      </div>
    </div>
  {/if}
  <!-- Artboard: md -->
  {#if width && width >= 660 && width < 930}
    <div id="g-CRASH_1-md" class="g-artboard" style="">
      <div style="padding: 0 0 68.7879% 0;"></div>
      <div
        id="g-CRASH_1-md-img"
        class="g-aiImg"
        alt=""
        style={`background-image: url(${chartMd});`}
      ></div>
      <div
        id="g-ai2-1"
        class="g-md-text g-aiAbs g-aiPointText"
        style="top:17.1581%;margin-top:-13.9px;left:3.6766%;width:76px;"
      >
        <p class="g-pstyle0">Cruising at</p>
        <p class="g-pstyle0">29,100 feet</p>
      </div>
      <div
        id="g-ai2-2"
        class="g-md-text g-aiAbs g-aiPointText"
        style="top:20.0216%;margin-top:-13.9px;left:19.6076%;width:92px;"
      >
        <p class="g-pstyle1">2.20 pm</p>
        <p class="g-pstyle0">Slight descent</p>
      </div>
      <div
        id="g-ai2-3"
        class="g-md-text g-aiAbs g-aiPointText"
        style="top:24.1477%;margin-top:-20.6px;left:34.5493%;width:102px;"
      >
        <p class="g-pstyle1">2.21 pm</p>
        <p class="g-pstyle0">Steep drop from</p>
        <p class="g-pstyle0">27,025 feet</p>
      </div>
      <div
        id="g-ai2-4"
        class="g-md-text g-aiAbs g-aiPointText"
        style="top:46.8149%;margin-top:-14.5px;right:2.8165%;width:95px;"
      >
        <p class="g-pstyle2">Typical path to</p>
        <p class="g-pstyle2">Guangzhou</p>
      </div>
      <div
        id="g-ai2-5"
        class="g-md-text g-aiAbs g-aiPointText"
        style="top:80.0748%;margin-top:-14.5px;left:84.28%;width:79px;"
      >
        <p class="g-pstyle0">Last known</p>
        <p class="g-pstyle0">location</p>
      </div>
      <div
        id="g-ai2-6"
        class="g-md-text g-aiAbs g-aiPointText"
        style="top:87.5638%;margin-top:-14.5px;right:22.3457%;width:86px;"
      >
        <p class="g-pstyle2">Approximate</p>
        <p class="g-pstyle2">crash site</p>
      </div>
    </div>
  {/if}
  <!-- Artboard: lg -->
  {#if width && width >= 930 && width < 1200}
    <div id="g-CRASH_1-lg" class="g-artboard" style="">
      <div style="padding: 0 0 61.3978% 0;"></div>
      <div
        id="g-CRASH_1-lg-img"
        class="g-aiImg"
        alt=""
        style={`background-image: url(${chartLg});`}
      ></div>
      <div
        id="g-ai3-1"
        class="g-lg-text g-aiAbs g-aiPointText"
        style="top:16.9729%;margin-top:-17.9px;left:4.0448%;width:90px;"
      >
        <p class="g-pstyle0">Cruising at</p>
        <p class="g-pstyle0">29,100 feet</p>
      </div>
      <div
        id="g-ai3-2"
        class="g-lg-text g-aiAbs g-aiPointText"
        style="top:20.3004%;margin-top:-17.9px;left:27.525%;width:111px;"
      >
        <p class="g-pstyle1">2.20 pm</p>
        <p class="g-pstyle2">Slight descent</p>
      </div>
      <div
        id="g-ai3-3"
        class="g-lg-text g-aiAbs g-aiPointText"
        style="top:24.5911%;margin-top:-26.4px;left:40.9124%;width:124px;"
      >
        <p class="g-pstyle1">2.21 pm</p>
        <p class="g-pstyle2">Steep drop from</p>
        <p class="g-pstyle2">27,025 feet</p>
      </div>
      <div
        id="g-ai3-4"
        class="g-lg-text g-aiAbs g-aiPointText"
        style="top:47.2373%;margin-top:-18.7px;right:2.986%;width:114px;"
      >
        <p class="g-pstyle3">Typical path to</p>
        <p class="g-pstyle3">Guangzhou</p>
      </div>
      <div
        id="g-ai3-5"
        class="g-lg-text g-aiAbs g-aiPointText"
        style="top:80.6874%;margin-top:-18.7px;left:85.4704%;width:94px;"
      >
        <p class="g-pstyle2">Last known</p>
        <p class="g-pstyle2">location</p>
      </div>
      <div
        id="g-ai3-6"
        class="g-lg-text g-aiAbs g-aiPointText"
        style="top:88.0429%;margin-top:-18.7px;right:20.5522%;width:102px;"
      >
        <p class="g-pstyle3">Approximate</p>
        <p class="g-pstyle3">crash site</p>
      </div>
    </div>
  {/if}
  <!-- Artboard: xl -->
  {#if width && width >= 1200 && width < 1350}
    <div id="g-CRASH_1-xl" class="g-artboard" style="">
      <div style="padding: 0 0 47% 0;"></div>
      <div
        id="g-CRASH_1-xl-img"
        class="g-aiImg"
        alt=""
        style={`background-image: url(${chartXl});`}
      ></div>
      <div
        id="g-ai4-1"
        class="g-xl-text g-aiAbs g-aiPointText"
        style="top:16.4851%;margin-top:-19px;left:21.0319%;width:95px;"
      >
        <p class="g-pstyle0">Cruising at</p>
        <p class="g-pstyle0">29,100 feet</p>
      </div>
      <div
        id="g-ai4-2"
        class="g-xl-text g-aiAbs g-aiPointText"
        style="top:20.1977%;margin-top:-17.9px;left:38.5203%;width:111px;"
      >
        <p class="g-pstyle1">2.20 pm</p>
        <p class="g-pstyle2">Slight descent</p>
      </div>
      <div
        id="g-ai4-3"
        class="g-xl-text g-aiAbs g-aiPointText"
        style="top:24.5417%;margin-top:-26.4px;left:48.8956%;width:124px;"
      >
        <p class="g-pstyle1">2.21 pm</p>
        <p class="g-pstyle2">Steep drop from</p>
        <p class="g-pstyle2">27,025 feet</p>
      </div>
      <div
        id="g-ai4-4"
        class="g-xl-text g-aiAbs g-aiPointText"
        style="top:53.1427%;margin-top:-18.7px;right:2.0477%;width:114px;"
      >
        <p class="g-pstyle3">Typical path to</p>
        <p class="g-pstyle3">Guangzhou</p>
      </div>
      <div
        id="g-ai4-5"
        class="g-xl-text g-aiAbs g-aiPointText"
        style="top:81.3342%;margin-top:-18.7px;left:83.4281%;width:94px;"
      >
        <p class="g-pstyle2">Last known</p>
        <p class="g-pstyle2">location</p>
      </div>
      <div
        id="g-ai4-6"
        class="g-xl-text g-aiAbs g-aiPointText"
        style="top:88.781%;margin-top:-18.7px;right:21.2395%;width:102px;"
      >
        <p class="g-pstyle3">Approximate</p>
        <p class="g-pstyle3">crash site</p>
      </div>
    </div>
  {/if}
  <!-- Artboard: xl_copy -->
  {#if width && width >= 1350}
    <div id="g-CRASH_1-xl_copy" class="g-artboard" style="">
      <div style="padding: 0 0 46.8889% 0;"></div>
      <div
        id="g-CRASH_1-xl_copy-img"
        class="g-aiImg"
        alt=""
        style={`background-image: url(${chartXxl});`}
      ></div>
      <div
        id="g-ai5-1"
        class="g-xxl-text g-aiAbs g-aiPointText"
        style="top:13.5823%;margin-top:-19px;left:17.5449%;width:95px;"
      >
        <p class="g-pstyle0">Cruising at</p>
        <p class="g-pstyle0">29,100 feet</p>
      </div>
      <div
        id="g-ai5-2"
        class="g-xxl-text g-aiAbs g-aiPointText"
        style="top:16.11%;margin-top:-19px;left:34.2801%;width:117px;"
      >
        <p class="g-pstyle1">2.20 pm</p>
        <p class="g-pstyle0">Slight descent</p>
      </div>
      <div
        id="g-ai5-3"
        class="g-xxl-text g-aiAbs g-aiPointText"
        style="top:20.5333%;margin-top:-28px;left:45.3329%;width:130px;"
      >
        <p class="g-pstyle1">2.21 pm</p>
        <p class="g-pstyle0">Steep drop from</p>
        <p class="g-pstyle0">27,025 feet</p>
      </div>
      <div
        id="g-ai5-4"
        class="g-xxl-text g-aiAbs g-aiPointText"
        style="top:51.1596%;margin-top:-19.8px;right:2.3384%;width:121px;"
      >
        <p class="g-pstyle2">Typical path to</p>
        <p class="g-pstyle2">Guangzhou</p>
      </div>
      <div
        id="g-ai5-5"
        class="g-xxl-text g-aiAbs g-aiPointText"
        style="top:81.3333%;margin-top:-19.8px;left:82.1208%;width:98px;"
      >
        <p class="g-pstyle0">Last known</p>
        <p class="g-pstyle0">location</p>
      </div>
      <div
        id="g-ai5-6"
        class="g-xxl-text g-aiAbs g-aiPointText"
        style="top:89.3902%;margin-top:-19.8px;right:22.7998%;width:108px;"
      >
        <p class="g-pstyle2">Approximate</p>
        <p class="g-pstyle2">crash site</p>
      </div>
    </div>
  {/if}
</div>

<!-- End ai2html - 2022-03-29 17:01 -->

<!-- ai file: CRASH_1.ai -->
<style lang="scss">
  #g-CRASH_1-box,
  #g-CRASH_1-box .g-artboard {
    margin: 0 auto;
  }
  #g-CRASH_1-box p {
    margin: 0;
  }
  #g-CRASH_1-box .g-aiAbs {
    position: absolute;
  }
  #g-CRASH_1-box .g-aiImg {
    position: absolute;
    top: 0;
    display: block;
    width: 100% !important;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
  }
  #g-CRASH_1-box .g-aiPointText p {
    white-space: nowrap;
  }
  #g-CRASH_1-xs {
    position: relative;
    overflow: hidden;
  }
  #g-CRASH_1-xs p {
    font-family:
      'Source Sans Pro',
      -apple-system,
      BlinkMacSystemFont,
      'Segoe UI',
      Roboto,
      'Helvetica Neue',
      Helvetica,
      Arial,
      sans-serif;
    font-weight: 400;
    line-height: 14px;
    height: auto;
    opacity: 1;
    letter-spacing: 0em;
    font-size: 12px;
    text-align: left;
    color: rgb(255, 255, 255);
    text-transform: none;
    padding-bottom: 0;
    padding-top: 0;
    mix-blend-mode: normal;
    font-style: normal;
    position: static;
  }
  #g-CRASH_1-xs .g-pstyle0 {
    height: 14px;
  }
  #g-CRASH_1-xs .g-pstyle1 {
    font-weight: 700;
    height: 14px;
  }
  #g-CRASH_1-xs .g-pstyle2 {
    height: 14px;
    text-align: right;
  }
  #g-CRASH_1-sm {
    position: relative;
    overflow: hidden;
  }
  #g-CRASH_1-sm p {
    font-family:
      'Source Sans Pro',
      -apple-system,
      BlinkMacSystemFont,
      'Segoe UI',
      Roboto,
      'Helvetica Neue',
      Helvetica,
      Arial,
      sans-serif;
    font-weight: 400;
    line-height: 16px;
    height: auto;
    opacity: 1;
    letter-spacing: 0em;
    font-size: 14px;
    text-align: left;
    color: rgb(255, 255, 255);
    text-transform: none;
    padding-bottom: 0;
    padding-top: 0;
    mix-blend-mode: normal;
    font-style: normal;
    position: static;
  }
  #g-CRASH_1-sm .g-pstyle0 {
    height: 16px;
  }
  #g-CRASH_1-sm .g-pstyle1 {
    font-weight: 700;
    height: 16px;
  }
  #g-CRASH_1-sm .g-pstyle2 {
    height: 16px;
    text-align: right;
  }
  #g-CRASH_1-md {
    position: relative;
    overflow: hidden;
  }
  #g-CRASH_1-md p {
    font-family:
      'Source Sans Pro',
      -apple-system,
      BlinkMacSystemFont,
      'Segoe UI',
      Roboto,
      'Helvetica Neue',
      Helvetica,
      Arial,
      sans-serif;
    font-weight: 400;
    line-height: 13px;
    height: auto;
    opacity: 1;
    letter-spacing: 0em;
    font-size: 12px;
    text-align: left;
    color: rgb(255, 255, 255);
    text-transform: none;
    padding-bottom: 0;
    padding-top: 0;
    mix-blend-mode: normal;
    font-style: normal;
    position: static;
  }
  #g-CRASH_1-md .g-pstyle0 {
    height: 13px;
  }
  #g-CRASH_1-md .g-pstyle1 {
    font-weight: 700;
    height: 13px;
  }
  #g-CRASH_1-md .g-pstyle2 {
    height: 13px;
    text-align: right;
  }
  #g-CRASH_1-lg {
    position: relative;
    overflow: hidden;
  }
  #g-CRASH_1-lg p {
    font-family:
      'Source Sans Pro',
      -apple-system,
      BlinkMacSystemFont,
      'Segoe UI',
      Roboto,
      'Helvetica Neue',
      Helvetica,
      Arial,
      sans-serif;
    font-weight: 400;
    line-height: 17px;
    height: auto;
    opacity: 1;
    letter-spacing: 0em;
    font-size: 15px;
    text-align: left;
    color: rgb(255, 255, 255);
    text-transform: none;
    padding-bottom: 0;
    padding-top: 0;
    mix-blend-mode: normal;
    font-style: normal;
    position: static;
  }
  #g-CRASH_1-lg .g-pstyle0 {
    height: 17px;
    color: rgb(88, 89, 91);
  }
  #g-CRASH_1-lg .g-pstyle1 {
    font-weight: 700;
    height: 17px;
  }
  #g-CRASH_1-lg .g-pstyle2 {
    height: 17px;
  }
  #g-CRASH_1-lg .g-pstyle3 {
    height: 17px;
    text-align: right;
  }
  #g-CRASH_1-xl {
    position: relative;
    overflow: hidden;
  }
  #g-CRASH_1-xl p {
    font-family:
      'Source Sans Pro',
      -apple-system,
      BlinkMacSystemFont,
      'Segoe UI',
      Roboto,
      'Helvetica Neue',
      Helvetica,
      Arial,
      sans-serif;
    font-weight: 400;
    line-height: 17px;
    height: auto;
    opacity: 1;
    letter-spacing: 0em;
    font-size: 15px;
    text-align: left;
    color: rgb(255, 255, 255);
    text-transform: none;
    padding-bottom: 0;
    padding-top: 0;
    mix-blend-mode: normal;
    font-style: normal;
    position: static;
  }
  #g-CRASH_1-xl .g-pstyle0 {
    line-height: 18px;
    height: 18px;
    font-size: 16px;
  }
  #g-CRASH_1-xl .g-pstyle1 {
    font-weight: 700;
    height: 17px;
  }
  #g-CRASH_1-xl .g-pstyle2 {
    height: 17px;
  }
  #g-CRASH_1-xl .g-pstyle3 {
    height: 17px;
    text-align: right;
  }
  #g-CRASH_1-xl_copy {
    position: relative;
    overflow: hidden;
  }
  #g-CRASH_1-xl_copy p {
    font-family:
      'Source Sans Pro',
      -apple-system,
      BlinkMacSystemFont,
      'Segoe UI',
      Roboto,
      'Helvetica Neue',
      Helvetica,
      Arial,
      sans-serif;
    font-weight: 400;
    line-height: 18px;
    height: auto;
    opacity: 1;
    letter-spacing: 0em;
    font-size: 16px;
    text-align: left;
    color: rgb(255, 255, 255);
    text-transform: none;
    padding-bottom: 0;
    padding-top: 0;
    mix-blend-mode: normal;
    font-style: normal;
    position: static;
  }
  #g-CRASH_1-xl_copy .g-pstyle0 {
    height: 18px;
  }
  #g-CRASH_1-xl_copy .g-pstyle1 {
    font-weight: 700;
    height: 18px;
  }
  #g-CRASH_1-xl_copy .g-pstyle2 {
    height: 18px;
    text-align: right;
  }

  /* Custom CSS */
</style>