PatAlcala9/aio-tools
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Re-organized files

Browse source
This commit is contained in:
Patrick Alvin Alcala 2025-09-15 10:43:56 +08:00
parent ea7be8fb39
commit 621faea4c2
53 changed files with 1434 additions and 1059 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/components/Button/Button.sass
View file

@ -1,10 +1,10 @@
@use '/src/assets/css/viewport.sass' as view
@use '/src/styles/breakpoint.sass' as view
@use '/src/styles/variables.sass' as vars
@use 'sass:color'
$backgroundColor: #1b7278
$backgroundColorHover: color.adjust($backgroundColor, $blackness: 11%)
$coffeeColor:rgb(24, 83, 131)
$coffeeColorHover: color.adjust($coffeeColor, $lightness: 11%)
.button
border: none
@ -31,12 +31,12 @@ $coffeeColorHover: color.adjust($coffeeColor, $lightness: 11%)
padding: 0.5rem 2rem
font-size: 1rem
color: #ffffff
background-color: $coffeeColor
background-color: vars.$coffeeColor
cursor: pointer
transition: all 0.2s ease-out
&:hover
background-color: $coffeeColorHover
background-color: vars.$coffeeColorHover
transform: scale(1.2)
margin: 0 1rem 0 1rem
@ -49,4 +49,4 @@ $coffeeColorHover: color.adjust($coffeeColor, $lightness: 11%)
.coffee-icon
margin: 0 0.5rem 0 0
font-size: 1.5rem
color:rgb(77, 107, 170)
color: rgb(230, 235, 246)

4
src/components/Content/Content.sass Normal file
View file

@ -0,0 +1,4 @@
.content
display: flex
justify-content: center
align-items: center

14
src/components/Content/Content.tsx Normal file
View file

@ -0,0 +1,14 @@
import './Content.sass'
import { type JSXElement } from 'solid-js'
interface Props {
children: JSXElement
}
export default (props: Props) => {
return (
<>
<section class="content">{props.children}</section>
</>
)
}

13
src/components/Navbar/Navbar.sass
View file

@ -1,5 +1,5 @@
@use '/src/assets/css/viewport.sass' as view
@use '/src/assets/css/variables.sass' as vars
@use '/src/styles/breakpoint.sass' as view
@use '/src/styles/variables.sass' as vars
@use 'sass:color'
$text: vars.$textColor
@ -31,16 +31,21 @@ $coffeeColor: #1a726e
@media screen and (max-width: view.$tablet)
display: block
border: 1px solid color.adjust($coffeeColor, $lightness: 20%)
border: 1px solid color.adjust(vars.$coffeeColor, $lightness: 10%)
border-radius: 16px
cursor: pointer
padding: 0.5rem 1rem
margin-left: auto
background-color: $coffeeColor
background-color: vars.$coffeeColor
border-radius: 16px
transition: background-color 0.2s ease-out
&:active
transform: scale(0.9)
&:hover
background-color: color.adjust(vars.$coffeeColor, $blackness: 11%)
border: 1px solid color.adjust(vars.$coffeeColor, $blackness: 5%)
.buymeacoffee-button
display: none

4
src/components/PageComponents/Password-Generator/PasswordGeneratorComponent.sass
View file

@ -1,5 +1,5 @@
@use '/src/assets/css/variables.sass' as vars
@use '/src/assets/css/viewport.sass' as view
@use '/src/styles/variables.sass' as vars
@use '/src/styles/breakpoint.sass' as view
@use 'sass:color'
$toggleOffColor: rgba(126, 206, 241, 0.286)

2
src/components/PageTitle/PageTitle.sass
View file

@ -1,4 +1,4 @@
@use '/src/assets/css/variables.sass' as vars
@use '/src/styles/variables.sass' as vars
.title
color: vars.$textColorTitle

6
src/layouts/Layout.astro
View file

@ -1,12 +1,10 @@
---
import Navbar from '../components/Navbar/Navbar.tsx'
import Navbar from '../components/Navbar/Navbar'
import { Background, HTML } from '../../fwt'
const { title } = Astro.props
const websiteName = 'AIO Tools'
const websiteDescription = 'All-in-One Tools for Everyone'
import Background from '../../fwt/components/Background/Background'
import HTML from '../../fwt/components/HTML/HTML'
---
<HTML title={title} name={websiteName} description={websiteDescription} font="inter">

7
src/pages/about.astro
View file

@ -3,7 +3,7 @@ import Layout from '../layouts/Layout.astro'
---
<Layout title="About - AIO Tools">
<main class="page">
<main class="about-page">
<h2 class="paragraph-title">About AIO Tools</h2>
<p class="paragraph-content">This website aimed to provide useful tools for both offline and online usage.</p>
<p class="paragraph-content">
@ -12,8 +12,7 @@ import Layout from '../layouts/Layout.astro'
<h2 class="paragraph-title">Technologies</h2>
<p class="paragraph-content">
AIO Tools is made using <a target="_blank" href="https://astro.build/">AstroJS</a> and <a target="_blank" href="https://www.solidjs.com/">SolidJS</a> to achieve maximum performance and to provide a smooth user experience, and is styled with <a target="_blank" href="https://sass-lang.com/">SASS</a>. The UI Components are manually built from scratch for better flexibility. Third-party open-source libraries are used in some tools, you may find the complete list in the package.json file of the
repository.
AIO Tools is made using <strong>FWT (Fast Webapp Template)</strong>, a template that is built for performance, security, and flexibility. It was built on top of <a target="_blank" href="https://astro.build/">AstroJS</a> and <a target="_blank" href="https://www.solidjs.com/">SolidJS</a>. It provides a clean and modern design, with a focus on performance and user experience. The template includes a variety of components that can be used to build custom web applications quickly and easily.
</p>
</main>
</Layout>
@ -24,7 +23,7 @@ import Layout from '../layouts/Layout.astro'
@use '/src/styles/fonts.sass' as fonts
@use 'sass:color'
.page
.about-page
padding: 4rem
display: flex
flex-direction: column

25
src/pages/color-converter.astro
View file

@ -2,34 +2,15 @@
import Layout from '../layouts/Layout.astro'
import ColorConverterComponent from '../components/PageComponents/Color-Converter/ColorConverterComponent.tsx'
import PageTitle from '../components/PageTitle/PageTitle'
import Content from '../components/Content/Content'
---
<Layout title="Color Converter - AIO Tools">
<main class="page">
<PageTitle title="Color Converter" description="Convert colors to any format. Color picker provided inside." />
<section class="content">
<Content>
<ColorConverterComponent client:visible />
</section>
</Content>
</main>
</Layout>
<style lang="sass">
@use '/src/styles/breakpoint.sass' as view
.page
text-align: center
margin: 4rem 0 0 0
transition: margin 0.4s ease-in-out
@media screen and (max-width: view.$tablet)
margin-top: 1rem
.content
display: flex
justify-content: center
align-items: center
// border: 1px solid #ffffff
// padding: 2rem
// border-radius: 8px
</style>

25
src/pages/hash-generator.astro
View file

@ -2,34 +2,15 @@
import Layout from '../layouts/Layout.astro'
import HashGeneratorComponent from '../components/PageComponents/Hash-Generator/HashGeneratorComponent.tsx'
import PageTitle from '../components/PageTitle/PageTitle'
import Content from '../components/Content/Content'
---
<Layout title="Hash Generator - AIO Tools">
<main class="page">
<PageTitle title="Hash Generator" description="Convert text to multiple hash formats for secure data transmission." />
<section class="content">
<Content>
<HashGeneratorComponent client:visible />
</section>
</Content>
</main>
</Layout>
<style lang="sass">
@use '/src/styles/breakpoint.sass' as view
.page
text-align: center
margin: 4rem 0 0 0
transition: margin 0.4s ease-in-out
@media screen and (max-width: view.$tablet)
margin-top: 1rem
.content
display: flex
justify-content: center
align-items: center
// border: 1px solid #ffffff
// padding: 2rem
// border-radius: 8px
</style>

5
src/pages/index.astro
View file

@ -1,10 +1,7 @@
---
import Layout from '../layouts/Layout.astro'
import Card from '../components/Card/Card.jsx'
import Logo from '../../fwt/components/Logo/Logo'
import Link from '../../fwt/components/Link/Link'
import Footer from '../../fwt/components/Footer/Footer'
import Copyright from '../../fwt/components/Copyright/Copyright'
import { Logo, Link } from '../../fwt/'
---
<Layout title="AIO Tools">

24
src/pages/password-generator.astro
View file

@ -2,31 +2,15 @@
import Layout from '../layouts/Layout.astro'
import PasswordGeneratorComponent from '../components/PageComponents/Password-Generator/PasswordGeneratorComponent.tsx'
import PageTitle from '../components/PageTitle/PageTitle'
import Content from '../components/Content/Content'
---
<Layout title="Password Generator - AIO Tools">
<main class="page">
<PageTitle title="Password Generator" description="Generate a strong and secure password for your accounts online." />
<section class="content">
<PasswordGeneratorComponent client:load />
</section>
<Content>
<PasswordGeneratorComponent client:visible />
</Content>
</main>
</Layout>
<style lang="sass">
@use '/src/styles/breakpoint.sass' as view
.page
text-align: center
margin: 4rem 0 0 0
transition: margin 0.4s ease-in-out
@media screen and (max-width: view.$tablet)
margin-top: 1rem
.content
display: flex
justify-content: center
align-items: center
</style>

7
src/pages/password-manager.astro
View file

@ -1,17 +1,18 @@
---
import Layout from '../layouts/Layout.astro'
import PasswordManagerComponent from '../components/PageComponents/Password-Manager/PasswordManagerComponent.tsx'
import PageTitle from '../components/PageTitle/PageTitle.tsx'
import PageTitle from '../components/PageTitle/PageTitle'
import Toolpage from '../components/Toolpage/Toolpage'
---
<Layout title="Password Manager - AIO Tools">
<main class="page">
<Toolpage>
<PageTitle title="Password Manager" description="Manage your passwords securely and privately. Recommended to be pair with Password Generator for best security." />
<section class="content">
<PasswordManagerComponent client:visible />
</section>
</main>
</Toolpage>
</Layout>
<style lang="sass">

30
src/pages/text-comparison.astro
View file

@ -1,36 +1,16 @@
---
import Layout from '../layouts/Layout.astro'
import TextComparisonComponent from '../components/PageComponents/Text-Comparison/TextComparisonComponent.tsx'
import PageTitle from '../components/PageTitle/PageTitle.tsx'
import TextComparisonComponent from '../components/PageComponents/Text-Comparison/TextComparisonComponent'
import PageTitle from '../components/PageTitle/PageTitle'
import Content from '../components/Content/Content'
---
<Layout title="Text Comparison - AIO Tools">
<main class="page">
<PageTitle title="Text Comparison" description="Compare text side by side to detect changes easily." />
<section class="content">
<Content>
<TextComparisonComponent client:visible />
</section>
</Content>
</main>
</Layout>
<style lang="sass">
@use '/src/styles/breakpoint.sass' as view
.page
font-family: 'Inter', sans-serif
text-align: center
margin: 4rem 0 0 0
transition: margin 0.4s ease-in-out
@media screen and (max-width: view.$tablet)
margin-top: 1rem
.content
display: flex
justify-content: center
align-items: center
// border: 1px solid #ffffff
// padding: 2rem
// border-radius: 8px
</style>

8
src/styles/classes.sass
View file

@ -69,3 +69,11 @@
@media only screen and (max-width: view.$mobile)
display: block
.page
text-align: center
margin: 4rem 0 0 0
transition: margin 0.4s ease-in-out
@media screen and (max-width: view.$tablet)
margin-top: 1rem

14
src/styles/variables.sass
View file

@ -1,9 +1,21 @@
@use 'sass:color'
@use '/src/styles/fonts.sass' as fonts
$fontFamily: 'Inter', sans-serif
$fontFamily: fonts.$Inter
$background: #0f1a28
$textColor: color.adjust($background, $lightness: 80%)
$textColorTitle: color.adjust($background, $lightness: 75%)
$borderRadius: 16px
$componentBorder: 2px solid color.adjust($background, $lightness: 6%)
$componentBackground: color.adjust($background, $lightness: 1%)
$coffeeColor: rgb(24, 83, 131)
$coffeeColorHover: color.adjust($coffeeColor, $lightness: 11%)
$primaryColor: #0075BB
$secondaryColor: #57687F
$accentColor: #00887C
$infoColor: #0082A4
$successColor: #009435
$warningColor: #E5B400
$errorColor: #E8595C