ourworld_web/www_circl
23
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

base project

Browse Source
This commit is contained in:
sasha-astiadi
2025-05-02 15:42:14 +02:00
commit ea2b94bf65
3682 changed files with 392213 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/README.md Normal file
View File

@@ -0,0 +1,55 @@
# Website Template Guide
## Using base.html Template
The `base.html` file serves as a template for creating new pages. It includes the common navigation bar and footer that should be consistent across all pages.
### How to Create a New Page
1. Copy the contents of `base.html`
2. Replace the placeholder comments with your content:
- Replace `<!-- PAGE_TITLE -->` with your page title
- Replace `<!-- PAGE_CONTENT -->` with your main content
### Example
```html
<!-- Copy from base.html and modify like this: -->
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My New Page</title> <!-- Changed from PAGE_TITLE -->
<link href="../dist/output.css" rel="stylesheet">
</head>
<body class="min-h-screen bg-black">
<!-- Navigation and other elements from base.html stay the same -->
<main>
<!-- Your page-specific content goes here -->
<header class="text-center mb-12">
<h1 class="text-4xl font-bold text-white mb-4">My New Page</h1>
</header>
<section>
<!-- Add your sections here -->
</section>
</main>
<!-- Footer from base.html stays the same -->
</body>
</html>
```
### Template Elements
1. **Navigation Bar**: Includes logo and menu links
2. **Main Content Area**: Marked with `<!-- PAGE_CONTENT -->`
3. **Footer**: Copyright information
### Styling
- The template includes dark mode by default
- Uses Tailwind CSS classes for styling
- Maintains consistent spacing and layout across pages

28
src/about.html Normal file
View File

@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About - Dark Mode Website</title>
<link href="../dist/output.css" rel="stylesheet">
</head>
<body class="min-h-screen bg-black">
<div class="container mx-auto px-4 py-8">
<nav class="flex items-center justify-between mb-8">
<div class="flex items-center">
<img src="assets/logos/logo_lightmode.svg" alt="Logo" class="h-6 md:h-5 lg:h-6 w-auto mr-4">
</div>
<ul class="flex space-x-6 text-white">
<li><a href="index.html" class="hover:text-gray-300">Home</a></li>
<li><a href="about.html" class="hover:text-gray-300">About</a></li>
<li><a href="features.html" class="hover:text-gray-300">Features</a></li>
<li><a href="contact.html" class="hover:text-gray-300">Contact</a></li>
</ul>
</nav>
<header class="text-center mb-12">
<h1 class="text-4xl font-bold text-white mb-4">About Us</h1>
</header>
</div>
</body>
</html>

51
src/about/img/README.md Normal file
View File

@@ -0,0 +1,51 @@
# About Page Images
This directory contains images specifically used in the about page sections.
## Directory Structure
```
about/
├── img/
│ ├── team/ # Team member photos and portraits
│ ├── company/ # Company photos and office images
│ └── history/ # Timeline and historical images
```
## Usage
When adding images to this directory:
1. Use descriptive filenames (e.g., `team-lead.jpg`, `office-exterior.webp`)
2. Organize images in appropriate subdirectories
3. Include proper alt text for accessibility
## Example
```html
<!-- In about page -->
<img src="about/img/team/team-lead.jpg" alt="Team Lead - Jane Doe">
```
## Recommended Image Formats
- Use WebP or JPEG for photographs
- Use SVG for icons and simple graphics
- Use PNG for images requiring transparency
- Maintain consistent aspect ratios for team photos
## Image Guidelines
1. Team Photos:
- Use consistent dimensions
- Maintain professional appearance
- Consider using a standard background
2. Company Images:
- High-quality office/workspace photos
- Brand-related imagery
- Event photographs
3. Historical Content:
- Timeline images
- Achievement highlights
- Milestone documentation

72
src/assets/favicon/README.md Normal file
View File

@@ -0,0 +1,72 @@
# Favicon Directory
This directory contains favicon files for the website. A favicon (favorite icon) is a small icon that appears in various places such as:
- Browser tabs
- Bookmarks
- Mobile home screens when saved as a shortcut
## Recommended Favicon Formats
1. **Basic Favicon (required)**
- `favicon.ico` (16x16, 32x32)
- Main favicon file that most browsers look for
2. **Modern PNG Icons**
- `favicon-16x16.png`
- `favicon-32x32.png`
- `favicon-96x96.png`
- Higher quality than ICO format
3. **Apple Touch Icons**
- `apple-touch-icon.png` (180x180)
- `apple-touch-icon-precomposed.png`
- Used when saving to iOS home screens
4. **Android/Chrome Icons**
- `android-chrome-192x192.png`
- `android-chrome-512x512.png`
- Used for Android home screen shortcuts
## Implementation
Add these meta tags to your HTML head section:
```html
<!-- Basic favicon -->
<link rel="icon" type="image/x-icon" href="/src/assets/favicon/favicon.ico">
<!-- PNG icons -->
<link rel="icon" type="image/png" sizes="16x16" href="/src/assets/favicon/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/src/assets/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/src/assets/favicon/favicon-96x96.png">
<!-- Apple Touch Icons -->
<link rel="apple-touch-icon" sizes="180x180" href="/src/assets/favicon/apple-touch-icon.png">
<link rel="apple-touch-icon-precomposed" href="/src/assets/favicon/apple-touch-icon-precomposed.png">
<!-- Android/Chrome -->
<link rel="icon" type="image/png" sizes="192x192" href="/src/assets/favicon/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="/src/assets/favicon/android-chrome-512x512.png">
```
## Best Practices
1. **File Formats**
- Use ICO format for the main favicon.ico
- Use PNG for all other icons
- Ensure transparent background when appropriate
2. **Sizing**
- Create icons at exact required dimensions
- Don't rely on browser scaling
- Maintain consistent padding around the icon
3. **Design**
- Keep the design simple and recognizable at small sizes
- Test icons at actual size
- Ensure good contrast
4. **Organization**
- Keep all favicon files in this directory
- Use clear, consistent naming
- Update all formats when making changes

BIN
src/assets/favicon/android-chrome-192x192.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.5 KiB

BIN
src/assets/favicon/android-chrome-512x512.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
src/assets/favicon/apple-touch-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.6 KiB

BIN
src/assets/favicon/favicon-16x16.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 616 B

BIN
src/assets/favicon/favicon-32x32.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

13
src/assets/logos/README.md Normal file
View File

@@ -0,0 +1,13 @@
# Logo Directory
Place your SVG logo files in this directory.
## Usage
1. Copy your SVG logo files into this directory
2. Reference them in your HTML using the relative path:
```html
<img src="../assets/logos/your-logo.svg" alt="Your Logo">
```
## Supported Formats
- SVG (Scalable Vector Graphics)

56
src/assets/logos/logo_lightmode.svg Normal file
View File

@@ -0,0 +1,56 @@
<svg width="134" height="33" viewBox="0 0 134 33" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_84_83)">
<mask id="mask0_84_83" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="33" height="22">
<path d="M0.693848 0.363678H33V21.3623H0.693848V0.363678Z" fill="white"/>
</mask>
<g mask="url(#mask0_84_83)">
<path d="M33 16.3929C33 16.9235 32.9762 17.4416 32.9272 17.9485C32.8181 19.0931 32.5759 20.214 32.2359 21.2739H1.4579C0.961079 19.732 0.693848 18.093 0.693848 16.3929C0.693848 15.947 0.717685 15.5011 0.754069 15.0677C0.839382 13.9107 1.05768 12.8022 1.38514 11.7286C1.56705 11.1382 1.78661 10.5603 2.02875 10.0061C2.63598 8.60745 3.43768 7.31714 4.3962 6.17256C7.35832 2.61674 11.826 0.363678 16.8407 0.363678C22.6558 0.363678 27.7557 3.41259 30.5962 7.98098C31.0579 8.71581 31.4581 9.49921 31.7868 10.3075C32.4906 11.9827 32.9034 13.7899 32.9762 15.6942C33 15.9233 33 16.1637 33 16.3929Z" fill="#E7E895"/>
</g>
<mask id="mask1_84_83" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="6" width="33" height="23">
<path d="M0.693848 6.05798H33V28.3768H0.693848V6.05798Z" fill="white"/>
</mask>
<g mask="url(#mask1_84_83)">
<path d="M33 16.3929C33 16.9235 32.9762 17.4416 32.9272 17.9485C32.8181 19.0931 32.5759 20.214 32.2359 21.2739C32.0289 21.9377 31.7742 22.5879 31.4832 23.2031C30.7179 24.8061 29.6979 26.2645 28.4721 27.5175C28.2049 27.8064 27.9138 28.0841 27.6102 28.3494H6.07235C5.22173 27.6022 4.45767 26.759 3.78897 25.8298C3.07258 24.8659 2.46661 23.806 1.99237 22.685C1.78661 22.2267 1.60344 21.7572 1.4579 21.2739C0.961079 19.732 0.693848 18.093 0.693848 16.3929C0.693848 15.947 0.717685 15.5012 0.754069 15.0677C0.839382 13.9107 1.05768 12.8022 1.38514 11.7286C1.56705 11.1383 1.78661 10.5604 2.02875 10.0061C2.63598 8.60747 3.43768 7.31716 4.3962 6.17258C6.26556 6.40174 8.06341 6.72681 9.76215 7.16148C11.0381 7.47409 12.2877 7.78795 13.5021 8.08936C19.7062 9.55901 25.5577 10.584 31.7868 10.3075C32.4906 11.9827 32.9034 13.7899 32.9762 15.6942C33 15.9234 33 16.1637 33 16.3929Z" fill="#E8D279"/>
</g>
<mask id="mask2_84_83" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="6" width="33" height="27">
<path d="M0.693848 6.05798H33V32.4346H0.693848V6.05798Z" fill="white"/>
</mask>
<g mask="url(#mask2_84_83)">
<path d="M33 16.3929C33 16.9235 32.9762 17.4416 32.9272 17.9485C32.8181 19.0931 32.5759 20.214 32.2359 21.2739C32.0289 21.9377 31.7742 22.5879 31.4832 23.2031C30.7179 24.806 29.6979 26.2645 28.4721 27.5174C28.2049 27.8064 27.9138 28.0841 27.6102 28.3494C24.7447 30.8927 20.9683 32.4346 16.8407 32.4346C12.713 32.4346 8.93662 30.8927 6.07235 28.3494C5.22173 27.6021 4.45767 26.7589 3.78897 25.8298C3.07258 24.8658 2.46661 23.8059 1.99237 22.685C1.78661 22.2267 1.60344 21.7571 1.4579 21.2739C0.961079 19.732 0.693848 18.093 0.693848 16.3929C0.693848 15.947 0.717685 15.5011 0.754069 15.0677C0.839382 13.9107 1.05768 12.8022 1.38514 11.7286C3.55812 11.2952 5.79257 10.7048 7.79618 10.102C10.1749 9.3784 12.2513 8.64357 13.5021 8.08934C13.5749 8.04076 13.6602 8.0171 13.7568 7.96852C19.2445 5.41406 25.0119 6.31703 30.5962 7.98098C31.0579 8.71581 31.4581 9.49921 31.7868 10.3075C32.4906 11.9827 32.9034 13.7899 32.9762 15.6942C33 15.9233 33 16.1637 33 16.3929Z" fill="#DBC163"/>
</g>
<mask id="mask3_84_83" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="9" width="33" height="24">
<path d="M0.693848 9.88406H33V32.4346H0.693848V9.88406Z" fill="white"/>
</mask>
<g mask="url(#mask3_84_83)">
<path d="M33 16.3929C33 16.9235 32.9762 17.4416 32.9272 17.9485C32.8181 19.0931 32.5759 20.214 32.2359 21.2739C32.0289 21.9377 31.7742 22.5879 31.4832 23.2031C30.7179 24.806 29.6979 26.2645 28.4721 27.5174C28.2049 27.8064 27.9138 28.0841 27.6102 28.3494C24.7447 30.8927 20.9683 32.4346 16.8407 32.4346C12.713 32.4346 8.93662 30.8927 6.07235 28.3494C5.22173 27.6021 4.45767 26.7589 3.78897 25.8298C3.07258 24.8658 2.46661 23.8059 1.99237 22.685C1.78661 22.2267 1.60344 21.7571 1.4579 21.2739C0.961079 19.732 0.693848 18.093 0.693848 16.3929C0.693848 15.947 0.717685 15.5011 0.754069 15.0677C0.839382 13.9107 1.05768 12.8022 1.38514 11.7286C1.56705 11.1382 1.78661 10.5603 2.02875 10.0061C3.94705 9.94508 5.86534 9.9812 7.79618 10.102C12.5311 10.4146 17.2534 11.2466 21.7938 12.3675C26.0068 13.405 29.5762 14.6455 32.9762 15.6942C33 15.9233 33 16.1637 33 16.3929Z" fill="#C1AC20"/>
</g>
<mask id="mask4_84_83" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="14" width="33" height="19">
<path d="M0.693848 14.9855H33V32.4346H0.693848V14.9855Z" fill="white"/>
</mask>
<g mask="url(#mask4_84_83)">
<path d="M32.9272 17.9485C32.8181 19.0931 32.5759 20.214 32.2359 21.2739C32.0289 21.9377 31.7742 22.5879 31.4832 23.2031C30.7179 24.806 29.6979 26.2645 28.4721 27.5174C28.2049 27.8064 27.9138 28.0841 27.6102 28.3494C24.7447 30.8927 20.9683 32.4346 16.8407 32.4346C12.713 32.4346 8.93662 30.8927 6.07235 28.3494C5.22173 27.6021 4.45767 26.7589 3.78897 25.8298C3.07258 24.8658 2.46661 23.8059 1.99237 22.685C1.78661 22.2267 1.60344 21.7571 1.4579 21.2739C0.961079 19.732 0.693848 18.093 0.693848 16.3929C0.693848 15.947 0.717685 15.5011 0.754069 15.0677C5.25811 15.0067 9.76215 15.465 13.7204 16.5137C20.07 18.2013 26.4811 18.4903 32.9272 17.9485Z" fill="#9D7901"/>
</g>
<mask id="mask5_84_83" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="1" y="19" width="31" height="14">
<path d="M1.86426 19.1304H31.734V32.4346H1.86426V19.1304Z" fill="white"/>
</mask>
<g mask="url(#mask5_84_83)">
<path d="M31.483 23.2031C30.7177 24.806 29.6977 26.2645 28.4719 27.5174C28.2047 27.8064 27.9136 28.0841 27.61 28.3494C24.7445 30.8927 20.9681 32.4346 16.8405 32.4346C12.7128 32.4346 8.93644 30.8927 6.07217 28.3494C5.22155 27.6021 4.45749 26.7589 3.78879 25.8298C3.0724 24.8658 2.46643 23.8059 1.99219 22.685C3.63196 22.1781 5.03963 21.6849 6.05963 21.2739C6.27793 21.2017 6.47239 21.1058 6.64176 21.0211C12.7981 18.3221 19.2694 19.443 25.4847 21.2739C27.5122 21.8767 29.5158 22.5517 31.483 23.2031Z" fill="#7F5702"/>
</g>
<mask id="mask6_84_83" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="3" y="24" width="26" height="9">
<path d="M3.4707 24.5507H28.5227V32.4346H3.4707V24.5507Z" fill="white"/>
</mask>
<g mask="url(#mask6_84_83)">
<path d="M28.4727 27.5174C28.2055 27.8064 27.9144 28.0841 27.6108 28.3494C24.7453 30.8927 20.9689 32.4345 16.8412 32.4345C12.7136 32.4345 8.93721 30.8927 6.07294 28.3494C5.22231 27.6021 4.45826 26.7589 3.78955 25.8298C10.5042 24.3602 18.4321 24.3602 24.7816 26.3853C26.0438 26.7826 27.2708 27.1687 28.4727 27.5174Z" fill="#5A401D"/>
</g>
<path d="M57.7695 32.3058C55.2389 32.3058 53.0487 31.8723 51.1976 31.0055C49.349 30.1386 47.8199 28.9617 46.6091 27.4733C45.4008 25.9862 44.496 24.2737 43.8962 22.337C43.2987 20.4016 43 18.364 43 16.2242C43 14.0858 43.2987 12.0494 43.8962 10.1165C44.496 8.18099 45.4008 6.46847 46.6091 4.98013C47.8199 3.4893 49.349 2.31856 51.1976 1.46791C53.0487 0.614758 55.2389 0.187561 57.7695 0.187561C60.2694 0.187561 62.4376 0.620985 64.2727 1.48783C66.1104 2.35219 67.5746 3.55531 68.6654 5.0997C69.755 6.64408 70.4344 8.43133 70.7026 10.4602H64.4343C64.1662 8.80996 63.4133 7.55826 62.1768 6.70387C60.9391 5.85072 59.4161 5.42352 57.6079 5.42352C55.747 5.42352 54.1763 5.87687 52.8969 6.78358C51.62 7.69028 50.6492 8.95568 49.9832 10.5798C49.3196 12.2039 48.9891 14.0858 48.9891 16.2242C48.9891 18.364 49.3196 20.2533 49.9832 21.8936C50.6492 23.5314 51.62 24.803 52.8969 25.7098C54.1763 26.6165 55.747 27.0698 57.6079 27.0698C59.4161 27.0698 60.933 26.6239 62.1572 25.7297C63.3815 24.8367 64.1405 23.4828 64.4343 21.6694H70.7026C70.4344 23.8054 69.755 25.6724 68.6654 27.2691C67.5746 28.867 66.1104 30.1063 64.2727 30.9856C62.4376 31.8649 60.2694 32.3058 57.7695 32.3058Z" fill="white"/>
<path d="M77.2035 6.43983C76.2987 6.43983 75.5201 6.15586 74.8676 5.58792C74.2175 5.01999 73.8931 4.2615 73.8931 3.3112C73.8931 2.39204 74.2175 1.64103 74.8676 1.05939C75.5201 0.479001 76.2987 0.187561 77.2035 0.187561C78.1106 0.187561 78.8893 0.479001 79.5394 1.05939C80.1919 1.64103 80.5188 2.39204 80.5188 3.3112C80.5188 4.2615 80.1919 5.01999 79.5394 5.58792C78.8893 6.15586 78.1106 6.43983 77.2035 6.43983ZM79.8821 31.7378H74.4905V8.95568H79.8821V31.7378Z" fill="white"/>
<path d="M90.1802 31.7378H84.7886V8.95566H90.1802V11.6758C91.0286 10.4876 91.9787 9.65562 93.0303 9.17985C94.0807 8.70532 95.2597 8.46744 96.566 8.46744H97.2026V13.7482H95.9636C95.0589 13.7482 94.2803 13.8715 93.6277 14.1169C92.9776 14.3598 92.4255 14.6973 91.9725 15.1282C91.3873 15.726 90.9417 16.5057 90.6356 17.4647C90.332 18.425 90.1802 19.6642 90.1802 21.1812V31.7378Z" fill="white"/>
<path d="M110.855 32.1862C108.618 32.1862 106.641 31.6855 104.925 30.6817C103.211 29.6791 101.874 28.2779 100.914 26.4769C99.9565 24.6772 99.479 22.5861 99.479 20.2048C99.479 17.9031 99.9565 15.8743 100.914 14.1169C101.874 12.357 103.203 10.9758 104.905 9.97197C106.609 8.96936 108.592 8.46744 110.855 8.46744C113.541 8.46744 115.822 9.17237 117.696 10.5798C119.573 11.9884 120.791 13.8703 121.349 16.2242H115.483C114.79 14.0322 113.247 12.9362 110.855 12.9362C109.124 12.9362 107.713 13.6013 106.624 14.9289C105.533 16.2541 104.988 18.0127 104.988 20.2048C104.988 22.4802 105.533 24.3024 106.624 25.6699C107.713 27.0349 109.124 27.7174 110.855 27.7174C112.157 27.7174 113.207 27.3936 114.004 26.746C114.803 26.0958 115.337 25.2003 115.605 24.0607H121.432C121.086 25.7683 120.42 27.2317 119.434 28.4498C118.451 29.6691 117.221 30.597 115.742 31.2346C114.266 31.8686 112.637 32.1862 110.855 32.1862Z" fill="white"/>
<path d="M133.766 31.7378H130.294C128.641 31.7378 127.363 31.3468 126.46 30.5621C125.555 29.775 125.103 28.5021 125.103 26.741V0.755493H130.49V25.1169C130.49 25.8779 130.628 26.4147 130.906 26.7261C131.186 27.0349 131.66 27.1894 132.326 27.1894H133.766V31.7378Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_84_83">
<rect width="134" height="33" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 9.7 KiB

38
src/base.html Normal file
View File

@@ -0,0 +1,38 @@
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><!-- PAGE_TITLE --></title>
<link href="../dist/output.css" rel="stylesheet">
</head>
<body class="min-h-screen bg-black">
<div class="container mx-auto px-4 py-8">
<!-- START: Navigation -->
<nav class="flex items-center justify-between mb-8">
<div class="flex items-center">
<img src="assets/logos/logo_lightmode.svg" alt="Logo" class="h-6 md:h-5 lg:h-6 w-auto mr-4">
</div>
<ul class="flex space-x-6 text-white">
<li><a href="index.html" class="hover:text-gray-300">Home</a></li>
<li><a href="about.html" class="hover:text-gray-300">About</a></li>
<li><a href="features.html" class="hover:text-gray-300">Features</a></li>
<li><a href="contact.html" class="hover:text-gray-300">Contact</a></li>
</ul>
</nav>
<!-- END: Navigation -->
<!-- START: Main Content -->
<main>
<!-- PAGE_CONTENT -->
</main>
<!-- END: Main Content -->
<!-- START: Footer -->
<footer class="mt-12 text-center text-gray-400">
<p>&copy; 2025 Dark Mode Website. All rights reserved.</p>
</footer>
<!-- END: Footer -->
</div>
</body>
</html>

28
src/contact.html Normal file
View File

@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact - Dark Mode Website</title>
<link href="../dist/output.css" rel="stylesheet">
</head>
<body class="min-h-screen bg-black">
<div class="container mx-auto px-4 py-8">
<nav class="flex items-center justify-between mb-8">
<div class="flex items-center">
<img src="assets/logos/logo_lightmode.svg" alt="Logo" class="h-6 md:h-5 lg:h-6 w-auto mr-4">
</div>
<ul class="flex space-x-6 text-white">
<li><a href="index.html" class="hover:text-gray-300">Home</a></li>
<li><a href="about.html" class="hover:text-gray-300">About</a></li>
<li><a href="features.html" class="hover:text-gray-300">Features</a></li>
<li><a href="contact.html" class="hover:text-gray-300">Contact</a></li>
</ul>
</nav>
<header class="text-center mb-12">
<h1 class="text-4xl font-bold text-white mb-4">Contact Us</h1>
</header>
</div>
</body>
</html>

51
src/contact/img/README.md Normal file
View File

@@ -0,0 +1,51 @@
# Contact Page Images
This directory contains images specifically used in the contact page sections.
## Directory Structure
```
contact/
├── img/
│ ├── icons/ # Contact method icons (email, phone, etc.)
│ ├── location/ # Office location and map images
│ └── social/ # Social media icons and graphics
```
## Usage
When adding images to this directory:
1. Use descriptive filenames (e.g., `email-icon.svg`, `office-map.webp`)
2. Maintain consistent icon styles across contact methods
3. Ensure social media icons match brand guidelines
## Example
```html
<!-- In contact page -->
<img src="contact/img/icons/email-icon.svg" alt="Email Us">
```
## Recommended Image Formats
- Use SVG for icons and social media logos
- Use WebP or PNG for maps and location images
- Consider providing dark/light mode variants
- Optimize images for fast loading
## Image Guidelines
1. Contact Icons:
- Consistent style and size
- Clear, recognizable designs
- Both light and dark mode versions
2. Location Images:
- Clear, up-to-date maps
- Office exterior/interior photos
- Landmark reference points
3. Social Media:
- Official brand icons
- Consistent sizing
- High-quality formats

28
src/features.html Normal file
View File

@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Features - Dark Mode Website</title>
<link href="../dist/output.css" rel="stylesheet">
</head>
<body class="min-h-screen bg-black">
<div class="container mx-auto px-4 py-8">
<nav class="flex items-center justify-between mb-8">
<div class="flex items-center">
<img src="assets/logos/logo_lightmode.svg" alt="Logo" class="h-6 md:h-5 lg:h-6 w-auto mr-4">
</div>
<ul class="flex space-x-6 text-white">
<li><a href="index.html" class="hover:text-gray-300">Home</a></li>
<li><a href="about.html" class="hover:text-gray-300">About</a></li>
<li><a href="features.html" class="hover:text-gray-300">Features</a></li>
<li><a href="contact.html" class="hover:text-gray-300">Contact</a></li>
</ul>
</nav>
<header class="text-center mb-12">
<h1 class="text-4xl font-bold text-white mb-4">Features</h1>
</header>
</div>
</body>
</html>

51
src/features/img/README.md Normal file
View File

@@ -0,0 +1,51 @@
# Features Page Images
This directory contains images specifically used in the features page sections.
## Directory Structure
```
features/
├── img/
│ ├── icons/ # Feature icons and symbols
│ ├── screenshots/ # Product/feature screenshots
│ └── diagrams/ # Workflow and process diagrams
```
## Usage
When adding images to this directory:
1. Use descriptive filenames (e.g., `feature-analytics.svg`, `dashboard-demo.webp`)
2. Maintain consistent icon styles
3. Keep screenshots up-to-date with the latest UI
## Example
```html
<!-- In features page -->
<img src="features/img/icons/analytics-icon.svg" alt="Analytics Feature">
```
## Recommended Image Formats
- Use SVG for icons and diagrams
- Use WebP or PNG for screenshots
- Use optimized formats for interactive demonstrations
- Consider providing dark/light mode variants
## Image Guidelines
1. Feature Icons:
- Consistent style and color scheme
- Clear, recognizable designs
- Scalable vector formats when possible
2. Screenshots:
- Current product interface
- High-resolution captures
- Properly cropped and aligned
3. Diagrams:
- Clear workflow representations
- Consistent styling
- Easy to understand at a glance

93
src/fonts/Open Sauce One OFL.txt Normal file
View File

@@ -0,0 +1,93 @@
Copyright (c) 2020 The Open Sauce One Authors (https://github.com/marcologous/Open-Sauce-Fonts)
This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
http://scripts.sil.org/OFL
-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------
PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.
The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded,
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.
DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.
"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).
"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).
"Modified Version" refers to any derivative made by adding to, deleting,
or substituting -- in part or in whole -- any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.
"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.
PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:
1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself.
2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.
3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.
5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created
using the Font Software.
TERMINATION
This license becomes null and void if any of the above conditions are
not met.
DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
OTHER DEALINGS IN THE FONT SOFTWARE.

93
src/fonts/Open Sauce Sans OFL.txt Normal file
View File

@@ -0,0 +1,93 @@
Copyright (c) 2020 The Open Sauce Sans Authors (https://github.com/marcologous/Open-Sauce-Fonts)
This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
http://scripts.sil.org/OFL
-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------
PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.
The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded,
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.
DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.
"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).
"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).
"Modified Version" refers to any derivative made by adding to, deleting,
or substituting -- in part or in whole -- any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.
"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.
PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:
1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself.
2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.
3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.
5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created
using the Font Software.
TERMINATION
This license becomes null and void if any of the above conditions are
not met.
DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
OTHER DEALINGS IN THE FONT SOFTWARE.

93
src/fonts/Open Sauce Two OFL.txt Normal file
View File

@@ -0,0 +1,93 @@
Copyright (c) 2020 The Open Sauce Two Authors (https://github.com/marcologous/Open-Sauce-Fonts)
This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
http://scripts.sil.org/OFL
-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------
PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.
The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded,
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.
DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.
"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).
"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).
"Modified Version" refers to any derivative made by adding to, deleting,
or substituting -- in part or in whole -- any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.
"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.
PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:
1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself.
2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.
3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.
5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created
using the Font Software.
TERMINATION
This license becomes null and void if any of the above conditions are
not met.
DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
OTHER DEALINGS IN THE FONT SOFTWARE.

BIN
src/fonts/OpenSauceOne-Black.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/OpenSauceOne-BlackItalic.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/OpenSauceOne-Bold.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/OpenSauceOne-BoldItalic.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/OpenSauceOne-ExtraBold.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/OpenSauceOne-ExtraBoldItalic.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/OpenSauceOne-Italic.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/OpenSauceOne-Light.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/OpenSauceOne-LightItalic.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/OpenSauceOne-Medium.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/OpenSauceOne-MediumItalic.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/OpenSauceOne-Regular.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/OpenSauceOne-SemiBold.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/OpenSauceOne-SemiBoldItalic.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/OpenSauceSans-Black.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/OpenSauceSans-BlackItalic.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/OpenSauceSans-Bold.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/OpenSauceSans-BoldItalic.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/OpenSauceSans-ExtraBold.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/OpenSauceSans-ExtraBoldItalic.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/OpenSauceSans-Italic.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/OpenSauceSans-Light.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/OpenSauceSans-LightItalic.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/OpenSauceSans-Medium.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/OpenSauceSans-MediumItalic.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/OpenSauceSans-Regular.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/OpenSauceSans-SemiBold.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/OpenSauceSans-SemiBoldItalic.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/OpenSauceTwo-Black.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/OpenSauceTwo-BlackItalic.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/OpenSauceTwo-Bold.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/OpenSauceTwo-BoldItalic.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/OpenSauceTwo-ExtraBold.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/OpenSauceTwo-ExtraBoldItalic.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/OpenSauceTwo-Italic.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/OpenSauceTwo-Light.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/OpenSauceTwo-LightItalic.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/OpenSauceTwo-Medium.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/OpenSauceTwo-MediumItalic.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/OpenSauceTwo-Regular.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/OpenSauceTwo-SemiBold.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/OpenSauceTwo-SemiBoldItalic.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/open-sauce.zip Normal file
View File

Binary file not shown.

38
src/home/README.md Normal file
View File

@@ -0,0 +1,38 @@
# Home Page Partials
This directory contains partial HTML files that make up the home page content. Breaking the content into smaller, manageable pieces makes it easier to maintain and update specific sections of the home page.
## Files
1. `home1.html`
- Contains the welcome section
- Includes the main heading and subtitle
- Located at the top of the home page
2. `home2.html`
- Contains the features grid section
- Displays three feature cards in a responsive grid layout
- Located in the main content area
## Usage
These partials are included in `index.html` using HTML comments as markers:
```html
<!-- Include home1.html -->
<div id="home1">
<!-- @include home/home1.html -->
</div>
<!-- Include home2.html -->
<div id="home2">
<!-- @include home/home2.html -->
</div>
```
## Adding New Sections
To add a new section:
1. Create a new file (e.g., `home3.html`) in this directory
2. Add your section content to the file
3. Include it in `index.html` using the same pattern as above

41
src/home/img/README.md Normal file
View File

@@ -0,0 +1,41 @@
# Home Page Images
This directory contains images specifically used in the home page sections.
## Directory Structure
```
home/
├── img/
│ ├── hero/ # Images for hero/banner section
│ ├── features/ # Images for feature cards
│ └── backgrounds/ # Background images used in home sections
```
## Usage
When adding images to this directory:
1. Use descriptive filenames (e.g., `hero-banner.jpg`, `feature1-icon.svg`)
2. Optimize images for web use
3. Consider using different sizes for responsive design
## Example
```html
<!-- In home1.html or home2.html -->
<img src="home/img/features/feature1-icon.svg" alt="Feature 1">
```
## Recommended Image Formats
- Use SVG for icons and logos
- Use WebP or JPEG for photographs
- Use PNG for images requiring transparency
- Consider providing multiple sizes for responsive images
## Image Optimization
Before adding images:
1. Compress them appropriately
2. Consider providing multiple resolutions for responsive design
3. Ensure proper aspect ratios are maintained

BIN
src/home/img/backgrounds/home_bg.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

BIN
src/home/img/backgrounds/home_bg0.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
src/home/img/backgrounds/home_bg2.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
src/home/img/backgrounds/home_bg4.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 216 KiB

BIN
src/home/img/backgrounds/home_bg4_1.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 46 KiB

BIN
src/home/img/backgrounds/home_bg5.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
src/home/img/carousell/WEB4.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 53 KiB

BIN
src/home/img/carousell/data.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

BIN
src/home/img/carousell/human.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
src/home/img/carousell/one.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
src/home/img/creators.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 126 KiB

BIN
src/home/img/homescreen.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 95 KiB

246
src/index.html Normal file
View File

@@ -0,0 +1,246 @@
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dark Mode Tailwind Website</title>
<link href="../dist/output.css" rel="stylesheet">
<!-- Favicon -->
<link rel="icon" type="image/png" sizes="16x16" href="../src/assets/favicon/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="../src/assets/favicon/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="../src/assets/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="192x192" href="../src/assets/favicon/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="../src/assets/favicon/android-chrome-512x512.png">
</head>
<body class="min-h-screen bg-black">
<div class="container mx-auto px-4 py-8">
<nav class="flex items-center justify-between mb-8">
<div class="flex items-center">
<img src="../src/assets/logos/logo_lightmode.svg" alt="Logo" class="h-6 md:h-5 lg:h-6 w-auto mr-4">
</div>
<ul class="flex space-x-6 text-white">
<li><a href="index.html" class="hover:text-gray-300">Home</a></li>
<li><a href="about.html" class="hover:text-gray-300">About</a></li>
<li><a href="features.html" class="hover:text-gray-300">Features</a></li>
<li><a href="contact.html" class="hover:text-gray-300">Contact</a></li>
</ul>
</nav>
<!-- Home Section 1 -->
<header class="mb-12 relative min-h-[500px] flex items-center bg-cover bg-center" style="background-image: url('../src/home/img/backgrounds/home_bg.webp');">
<div class="absolute inset-0 bg-black bg-opacity-30"></div>
<div class="relative z-10 w-full py-48">
<div class="container mx-auto px-4 mb-4">
<div class="max-w-3xl">
<h1 class="hero-heading fade-up">Simplify Your Digital Life. Together.</h1>
<p class="hero-paragraph fade-up delay-200">Welcome to <span class="font-medium text-white">Circl</span> — an all-in-one platform that puts privacy, collaboration, and control in your hands.<br>
<span class="font-medium text-white">Simplify. Collaborate. Own.</span></p>
<button class="main-button fade-up delay-400">Join the waitlist</button>
</div>
</div>
</div>
</header>
</div>
<main>
<!-- Home Section 2 -->
<div class="container mx-auto px-4">
<section class="grid grid-cols-1 md:grid-cols-2 gap-8 relative min-h-[400px] bg-cover bg-center mb-12" style="background-image: url('../src/home/img/backgrounds/home_bg2.webp');">
<div class="absolute inset-0 bg-black bg-opacity-0"></div>
<div class="relative z-10 flex items-center justify-center">
<img src="../src/home/img/homescreen.webp" alt="Homescreen" class="w-full h-auto rounded-lg shadow-xl fade-up">
</div>
<div class="relative z-10 flex flex-col justify-center">
<h1 class="hero-heading-2 text-left fade-up delay-200">Replace the chaos of multiple tools with one collaborative system — shared workspaces for teams, projects, and even your personal life.</h1>
<p class="lg:mt-4 mt-2 fade-up delay-400"><a href="features.html" class="hero-paragraph hover:text-white transition-colors">→ <u>How Circl Works</a></u></p>
</div>
</section>
</div>
<!-- Home Section 3 -->
<section class="relative w-screen h-[600px] mb-12 overflow-hidden -mx-[50vw] left-[50%] right-[50%] relative">
<div class="carousel relative w-full h-[600px]">
<div class="carousel-slides absolute inset-0">
<div class="carousel-slide absolute inset-0 opacity-95 transition-opacity duration-3000">
<img src="../src/home/img/carousell/data.webp" alt="Data" class="w-full h-[600px] object-cover">
</div>
<div class="carousel-slide absolute inset-0 opacity-0 transition-opacity duration-3000">
<img src="../src/home/img/carousell/human.webp" alt="Human" class="w-full h-[600px] object-cover">
</div>
<div class="carousel-slide absolute inset-0 opacity-0 transition-opacity duration-3000">
<img src="../src/home/img/carousell/one.webp" alt="One" class="w-full h-[600px] object-cover">
</div>
<div class="carousel-slide absolute inset-0 opacity-0 transition-opacity duration-3000">
<img src="../src/home/img/carousell/WEB4.webp" alt="Web4" class="w-full h-[600px] object-cover">
</div>
</div>
<div class="absolute inset-0 bg-black bg-opacity-50 z-10"></div>
<div class="carousel-text absolute inset-0 flex items-center justify-center z-20">
<div class="carousel-text-slides relative w-full">
<div class="carousel-text-slide absolute inset-0 flex items-center justify-center opacity-95 transition-opacity duration-2000">
<h2 class="hero-heading text-center max-w-4xl px-4">Own Your Data</h2>
</div>
<div class="carousel-text-slide absolute inset-0 flex items-center justify-center opacity-0 transition-opacity duration-2000">
<h2 class="hero-heading text-center max-w-4xl px-4">Human-centered</h2>
</div>
<div class="carousel-text-slide absolute inset-0 flex items-center justify-center opacity-0 transition-opacity duration-2000">
<h2 class="hero-heading text-center max-w-4xl px-4">All in One</h2>
</div>
<div class="carousel-text-slide absolute inset-0 flex items-center justify-center opacity-0 transition-opacity duration-2000">
<h2 class="hero-heading text-center max-w-4xl px-4">Built on Web4</h2>
</div>
</div>
</div>
<div class="absolute bottom-8 left-0 right-0 flex justify-center gap-3 z-20">
<button class="w-3 h-3 rounded-full bg-white opacity-75 carousel-dot active" aria-label="Go to slide 1"></button>
<button class="w-3 h-3 rounded-full bg-white opacity-75 carousel-dot" aria-label="Go to slide 2"></button>
<button class="w-3 h-3 rounded-full bg-white opacity-75 carousel-dot" aria-label="Go to slide 3"></button>
<button class="w-3 h-3 rounded-full bg-white opacity-75 carousel-dot" aria-label="Go to slide 4"></button>
</div>
</div>
</section>
<!-- Home Section 4 -->
<section class="relative w-screen min-h-[800px] pt-24 pb-24 my-24 overflow-hidden -mx-[50vw] left-[50%] right-[50%] flex items-center justify-center bg-cover bg-center" style="background-image: url('../src/home/img/backgrounds/home_bg4_1.webp');">
<div class="absolute inset-0 bg-gradient-to-b from-black/80 via-black/70 to-black/80"></div>
<div class="relative z-10 w-full py-12">
<div class="circular-layout">
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-10">
<h1 class="hero-heading-2 text-center fade-up max-w-xl">Everything You Need in One <span class="font-medium">Circl.</span></h1>
</div>
<!-- Top -->
<div class="circular-button" style="top: -15%; left: 50%; transform: translate(-50%, -50%);">
<button class="pill-button" style="animation-delay: 0ms;">File Drive</button>
</div>
<!-- Top Right -->
<div class="circular-button" style="top: 10%; right: -10%; transform: translate(50%, -50%);">
<button class="pill-button" style="animation-delay: 200ms;">Circle Docs</button>
</div>
<!-- Right -->
<div class="circular-button" style="top: 50%; right: -25%; transform: translate(50%, -50%);">
<button class="pill-button" style="animation-delay: 400ms;">Secure VPN</button>
</div>
<!-- Bottom Right -->
<div class="circular-button" style="bottom: 5%; right: -10%; transform: translate(50%, 50%);">
<button class="pill-button" style="animation-delay: 600ms;">Video Call</button>
</div>
<!-- Bottom -->
<div class="circular-button" style="bottom: -10%; left: 50%; transform: translate(-50%, 50%);">
<button class="pill-button" style="animation-delay: 800ms;">Circl Mail</button>
</div>
<!-- Bottom Left -->
<div class="circular-button" style="bottom: 10%; left: -10%; transform: translate(-50%, 50%);">
<button class="pill-button" style="animation-delay: 1000ms;">Calendar</button>
</div>
<!-- Left -->
<div class="circular-button" style="top: 50%; left: -25%; transform: translate(-50%, -50%);">
<button class="pill-button" style="animation-delay: 1200ms;">AI Assistant</button>
</div>
<!-- upper left -->
<div class="circular-button" style="top: 10%; left: -15%; transform: translate(-50%, -50%);">
<button class="pill-button" style="animation-delay: 1200ms;">Project Board</button>
</div>
</div>
</div>
</section>
<div class="container mx-auto px-4">
</main>
<div class="container mx-auto px-4">
<footer class="mt-12 text-center text-gray-400">
<p class="fade-up">&copy; 2025 Dark Mode Website. All rights reserved.</p>
</footer>
</div>
<script>
const observerOptions = {
root: null,
rootMargin: '0px',
threshold: 0.1
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('appear');
observer.unobserve(entry.target); // Stop observing once animation is triggered
}
});
}, observerOptions);
// Observe all elements with animation classes
document.querySelectorAll('.fade-up, .fade-in, .scale-up, .slide-left').forEach(element => {
observer.observe(element);
});
</script>
<script>
// Carousel setup
let currentSlide = 0;
const slides = document.querySelectorAll('.carousel-slide');
const dots = document.querySelectorAll('.carousel-dot');
const totalSlides = slides.length;
// Get carousel texts
const texts = document.querySelectorAll('.carousel-text-slide');
function updateCarousel() {
slides.forEach((slide, index) => {
slide.style.opacity = index === currentSlide ? '0.95' : '0';
});
texts.forEach((text, index) => {
text.style.opacity = index === currentSlide ? '0.95' : '0';
});
dots.forEach((dot, index) => {
dot.style.opacity = index === currentSlide ? '0.95' : '0.5';
});
currentSlide = (currentSlide + 1) % totalSlides;
}
// Initial state
updateCarousel();
// Start autoplay with 4 second interval
setInterval(updateCarousel, 4000);
</script>
<script>
// Button animations
const buttonObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const button = entry.target;
// Get the animation delay from the style attribute
const delay = button.querySelector('.pill-button').style.animationDelay;
// Convert delay to milliseconds for setTimeout
const delayMs = parseInt(delay) || 0;
// Add appear class after the delay
setTimeout(() => {
button.style.opacity = '1';
// Keep the original transform values from the style attribute
const originalTransform = button.getAttribute('style').match(/transform: ([^;]+)/)[1];
button.style.transform = originalTransform;
}, delayMs);
buttonObserver.unobserve(button);
}
});
}, {
threshold: 0.1
});
// Observe all circular buttons
document.querySelectorAll('.circular-button').forEach(button => {
buttonObserver.observe(button);
});
</script>
</body>
</html>

159
src/input.css Normal file
View File

@@ -0,0 +1,159 @@
@font-face {
font-family: 'Open Sauce';
src: url('/src/fonts/OpenSauceOne-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Open Sauce';
src: url('/src/fonts/OpenSauceOne-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'Open Sauce';
src: url('/src/fonts/OpenSauceOne-Medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'Open Sauce';
src: url('/src/fonts/OpenSauceOne-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
body {
@apply bg-black text-white dark:bg-black dark:text-white font-opensauce;
}
}
@layer components {
.hero-heading {
@apply text-3xl md:text-4xl lg:text-5xl text-white mb-4;
font-weight: 500;
line-height: 1.3;
@apply md:leading-[1.2];
}
.hero-heading-2 {
@apply text-2xl md:text-3xl lg:text-5xl text-white mb-4;
font-weight: 300;
line-height: 1.3;
@apply md:leading-[1.2];
}
.hero-paragraph {
@apply text-base md:text-lg lg:text-xl text-gray-300 mb-8;
font-weight: 300;
line-height: 1.6;
@apply md:leading-[1.5];
}
.main-button {
@apply relative px-4 py-2 md:px-6 md:py-3 text-white text-base md:text-lg font-medium rounded-full bg-black border border-yellow-500 transition-all duration-300 before:absolute before:inset-0 before:rounded-full before:blur-lg before:bg-yellow-500 before:opacity-20 before:content-[''] before:z-[-1] hover:before:opacity-40 hover:before:blur-xl hover:scale-105 hover:shadow-yellow-500/70;
}
}
@layer components {
.starry-bg {
background-image:
radial-gradient(circle at center, transparent 0%, black 100%),
url("data:image/svg+xml,%3Csvg width='300' height='300' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='rgba(255,255,255,0.25)'%3E%3Ccircle cx='150' cy='150' r='1.2'/%3E%3Ccircle cx='60' cy='90' r='1.2'/%3E%3Ccircle cx='240' cy='210' r='1.2'/%3E%3Ccircle cx='90' cy='240' r='1.2'/%3E%3Ccircle cx='210' cy='60' r='1.2'/%3E%3Ccircle cx='120' cy='180' r='1.2'/%3E%3Ccircle cx='180' cy='120' r='1.2'/%3E%3Ccircle cx='30' cy='30' r='1.2'/%3E%3Ccircle cx='270' cy='270' r='1.2'/%3E%3Ccircle cx='45' cy='150' r='1.2'/%3E%3Ccircle cx='255' cy='150' r='1.2'/%3E%3Ccircle cx='150' cy='45' r='1.2'/%3E%3Ccircle cx='150' cy='255' r='1.2'/%3E%3C/g%3E%3C/svg%3E");
background-size: 100% 100%, 350px 350px;
}
.pill-button {
@apply px-5 py-2.5 rounded-[50px] bg-black text-white font-bold relative transition-all duration-500 transform hover:scale-105 text-base;
box-shadow: 0 0 60px rgba(234, 179, 8, 0.8),
0 0 120px rgba(234, 179, 8, 0.6),
0 0 180px rgba(234, 179, 8, 0.4);
border: 2px solid rgba(234, 179, 8, 0.9);
}
.circular-layout {
@apply relative w-[400px] h-[400px] md:w-[500px] md:h-[500px] mx-auto;
}
.circular-button {
@apply absolute opacity-0 z-20;
transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.circular-button {
transform: translate(-50%, -50%);
}
.circular-button[style*="right"] {
transform: translate(50%, -50%);
}
.circular-button[style*="bottom"] {
transform: translate(-50%, 50%);
}
.circular-button[style*="bottom"][style*="right"] {
transform: translate(50%, 50%);
}
}
@layer utilities {
.fade-up {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-up.appear {
opacity: 1;
transform: translateY(0);
}
.delay-200 {
transition-delay: 200ms;
}
.delay-400 {
transition-delay: 400ms;
}
.delay-600 {
transition-delay: 600ms;
}
.fade-in {
opacity: 0;
transition: opacity 0.6s ease-out;
}
.fade-in.appear {
opacity: 1;
}
.scale-up {
opacity: 0;
transform: scale(0.95);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.scale-up.appear {
opacity: 1;
transform: scale(1);
}
.slide-left {
opacity: 0;
transform: translateX(30px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.slide-left.appear {
opacity: 1;
transform: translateX(0);
}
}