diff --git a/src/app.css b/src/app.css index 2ace1a7cc4..0e2ae66de3 100644 --- a/src/app.css +++ b/src/app.css @@ -83,6 +83,14 @@ /* Animations */ --animate-scale-in: scale-in 200ms ease-out forwards; + --animate-fade-in: fade-in 500ms ease-out forwards; + --animate-text: fade-in 0.75s ease-in-out both, blur 0.75s ease-in-out both, + up 0.75s ease-in-out both; + --animate-map: map 0.75s ease-in-out both; + --animate-marker: marker 1.5s ease-in-out both infinite; + + /* Pink polyfills */ + --transition: 0.2s; --animate-caret-blink: caret-blink 1s ease-in-out infinite; --animate-text: fade 0.75s ease-in-out both, blur 0.75s ease-in-out both, up 0.75s ease-in-out both; @@ -140,6 +148,15 @@ } } + + @keyframes map { + 0% { + opacity: 0; + transform: scale(0.98); + } + 100% { + opacity: 1; + @keyframes scroll { 0% { transform: translateX(0); @@ -168,6 +185,17 @@ } } + @keyframes marker { + 0% { + opacity: 0.75; + r: var(--radius); + } + 100% { + opacity: 0; + r: calc(var(--radius) * 2); + } + } + /* Fonts */ --font-sans: 'Inter', arial, sans-serif; --font-mono: 'Fira Code', monospace; diff --git a/src/lib/components/regions/(assets)/australia.png b/src/lib/components/regions/(assets)/australia.png new file mode 100644 index 0000000000..026a3d342b Binary files /dev/null and b/src/lib/components/regions/(assets)/australia.png differ diff --git a/src/lib/components/regions/(assets)/france.png b/src/lib/components/regions/(assets)/france.png new file mode 100644 index 0000000000..bbabc3bae2 Binary files /dev/null and b/src/lib/components/regions/(assets)/france.png differ diff --git a/src/lib/components/regions/(assets)/germany.png b/src/lib/components/regions/(assets)/germany.png new file mode 100644 index 0000000000..78ed01f600 Binary files /dev/null and b/src/lib/components/regions/(assets)/germany.png differ diff --git a/src/lib/components/regions/(assets)/india.png b/src/lib/components/regions/(assets)/india.png new file mode 100644 index 0000000000..ad02450629 Binary files /dev/null and b/src/lib/components/regions/(assets)/india.png differ diff --git a/src/lib/components/regions/(assets)/singapore.png b/src/lib/components/regions/(assets)/singapore.png new file mode 100644 index 0000000000..ac570cc8e5 Binary files /dev/null and b/src/lib/components/regions/(assets)/singapore.png differ diff --git a/src/lib/components/regions/(assets)/usa.png b/src/lib/components/regions/(assets)/usa.png new file mode 100644 index 0000000000..700322fb12 Binary files /dev/null and b/src/lib/components/regions/(assets)/usa.png differ diff --git a/src/lib/components/regions/Globe.svelte b/src/lib/components/regions/Globe.svelte new file mode 100644 index 0000000000..38c3452aec --- /dev/null +++ b/src/lib/components/regions/Globe.svelte @@ -0,0 +1,61 @@ + + +
+
+ +
+
diff --git a/src/lib/components/regions/Map.svelte b/src/lib/components/regions/Map.svelte new file mode 100644 index 0000000000..2c99445a66 --- /dev/null +++ b/src/lib/components/regions/Map.svelte @@ -0,0 +1,279 @@ + + +
+
+ {#if showTooltip} +
+ {tooltip.city} + ({tooltip.code}) + {#if tooltip.available} +
+ Available now +
+ {:else} +
+ {tooltip.release} +
+ {/if} +
+ {/if} +
+ {#each pins as pin} +
+ {pin.city} + ({pin.code}) + {#if pin.available} +
+ Available now +
+ {:else} +
+ {pin.release} +
+ {/if} +
+ {/each} +
+ + + + + + {#each pins as pin, index} + {@const radius = 8} + { + handleTooltip({ + event, + city: pin.city, + code: pin.code, + available: pin.available, + release: pin.release + }); + }} + on:mouseleave={() => (showTooltip = false)} + > + + + + + + + + + + + {/each} + + +
+ + diff --git a/src/markdoc/tags/Regions_Map.svelte b/src/markdoc/tags/Regions_Map.svelte new file mode 100644 index 0000000000..3cf9ffcf94 --- /dev/null +++ b/src/markdoc/tags/Regions_Map.svelte @@ -0,0 +1,5 @@ + + + diff --git a/src/markdoc/tags/_Module.svelte b/src/markdoc/tags/_Module.svelte index 6550aae3ca..a4801bb3a1 100644 --- a/src/markdoc/tags/_Module.svelte +++ b/src/markdoc/tags/_Module.svelte @@ -19,5 +19,6 @@ export { default as Accordion_Item } from './Accordion_Item.svelte'; export { default as Youtube } from './Youtube.svelte'; export { default as Call_To_Action } from './Call_To_Action.svelte'; + export { default as Regions_Map } from './Regions_Map.svelte'; export { default as Storage_Image } from './Storage_Image.svelte'; diff --git a/src/routes/maps/+page.svelte b/src/routes/maps/+page.svelte new file mode 100644 index 0000000000..ed8bdbde82 --- /dev/null +++ b/src/routes/maps/+page.svelte @@ -0,0 +1,8 @@ + + +
+ +
diff --git a/src/routes/maps/+page.ts b/src/routes/maps/+page.ts new file mode 100644 index 0000000000..a3d15781a7 --- /dev/null +++ b/src/routes/maps/+page.ts @@ -0,0 +1 @@ +export const ssr = false;