Skip to content

Commit

Permalink
Landing page improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@Levminer
Levminer committed Jul 21, 2024
1 parent 8ac85c9 commit d18528c
Show file tree
Hide file tree
Showing 4 changed files with 413 additions and 34 deletions.
27 changes: 27 additions & 0 deletions platforms/interface/ui/components/accordion.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<Accordion.Root class="w-full">
<Accordion.Item value={id} class="group ">
<Accordion.Header>
<Accordion.Trigger
class="transparent-900 flex w-full items-center justify-between p-8 transition-all [&[data-state=closed]]:rounded-xl [&[data-state=open]>span>svg]:rotate-180 [&[data-state=open]]:rounded-t-xl"
>
<div class="flex items-center justify-center gap-5">
<slot name="header" />
</div>
<span class="inline-flex size-8 items-center justify-center rounded-[8px] bg-transparent transition-all">
<ChevronDown class="transition-all duration-200" />
</span>
</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content transition={slide} transitionConfig={{ duration: 200 }} class="transparent-900 rounded-b-xl pb-[25px]">
<slot name="content" />
</Accordion.Content>
</Accordion.Item>
</Accordion.Root>

<script lang="ts">
import { Accordion } from "bits-ui"
import { slide } from "svelte/transition"
import { ChevronDown } from "lucide-svelte"
let id = crypto.randomUUID()
</script>
133 changes: 133 additions & 0 deletions platforms/interface/ui/components/homeList.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,133 @@
<div class="mx-10 flex-row justify-evenly space-y-5 pb-10 pt-10 sm:mx-3">
<Accordion>
<svelte:fragment slot="header">
<div class="flex items-center gap-3">
<div class="transparent-900 flex aspect-square items-center justify-center rounded-lg p-3 sm:p-2">
<Cpu />
</div>
<h2>CPU</h2>
</div>
<h3>{$hardwareInfo.cpu.name}</h3>
</svelte:fragment>
<svelte:fragment slot="content">
<div class="flex flex-row items-center px-8">
<div class="w-1/3">
{#each $hardwareInfo.cpu.load as item, i}
<div>
<div class="flex w-[95%] flex-row justify-between">
<p class="text-sm">{item.name?.replaceAll("CPU", "")}</p>
<p class="text-sm text-[#969696]">{Math.round(item.value)}%</p>
</div>
<Progress value={item.value} />
</div>
{/each}
</div>
<div class="w-1/3">
{#each $hardwareInfo.cpu.load as item, i}
<div>
<div class="flex w-[95%] flex-row justify-between">
<p class="text-sm">{item.name?.replaceAll("CPU", "")}</p>
<p class="text-sm text-[#969696]">{Math.round(item.min)}%</p>
</div>
<Progress value={item.min} />
</div>
{/each}
</div>
<div class="w-1/3">
{#each $hardwareInfo.cpu.load as item, i}
<div>
<div class="flex w-[95%] flex-row justify-between">
<p class="text-sm">{item.name?.replaceAll("CPU", "")}</p>
<p class="text-sm text-[#969696]">{Math.round(item.max)}%</p>
</div>
<Progress value={item.max} />
</div>
{/each}
</div>
</div>
</svelte:fragment>
</Accordion>

<Accordion>
<svelte:fragment slot="header">
<div class="flex items-center gap-3">
<div class="transparent-900 flex aspect-square items-center justify-center rounded-lg p-3 sm:p-2">
<Memory height={24} width={24} />
</div>
<h2>RAM</h2>
</div>
<h3>{$hardwareInfo.ram.info[0]?.manufacturerName ?? "Generic Memory"}</h3>
</svelte:fragment>
<svelte:fragment slot="content">
<h2>content</h2>
</svelte:fragment>
</Accordion>

<Accordion>
<svelte:fragment slot="header">
<div class="flex items-center gap-3">
<div class="transparent-900 flex aspect-square items-center justify-center rounded-lg p-3 sm:p-2">
<GpuCard height={24} width={24} />
</div>
<h2>GPU</h2>
</div>
<h3>{$hardwareInfo.gpu.name}</h3>
</svelte:fragment>
<svelte:fragment slot="content">
<h2>content</h2>
</svelte:fragment>
</Accordion>

<Accordion>
<svelte:fragment slot="header">
<div class="flex items-center gap-3">
<div class="transparent-900 flex aspect-square items-center justify-center rounded-lg p-3 sm:p-2">
<HardDrive />
</div>
<h2>Drive</h2>
</div>
<h3>{$hardwareInfo.system.storage.disks[0]?.name ?? "Generic Drive"}</h3>
</svelte:fragment>
<svelte:fragment slot="content">
<h2>content</h2>
</svelte:fragment>
</Accordion>

<Accordion>
<svelte:fragment slot="header">
<div class="flex items-center gap-3">
<div class="transparent-900 flex aspect-square items-center justify-center rounded-lg p-3 sm:p-2">
<Network />
</div>
<h2>Interface</h2>
</div>
<h3>{$hardwareInfo.system.network.interfaces[0]?.name ?? "Generic Interface"}</h3>
</svelte:fragment>
<svelte:fragment slot="content">
<h2>content</h2>
</svelte:fragment>
</Accordion>
</div>

<script lang="ts">
import { GpuCard, Memory } from "svelte-bootstrap-icons"
import { hardwareInfo } from "../stores/hardwareInfo.ts"
import Accordion from "./accordion.svelte"
import {
Gauge,
CircuitBoard,
Clock,
Fan,
HardDrive,
Monitor,
Network,
Plug,
Thermometer,
Zap,
Cpu,
Battery,
LayoutGrid,
LayoutList,
} from "lucide-svelte"
import Progress from "./progress.svelte"
</script>
7 changes: 4 additions & 3 deletions platforms/interface/ui/pages/onboarding.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,8 @@
>
<div class="flex flex-col text-center">
<h4 class="mb-2">Get started for free</h4>
<h5>You can use Cores for 7 days, after that you will need to buy it.</h5>
<!-- <h5>You can use Cores for 7 days, after that you will need to buy it.</h5> -->
<h5>During the beta period you can use Cores for free, please consider buying it to support the development.</h5>
</div>
<Popover.Close on:click={free} class="smallButton my-4 w-full">
<CircleCheck />
Expand Down Expand Up @@ -128,7 +129,7 @@
let trialOver = false
// Check if trial is over
if ($settings.licenseActivated) {
/* if ($settings.licenseActivated) {
let dateActivated = new Date($settings.licenseActivated)
let dateNow = new Date()
let diff = dateNow.getTime() - dateActivated.getTime()
Expand All @@ -137,7 +138,7 @@
if (days > 7) {
trialOver = true
}
}
} */
const step2 = () => {
document.querySelector(".step1").classList.add("hidden")
Expand Down
Loading

0 comments on commit d18528c

Please sign in to comment.