Restore Slidy and re-structure assets folder

tilde-lab · Jan 20, 2023 · ad1eb1d · ad1eb1d
1 parent c835f08
commit ad1eb1d
Show file tree

Hide file tree

Showing 25 changed files with 57 additions and 101 deletions.
diff --git a/src/App.svelte b/src/App.svelte
@@ -8,7 +8,6 @@
 	import { Spectre } from 'svelte-spectre';
 	import { Header, Footer } from './views/';
 	import { Main } from './layouts/';
-	import { darkTheme } from '@/stores/theme';
 </script>
 
 <style>

diff --git a/src/assets/img/frost.jpg b/src/assets/img/frost.jpg
diff --git a/src/assets/img/all-data.png → src/assets/img/screenshots/all-data.png b/src/assets/img/all-data.png → src/assets/img/screenshots/all-data.png
diff --git a/src/assets/img/cloud-runs.png → src/assets/img/screenshots/cloud-runs.png b/src/assets/img/cloud-runs.png → src/assets/img/screenshots/cloud-runs.png
diff --git a/src/assets/img/content-organizer.png → ...ets/img/screenshots/content-organizer.png b/src/assets/img/content-organizer.png → ...ets/img/screenshots/content-organizer.png
diff --git a/src/assets/img/optimade-search.png → ...ssets/img/screenshots/optimade-search.png b/src/assets/img/optimade-search.png → ...ssets/img/screenshots/optimade-search.png
diff --git a/...04696e1a-eb5d-43b9-bb1d-d2ee117f4430.webp → ...04696e1a-eb5d-43b9-bb1d-d2ee117f4430.webp b/...04696e1a-eb5d-43b9-bb1d-d2ee117f4430.webp → ...04696e1a-eb5d-43b9-bb1d-d2ee117f4430.webp
diff --git a/...1b9a004a-db27-45e4-b762-0fa21bc97277.webp → ...1b9a004a-db27-45e4-b762-0fa21bc97277.webp b/...1b9a004a-db27-45e4-b762-0fa21bc97277.webp → ...1b9a004a-db27-45e4-b762-0fa21bc97277.webp
diff --git a/src/assets/img/stable_diffusion/266f65d5-7d12-4642-8cc2-0cd16e925367.webp b/src/assets/img/stable_diffusion/266f65d5-7d12-4642-8cc2-0cd16e925367.webp
diff --git a/src/assets/img/stable_diffusion/2a4d23ad-5470-4f59-8dbe-a869ef5df317.webp b/src/assets/img/stable_diffusion/2a4d23ad-5470-4f59-8dbe-a869ef5df317.webp
diff --git a/...4603a846-4daf-4018-aa74-e3ab567a69fc.webp → ...4603a846-4daf-4018-aa74-e3ab567a69fc.webp b/...4603a846-4daf-4018-aa74-e3ab567a69fc.webp → ...4603a846-4daf-4018-aa74-e3ab567a69fc.webp
diff --git a/src/assets/img/stable_diffusion/4aa1edac-bc4b-4e06-9183-ff10cad4fedc.webp b/src/assets/img/stable_diffusion/4aa1edac-bc4b-4e06-9183-ff10cad4fedc.webp
diff --git a/...b64f151d-e194-497a-9b70-e15ffdd8730d.webp → ...b64f151d-e194-497a-9b70-e15ffdd8730d.webp b/...b64f151d-e194-497a-9b70-e15ffdd8730d.webp → ...b64f151d-e194-497a-9b70-e15ffdd8730d.webp
diff --git a/...c2179403-954f-4f5d-82a4-3dfdeaba9597.webp → ...c2179403-954f-4f5d-82a4-3dfdeaba9597.webp b/...c2179403-954f-4f5d-82a4-3dfdeaba9597.webp → ...c2179403-954f-4f5d-82a4-3dfdeaba9597.webp
diff --git a/src/assets/img/stable_diffusion/c5cf0499-9d89-4739-9eb5-7f7b8f753f9e.webp b/src/assets/img/stable_diffusion/c5cf0499-9d89-4739-9eb5-7f7b8f753f9e.webp
diff --git a/src/assets/img/stable_diffusion/c98769d8-ba7a-4ce9-bf48-f9109868bddb.webp b/src/assets/img/stable_diffusion/c98769d8-ba7a-4ce9-bf48-f9109868bddb.webp
diff --git a/src/assets/img/stable_diffusion/ce62dfd6-6735-43bc-9e57-214f3fd8a6e5.webp b/src/assets/img/stable_diffusion/ce62dfd6-6735-43bc-9e57-214f3fd8a6e5.webp
diff --git a/...d5f83ae7-f990-4f0c-96d5-c98eb55a0890.webp → ...d5f83ae7-f990-4f0c-96d5-c98eb55a0890.webp b/...d5f83ae7-f990-4f0c-96d5-c98eb55a0890.webp → ...d5f83ae7-f990-4f0c-96d5-c98eb55a0890.webp
diff --git a/src/assets/img/stable_diffusion/db1dcbd0-440f-46c5-aa91-fc0e60d8d265.webp b/src/assets/img/stable_diffusion/db1dcbd0-440f-46c5-aa91-fc0e60d8d265.webp
diff --git a/src/config.ts b/src/config.ts
diff --git a/src/layouts/ApiGuide.svelte b/src/layouts/ApiGuide.svelte
@@ -3,22 +3,32 @@
 		All these operations can be also done programmatically via the <a href="https://github.com/tilde-lab/metis-client">Metis API</a>.
 	</div>
 	<div class="api_body">
-		<div class="api_item">
-			<img src="assets/img/code.jpg" alt="code" />
-		</div>
-		<div class="api_item">
-			<img src="assets/img/code.jpg" alt="code" />
-		</div>
-		<div class="api_item">
-			<img src="assets/img/code.jpg" alt="code" />
-		</div>
-		<div class="api_item">
-			<img src="assets/img/code.jpg" alt="code" />
-		</div>
+		<Slidy {slides} {index} let:item snap="center" axis="y" --slidy-slide-gap="7%" loop={true} navigation={false} arrows={false} counter={false} autoplay={true}>
+			<figure>
+				<img width={item.width} height={item.height} src={item.src} alt="Stable Diffusion Neural Art" title="Stable Diffusion Neural Art" />
+			</figure>
+		</Slidy>
 	</div>
 </div>
 
+<script lang="ts">
+	import { Slidy, type Slide } from '@slidy/svelte';
+
+	const slides: Slide[] = [
+		{ src: 'assets/img/stable_diffusion/04696e1a-eb5d-43b9-bb1d-d2ee117f4430.webp', width: 400, height: 400 },
+		{ src: 'assets/img/stable_diffusion/1b9a004a-db27-45e4-b762-0fa21bc97277.webp', width: 400, height: 400 },
+		{ src: 'assets/img/stable_diffusion/4603a846-4daf-4018-aa74-e3ab567a69fc.webp', width: 400, height: 400 },
+		{ src: 'assets/img/stable_diffusion/b64f151d-e194-497a-9b70-e15ffdd8730d.webp', width: 400, height: 400 },
+		{ src: 'assets/img/stable_diffusion/c2179403-954f-4f5d-82a4-3dfdeaba9597.webp', width: 400, height: 400 },
+		{ src: 'assets/img/stable_diffusion/c5cf0499-9d89-4739-9eb5-7f7b8f753f9e.webp', width: 400, height: 400 },
+		{ src: 'assets/img/stable_diffusion/d5f83ae7-f990-4f0c-96d5-c98eb55a0890.webp', width: 400, height: 400 },
+	];
+	const index = Math.floor(Math.random() * slides.length);
+</script>
+
 <style lang="scss">
+	@import '@slidy/svelte/dist/slidy.css';
+
 	a {
 		color: #fff !important;
 		text-decoration: underline !important;
@@ -34,10 +44,10 @@
 		color: white;
 	}
 	.api_body {
-		padding-top: 20px;
-		width: 3053px;
-		margin-left: -568px;
-		display: flex;
-		justify-content: space-between;
+		padding-top: 90px;
+		width: 100%;
+	}
+	.api_body img {
+		border: 20px solid #5755d9;
 	}
 </style>
diff --git a/src/layouts/Goal.svelte b/src/layouts/Goal.svelte
@@ -11,7 +11,7 @@
 						<h1>{item.text}</h1>
 						{#if active_tab == index}
 							<!-- svelte-ignore a11y-img-redundant-alt -->
-							<img src={item.img} alt="image" />
+							<img src={item.img} alt="Metis GUI" />
 						{/if}
 					</li>
 				{/each}
@@ -25,10 +25,10 @@
 	import { Grid, Col } from 'svelte-spectre';
 
 	const menus = [
-		{ text: `cheap on-demand cloud simulations`, img: 'assets/img/cloud-runs.png' },
-		{ text: `digesting the experiments data`, img: 'assets/img/all-data.png' },
-		{ text: `analyzing and comparing the data`, img: 'assets/img/optimade-search.png' },
-		{ text: `exporting and sharing the data across your lab`, img: 'assets/img/content-organizer.png' },
+		{ text: `cheap on-demand cloud simulations`, img: 'assets/img/screenshots/cloud-runs.png' },
+		{ text: `digesting the experiments data`, img: 'assets/img/screenshots/all-data.png' },
+		{ text: `getting the data from various sources`, img: 'assets/img/screenshots/optimade-search.png' },
+		{ text: `exporting and sharing the data across your lab`, img: 'assets/img/screenshots/content-organizer.png' },
 	];
 
 	let active_tab = 0;
@@ -82,10 +82,10 @@
 		left: 0;
 		bottom: 0;
 		width: 46%;
-		height: 509px;
+		height: 520px;
 		z-index: 1;
 		transition: all 0.3s ease-in-out;
-		opacity: 0.9;
+		box-shadow: 50px -50px 0 0 #5755d9;
 	}
 	.goal_bottom_text {
 		margin-left: 77px;

diff --git a/src/layouts/Visualize.svelte b/src/layouts/Visualize.svelte
@@ -1,7 +1,11 @@
 <div class="visualize">
 	<Grid stack>
 		<Col col="5">
-			<img src="assets/img/frost.jpg" alt="frost" />
+			<Slidy {slides} {index} let:item snap="center" axis="y" --slidy-slide-width="100%" loop={true} navigation={false} arrows={false} counter={false} autoplay={true}>
+				<figure>
+					<img width={item.width} height={item.height} src={item.src} alt="Stable Diffusion Neural Art" title="Stable Diffusion Neural Art" />
+				</figure>
+			</Slidy>
 		</Col>
 		<Col col="7">
 			<div class="visualize_text">
@@ -28,17 +32,30 @@
 
 <script lang="ts" context="module">
 	import { Grid, Col, Button } from 'svelte-spectre';
+	import { Slidy, type Slide } from '@slidy/svelte';
 	import { Logo } from '@/components/index';
+
+	const slides: Slide[] = [
+		{ src: 'assets/img/stable_diffusion/db1dcbd0-440f-46c5-aa91-fc0e60d8d265.webp', width: 450, height: 800 },
+		{ src: 'assets/img/stable_diffusion/ce62dfd6-6735-43bc-9e57-214f3fd8a6e5.webp', width: 450, height: 800 },
+		{ src: 'assets/img/stable_diffusion/c98769d8-ba7a-4ce9-bf48-f9109868bddb.webp', width: 450, height: 800 },
+		{ src: 'assets/img/stable_diffusion/266f65d5-7d12-4642-8cc2-0cd16e925367.webp', width: 450, height: 800 },
+		{ src: 'assets/img/stable_diffusion/4aa1edac-bc4b-4e06-9183-ff10cad4fedc.webp', width: 450, height: 800 },
+		{ src: 'assets/img/stable_diffusion/2a4d23ad-5470-4f59-8dbe-a869ef5df317.webp', width: 450, height: 800 },
+	];
+	let index: number = Math.floor(Math.random() * slides.length);
 </script>
 
 <style lang="scss">
+	@import '@slidy/svelte/dist/slidy.css';
+
 	.visualize {
 		position: relative;
 	}
-	.visualize img {
+	.visualize figure img {
 		width: 100%;
-		height: 685px;
-		object-fit: cover;
+		margin-top: 50px;
+		box-shadow: 50px -50px 0 0 #5755d9;
 	}
 	.visualize_text {
 		position: relative;

diff --git a/src/views/ImageGallery.svelte b/src/views/ImageGallery.svelte
diff --git a/src/views/index.ts b/src/views/index.ts
@@ -1,3 +1,2 @@
-export { default as Header } from './Header.svelte'
-export { default as Footer } from './Footer.svelte'
-export { default as ImageGallery } from './ImageGallery.svelte'
+export { default as Header } from './Header.svelte';
+export { default as Footer } from './Footer.svelte';