├── .astro └── settings.json ├── .github ├── FUNDING.yml ├── actions │ └── build-template-action │ │ ├── action.yml │ │ └── script.sh └── workflows │ ├── deploy.yml │ ├── release.yml │ └── standard-version.yml ├── .gitignore ├── .npmrc ├── .vscode ├── extensions.json ├── launch.json └── settings.json ├── CHANGELOG.md ├── Dockerfile ├── LICENSE.md ├── README.md ├── astro.config.mjs ├── docker-compose.yml ├── nginx └── alpinejs.conf ├── package.json ├── pnpm-lock.yaml ├── postcss.config.cjs ├── public ├── api │ └── search.json └── img │ ├── bg │ ├── bg-token-bottom.png │ ├── bg-token-left.png │ ├── bg-token-top.png │ ├── blockchain-concept.svg │ ├── gradient-left-darker.png │ ├── gradient-left.png │ ├── gradient-right-darker.png │ ├── gradient-right.png │ ├── hero-square.svg │ ├── hero-square2.svg │ ├── hero-square3.svg │ ├── hero-square4.svg │ ├── layers.png │ └── solar.svg │ ├── clients │ ├── bitit.svg │ ├── coin.svg │ └── cryptomarket.svg │ ├── favicon.png │ ├── icons │ ├── chained.svg │ ├── chevron-left.svg │ ├── chevron-right.svg │ ├── compact.svg │ ├── cubes.svg │ ├── cubes2.svg │ ├── cubes3.svg │ ├── ico │ │ ├── bitbanner.svg │ │ ├── bitmining.svg │ │ ├── bitnetwork.svg │ │ ├── blockchain.svg │ │ ├── coins.svg │ │ ├── community.svg │ │ ├── development.svg │ │ ├── ico-2.svg │ │ ├── ico.svg │ │ ├── platform-launch.svg │ │ ├── presale.svg │ │ ├── security.svg │ │ └── wallet.svg │ ├── livechat.svg │ ├── mail.svg │ ├── phone.svg │ ├── play.svg │ ├── social │ │ ├── gitlab.svg │ │ ├── linkedin.svg │ │ ├── messenger.svg │ │ ├── slack.svg │ │ └── telegram.svg │ ├── stacked.svg │ ├── techpaper.svg │ └── whitepaper.svg │ ├── illustrations │ ├── blockchain-blocks.svg │ ├── bounty.svg │ ├── buildings.svg │ ├── charts.svg │ ├── crypto-mining.svg │ ├── ico-shares.svg │ ├── krypton-app.svg │ ├── krypton-platform.svg │ ├── krypton-token-network.svg │ ├── krypton-token.svg │ ├── krytpon-platform.svg │ ├── layers.png │ ├── layers.svg │ ├── media.svg │ ├── roadmap-end.svg │ ├── token-lock.svg │ ├── token-stack.svg │ ├── token.svg │ ├── tokens.svg │ └── world.svg │ ├── logo │ ├── bulma.svg │ ├── clients │ │ ├── gutwork.svg │ │ ├── infinite.svg │ │ ├── kromo.svg │ │ ├── systek.svg │ │ └── tribe.svg │ ├── cryptos.svg │ ├── cssninja-white.svg │ ├── cssninja.svg │ ├── krypton-gradient.svg │ ├── krypton.svg │ ├── made-with-bulma.png │ └── telegram.svg │ ├── media │ ├── post1.svg │ ├── post2.svg │ ├── post3.svg │ ├── post4.svg │ └── post5.svg │ └── team │ ├── a1.jpg │ ├── a2.jpg │ ├── a3.jpg │ ├── a4.jpg │ ├── a5.jpg │ ├── glenn.jpg │ ├── helen.jpg │ ├── john.jpg │ ├── john.svg │ ├── joshua.jpg │ ├── joshua.svg │ ├── lucy.jpg │ ├── lucy.svg │ ├── mike.jpg │ ├── mike.svg │ ├── sandra.jpg │ ├── sandra.svg │ ├── sara.jpg │ └── sara.svg └── src ├── components ├── BackToTop.astro ├── Footer.astro ├── Navbar.astro ├── NavbarClone.astro ├── Starfall.astro └── Timer.astro ├── env.d.ts ├── js ├── libs │ ├── components │ │ ├── backtotop │ │ │ └── backtotop.js │ │ ├── countdown │ │ │ └── countdown.js │ │ ├── index.js │ │ ├── like │ │ │ └── like.js │ │ ├── navbar │ │ │ └── navbar.js │ │ ├── pageloader │ │ │ └── pageloader.js │ │ ├── roadmap │ │ │ └── roadmap.js │ │ ├── sidebar │ │ │ └── sidebar.js │ │ └── tabs │ │ │ └── tabs.js │ └── utils │ │ ├── constants.js │ │ └── utils.js └── main.js ├── layouts ├── Default.astro └── Minimal.astro ├── pages ├── blog-single.astro ├── blog.astro ├── ico.astro ├── index.astro ├── roadmap.astro └── token.astro └── styles ├── abstracts ├── _animations.scss ├── _colors.scss └── _theme-default.scss ├── components ├── _backtotop.scss ├── _buttons.scss ├── _forms.scss └── _hamburger.scss ├── layout ├── _blog.scss ├── _faq.scss ├── _features.scss ├── _footer.scss ├── _hero.scss ├── _layout.scss ├── _pageloader.scss ├── _responsive.scss ├── _team.scss └── _timeline.scss ├── main.scss └── utilities └── _utils.scss /.astro/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "devToolbar": { 3 | "enabled": false 4 | }, 5 | "_variables": { 6 | "lastUpdateCheck": 1714258612656 7 | } 8 | } -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | github: cssninjaStudio 2 | -------------------------------------------------------------------------------- /.github/actions/build-template-action/action.yml: -------------------------------------------------------------------------------- 1 | name: 'build template' 2 | description: 'build template archive' 3 | # We declare that the action takes two arguments in input 4 | inputs: 5 | project: 6 | description: 'Project' 7 | required: true 8 | tag: 9 | description: 'Tag' 10 | required: true 11 | # And ouput one variable that will be available by the workflow 12 | outputs: 13 | filepath: 14 | description: "template archive path" 15 | value: ${{ steps.build.outputs.filepath }} 16 | runs: 17 | using: "composite" 18 | steps: 19 | # Ensure that zip is installed 20 | - run: sudo apt-get install zip 21 | shell: bash 22 | # Here we pass our inputs to the script.sh 23 | - id: build 24 | run: ${{ github.action_path }}/script.sh ${{inputs.project}} ${{inputs.tag}} 25 | shell: bash 26 | -------------------------------------------------------------------------------- /.github/actions/build-template-action/script.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | DIRECTORY=`dirname $0` 4 | INPUT_PROJECT=$1 5 | INPUT_TAG=$2 6 | 7 | if [ -z $INPUT_PROJECT ] 8 | then 9 | echo " missing" 10 | echo "Usage: ${0} " 11 | exit 1 12 | fi 13 | 14 | if [ -z $INPUT_TAG ] 15 | then 16 | echo " missing" 17 | echo "Usage: ${0} " 18 | exit 1 19 | fi 20 | 21 | # Set archive name from arguments 22 | ARCHIVE=template-${INPUT_PROJECT}-${INPUT_TAG}.zip 23 | 24 | echo "::group::building ${ARCHIVE}" 25 | echo "::debug::${ARCHIVE}" 26 | 27 | # zip sources template-${PROJECT}-${TAG}.zip 28 | zip -r ${ARCHIVE} . \ 29 | -x "dist/*" \ 30 | -x "node_modules/*" \ 31 | -x ".git/*" \ 32 | -x ".github/*" \ 33 | -x "docker-compose.yml" 34 | 35 | # Here we use echo to ouput the variables, usefull for to debug in github ui 36 | echo "$PWD" 37 | echo "$DIRECTORY" 38 | echo "$GITHUB_WORKSPACE" 39 | 40 | ls -lh $ARCHIVE 41 | 42 | echo "::endgroup::" 43 | 44 | echo "- ${INPUT_PROJECT^} ${INPUT_TAG} template built :rocket:" >> $GITHUB_STEP_SUMMARY 45 | 46 | # This step is important, it set the "filepath" output variable 47 | # Will be accessible in workflow 48 | echo "filepath=${ARCHIVE}" >> "$GITHUB_OUTPUT" 49 | -------------------------------------------------------------------------------- /.github/workflows/deploy.yml: -------------------------------------------------------------------------------- 1 | name: deploy 2 | on: 3 | workflow_dispatch: 4 | push: 5 | paths-ignore: 6 | - 'README.md' 7 | - 'CHANGELOG.md' 8 | - 'LICENSE.md' 9 | branches: 10 | - main 11 | 12 | concurrency: 13 | group: ${{ github.workflow }} 14 | cancel-in-progress: true 15 | 16 | jobs: 17 | docker-build: 18 | runs-on: ubuntu-latest 19 | 20 | steps: 21 | - uses: actions/checkout@v4 22 | - name: Set up dockertags 23 | run: | 24 | echo "dockertags=digisquad/cssninja.krypton-demo:latest" >> $GITHUB_ENV 25 | 26 | - name: Set up QEMU 27 | uses: docker/setup-qemu-action@v3 28 | 29 | - name: Set up Docker Buildx 30 | uses: docker/setup-buildx-action@v3 31 | 32 | - name: Login to DockerHub 33 | uses: docker/login-action@v3 34 | with: 35 | username: ${{ secrets.DOCKERHUB_USERNAME }} 36 | password: ${{ secrets.DOCKERHUB_TOKEN }} 37 | 38 | - name: Build and push 39 | id: docker_build 40 | uses: docker/build-push-action@v5 41 | timeout-minutes: 60 42 | with: 43 | push: true 44 | tags: ${{ env.dockertags }} 45 | cache-from: type=gha 46 | cache-to: type=gha,mode=max 47 | 48 | deploy: 49 | runs-on: ubuntu-latest 50 | needs: [docker-build] 51 | 52 | steps: 53 | - uses: actions/checkout@v4 54 | - name: Prepare 55 | uses: appleboy/ssh-action@master 56 | with: 57 | host: ${{ secrets.SSH_HOST }} 58 | username: ${{ secrets.SSH_USER }} 59 | key: ${{ secrets.SSH_PRIVATE_KEY }} 60 | script_stop: true 61 | script: mkdir -p ${{ secrets.HOST_DIRECTORY }} 62 | 63 | - name: Publish 64 | uses: appleboy/scp-action@master 65 | with: 66 | host: ${{ secrets.SSH_HOST }} 67 | username: ${{ secrets.SSH_USER }} 68 | key: ${{ secrets.SSH_PRIVATE_KEY }} 69 | source: docker-compose.yml 70 | target: ${{ secrets.HOST_DIRECTORY }} 71 | 72 | - name: Deploy 73 | uses: appleboy/ssh-action@master 74 | with: 75 | host: ${{ secrets.SSH_HOST }} 76 | username: ${{ secrets.SSH_USER }} 77 | key: ${{ secrets.SSH_PRIVATE_KEY }} 78 | script_stop: true 79 | script: | 80 | cd ${{ secrets.HOST_DIRECTORY }} 81 | docker compose pull 82 | docker compose up -d --force-recreate --remove-orphans 83 | -------------------------------------------------------------------------------- /.github/workflows/release.yml: -------------------------------------------------------------------------------- 1 | name: release 2 | on: 3 | # Automatically run when a semver tag is pushed 4 | push: 5 | tags: 6 | - 'v*.*.*' 7 | 8 | jobs: 9 | release: 10 | runs-on: ubuntu-latest 11 | 12 | steps: 13 | # Checkout action retreive the source (git clone) 14 | - uses: actions/checkout@v4 15 | with: 16 | fetch-depth: 0 # needed to retreive all git history 17 | 18 | # Enable corepack, note that nodejs is already installed 19 | - run: corepack enable 20 | 21 | # Setup pnpm with cache 22 | - uses: actions/setup-node@v4 23 | with: 24 | node-version: 20 25 | cache: "pnpm" 26 | 27 | # Compute tag and capitalized product name 28 | - id: meta 29 | name: release meta 30 | run: | 31 | project=${GITHUB_REPOSITORY#*/} 32 | echo "PROJECT=${project}" >> "$GITHUB_OUTPUT" 33 | echo "PROJECT_CAP=${project^}" >> "$GITHUB_OUTPUT" 34 | echo "TAG=${GITHUB_REF#refs/tags/}" >> "$GITHUB_OUTPUT" 35 | 36 | # This is where we generate releases assets. 37 | # It use a github action in the current directory 38 | # which contains a shell script to create the archive. 39 | # The archive path is stored in the output action 40 | - id: build_template 41 | name: build release template 42 | uses: ./.github/actions/build-template-action 43 | with: 44 | tag: ${{ steps.meta.outputs.TAG }} 45 | project: ${{ steps.meta.outputs.PROJECT }} 46 | 47 | # We re-generate the changelog using a subset of standard-version 48 | # The content is generated in a temp /CHANGELOG_RELEASE.md file 49 | # It is used to generate the body of the github release 50 | - id: changelog 51 | name: release changelog 52 | run: | 53 | pnpm dlx conventional-changelog-cli -p conventionalcommits -r 2 -o ${{ github.workspace }}/CHANGELOG_RELEASE.md 54 | cat ${{ github.workspace }}/CHANGELOG_RELEASE.md 55 | 56 | # Prepare the draft github release 57 | - id: create_release 58 | name: create github draft release 59 | uses: softprops/action-gh-release@v1 60 | with: 61 | # Use outputs from meta and changelog 62 | tag_name: ${{ steps.meta.outputs.TAG }} 63 | name: ${{ steps.meta.outputs.PROJECT_CAP }} ${{ steps.meta.outputs.TAG }} 64 | body_path: ${{ github.workspace }}/CHANGELOG_RELEASE.md 65 | prerelease: false 66 | # The draft is required to allow file upload 67 | draft: true 68 | fail_on_unmatched_files: true 69 | # Here we bind files built by custom actions to the release 70 | files: | 71 | ${{ github.workspace }}/${{ steps.build_template.outputs.filepath }} 72 | 73 | # Publish the github release 74 | # Dojo listen to those events 75 | - name: publish github draft release 76 | uses: eregon/publish-release@v1 77 | env: 78 | GITHUB_TOKEN: ${{ secrets.APP_GITHUB_TOKEN }} 79 | with: 80 | release_id: ${{ steps.create_release.outputs.id }} 81 | -------------------------------------------------------------------------------- /.github/workflows/standard-version.yml: -------------------------------------------------------------------------------- 1 | name: standard-version 2 | on: 3 | # Allow to be manually dispatched 4 | workflow_dispatch: 5 | inputs: 6 | options: 7 | description: 'standard-version options' 8 | # Allow to be run via webhooks (Dojo will use this) 9 | repository_dispatch: 10 | types: [standard-version] 11 | 12 | jobs: 13 | standard-version: 14 | runs-on: ubuntu-latest 15 | 16 | steps: 17 | # Checkout action retreive the source (git clone) 18 | - uses: actions/checkout@v4 19 | with: 20 | fetch-depth: 0 # needed to retreive all git history 21 | token: ${{ secrets.APP_GITHUB_TOKEN }} 22 | 23 | # Enable corepack, note that nodejs is already installed 24 | - run: corepack enable 25 | 26 | # Setup pnpm with cache 27 | - uses: actions/setup-node@v4 28 | with: 29 | node-version: 20 30 | cache: "pnpm" 31 | 32 | # Run "standard-version", which may create a new tag 33 | - run: | 34 | git config user.name digisquad-bot 35 | git config user.email admin@digisquad.io 36 | pnpm dlx standard-version ${{ github.event.inputs.options }} 37 | git push --follow-tags origin main 38 | env: 39 | GITHUB_TOKEN: ${{ secrets.APP_GITHUB_TOKEN }} 40 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # build output 2 | dist/ 3 | .output/ 4 | *.zip 5 | 6 | # dependencies 7 | node_modules/ 8 | 9 | # logs 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | pnpm-debug.log* 14 | 15 | 16 | # environment variables 17 | .env 18 | .env.production 19 | 20 | # macOS-specific files 21 | .DS_Store 22 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | # Disable npm warning about missing optional peer dependencies 2 | strict-peer-dependencies=false 3 | legacy-peer-deps=true 4 | # Force pnpm to install all deep dependencies in node_modules 5 | shamefully-hoist=true 6 | # Use v6 lockfile format 7 | use-lockfile-v6=true -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["astro-build.astro-vscode"], 3 | "unwantedRecommendations": [] 4 | } 5 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.2.0", 3 | "configurations": [ 4 | { 5 | "command": "./node_modules/.bin/astro dev", 6 | "name": "Development server", 7 | "request": "launch", 8 | "type": "node-terminal" 9 | } 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "astro.typescript.enabled": false 3 | } -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. 4 | 5 | ## [5.3.0](https://github.com/cssninjaStudio/krypton/compare/v5.2.0...v5.3.0) (2024-04-27) 6 | 7 | 8 | ### Features 9 | 10 | * migrate to iconify-icon, update dependencies ([6b63ecd](https://github.com/cssninjaStudio/krypton/commit/6b63ecdb5efc1c7026ec54bd85790ae335f63d8a)) 11 | 12 | ## [5.2.0](https://github.com/cssninjaStudio/krypton/compare/v5.1.0...v5.2.0) (2023-09-17) 13 | 14 | 15 | ### Features 16 | 17 | * migrate to Astro 3 ([c8172e0](https://github.com/cssninjaStudio/krypton/commit/c8172e0c798ee30a41a29adbe7548cf3952da113)) 18 | * use variable fonts from fontsources ([a8c9e31](https://github.com/cssninjaStudio/krypton/commit/a8c9e314cbab34002d3c218235e3293f9c0d0b57)) 19 | 20 | 21 | ### Bug Fixes 22 | 23 | * upgrade engines to node 18 and pnpm 8 ([80f1d32](https://github.com/cssninjaStudio/krypton/commit/80f1d3240775ab45e57c76921d568959e61fcddc)) 24 | 25 | ## [5.1.0](https://github.com/cssninjaStudio/krypton/compare/v5.0.0...v5.1.0) (2023-05-03) 26 | 27 | 28 | ### Features 29 | 30 | * upgrade dependencies + add unplugin-fonts ([c6647a9](https://github.com/cssninjaStudio/krypton/commit/c6647a9e21c5aaa8682d1e47cb803ac52811a139)) 31 | * upgrade to Astro v2 ([ae531d7](https://github.com/cssninjaStudio/krypton/commit/ae531d7c1d6cdafb4e3dea5a9b39c36fa6021729)) 32 | 33 | ## [5.0.0](https://github.com/cssninjaStudio/krypton/compare/v4.1.2...v5.0.0) (2023-01-06) 34 | 35 | 36 | ### ⚠ BREAKING CHANGES 37 | 38 | * migrate from gulp to astro 39 | 40 | ### Features 41 | 42 | * migrate from gulp to astro ([366ac64](https://github.com/cssninjaStudio/krypton/commit/366ac64771162216f1acd847a37729abe07278a9)) 43 | 44 | ### [4.1.2](https://github.com/cssninjaStudio/krypton/compare/v4.1.1...v4.1.2) (2022-10-28) 45 | 46 | 47 | ### Features 48 | 49 | * update dependencies ([b0b93aa](https://github.com/cssninjaStudio/krypton/commit/b0b93aad9835c91f3926f45140982ef46d1e8d05)) 50 | * update dependencies ([7ff5420](https://github.com/cssninjaStudio/krypton/commit/7ff542020297465eb33495e56fa99499c0f4e330)) 51 | * update dependencies and worflows ([d0cebff](https://github.com/cssninjaStudio/krypton/commit/d0cebffaca621c32e399ea0859ef5c97b1d724d2)) 52 | * update discord url ([63b49bb](https://github.com/cssninjaStudio/krypton/commit/63b49bb402616725b501959812ac061f355ce6da)) 53 | * updated dependencies, load bulma from node modules ([e6f023f](https://github.com/cssninjaStudio/krypton/commit/e6f023f767b57c304b9ad4c3726b1e043c6acccf)) 54 | -------------------------------------------------------------------------------- /Dockerfile: -------------------------------------------------------------------------------- 1 | FROM bitnami/node:20 AS build 2 | WORKDIR /app 3 | 4 | RUN corepack enable 5 | 6 | COPY package.json ./ 7 | COPY pnpm-lock.yaml ./ 8 | COPY .npmrc ./ 9 | RUN pnpm install --frozen-lockfile 10 | 11 | COPY . . 12 | RUN pnpm build 13 | 14 | 15 | FROM bitnami/nginx:1.25 AS prod 16 | WORKDIR /app 17 | 18 | COPY --from=build /app/dist . 19 | COPY ./nginx/alpinejs.conf /opt/bitnami/nginx/conf/server_blocks/nginx.conf -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018-2023 cssninjaStudio 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![Krypton Screenshot](https://media.cssninja.io/products/krypton/product.png "Krypton") 2 | 3 | # 👋 Krypton 4 | 5 | > Krypton is a free ICO / Crypto template built by [cssninjaStudio](https://cssninja.io). 6 | 7 | [![cssninja-discord](https://img.shields.io/discord/785473098069311510?label=join%20us%20on%20discord&color=6944EC)](https://go.cssninja.io/discord) 8 | 9 | ## ✌️ preview 10 | 11 | Check out the live demo by clicking [here](https://krypton.cssninja.io). 12 | Krypton is built with [Astro](https://astro.build), [Bulma](https://bulma.io) and [Alpine JS](https://github.com/alpinejs/alpine). 13 | 14 | ## 👍 Features 15 | 16 | * Astro v4.x 17 | * Bulma 0.9.x 18 | * Alpine v3.x 19 | 20 | ## 👌 Usage 21 | 22 | 1. Install Depedencies 23 | 24 | ```sh 25 | pnpm i 26 | ``` 27 | 28 | 2. Run in dev mode 29 | 30 | ```sh 31 | pnpm dev 32 | ``` 33 | 34 | 3. Or build source 35 | 36 | ```sh 37 | pnpm build 38 | ``` 39 | 40 | ## 🍔 Issues 41 | 42 | If you've found an issue or a bug, you can report it in the issues section of this repository. Please try to follow these simple guidelines to report your issue: 43 | 44 | * Issue definition 45 | * Expected behaviour 46 | * Actual behaviour 47 | * steps to reproduce 48 | * Already tried fixes (if relevant) 49 | 50 | ## 🎉 More 51 | 52 | Find more premium website and app templates on [Css Ninja](https://cssninja.io/). 53 | 54 | ## 🚀 About Us 55 | 56 | Css Ninja is a web design studio. We build handcrafted and polished templates that will give some hype to your startup or to your next project. 57 | -------------------------------------------------------------------------------- /astro.config.mjs: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'astro/config'; 2 | 3 | // https://astro.build/config 4 | export default defineConfig({}); 5 | -------------------------------------------------------------------------------- /docker-compose.yml: -------------------------------------------------------------------------------- 1 | networks: 2 | cssninja-services: 3 | external: true 4 | 5 | services: 6 | krypton-demo: 7 | image: digisquad/cssninja.krypton-demo:latest 8 | networks: 9 | - cssninja-services 10 | restart: 'unless-stopped' 11 | labels: 12 | traefik.enable: true 13 | traefik.docker.network: 'cssninja-services' 14 | traefik.http.routers.krypton-demo.entrypoints: 'http' 15 | traefik.http.routers.krypton-demo.rule: 'Host(`krypton.${HOST:-127.0.0.1.nip.io}`)' 16 | traefik.http.routers.krypton-demo.middlewares: 'https-redirect@file' 17 | traefik.http.services.krypton-demo-https.loadbalancer.server.port: 8080 18 | traefik.http.routers.krypton-demo-https.rule: 'Host(`krypton.${HOST:-127.0.0.1.nip.io}`)' 19 | traefik.http.routers.krypton-demo-https.tls: true 20 | traefik.http.routers.krypton-demo-https.entrypoints: 'https' 21 | traefik.http.routers.krypton-demo-https.tls.certresolver: 'http' 22 | 23 | -------------------------------------------------------------------------------- /nginx/alpinejs.conf: -------------------------------------------------------------------------------- 1 | server { 2 | listen 8080; 3 | server_name 0.0.0.0; 4 | error_page 500 502 503 504 /50x.html; 5 | charset utf-8; 6 | proxy_hide_header X-Frame-Options; 7 | add_header X-Frame-Options ""; 8 | 9 | # Media: images, icons, video, audio, HTC 10 | location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc|woff2)$ { 11 | expires 1y; 12 | access_log off; 13 | add_header Cache-Control "public"; 14 | } 15 | 16 | # CSS and Javascript 17 | location ~* \.(?:css|js)$ { 18 | expires 1y; 19 | access_log off; 20 | add_header Cache-Control "public"; 21 | } 22 | 23 | # Allow performing POST requests on static JSON files 24 | location ~* \.(?:json)$ { 25 | error_page 405 =200 $uri; 26 | } 27 | 28 | location / { 29 | root /app; 30 | index index.html; 31 | try_files $uri $uri/ /index.html; 32 | } 33 | 34 | location = /50x.html { 35 | root /usr/share/nginx/html; 36 | } 37 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "krypton", 3 | "version": "5.3.0", 4 | "description": "Krypton - Astro + Bulma + Alpine JS ICO/Crypto Starter", 5 | "type": "module", 6 | "private": true, 7 | "author": { 8 | "name": "cssninjaStudio (https://cssninja.io)" 9 | }, 10 | "engines": { 11 | "node": ">=18", 12 | "pnpm": ">=8" 13 | }, 14 | "license": "MIT", 15 | "scripts": { 16 | "dev": "astro dev", 17 | "start": "astro dev", 18 | "build": "run-s build:*", 19 | "build:astro": "astro build", 20 | "preview": "astro preview", 21 | "astro": "astro" 22 | }, 23 | "dependencies": { 24 | "@alpinejs/collapse": "3.13.10", 25 | "@alpinejs/intersect": "3.13.10", 26 | "@alpinejs/persist": "3.13.10", 27 | "alpinejs": "3.13.10", 28 | "astro": "4.7.0", 29 | "bulma": "0.9.4", 30 | "bulma-css-vars": "0.8.0", 31 | "fuse.js": "7.0.0", 32 | "iconify-icon": "^2.0.0", 33 | "js-datepicker": "5.18.2", 34 | "lozad": "1.16.0", 35 | "moment": "2.30.1", 36 | "notyf": "3.10.0", 37 | "particles.js": "2.0.0", 38 | "plyr": "3.7.8", 39 | "sass": "1.75.0", 40 | "simplebar": "6.2.5" 41 | }, 42 | "devDependencies": { 43 | "@fontsource-variable/cabin": "^5.0.19", 44 | "@fontsource-variable/open-sans": "^5.0.29", 45 | "autoprefixer": "10.4.19", 46 | "npm-run-all": "4.1.5" 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /postcss.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | require('autoprefixer'), 4 | ], 5 | }; 6 | -------------------------------------------------------------------------------- /public/api/search.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "type": "user", 4 | "title": "Mary Smith", 5 | "content": "Los Angeles", 6 | "photoUrl": "/img/avatars/42.jpg", 7 | "color": null 8 | }, 9 | { 10 | "type": "user", 11 | "title": "Janet Briggs", 12 | "content": "Los Angeles", 13 | "photoUrl": null, 14 | "color": "#ff9b17" 15 | }, 16 | { 17 | "type": "user", 18 | "title": "Paul Walters", 19 | "content": "San Francisco", 20 | "photoUrl": null, 21 | "color": "#3bf486" 22 | }, 23 | { 24 | "type": "user", 25 | "title": "Kristie Wang", 26 | "content": "San Francisco", 27 | "photoUrl": null, 28 | "color": "#7938f4" 29 | }, 30 | { 31 | "type": "user", 32 | "title": "Sheryl Allen", 33 | "content": "San Diego", 34 | "photoUrl": null, 35 | "color": "#e73c7e" 36 | }, 37 | { 38 | "type": "user", 39 | "title": "Alex Walsh", 40 | "content": "Irvine", 41 | "photoUrl": "/img/avatars/2.jpg", 42 | "color": null 43 | }, 44 | { 45 | "type": "user", 46 | "title": "Adam Klinsky", 47 | "content": "Irvine", 48 | "photoUrl": "/img/avatars/6.jpg", 49 | "color": null 50 | }, 51 | { 52 | "type": "user", 53 | "title": "Christina Xi", 54 | "content": "Mystic Falls", 55 | "photoUrl": "/img/avatars/5.jpg", 56 | "color": null 57 | }, 58 | { 59 | "type": "user", 60 | "title": "Tommy Brucks", 61 | "content": "Los Angeles", 62 | "photoUrl": "/img/avatars/7.jpg", 63 | "color": null 64 | }, 65 | { 66 | "type": "user", 67 | "title": "Sally Mitchells", 68 | "content": "San Francisco", 69 | "photoUrl": "/img/avatars/21.jpg", 70 | "color": null 71 | }, 72 | { 73 | "type": "file", 74 | "title": "INV-49465", 75 | "content": "Pending invoice", 76 | "photoUrl": "/img/icons/1.svg", 77 | "color": null 78 | }, 79 | { 80 | "type": "file", 81 | "title": "INV-49789", 82 | "content": "Pending invoice", 83 | "photoUrl": "/img/icons/1.svg", 84 | "color": null 85 | }, 86 | { 87 | "type": "transaction", 88 | "title": "TR-8066", 89 | "content": "Transaction amount: + $874.99", 90 | "photoUrl": "/img/icons/2.svg", 91 | "color": null 92 | }, 93 | { 94 | "type": "transaction", 95 | "title": "TR-8067", 96 | "content": "Transaction amount: + $1042.99", 97 | "photoUrl": "/img/icons/2.svg", 98 | "color": null 99 | }, 100 | { 101 | "type": "transaction", 102 | "title": "TR-9078", 103 | "content": "Transaction amount: - $2500.00", 104 | "photoUrl": "/img/icons/2.svg", 105 | "color": null 106 | }, 107 | { 108 | "type": "transaction", 109 | "title": "TR-8066", 110 | "content": "Transaction amount: - $139.99", 111 | "photoUrl": "/img/icons/2.svg", 112 | "color": null 113 | } 114 | ] -------------------------------------------------------------------------------- /public/img/bg/bg-token-bottom.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cssninjaStudio/krypton/9826929fae84f21ee27dc5874be45084de953f72/public/img/bg/bg-token-bottom.png -------------------------------------------------------------------------------- /public/img/bg/bg-token-left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cssninjaStudio/krypton/9826929fae84f21ee27dc5874be45084de953f72/public/img/bg/bg-token-left.png -------------------------------------------------------------------------------- /public/img/bg/bg-token-top.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cssninjaStudio/krypton/9826929fae84f21ee27dc5874be45084de953f72/public/img/bg/bg-token-top.png -------------------------------------------------------------------------------- /public/img/bg/gradient-left-darker.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cssninjaStudio/krypton/9826929fae84f21ee27dc5874be45084de953f72/public/img/bg/gradient-left-darker.png -------------------------------------------------------------------------------- /public/img/bg/gradient-left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cssninjaStudio/krypton/9826929fae84f21ee27dc5874be45084de953f72/public/img/bg/gradient-left.png -------------------------------------------------------------------------------- /public/img/bg/gradient-right-darker.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cssninjaStudio/krypton/9826929fae84f21ee27dc5874be45084de953f72/public/img/bg/gradient-right-darker.png -------------------------------------------------------------------------------- /public/img/bg/gradient-right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cssninjaStudio/krypton/9826929fae84f21ee27dc5874be45084de953f72/public/img/bg/gradient-right.png -------------------------------------------------------------------------------- /public/img/bg/hero-square.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/bg/hero-square2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/bg/hero-square3.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/bg/layers.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cssninjaStudio/krypton/9826929fae84f21ee27dc5874be45084de953f72/public/img/bg/layers.png -------------------------------------------------------------------------------- /public/img/clients/bitit.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/clients/coin.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/clients/cryptomarket.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cssninjaStudio/krypton/9826929fae84f21ee27dc5874be45084de953f72/public/img/favicon.png -------------------------------------------------------------------------------- /public/img/icons/chevron-left.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/icons/chevron-right.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/icons/ico/bitbanner.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/icons/ico/bitnetwork.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/icons/ico/blockchain.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/icons/ico/coins.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/icons/ico/community.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/icons/ico/development.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/icons/ico/ico.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/icons/ico/platform-launch.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/icons/ico/presale.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/icons/ico/security.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/icons/livechat.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/icons/mail.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/icons/phone.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/icons/play.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/icons/social/gitlab.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/icons/social/linkedin.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/icons/social/messenger.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/icons/social/slack.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/icons/social/telegram.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/icons/techpaper.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/icons/whitepaper.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/illustrations/ico-shares.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/illustrations/layers.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cssninjaStudio/krypton/9826929fae84f21ee27dc5874be45084de953f72/public/img/illustrations/layers.png -------------------------------------------------------------------------------- /public/img/logo/bulma.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/logo/clients/gutwork.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/logo/clients/infinite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/logo/clients/kromo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/logo/clients/systek.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/logo/clients/tribe.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/logo/cryptos.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/logo/cssninja-white.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/logo/cssninja.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/logo/krypton-gradient.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/logo/krypton.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/logo/made-with-bulma.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cssninjaStudio/krypton/9826929fae84f21ee27dc5874be45084de953f72/public/img/logo/made-with-bulma.png -------------------------------------------------------------------------------- /public/img/logo/telegram.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/media/post4.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/media/post5.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/team/a1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cssninjaStudio/krypton/9826929fae84f21ee27dc5874be45084de953f72/public/img/team/a1.jpg -------------------------------------------------------------------------------- /public/img/team/a2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cssninjaStudio/krypton/9826929fae84f21ee27dc5874be45084de953f72/public/img/team/a2.jpg -------------------------------------------------------------------------------- /public/img/team/a3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cssninjaStudio/krypton/9826929fae84f21ee27dc5874be45084de953f72/public/img/team/a3.jpg -------------------------------------------------------------------------------- /public/img/team/a4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cssninjaStudio/krypton/9826929fae84f21ee27dc5874be45084de953f72/public/img/team/a4.jpg -------------------------------------------------------------------------------- /public/img/team/a5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cssninjaStudio/krypton/9826929fae84f21ee27dc5874be45084de953f72/public/img/team/a5.jpg -------------------------------------------------------------------------------- /public/img/team/glenn.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cssninjaStudio/krypton/9826929fae84f21ee27dc5874be45084de953f72/public/img/team/glenn.jpg -------------------------------------------------------------------------------- /public/img/team/helen.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cssninjaStudio/krypton/9826929fae84f21ee27dc5874be45084de953f72/public/img/team/helen.jpg -------------------------------------------------------------------------------- /public/img/team/john.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cssninjaStudio/krypton/9826929fae84f21ee27dc5874be45084de953f72/public/img/team/john.jpg -------------------------------------------------------------------------------- /public/img/team/john.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/team/joshua.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cssninjaStudio/krypton/9826929fae84f21ee27dc5874be45084de953f72/public/img/team/joshua.jpg -------------------------------------------------------------------------------- /public/img/team/joshua.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/team/lucy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cssninjaStudio/krypton/9826929fae84f21ee27dc5874be45084de953f72/public/img/team/lucy.jpg -------------------------------------------------------------------------------- /public/img/team/lucy.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/team/mike.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cssninjaStudio/krypton/9826929fae84f21ee27dc5874be45084de953f72/public/img/team/mike.jpg -------------------------------------------------------------------------------- /public/img/team/mike.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/team/sandra.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cssninjaStudio/krypton/9826929fae84f21ee27dc5874be45084de953f72/public/img/team/sandra.jpg -------------------------------------------------------------------------------- /public/img/team/sandra.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/team/sara.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cssninjaStudio/krypton/9826929fae84f21ee27dc5874be45084de953f72/public/img/team/sara.jpg -------------------------------------------------------------------------------- /public/img/team/sara.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/BackToTop.astro: -------------------------------------------------------------------------------- 1 |
12 | 13 | 14 | 15 | 16 | 28 | 29 | 30 | 31 |
32 | -------------------------------------------------------------------------------- /src/components/Footer.astro: -------------------------------------------------------------------------------- 1 | 74 | -------------------------------------------------------------------------------- /src/components/Navbar.astro: -------------------------------------------------------------------------------- 1 | 2 | 69 | 70 | -------------------------------------------------------------------------------- /src/components/NavbarClone.astro: -------------------------------------------------------------------------------- 1 | 2 | 69 | 70 | -------------------------------------------------------------------------------- /src/components/Starfall.astro: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 | -------------------------------------------------------------------------------- /src/components/Timer.astro: -------------------------------------------------------------------------------- 1 | 2 |
    3 |
  • 4 |
    00
    5 |
    Days
    6 |
    • 7 |
  • 8 |
    00
    9 |
    Hours
    10 |
    • 11 |
  • 12 |
    00
    13 |
    Minutes
    14 |
    • 15 |
  • 16 |
    00
    17 |
    Seconds
    18 |
    • 19 |
20 | -------------------------------------------------------------------------------- /src/env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// -------------------------------------------------------------------------------- /src/js/libs/components/backtotop/backtotop.js: -------------------------------------------------------------------------------- 1 | const progressWrap = document.querySelector(".progress-wrap"); 2 | const progressPath = document.querySelector(".progress-wrap path"); 3 | const pathLength = progressPath.getTotalLength(); 4 | 5 | export function initBackToTop() { 6 | return { 7 | scrolled: false, 8 | height: 60, 9 | mobileOpen: false, 10 | setup() { 11 | progressPath.style.transition = progressPath.style.WebkitTransition = "none"; 12 | progressPath.style.strokeDasharray = pathLength + " " + pathLength; 13 | progressPath.style.strokeDashoffset = pathLength; 14 | progressPath.getBoundingClientRect(); 15 | progressPath.style.transition = progressPath.style.WebkitTransition = "stroke-dashoffset 10ms linear"; 16 | 17 | }, 18 | updateProgress() { 19 | let scrollValue = window.scrollY; 20 | let scrollHeight = document.body.scrollHeight - window.innerHeight; 21 | let progress = pathLength - (scrollValue * pathLength) / scrollHeight; 22 | progressPath.style.strokeDashoffset = progress; 23 | //console.log(scrollValue); 24 | }, 25 | scroll() { 26 | this.updateProgress(); 27 | let scrollValue = window.scrollY; 28 | if (scrollValue >= this.height) { 29 | this.scrolled = true; 30 | progressWrap.classList.add('active-progress'); 31 | } else { 32 | this.scrolled = false; 33 | progressWrap.classList.remove('active-progress'); 34 | } 35 | }, 36 | scrollTop() { 37 | window.scrollTo({top: 0, behavior: 'smooth'}); 38 | return false; 39 | } 40 | }; 41 | } 42 | -------------------------------------------------------------------------------- /src/js/libs/components/countdown/countdown.js: -------------------------------------------------------------------------------- 1 | export function initCountdown() { 2 | return { 3 | setupCountdown() { 4 | // Set the date we're counting down to 5 | var countDownDate = new Date("Oct 24, 2024 07:00:00").getTime(); 6 | 7 | // Update the count down every 1 second 8 | var x = setInterval(function () { 9 | // Get todays date and time 10 | var now = new Date().getTime(); 11 | 12 | // Find the distance between now and the count down date 13 | var distance = countDownDate - now; 14 | 15 | var d = document; 16 | var daysElement = d.querySelector("#days-count"); 17 | var hoursElement = d.querySelector("#hours-count"); 18 | var minutesElement = d.querySelector("#minutes-count"); 19 | var secondsElement = d.querySelector("#seconds-count"); 20 | 21 | // Time calculations for days, hours, minutes and seconds 22 | daysElement.textContent = Math.floor(distance / (1000 * 60 * 60 * 24)); 23 | hoursElement.textContent = Math.floor( 24 | (distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60) 25 | ); 26 | minutesElement.textContent = Math.floor( 27 | (distance % (1000 * 60 * 60)) / (1000 * 60) 28 | ); 29 | secondsElement.textContent = Math.floor( 30 | (distance % (1000 * 60)) / 1000 31 | ); 32 | 33 | // If the count down is finished, write some text 34 | if (distance < 0) { 35 | clearInterval(x); 36 | } 37 | }, 1000); 38 | }, 39 | }; 40 | } 41 | -------------------------------------------------------------------------------- /src/js/libs/components/index.js: -------------------------------------------------------------------------------- 1 | import { initNavbar } from './navbar/navbar'; 2 | import { initTabs } from './tabs/tabs'; 3 | import { initCountdown } from './countdown/countdown'; 4 | import { initRoadmap } from './roadmap/roadmap'; 5 | import { initLike } from './like/like'; 6 | import { initBackToTop } from './backtotop/backtotop'; 7 | 8 | window.initNavbar = initNavbar; 9 | window.initTabs = initTabs; 10 | window.initCountdown = initCountdown; 11 | window.initRoadmap = initRoadmap; 12 | window.initLike = initLike; 13 | window.initBackToTop = initBackToTop; -------------------------------------------------------------------------------- /src/js/libs/components/like/like.js: -------------------------------------------------------------------------------- 1 | export function initLike() { 2 | return { 3 | isLiked: false, 4 | likeAction() { 5 | this.isLiked = !this.isLiked; 6 | } 7 | } 8 | } -------------------------------------------------------------------------------- /src/js/libs/components/navbar/navbar.js: -------------------------------------------------------------------------------- 1 | export function initNavbar() { 2 | return { 3 | scrolled: false, 4 | height: 60, 5 | mobileOpen: false, 6 | scroll() { 7 | let scrollValue = window.scrollY; 8 | if (scrollValue >= this.height) { 9 | this.scrolled = true; 10 | } else { 11 | this.scrolled = false; 12 | } 13 | this.searchExpanded = false; 14 | }, 15 | 16 | openMobileMenu() { 17 | this.mobileOpen = !this.mobileOpen; 18 | }, 19 | 20 | openSidebar() { 21 | this.$store.app.isSiderbarOpen = true; 22 | console.log('clicked'); 23 | } 24 | } 25 | } -------------------------------------------------------------------------------- /src/js/libs/components/pageloader/pageloader.js: -------------------------------------------------------------------------------- 1 | export function initPageLoader() { 2 | window.addEventListener('load', () => { 3 | const pageloader = document.getElementById('pageloader'); 4 | const infraloader = document.getElementById('infraloader'); 5 | pageloader.classList.toggle('is-active'); 6 | var pageloaderTimeout = setTimeout(function () { 7 | infraloader.classList.remove('is-active'); 8 | pageloader.classList.toggle('is-active'); 9 | clearTimeout(pageloaderTimeout); 10 | }, 1200); 11 | }) 12 | } -------------------------------------------------------------------------------- /src/js/libs/components/roadmap/roadmap.js: -------------------------------------------------------------------------------- 1 | export function initRoadmap() { 2 | return { 3 | setupRoadmap() { 4 | // define variables 5 | const items = document.querySelectorAll(".main-timeline li"); 6 | 7 | // check if an element is in viewport 8 | // http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport 9 | function isElementInViewport(el) { 10 | let rect = el.getBoundingClientRect(); 11 | return ( 12 | rect.top >= 0 && 13 | rect.left >= 0 && 14 | rect.bottom <= 15 | (window.innerHeight || document.documentElement.clientHeight) && 16 | rect.right <= 17 | (window.innerWidth || document.documentElement.clientWidth) 18 | ); 19 | } 20 | 21 | function callbackFunc() { 22 | for (var i = 0; i < items.length; i++) { 23 | if (isElementInViewport(items[i])) { 24 | items[i].classList.add("in-view"); 25 | } 26 | } 27 | } 28 | 29 | // listen for events 30 | window.addEventListener("load", callbackFunc); 31 | window.addEventListener("resize", callbackFunc); 32 | window.addEventListener("scroll", callbackFunc); 33 | }, 34 | }; 35 | } 36 | -------------------------------------------------------------------------------- /src/js/libs/components/sidebar/sidebar.js: -------------------------------------------------------------------------------- 1 | export function initSidebar() { 2 | return { 3 | closeSidebar() { 4 | this.$store.app.isSiderbarOpen = false; 5 | }, 6 | 7 | openedMenu: "", 8 | openSidebarMenu(e) { 9 | const target = e.target.getAttribute("data-menu"); 10 | if (this.openedMenu === target) { 11 | this.openedMenu = ""; 12 | } else { 13 | this.openedMenu = target; 14 | } 15 | }, 16 | }; 17 | } 18 | -------------------------------------------------------------------------------- /src/js/libs/components/tabs/tabs.js: -------------------------------------------------------------------------------- 1 | export function initTabs() { 2 | return { 3 | activeTab: 'tab-1', 4 | switchTabs(e) { 5 | const tab = e.target.getAttribute('data-tab'); 6 | this.activeTab = tab; 7 | }, 8 | 9 | setupCountdown() { 10 | // Set the date we're counting down to 11 | var countDownDate = new Date().getTime() + (1000 * 60 * 60 * 24 * 7); // 7 days from now 12 | 13 | // Update the count down every 1 second 14 | var x = setInterval(function () { 15 | // Get todays date and time 16 | var now = new Date().getTime(); 17 | 18 | // Find the distance between now and the count down date 19 | var distance = countDownDate - now; 20 | 21 | var d = document; 22 | var daysElement = d.querySelector("#days-count"); 23 | var hoursElement = d.querySelector("#hours-count"); 24 | var minutesElement = d.querySelector("#minutes-count"); 25 | var secondsElement = d.querySelector("#seconds-count"); 26 | 27 | // Time calculations for days, hours, minutes and seconds 28 | daysElement.textContent = Math.floor(distance / (1000 * 60 * 60 * 24)); 29 | hoursElement.textContent = Math.floor( 30 | (distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60) 31 | ); 32 | minutesElement.textContent = Math.floor( 33 | (distance % (1000 * 60 * 60)) / (1000 * 60) 34 | ); 35 | secondsElement.textContent = Math.floor( 36 | (distance % (1000 * 60)) / 1000 37 | ); 38 | 39 | // If the count down is finished, write some text 40 | if (distance < 0) { 41 | clearInterval(x); 42 | } 43 | }, 1000); 44 | }, 45 | } 46 | } -------------------------------------------------------------------------------- /src/js/libs/utils/constants.js: -------------------------------------------------------------------------------- 1 | export const env = 'development'; 2 | 3 | export const themeColors = { 4 | primary: '#00d1b2', 5 | secondary: '#00d1b2', 6 | accent: '#797bf2', 7 | success: '#06d6a0', 8 | info: '#039BE5', 9 | warning: '#faae42', 10 | danger: '#FF7273', 11 | purple: '#8269B2', 12 | blue: '#37C3FF', 13 | green: '#93E088', 14 | lightGreen: '#63ebc6', 15 | yellow: '#FFD66E', 16 | orange: '#FFA981', 17 | lightText: '#a2a5b9', 18 | fadeGrey: '#ededed', 19 | chartGrey: '#B0BDC4' 20 | } 21 | 22 | 23 | export const demoData = [ 24 | { 25 | "type": "user", 26 | "title": "Helen Miller", 27 | "content": "Los Angeles", 28 | "photoUrl": "/img/avatars/helen.jpg", 29 | "color": null 30 | }, 31 | { 32 | "type": "user", 33 | "title": "Shane Black", 34 | "content": "Los Angeles", 35 | "photoUrl": null, 36 | "color": "#7F00FF" 37 | }, 38 | { 39 | "type": "user", 40 | "title": "Daniella Walters", 41 | "content": "San Francisco", 42 | "photoUrl": null, 43 | "color": "#00D1B2" 44 | }, 45 | { 46 | "type": "user", 47 | "title": "Elie Daniels", 48 | "content": "Dublin", 49 | "photoUrl": "/img/avatars/elie.jpg", 50 | "color": null 51 | }, 52 | { 53 | "type": "user", 54 | "title": "Terry Daniels", 55 | "content": "New York", 56 | "photoUrl": "/img/avatars/terry.jpg", 57 | "color": null 58 | }, 59 | { 60 | "type": "user", 61 | "title": "Alex Walsh", 62 | "content": "Irvine", 63 | "photoUrl": "/img/avatars/alex.jpg", 64 | "color": null 65 | }, 66 | { 67 | "type": "user", 68 | "title": "Adam Klinsky", 69 | "content": "Seattle", 70 | "photoUrl": "/img/avatars/eric.png", 71 | "color": null 72 | }, 73 | { 74 | "type": "user", 75 | "title": "Christina Song", 76 | "content": "Mystic Falls", 77 | "photoUrl": "/img/avatars/christina.jpg", 78 | "color": null 79 | }, 80 | { 81 | "type": "user", 82 | "title": "Barry Smithers", 83 | "content": "Miami", 84 | "photoUrl": "/img/avatars/barry.jpg", 85 | "color": null 86 | }, 87 | { 88 | "type": "user", 89 | "title": "Sally Mitchells", 90 | "content": "San Francisco", 91 | "photoUrl": "/img/avatars/sally.jpg", 92 | "color": null 93 | }, 94 | { 95 | "type": "file", 96 | "title": "INV-49465", 97 | "content": "Pending invoice", 98 | "photoUrl": "/img/icons/search/1.svg", 99 | "color": null 100 | }, 101 | { 102 | "type": "file", 103 | "title": "INV-49789", 104 | "content": "Pending invoice", 105 | "photoUrl": "/img/icons/search/1.svg", 106 | "color": null 107 | }, 108 | { 109 | "type": "transaction", 110 | "title": "TR-8066", 111 | "content": "Transaction amount: + $874.99", 112 | "photoUrl": "/img/icons/search/2.svg", 113 | "color": null 114 | }, 115 | { 116 | "type": "transaction", 117 | "title": "TR-8067", 118 | "content": "Transaction amount: + $1042.99", 119 | "photoUrl": "/img/icons/search/2.svg", 120 | "color": null 121 | }, 122 | { 123 | "type": "transaction", 124 | "title": "TR-9078", 125 | "content": "Transaction amount: - $2500.00", 126 | "photoUrl": "/img/icons/search/2.svg", 127 | "color": null 128 | }, 129 | { 130 | "type": "transaction", 131 | "title": "TR-8066", 132 | "content": "Transaction amount: - $139.99", 133 | "photoUrl": "/img/icons/search/2.svg", 134 | "color": null 135 | }, 136 | { 137 | "type": "company", 138 | "title": "Airbnb", 139 | "content": "Company", 140 | "photoUrl": "/img/logo/companies/airbnb.svg", 141 | "color": null 142 | }, 143 | { 144 | "type": "company", 145 | "title": "Tesla", 146 | "content": "Company", 147 | "photoUrl": "/img/logo/companies/tesla.svg", 148 | "color": null 149 | }, 150 | { 151 | "type": "company", 152 | "title": "Alfresco", 153 | "content": "Company", 154 | "photoUrl": "/img/logo/companies/alfresco.svg", 155 | "color": null 156 | }, 157 | { 158 | "type": "company", 159 | "title": "H&M", 160 | "content": "Company", 161 | "photoUrl": "/img/logo/companies/hm.svg", 162 | "color": null 163 | }, 164 | { 165 | "type": "company", 166 | "title": "Amazon", 167 | "content": "Company", 168 | "photoUrl": "/img/logo/companies/amazon.svg", 169 | "color": null 170 | } 171 | ] -------------------------------------------------------------------------------- /src/js/libs/utils/utils.js: -------------------------------------------------------------------------------- 1 | export function getUrlParams(param) { 2 | const queryString = window.location.search; 3 | const urlParams = new URLSearchParams(queryString); 4 | return urlParams.get(param); 5 | } 6 | 7 | export function insertBgImages() { 8 | const targets = document.querySelectorAll("[data-background]"); 9 | 10 | if (typeof targets != "undefined" && targets != null) { 11 | for (var i = 0, len = targets.length; i < len; i++) { 12 | let bgUrl = targets[i].getAttribute("data-background"); 13 | targets[i].style.backgroundSize = "cover"; 14 | targets[i].style.backgroundRepeat = "no-repeat"; 15 | targets[i].style.backgroundImage = `url(${bgUrl})`; 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/js/main.js: -------------------------------------------------------------------------------- 1 | //Alpine JS and plugins import 2 | import Alpine from "alpinejs" 3 | import intersect from "@alpinejs/intersect" 4 | import collapse from '@alpinejs/collapse'; 5 | import persist from "@alpinejs/persist"; 6 | import 'iconify-icon'; 7 | 8 | window.Alpine = Alpine 9 | //Init intersect plugin 10 | Alpine.plugin(intersect) 11 | //Init persist plugin 12 | Alpine.plugin(persist) 13 | //Init collapse plugin 14 | Alpine.plugin(collapse); 15 | //Init store 16 | Alpine.store("app", { 17 | init() { 18 | this.isDark = window.matchMedia("(prefers-color-scheme: dark)").matches; 19 | }, 20 | isDark: Alpine.$persist(false), 21 | isSidebarOpened: Alpine.$persist(false), 22 | isSidebarOpenedMobile: Alpine.$persist(false), 23 | activeSidebar: Alpine.$persist("dashboard"), 24 | activeSidebarMenu: Alpine.$persist(""), 25 | isPanelOpened: Alpine.$persist(false), 26 | }); 27 | //Start Alpine JS 28 | Alpine.start() 29 | 30 | import { insertBgImages } from "./libs/utils/utils"; 31 | import "./libs/components"; 32 | 33 | document.onreadystatechange = function () { 34 | if (document.readyState == "complete") { 35 | 36 | //Switch backgrounds 37 | const changeBackgrounds = insertBgImages(); 38 | } 39 | }; 40 | -------------------------------------------------------------------------------- /src/layouts/Default.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import { ViewTransitions } from 'astro:transitions' 3 | import Footer from '../components/Footer.astro' 4 | import BackToTop from '../components/BackToTop.astro' 5 | 6 | import '@fontsource-variable/cabin/index.css' 7 | import '@fontsource-variable/open-sans/index.css' 8 | 9 | import 'simplebar/dist/simplebar.min.css' 10 | import '../styles/main.scss' 11 | const { title } = Astro.props 12 | --- 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | Krypton {'- ' + title} 21 | 22 | 23 | 24 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 |