423 lines
12 KiB
Svelte
423 lines
12 KiB
Svelte
<script>
|
|
// @ts-ignore img
|
|
import chartXs from '../imgs/annotation2-xs.png';
|
|
// @ts-ignore img
|
|
import chartSm from '../imgs/annotation2-sm.png';
|
|
// @ts-ignore img
|
|
import chartMd from '../imgs/annotation2-md.png';
|
|
// @ts{width}mg
|
|
import chartLg from '../imgs/annotation2-md.png';
|
|
// @ts-ignore img
|
|
import chartXl from '../imgs/annotation2-xl.png';
|
|
|
|
let width = null;
|
|
</script>
|
|
|
|
<div id="g-annotation2-box" bind:clientWidth={width}>
|
|
<!-- Artboard: xs -->
|
|
{#if width && width >= 0 && width < 510}
|
|
<div id="g-annotation2-xs" class="g-artboard" style="">
|
|
<div style="padding: 0 0 187.8788% 0;"></div>
|
|
<div
|
|
id="g-annotation2-xs-img"
|
|
class="g-aiImg"
|
|
style={`background-image: url(${chartXs});`}
|
|
></div>
|
|
<div
|
|
id="g-ai0-1"
|
|
class="g-text g-aiAbs g-aiPointText"
|
|
style="top:9.0284%;margin-top:-41px;left:17.9779%;width:219px;"
|
|
>
|
|
<p class="g-pstyle0">The wave at Teahupo'o is</p>
|
|
<p class="g-pstyle0">known to be very heavy</p>
|
|
<p class="g-pstyle0">with a thick lip that can</p>
|
|
<p class="g-pstyle0">easily knock a surfer off the</p>
|
|
<p class="g-pstyle0">wave and onto the reef below</p>
|
|
</div>
|
|
<div
|
|
id="g-ai0-2"
|
|
class="g-text g-aiAbs g-aiPointText"
|
|
style="top:68.8671%;margin-top:-25px;left:12.9181%;width:144px;"
|
|
>
|
|
<p class="g-pstyle0">Surfer speed is up</p>
|
|
<p class="g-pstyle0">to 35 km per hour</p>
|
|
<p class="g-pstyle0">(20 mph)</p>
|
|
</div>
|
|
<div
|
|
id="g-ai0-3"
|
|
class="g-text g-aiAbs g-aiPointText"
|
|
style="top:68.8671%;margin-top:-25px;left:62.8912%;width:149px;"
|
|
>
|
|
<p class="g-pstyle0">One cubic meter</p>
|
|
<p class="g-pstyle0">of water weighs</p>
|
|
<p class="g-pstyle0">1,000 kg. (2,200 lb)</p>
|
|
</div>
|
|
<div
|
|
id="g-ai0-4"
|
|
class="g-text g-aiAbs"
|
|
style="top:78.7097%;left:17.9779%;width:59.0909%;"
|
|
>
|
|
<p>
|
|
A surfer will adjust speed to stay in the tube by dragging a hand to
|
|
slow, or pumping the board to speed up
|
|
</p>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
<!-- Artboard: sm -->
|
|
{#if width && width >= 510 && width < 660}
|
|
<div id="g-annotation2-sm" class="g-artboard" style="">
|
|
<div style="padding: 0 0 56.2745% 0;"></div>
|
|
<div
|
|
id="g-annotation2-sm-img"
|
|
class="g-aiImg"
|
|
style={`background-image: url(${chartSm});`}
|
|
></div>
|
|
</div>
|
|
{/if}
|
|
<!-- Artboard: md -->
|
|
{#if width && width >= 660 && width < 930}
|
|
<div id="g-annotation2-md" class="g-artboard" style="">
|
|
<div style="padding: 0 0 56.3636% 0;"></div>
|
|
<div
|
|
id="g-annotation2-md-img"
|
|
class="g-aiImg"
|
|
style={`background-image: url(${chartMd});`}
|
|
></div>
|
|
<div
|
|
id="g-ai2-1"
|
|
class="g-text g-aiAbs g-aiPointText"
|
|
style="top:23.9183%;margin-top:-41px;left:67.1629%;width:219px;"
|
|
>
|
|
<p class="g-pstyle0">The wave at Teahupo'o is</p>
|
|
<p class="g-pstyle0">known to be very heavy</p>
|
|
<p class="g-pstyle0">with a thick lip that can</p>
|
|
<p class="g-pstyle0">easily knock a surfer off the</p>
|
|
<p class="g-pstyle0">wave and onto the reef below</p>
|
|
</div>
|
|
<div
|
|
id="g-ai2-2"
|
|
class="g-text g-aiAbs g-aiPointText"
|
|
style="top:65.585%;margin-top:-17px;left:51.2917%;width:189px;"
|
|
>
|
|
<p class="g-pstyle0">Surfer speed is up to</p>
|
|
<p class="g-pstyle0">35 km per hour (20 mph)</p>
|
|
</div>
|
|
<div
|
|
id="g-ai2-3"
|
|
class="g-text g-aiAbs g-aiPointText"
|
|
style="top:74.4559%;margin-top:-25px;left:5.9007%;width:263px;"
|
|
>
|
|
<p class="g-pstyle0">A surfer will adjust speed to stay in</p>
|
|
<p class="g-pstyle0">the tube by dragging a hand to slow,</p>
|
|
<p class="g-pstyle0">or pumping the board to speed up</p>
|
|
</div>
|
|
<div
|
|
id="g-ai2-4"
|
|
class="g-text g-aiAbs g-aiPointText"
|
|
style="top:79.5635%;margin-top:-17px;left:70.1381%;width:199px;"
|
|
>
|
|
<p class="g-pstyle0">One cubic meter of water</p>
|
|
<p class="g-pstyle0">weighs 1,000 kg. (2,200 lb)</p>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
<!-- Artboard: lg -->
|
|
{#if width && width >= 930 && width < 1200}
|
|
<div id="g-annotation2-lg" class="g-artboard" style="">
|
|
<div style="padding: 0 0 56.0215% 0;"></div>
|
|
<div
|
|
id="g-annotation2-lg-img"
|
|
class="g-aiImg"
|
|
style={`background-image: url(${chartLg});`}
|
|
></div>
|
|
<div
|
|
id="g-ai3-1"
|
|
class="g-text g-aiAbs g-aiPointText"
|
|
style="top:22.7846%;margin-top:-47.7px;left:73.261%;width:219px;"
|
|
>
|
|
<p class="g-pstyle0">The wave at Teahupo'o is</p>
|
|
<p class="g-pstyle0">known to be very heavy</p>
|
|
<p class="g-pstyle0">with a thick lip that can</p>
|
|
<p class="g-pstyle0">easily knock a surfer off the</p>
|
|
<p class="g-pstyle0">wave and onto the reef below</p>
|
|
</div>
|
|
<div
|
|
id="g-ai3-2"
|
|
class="g-text g-aiAbs g-aiPointText"
|
|
style="top:22.7846%;margin-top:-47.7px;left:73.261%;width:219px;"
|
|
>
|
|
<p class="g-pstyle0">The wave at Teahupo'o is</p>
|
|
<p class="g-pstyle0">known to be very heavy</p>
|
|
<p class="g-pstyle0">with a thick lip that can</p>
|
|
<p class="g-pstyle0">easily knock a surfer off the</p>
|
|
<p class="g-pstyle0">wave and onto the reef below</p>
|
|
</div>
|
|
<div
|
|
id="g-ai3-3"
|
|
class="g-text g-aiAbs g-aiPointText"
|
|
style="top:61.187%;margin-top:-19.8px;left:54.1451%;width:189px;"
|
|
>
|
|
<p class="g-pstyle0">Surfer speed is up to</p>
|
|
<p class="g-pstyle0">35 km per hour (20 mph)</p>
|
|
</div>
|
|
<div
|
|
id="g-ai3-4"
|
|
class="g-text g-aiAbs g-aiPointText"
|
|
style="top:61.187%;margin-top:-19.8px;left:54.1451%;width:189px;"
|
|
>
|
|
<p class="g-pstyle0">Surfer speed is up to</p>
|
|
<p class="g-pstyle0">35 km per hour (20 mph)</p>
|
|
</div>
|
|
<div
|
|
id="g-ai3-5"
|
|
class="g-text g-aiAbs g-aiPointText"
|
|
style="top:72.3786%;margin-top:-29.1px;left:22.2898%;width:263px;"
|
|
>
|
|
<p class="g-pstyle0">A surfer will adjust speed to stay in</p>
|
|
<p class="g-pstyle0">the tube by dragging a hand to slow,</p>
|
|
<p class="g-pstyle0">or pumping the board to speed up</p>
|
|
</div>
|
|
<div
|
|
id="g-ai3-6"
|
|
class="g-text g-aiAbs g-aiPointText"
|
|
style="top:72.3786%;margin-top:-29.1px;left:22.2898%;width:263px;"
|
|
>
|
|
<p class="g-pstyle0">A surfer will adjust speed to stay in</p>
|
|
<p class="g-pstyle0">the tube by dragging a hand to slow,</p>
|
|
<p class="g-pstyle0">or pumping the board to speed up</p>
|
|
</div>
|
|
<div
|
|
id="g-ai3-7"
|
|
class="g-text g-aiAbs g-aiPointText"
|
|
style="top:79.6131%;margin-top:-19.8px;left:76.246%;width:199px;"
|
|
>
|
|
<p class="g-pstyle0">One cubic meter of water</p>
|
|
<p class="g-pstyle0">weighs 1,000 kg. (2,200 lb)</p>
|
|
</div>
|
|
<div
|
|
id="g-ai3-8"
|
|
class="g-text g-aiAbs g-aiPointText"
|
|
style="top:79.6131%;margin-top:-19.8px;left:76.246%;width:199px;"
|
|
>
|
|
<p class="g-pstyle0">One cubic meter of water</p>
|
|
<p class="g-pstyle0">weighs 1,000 kg. (2,200 lb)</p>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
<!-- Artboard: xl -->
|
|
{#if width && width >= 1200}
|
|
<div id="g-annotation2-xl" class="g-artboard" style="">
|
|
<div style="padding: 0 0 51.6667% 0;"></div>
|
|
<div
|
|
id="g-annotation2-xl-img"
|
|
class="g-aiImg"
|
|
style={`background-image: url(${chartXl});`}
|
|
></div>
|
|
<div
|
|
id="g-ai4-1"
|
|
class="g-text g-aiAbs g-aiPointText"
|
|
style="top:23.2613%;margin-top:-61.2px;left:79.2253%;width:268px;"
|
|
>
|
|
<p class="g-pstyle0">The wave at Teahupo'o is</p>
|
|
<p class="g-pstyle0">known to be very heavy</p>
|
|
<p class="g-pstyle0">with a thick lip that can</p>
|
|
<p class="g-pstyle0">easily knock a surfer off the</p>
|
|
<p class="g-pstyle0">wave and onto the reef below</p>
|
|
</div>
|
|
<div
|
|
id="g-ai4-2"
|
|
class="g-text g-aiAbs g-aiPointText"
|
|
style="top:65.3581%;margin-top:-25.2px;left:54.3241%;width:230px;"
|
|
>
|
|
<p class="g-pstyle0">Surfer speed is up to</p>
|
|
<p class="g-pstyle0">35 km per hour (20 mph)</p>
|
|
</div>
|
|
<div
|
|
id="g-ai4-3"
|
|
class="g-text g-aiAbs g-aiPointText"
|
|
style="top:76.3258%;margin-top:-37.2px;left:22.0662%;width:323px;"
|
|
>
|
|
<p class="g-pstyle0">A surfer will adjust speed to stay in</p>
|
|
<p class="g-pstyle0">the tube by dragging a hand to slow,</p>
|
|
<p class="g-pstyle0">or pumping the board to speed up</p>
|
|
</div>
|
|
<div
|
|
id="g-ai4-4"
|
|
class="g-text g-aiAbs g-aiPointText"
|
|
style="top:83.2613%;
|
|
margin-top:-25.2px;left:81.2408%;width:243px;"
|
|
>
|
|
<p class="g-pstyle0">One cubic meter of water</p>
|
|
<p class="g-pstyle0">weighs 1,000 kg. (2,200 lb)</p>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<!-- End ai2html - 2024-07-19 13:14 -->
|
|
|
|
<!-- Generated by ai2html v0.100.0 - 2024-07-19 13:14 -->
|
|
<!-- ai file: annotation2.ai -->
|
|
<style lang="scss">
|
|
#g-annotation2-box,
|
|
#g-annotation2-box .g-artboard {
|
|
margin: 0 auto;
|
|
}
|
|
#g-annotation2-box p {
|
|
margin: 0;
|
|
}
|
|
#g-annotation2-box .g-aiAbs {
|
|
position: absolute;
|
|
}
|
|
#g-annotation2-box .g-aiImg {
|
|
position: absolute;
|
|
top: 0;
|
|
display: block;
|
|
width: 100% !important;
|
|
height: 100%;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
}
|
|
#g-annotation2-box .g-aiPointText p {
|
|
white-space: nowrap;
|
|
}
|
|
#g-annotation2-xs {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
#g-annotation2-xs 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: 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-annotation2-xs .g-pstyle0 {
|
|
height: 16px;
|
|
}
|
|
#g-annotation2-sm {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
#g-annotation2-md {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
#g-annotation2-md 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: 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-annotation2-md .g-pstyle0 {
|
|
height: 16px;
|
|
}
|
|
#g-annotation2-lg {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
#g-annotation2-lg p {
|
|
font-family:
|
|
'Source Sans Pro',
|
|
-apple-system,
|
|
BlinkMacSystemFont,
|
|
'Segoe UI',
|
|
Roboto,
|
|
'Helvetica Neue',
|
|
Helvetica,
|
|
Arial,
|
|
sans-serif;
|
|
font-weight: 400;
|
|
line-height: 19px;
|
|
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-annotation2-lg .g-pstyle0 {
|
|
height: 19px;
|
|
}
|
|
#g-annotation2-xl {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
#g-annotation2-xl p {
|
|
font-family:
|
|
'Source Sans Pro',
|
|
-apple-system,
|
|
BlinkMacSystemFont,
|
|
'Segoe UI',
|
|
Roboto,
|
|
'Helvetica Neue',
|
|
Helvetica,
|
|
Arial,
|
|
sans-serif;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
height: auto;
|
|
opacity: 1;
|
|
letter-spacing: 0em;
|
|
font-size: 20px;
|
|
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-annotation2-xl .g-pstyle0 {
|
|
height: 24px;
|
|
}
|
|
|
|
/* Custom CSS */
|
|
</style>
|