Skip to content

Design update #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Design update #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
941544d
UPDATE: Navbar
Mar 23, 2025
ef708b4
FEAT: home page for RGEN Toolkit
Mar 23, 2025
0ed3c45
FEAT: footer update
Mar 23, 2025
c36787f
REFACTOR: Query_Sequence
Mar 23, 2025
cc67142
FEAT: card version
Mar 23, 2025
901b38d
FIX: About page margin and size
Mar 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions frontend/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

12 changes: 6 additions & 6 deletions frontend/src/lib/Bottom.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@
import { A, P } from 'flowbite-svelte';
</script>

<footer class="py-10 mb-6 border-t border-gray-200">
<div class="flex justify-center item-center">
<div class="mb-5">
<P class="mb-3"><span class="font-bold text-sm">designed & developed by:</span></P>
<A class="flex-grow ml-3" href="https://pnucolab.com" target="_blank"><img class="w-60" src="/pnucolab.png" alt="Computational Omics Laboratory at Pusan National University" /></A>
<footer class="py-10">
<div class="mx-auto flex flex-col container space-y-8 mt-10 mb-4">
<A class="flex-grow justify-center" href="https://pnucolab.com" target="_blank"><img class="w-60" src="/pnucolab-logo.png" alt="Computational Omics Laboratory at Pusan National University" /></A>
<div class="flex flex-col space-y-2">
<P class="text-center">This website is developed and powered by <A href="https://pnucolab.com" target="_blank">Computational Omics Laboratory</A> at Pusan National University. <A href="https://pnucolab.com/jobs/" target="_blank">Contact us</A></P>
<P class="text-center">Copyright 2024, all rights reserved.</P>
</div>
</div>
<P class="text-center">© 2024, all rights reserved.</P>
</footer>
153 changes: 83 additions & 70 deletions frontend/src/lib/Query_Sequence.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
Label,
Heading,
Select,
Helper,
Dropdown,
DropdownItem,
Fileupload
Expand All @@ -24,6 +25,7 @@
import {
Alert
} from 'flowbite-svelte';

export let email;
export let mismatches;
export let Pam;
Expand Down Expand Up @@ -113,80 +115,91 @@
}
</script>

<Heading tag="h4" class="mb-4"> </Heading>

<div class="mb-2">
<Label for="email" class= "" >
<span class="leading-relaxed dark:text-gray-400 mb-2"> E-mail (Optional): </span>
<div class="mb-10">
<Label for="email" class= "mb-2 text-base" >
<span class="leading-relaxed dark:text-gray-400 mb-2 text-base"> E-mail (Optional): </span>
</Label>
<Input class="leading-relaxed dark:text-gray-400 mb-2" bind:value={email} type="email" size="lg" id="email" placeholder="your E-mail" />
<span class="m-4 font-italic"> The result will be notified by e-mail if an email adress is provided. </span>
<Helper class="mx-2">
<span class="text-sm">The result will be notified by e-mail if an email adress is provided. </span>
</Helper>
</div>

<div class="h-full w-full bg-white flex flex-col items-left">
<div class="h-full w-full bg-gray-100 flex flex-col items-left space-y-5 shadow-sm rounded-lg p-5">

<Label class="space-y-1 mb-2">
<Alert class="mb-4 mt-2" border color="red">
<span>Upload VCF file </span><br>
<span class="block text-sm text-gray-500">The VCF file should be phased and contain only one sample.
<Label class="space-y-1 space-y-2">
<span class="dark:text-gray-400 mb-2 text-base">Upload VCF file </span>
<Alert>
<span class="font-bold">Notice! </span>
<span class="font-medium">The VCF file should be phased and contain only one sample.
Chromosome names in the vcf file and in the indexed refernce genome should be identical.</span>
</Alert>
<A class="pt-1" href="https://github.com/pnucolab/variant-aware-cas-offinder/raw/refs/heads/main/docs/Sample.vcf.gz" download>Download an example VCF file</A>
</Alert>
<Fileupload bind:files={files} on:upload={handleUpload}/>
<A class="pt-1" href="https://github.com/pnucolab/variant-aware-cas-offinder/raw/refs/heads/main/docs/Sample.vcf.gz" download>Download an example VCF file</A>
</Label>
</div>

<Heading tag="h4" class="mb-4"> </Heading>

<div class="mb-2">
<Label for ="Pams">Select PAM Type</Label>
<Select id="Pams" class="mt-2" bind:value={Pam} >

{#each Pams as {value, name}}
<option {value}> {name}</option>

{/each}
</Select>

</div>

<div>

</div>
<Label for="organisms">Select Target Genome</Label>
<Select id="oorganism" class="mt-2" bind:value={selectedOrganism}>
{#each organisms as { value, name }}
<option {value}>{name}</option>
{/each}
</Select>

{#if orgranismtype.length > 0}
<Select id="oorgnismtypes" class="mt-4" bind:value={selectedOrganismtype}>
{#each orgranismtype as { value, name }}
<option {value}>{name}</option>
{/each}
</Select>
{/if}

{#if versions.length > 0}
<Select id="versions" class="mt-4" bind:value={Target_Genome}>
{#each versions as { value, name }}
<option {value}>{name}</option>
{/each}
</Select>
{/if}

<Heading tag="h4" class="mb-4"></Heading>

<div>
<span> Query Sequences without PAM from 5' to 3' </span>
<Textarea {...textareaprops} bind:value={query_seq} on:input={queryInput} required />

</div>

<Heading tag="h4" class="mb-4"></Heading>

<div class="mb-6">
<Label for="mismatches" class="mb-2">Maximum number of mismatches between gRNA and the target </Label>
<Input bind:value={mismatches} type="number" size = "lg" id="mismatches" placeholder="0" on:input={handlemismatchesInput} required/>
</div>
</Label>

<div class="space-y-2">
<Label for ="Pams">
<span class="dark:text-gray-400 text-base">Select PAM Type</span>
</Label>
<Select id="Pams" class="mt-2" bind:value={Pam} >

{#each Pams as {value, name}}
<option {value}> {name}</option>

{/each}
</Select>
</div>

<div class="space-y-2">
<Label for="organisms">
<span class="dark:text-gray-400 text-base">Select Target Genome</span>
</Label>
<Select id="oorganism" class="mt-2" bind:value={selectedOrganism}>
{#each organisms as { value, name }}
<option {value}>{name}</option>
{/each}
</Select>
</div>

{#if orgranismtype.length > 0}
<div class="space-y-2">
<Label for="oorgnismtypes">
<span class="dark:text-gray-400 text-base">Select Target Genome Type</span>
</Label>
<Select id="oorgnismtypes" class="mt-2" bind:value={selectedOrganismtype}>
{#each orgranismtype as { value, name }}
<option {value}>{name}</option>
{/each}
</Select>
</div>
{/if}

{#if versions.length > 0}
<div class="space-y-2">
<Label for="versions">
<span class="dark:text-gray-400 text-base">Select Target Genome Version</span>
</Label>
<Select id="versions" class="mt-2" bind:value={Target_Genome}>
{#each versions as { value, name }}
<option {value}>{name}</option>
{/each}
</Select>
</div>
{/if}

<div class="space-y-2">
<Label for="query_seq">
<span class="dark:text-gray-400 text-base">Query Sequences without PAM from 5' to 3'</span>
</Label>
<Textarea {...textareaprops} bind:value={query_seq} on:input={queryInput} required />

</div>

<div class="space-y-2">
<Label for="mismatches">
<span class="dark:text-gray-400 text-base">Maximum number of mismatches between gRNA and the target </span>
</Label>
<Input bind:value={mismatches} type="number" size = "lg" id="mismatches" placeholder="0" on:input={handlemismatchesInput} required/>
</div>
</div>
2 changes: 1 addition & 1 deletion frontend/src/lib/Top.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import { Heading, P, A } from 'flowbite-svelte';
</script>

<Heading tag="h2" class="mt-5 mb-2">Variant-aware <wbr>Cas-OFFinder</Heading>
<Heading tag="h2" class="mt-10 mb-2">Variant-aware <wbr>Cas-OFFinder</Heading>
<Heading tag="h5" class="font-light mb-5">A webtool for searching potential off-target sites accounting for genomic variants</Heading>
<P class="mb-5">
Variant-aware Cas-OFFinder is a web-based tool for identifying potential CRISPR off-target sites across different genomes. It accounts for both reference genomes and individual genetic variants to improve accuracy in diverse populations. This addresses limitations caused by incomplete representation of genetic variation in reference genomes.
Expand Down
13 changes: 8 additions & 5 deletions frontend/src/routes/+layout.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,21 @@

<script>
import Bottom from '$lib/Bottom.svelte';
import { Navbar, NavBrand, NavUl, NavLi, NavHamburger} from 'flowbite-svelte';
import { page } from '$app/stores';
import './styles.css';
</script>
<Navbar>
<NavBrand href="/">
<Navbar color="form" class="sticky top-0 z-40 dark:bg-gray-900 shadow-sm">
<NavBrand href="/home">
<span class="text-xl font-bold ml-3 sm:ml-0">RGEN Toolkit</span>
</NavBrand>
<NavHamburger />
<NavUl>
<NavUl class="flex items-center h-full" style="margin-bottom: 0;">
<NavLi href="/" active={$page.url.pathname === '/'}>Variant-aware Cas-OFFinder</NavLi>
<NavLi href="/about" active={$page.url.pathname === '/about'}>About</NavLi>
<a href="https://github.com/pnucolab/variant-aware-cas-offinder" target="_blank" rel="noopener noreferrer" class="text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" />
</svg>
</a>
</NavUl>
</Navbar>

Expand Down
23 changes: 12 additions & 11 deletions frontend/src/routes/about/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
<script>
import { Heading, P, A, List, Li, Button } from 'flowbite-svelte';
</script>
<Heading tag="h2" class="mt-5 mb-2">About</Heading>

<Heading tag="h2" class="mt-10">About</Heading>


<Heading tag="h4" class="mt-10 mb-2">Variant-aware Cas-OFFinder</Heading>
Expand Down Expand Up @@ -30,14 +31,13 @@
</Li>
</List>


<h4 class="mt-10 mb-2" style="font-size: 24px; font-weight: bold; color: #333;">
📖 User Guide
<Button class="ml-2 !py-2 !pl-3 !pr-4" href="https://rgen-toolkit.readthedocs.io/"
<div class="flex flex-row items-center mt-10 mb-2">
<h4 class="text-2xl font-bold text-gray-800"> 📖 User Guide </h4>
<Button class="ml-4 !py-2 !pl-3 !pr-4" href="https://rgen-toolkit.readthedocs.io/"
target="_blank">
🔗 View Detailed User Guide
</Button>
</h4>
</div>
<List tag="ol" list="decimal" class="text-gray-600 dark:text-gray-400">
<Li>
Upload VCF file
Expand Down Expand Up @@ -69,16 +69,17 @@
<Li>To begin using the web tool efficiently, follow these straightforward steps to ensure a smooth start:</Li>
</List>
<List tag="ol" class="ps-5 mt-2 space-y-1">
<Li> Download the Required File: <Button class="ml-2 !py-2 !pl-3 !pr-4" href="https://github.com/pnucolab/VarCas-OFFinder/raw/refs/heads/main/docs_old/Sample.vcf.gz" download>
📥 Click here</Button></Li>
<Li> Download the Required File:
<Button size="xs" class="ml-2 !py-2 !pl-3 !pr-4" href="https://github.com/pnucolab/variant-aware-cas-offinder/raw/refs/heads/main/docs/Sample.vcf.gz" download>
📥 Click here</Button>
</Li>
<Li>Upload the File.</Li>
<Li>Submit for Processing.</Li>
<Li>View Results.</Li>
<Li> Click here for details:

<Button class="ml-2 !py-2 !pl-3 !pr-3" href="https://rgen-toolkit.readthedocs.io/en/latest/quickstart.html"
<Button size="xs" class="ml-2 !py-2 !pl-3 !pr-3" href="https://rgen-toolkit.readthedocs.io/en/latest/quickstart.html"
target="_blank">
🌐
🌐 Quick Start Guide
</Button>
</Li>
</List>
Expand Down
15 changes: 15 additions & 0 deletions frontend/src/routes/home/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<script>
import Top from '$lib/Top.svelte';
import { Button } from 'flowbite-svelte';
</script>

<div class="cover-top w-full bg-cover bg-center flex flex-col items-center justify-center space-y-12 mb-8 -mx-[calc(50vw-50%)]" style="width: 100vw; height: 500px; margin-left: calc(50% - 50vw); background-image: url('/home-main.jpg');">
<div class="text-center space-y-4">
<h1 class="text-6xl font-bold mb-4 text-white">RGEN Toolkit</h1>
<p class="mb-6 text-white">Provide powerful tools for RGEN research and analysis</p>
</div>

<div class="flex justify-center gap-4">
<Button href="/about" color="dark" class="opacity-90 hover:opacity-100 text-white text-xl">About RGEN Toolkit</Button>
</div>
</div>
Binary file added frontend/static/home-main.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added frontend/static/pnucolab-logo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.