Repository: cssninjaStudio/krypton Branch: main Commit: 9826929fae84 Files: 68 Total size: 280.8 KB Directory structure: gitextract_i519kzgk/ ├── .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 ├── postcss.config.cjs ├── public/ │ └── api/ │ └── search.json └── 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 ================================================ FILE CONTENTS ================================================ ================================================ FILE: .astro/settings.json ================================================ { "devToolbar": { "enabled": false }, "_variables": { "lastUpdateCheck": 1714258612656 } } ================================================ FILE: .github/FUNDING.yml ================================================ github: cssninjaStudio ================================================ FILE: .github/actions/build-template-action/action.yml ================================================ name: 'build template' description: 'build template archive' # We declare that the action takes two arguments in input inputs: project: description: 'Project' required: true tag: description: 'Tag' required: true # And ouput one variable that will be available by the workflow outputs: filepath: description: "template archive path" value: ${{ steps.build.outputs.filepath }} runs: using: "composite" steps: # Ensure that zip is installed - run: sudo apt-get install zip shell: bash # Here we pass our inputs to the script.sh - id: build run: ${{ github.action_path }}/script.sh ${{inputs.project}} ${{inputs.tag}} shell: bash ================================================ FILE: .github/actions/build-template-action/script.sh ================================================ #!/bin/bash DIRECTORY=`dirname $0` INPUT_PROJECT=$1 INPUT_TAG=$2 if [ -z $INPUT_PROJECT ] then echo " missing" echo "Usage: ${0} " exit 1 fi if [ -z $INPUT_TAG ] then echo " missing" echo "Usage: ${0} " exit 1 fi # Set archive name from arguments ARCHIVE=template-${INPUT_PROJECT}-${INPUT_TAG}.zip echo "::group::building ${ARCHIVE}" echo "::debug::${ARCHIVE}" # zip sources template-${PROJECT}-${TAG}.zip zip -r ${ARCHIVE} . \ -x "dist/*" \ -x "node_modules/*" \ -x ".git/*" \ -x ".github/*" \ -x "docker-compose.yml" # Here we use echo to ouput the variables, usefull for to debug in github ui echo "$PWD" echo "$DIRECTORY" echo "$GITHUB_WORKSPACE" ls -lh $ARCHIVE echo "::endgroup::" echo "- ${INPUT_PROJECT^} ${INPUT_TAG} template built :rocket:" >> $GITHUB_STEP_SUMMARY # This step is important, it set the "filepath" output variable # Will be accessible in workflow echo "filepath=${ARCHIVE}" >> "$GITHUB_OUTPUT" ================================================ FILE: .github/workflows/deploy.yml ================================================ name: deploy on: workflow_dispatch: push: paths-ignore: - 'README.md' - 'CHANGELOG.md' - 'LICENSE.md' branches: - main concurrency: group: ${{ github.workflow }} cancel-in-progress: true jobs: docker-build: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - name: Set up dockertags run: | echo "dockertags=digisquad/cssninja.krypton-demo:latest" >> $GITHUB_ENV - name: Set up QEMU uses: docker/setup-qemu-action@v3 - name: Set up Docker Buildx uses: docker/setup-buildx-action@v3 - name: Login to DockerHub uses: docker/login-action@v3 with: username: ${{ secrets.DOCKERHUB_USERNAME }} password: ${{ secrets.DOCKERHUB_TOKEN }} - name: Build and push id: docker_build uses: docker/build-push-action@v5 timeout-minutes: 60 with: push: true tags: ${{ env.dockertags }} cache-from: type=gha cache-to: type=gha,mode=max deploy: runs-on: ubuntu-latest needs: [docker-build] steps: - uses: actions/checkout@v4 - name: Prepare uses: appleboy/ssh-action@master with: host: ${{ secrets.SSH_HOST }} username: ${{ secrets.SSH_USER }} key: ${{ secrets.SSH_PRIVATE_KEY }} script_stop: true script: mkdir -p ${{ secrets.HOST_DIRECTORY }} - name: Publish uses: appleboy/scp-action@master with: host: ${{ secrets.SSH_HOST }} username: ${{ secrets.SSH_USER }} key: ${{ secrets.SSH_PRIVATE_KEY }} source: docker-compose.yml target: ${{ secrets.HOST_DIRECTORY }} - name: Deploy uses: appleboy/ssh-action@master with: host: ${{ secrets.SSH_HOST }} username: ${{ secrets.SSH_USER }} key: ${{ secrets.SSH_PRIVATE_KEY }} script_stop: true script: | cd ${{ secrets.HOST_DIRECTORY }} docker compose pull docker compose up -d --force-recreate --remove-orphans ================================================ FILE: .github/workflows/release.yml ================================================ name: release on: # Automatically run when a semver tag is pushed push: tags: - 'v*.*.*' jobs: release: runs-on: ubuntu-latest steps: # Checkout action retreive the source (git clone) - uses: actions/checkout@v4 with: fetch-depth: 0 # needed to retreive all git history # Enable corepack, note that nodejs is already installed - run: corepack enable # Setup pnpm with cache - uses: actions/setup-node@v4 with: node-version: 20 cache: "pnpm" # Compute tag and capitalized product name - id: meta name: release meta run: | project=${GITHUB_REPOSITORY#*/} echo "PROJECT=${project}" >> "$GITHUB_OUTPUT" echo "PROJECT_CAP=${project^}" >> "$GITHUB_OUTPUT" echo "TAG=${GITHUB_REF#refs/tags/}" >> "$GITHUB_OUTPUT" # This is where we generate releases assets. # It use a github action in the current directory # which contains a shell script to create the archive. # The archive path is stored in the output action - id: build_template name: build release template uses: ./.github/actions/build-template-action with: tag: ${{ steps.meta.outputs.TAG }} project: ${{ steps.meta.outputs.PROJECT }} # We re-generate the changelog using a subset of standard-version # The content is generated in a temp /CHANGELOG_RELEASE.md file # It is used to generate the body of the github release - id: changelog name: release changelog run: | pnpm dlx conventional-changelog-cli -p conventionalcommits -r 2 -o ${{ github.workspace }}/CHANGELOG_RELEASE.md cat ${{ github.workspace }}/CHANGELOG_RELEASE.md # Prepare the draft github release - id: create_release name: create github draft release uses: softprops/action-gh-release@v1 with: # Use outputs from meta and changelog tag_name: ${{ steps.meta.outputs.TAG }} name: ${{ steps.meta.outputs.PROJECT_CAP }} ${{ steps.meta.outputs.TAG }} body_path: ${{ github.workspace }}/CHANGELOG_RELEASE.md prerelease: false # The draft is required to allow file upload draft: true fail_on_unmatched_files: true # Here we bind files built by custom actions to the release files: | ${{ github.workspace }}/${{ steps.build_template.outputs.filepath }} # Publish the github release # Dojo listen to those events - name: publish github draft release uses: eregon/publish-release@v1 env: GITHUB_TOKEN: ${{ secrets.APP_GITHUB_TOKEN }} with: release_id: ${{ steps.create_release.outputs.id }} ================================================ FILE: .github/workflows/standard-version.yml ================================================ name: standard-version on: # Allow to be manually dispatched workflow_dispatch: inputs: options: description: 'standard-version options' # Allow to be run via webhooks (Dojo will use this) repository_dispatch: types: [standard-version] jobs: standard-version: runs-on: ubuntu-latest steps: # Checkout action retreive the source (git clone) - uses: actions/checkout@v4 with: fetch-depth: 0 # needed to retreive all git history token: ${{ secrets.APP_GITHUB_TOKEN }} # Enable corepack, note that nodejs is already installed - run: corepack enable # Setup pnpm with cache - uses: actions/setup-node@v4 with: node-version: 20 cache: "pnpm" # Run "standard-version", which may create a new tag - run: | git config user.name digisquad-bot git config user.email admin@digisquad.io pnpm dlx standard-version ${{ github.event.inputs.options }} git push --follow-tags origin main env: GITHUB_TOKEN: ${{ secrets.APP_GITHUB_TOKEN }} ================================================ FILE: .gitignore ================================================ # build output dist/ .output/ *.zip # dependencies node_modules/ # logs npm-debug.log* yarn-debug.log* yarn-error.log* pnpm-debug.log* # environment variables .env .env.production # macOS-specific files .DS_Store ================================================ FILE: .npmrc ================================================ # Disable npm warning about missing optional peer dependencies strict-peer-dependencies=false legacy-peer-deps=true # Force pnpm to install all deep dependencies in node_modules shamefully-hoist=true # Use v6 lockfile format use-lockfile-v6=true ================================================ FILE: .vscode/extensions.json ================================================ { "recommendations": ["astro-build.astro-vscode"], "unwantedRecommendations": [] } ================================================ FILE: .vscode/launch.json ================================================ { "version": "0.2.0", "configurations": [ { "command": "./node_modules/.bin/astro dev", "name": "Development server", "request": "launch", "type": "node-terminal" } ] } ================================================ FILE: .vscode/settings.json ================================================ { "astro.typescript.enabled": false } ================================================ FILE: CHANGELOG.md ================================================ # Changelog 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. ## [5.3.0](https://github.com/cssninjaStudio/krypton/compare/v5.2.0...v5.3.0) (2024-04-27) ### Features * migrate to iconify-icon, update dependencies ([6b63ecd](https://github.com/cssninjaStudio/krypton/commit/6b63ecdb5efc1c7026ec54bd85790ae335f63d8a)) ## [5.2.0](https://github.com/cssninjaStudio/krypton/compare/v5.1.0...v5.2.0) (2023-09-17) ### Features * migrate to Astro 3 ([c8172e0](https://github.com/cssninjaStudio/krypton/commit/c8172e0c798ee30a41a29adbe7548cf3952da113)) * use variable fonts from fontsources ([a8c9e31](https://github.com/cssninjaStudio/krypton/commit/a8c9e314cbab34002d3c218235e3293f9c0d0b57)) ### Bug Fixes * upgrade engines to node 18 and pnpm 8 ([80f1d32](https://github.com/cssninjaStudio/krypton/commit/80f1d3240775ab45e57c76921d568959e61fcddc)) ## [5.1.0](https://github.com/cssninjaStudio/krypton/compare/v5.0.0...v5.1.0) (2023-05-03) ### Features * upgrade dependencies + add unplugin-fonts ([c6647a9](https://github.com/cssninjaStudio/krypton/commit/c6647a9e21c5aaa8682d1e47cb803ac52811a139)) * upgrade to Astro v2 ([ae531d7](https://github.com/cssninjaStudio/krypton/commit/ae531d7c1d6cdafb4e3dea5a9b39c36fa6021729)) ## [5.0.0](https://github.com/cssninjaStudio/krypton/compare/v4.1.2...v5.0.0) (2023-01-06) ### ⚠ BREAKING CHANGES * migrate from gulp to astro ### Features * migrate from gulp to astro ([366ac64](https://github.com/cssninjaStudio/krypton/commit/366ac64771162216f1acd847a37729abe07278a9)) ### [4.1.2](https://github.com/cssninjaStudio/krypton/compare/v4.1.1...v4.1.2) (2022-10-28) ### Features * update dependencies ([b0b93aa](https://github.com/cssninjaStudio/krypton/commit/b0b93aad9835c91f3926f45140982ef46d1e8d05)) * update dependencies ([7ff5420](https://github.com/cssninjaStudio/krypton/commit/7ff542020297465eb33495e56fa99499c0f4e330)) * update dependencies and worflows ([d0cebff](https://github.com/cssninjaStudio/krypton/commit/d0cebffaca621c32e399ea0859ef5c97b1d724d2)) * update discord url ([63b49bb](https://github.com/cssninjaStudio/krypton/commit/63b49bb402616725b501959812ac061f355ce6da)) * updated dependencies, load bulma from node modules ([e6f023f](https://github.com/cssninjaStudio/krypton/commit/e6f023f767b57c304b9ad4c3726b1e043c6acccf)) ================================================ FILE: Dockerfile ================================================ FROM bitnami/node:20 AS build WORKDIR /app RUN corepack enable COPY package.json ./ COPY pnpm-lock.yaml ./ COPY .npmrc ./ RUN pnpm install --frozen-lockfile COPY . . RUN pnpm build FROM bitnami/nginx:1.25 AS prod WORKDIR /app COPY --from=build /app/dist . COPY ./nginx/alpinejs.conf /opt/bitnami/nginx/conf/server_blocks/nginx.conf ================================================ FILE: LICENSE.md ================================================ MIT License Copyright (c) 2018-2023 cssninjaStudio Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ================================================ FILE: README.md ================================================ ![Krypton Screenshot](https://media.cssninja.io/products/krypton/product.png "Krypton") # 👋 Krypton > Krypton is a free ICO / Crypto template built by [cssninjaStudio](https://cssninja.io). [![cssninja-discord](https://img.shields.io/discord/785473098069311510?label=join%20us%20on%20discord&color=6944EC)](https://go.cssninja.io/discord) ## ✌️ preview Check out the live demo by clicking [here](https://krypton.cssninja.io). Krypton is built with [Astro](https://astro.build), [Bulma](https://bulma.io) and [Alpine JS](https://github.com/alpinejs/alpine). ## 👍 Features * Astro v4.x * Bulma 0.9.x * Alpine v3.x ## 👌 Usage 1. Install Depedencies ```sh pnpm i ``` 2. Run in dev mode ```sh pnpm dev ``` 3. Or build source ```sh pnpm build ``` ## 🍔 Issues 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: * Issue definition * Expected behaviour * Actual behaviour * steps to reproduce * Already tried fixes (if relevant) ## 🎉 More Find more premium website and app templates on [Css Ninja](https://cssninja.io/). ## 🚀 About Us 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. ================================================ FILE: astro.config.mjs ================================================ import { defineConfig } from 'astro/config'; // https://astro.build/config export default defineConfig({}); ================================================ FILE: docker-compose.yml ================================================ networks: cssninja-services: external: true services: krypton-demo: image: digisquad/cssninja.krypton-demo:latest networks: - cssninja-services restart: 'unless-stopped' labels: traefik.enable: true traefik.docker.network: 'cssninja-services' traefik.http.routers.krypton-demo.entrypoints: 'http' traefik.http.routers.krypton-demo.rule: 'Host(`krypton.${HOST:-127.0.0.1.nip.io}`)' traefik.http.routers.krypton-demo.middlewares: 'https-redirect@file' traefik.http.services.krypton-demo-https.loadbalancer.server.port: 8080 traefik.http.routers.krypton-demo-https.rule: 'Host(`krypton.${HOST:-127.0.0.1.nip.io}`)' traefik.http.routers.krypton-demo-https.tls: true traefik.http.routers.krypton-demo-https.entrypoints: 'https' traefik.http.routers.krypton-demo-https.tls.certresolver: 'http' ================================================ FILE: nginx/alpinejs.conf ================================================ server { listen 8080; server_name 0.0.0.0; error_page 500 502 503 504 /50x.html; charset utf-8; proxy_hide_header X-Frame-Options; add_header X-Frame-Options ""; # Media: images, icons, video, audio, HTC location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc|woff2)$ { expires 1y; access_log off; add_header Cache-Control "public"; } # CSS and Javascript location ~* \.(?:css|js)$ { expires 1y; access_log off; add_header Cache-Control "public"; } # Allow performing POST requests on static JSON files location ~* \.(?:json)$ { error_page 405 =200 $uri; } location / { root /app; index index.html; try_files $uri $uri/ /index.html; } location = /50x.html { root /usr/share/nginx/html; } } ================================================ FILE: package.json ================================================ { "name": "krypton", "version": "5.3.0", "description": "Krypton - Astro + Bulma + Alpine JS ICO/Crypto Starter", "type": "module", "private": true, "author": { "name": "cssninjaStudio (https://cssninja.io)" }, "engines": { "node": ">=18", "pnpm": ">=8" }, "license": "MIT", "scripts": { "dev": "astro dev", "start": "astro dev", "build": "run-s build:*", "build:astro": "astro build", "preview": "astro preview", "astro": "astro" }, "dependencies": { "@alpinejs/collapse": "3.13.10", "@alpinejs/intersect": "3.13.10", "@alpinejs/persist": "3.13.10", "alpinejs": "3.13.10", "astro": "4.7.0", "bulma": "0.9.4", "bulma-css-vars": "0.8.0", "fuse.js": "7.0.0", "iconify-icon": "^2.0.0", "js-datepicker": "5.18.2", "lozad": "1.16.0", "moment": "2.30.1", "notyf": "3.10.0", "particles.js": "2.0.0", "plyr": "3.7.8", "sass": "1.75.0", "simplebar": "6.2.5" }, "devDependencies": { "@fontsource-variable/cabin": "^5.0.19", "@fontsource-variable/open-sans": "^5.0.29", "autoprefixer": "10.4.19", "npm-run-all": "4.1.5" } } ================================================ FILE: postcss.config.cjs ================================================ module.exports = { plugins: [ require('autoprefixer'), ], }; ================================================ FILE: public/api/search.json ================================================ [ { "type": "user", "title": "Mary Smith", "content": "Los Angeles", "photoUrl": "/img/avatars/42.jpg", "color": null }, { "type": "user", "title": "Janet Briggs", "content": "Los Angeles", "photoUrl": null, "color": "#ff9b17" }, { "type": "user", "title": "Paul Walters", "content": "San Francisco", "photoUrl": null, "color": "#3bf486" }, { "type": "user", "title": "Kristie Wang", "content": "San Francisco", "photoUrl": null, "color": "#7938f4" }, { "type": "user", "title": "Sheryl Allen", "content": "San Diego", "photoUrl": null, "color": "#e73c7e" }, { "type": "user", "title": "Alex Walsh", "content": "Irvine", "photoUrl": "/img/avatars/2.jpg", "color": null }, { "type": "user", "title": "Adam Klinsky", "content": "Irvine", "photoUrl": "/img/avatars/6.jpg", "color": null }, { "type": "user", "title": "Christina Xi", "content": "Mystic Falls", "photoUrl": "/img/avatars/5.jpg", "color": null }, { "type": "user", "title": "Tommy Brucks", "content": "Los Angeles", "photoUrl": "/img/avatars/7.jpg", "color": null }, { "type": "user", "title": "Sally Mitchells", "content": "San Francisco", "photoUrl": "/img/avatars/21.jpg", "color": null }, { "type": "file", "title": "INV-49465", "content": "Pending invoice", "photoUrl": "/img/icons/1.svg", "color": null }, { "type": "file", "title": "INV-49789", "content": "Pending invoice", "photoUrl": "/img/icons/1.svg", "color": null }, { "type": "transaction", "title": "TR-8066", "content": "Transaction amount: + $874.99", "photoUrl": "/img/icons/2.svg", "color": null }, { "type": "transaction", "title": "TR-8067", "content": "Transaction amount: + $1042.99", "photoUrl": "/img/icons/2.svg", "color": null }, { "type": "transaction", "title": "TR-9078", "content": "Transaction amount: - $2500.00", "photoUrl": "/img/icons/2.svg", "color": null }, { "type": "transaction", "title": "TR-8066", "content": "Transaction amount: - $139.99", "photoUrl": "/img/icons/2.svg", "color": null } ] ================================================ FILE: src/components/BackToTop.astro ================================================
================================================ FILE: src/components/Footer.astro ================================================ ================================================ FILE: src/components/Navbar.astro ================================================ ================================================ FILE: src/components/NavbarClone.astro ================================================ ================================================ FILE: src/components/Starfall.astro ================================================
================================================ FILE: src/components/Timer.astro ================================================
  • 00
    Days
  • 00
    Hours
  • 00
    Minutes
  • 00
    Seconds
================================================ FILE: src/env.d.ts ================================================ /// /// ================================================ FILE: src/js/libs/components/backtotop/backtotop.js ================================================ const progressWrap = document.querySelector(".progress-wrap"); const progressPath = document.querySelector(".progress-wrap path"); const pathLength = progressPath.getTotalLength(); export function initBackToTop() { return { scrolled: false, height: 60, mobileOpen: false, setup() { progressPath.style.transition = progressPath.style.WebkitTransition = "none"; progressPath.style.strokeDasharray = pathLength + " " + pathLength; progressPath.style.strokeDashoffset = pathLength; progressPath.getBoundingClientRect(); progressPath.style.transition = progressPath.style.WebkitTransition = "stroke-dashoffset 10ms linear"; }, updateProgress() { let scrollValue = window.scrollY; let scrollHeight = document.body.scrollHeight - window.innerHeight; let progress = pathLength - (scrollValue * pathLength) / scrollHeight; progressPath.style.strokeDashoffset = progress; //console.log(scrollValue); }, scroll() { this.updateProgress(); let scrollValue = window.scrollY; if (scrollValue >= this.height) { this.scrolled = true; progressWrap.classList.add('active-progress'); } else { this.scrolled = false; progressWrap.classList.remove('active-progress'); } }, scrollTop() { window.scrollTo({top: 0, behavior: 'smooth'}); return false; } }; } ================================================ FILE: src/js/libs/components/countdown/countdown.js ================================================ export function initCountdown() { return { setupCountdown() { // Set the date we're counting down to var countDownDate = new Date("Oct 24, 2024 07:00:00").getTime(); // Update the count down every 1 second var x = setInterval(function () { // Get todays date and time var now = new Date().getTime(); // Find the distance between now and the count down date var distance = countDownDate - now; var d = document; var daysElement = d.querySelector("#days-count"); var hoursElement = d.querySelector("#hours-count"); var minutesElement = d.querySelector("#minutes-count"); var secondsElement = d.querySelector("#seconds-count"); // Time calculations for days, hours, minutes and seconds daysElement.textContent = Math.floor(distance / (1000 * 60 * 60 * 24)); hoursElement.textContent = Math.floor( (distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60) ); minutesElement.textContent = Math.floor( (distance % (1000 * 60 * 60)) / (1000 * 60) ); secondsElement.textContent = Math.floor( (distance % (1000 * 60)) / 1000 ); // If the count down is finished, write some text if (distance < 0) { clearInterval(x); } }, 1000); }, }; } ================================================ FILE: src/js/libs/components/index.js ================================================ import { initNavbar } from './navbar/navbar'; import { initTabs } from './tabs/tabs'; import { initCountdown } from './countdown/countdown'; import { initRoadmap } from './roadmap/roadmap'; import { initLike } from './like/like'; import { initBackToTop } from './backtotop/backtotop'; window.initNavbar = initNavbar; window.initTabs = initTabs; window.initCountdown = initCountdown; window.initRoadmap = initRoadmap; window.initLike = initLike; window.initBackToTop = initBackToTop; ================================================ FILE: src/js/libs/components/like/like.js ================================================ export function initLike() { return { isLiked: false, likeAction() { this.isLiked = !this.isLiked; } } } ================================================ FILE: src/js/libs/components/navbar/navbar.js ================================================ export function initNavbar() { return { scrolled: false, height: 60, mobileOpen: false, scroll() { let scrollValue = window.scrollY; if (scrollValue >= this.height) { this.scrolled = true; } else { this.scrolled = false; } this.searchExpanded = false; }, openMobileMenu() { this.mobileOpen = !this.mobileOpen; }, openSidebar() { this.$store.app.isSiderbarOpen = true; console.log('clicked'); } } } ================================================ FILE: src/js/libs/components/pageloader/pageloader.js ================================================ export function initPageLoader() { window.addEventListener('load', () => { const pageloader = document.getElementById('pageloader'); const infraloader = document.getElementById('infraloader'); pageloader.classList.toggle('is-active'); var pageloaderTimeout = setTimeout(function () { infraloader.classList.remove('is-active'); pageloader.classList.toggle('is-active'); clearTimeout(pageloaderTimeout); }, 1200); }) } ================================================ FILE: src/js/libs/components/roadmap/roadmap.js ================================================ export function initRoadmap() { return { setupRoadmap() { // define variables const items = document.querySelectorAll(".main-timeline li"); // check if an element is in viewport // http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport function isElementInViewport(el) { let rect = el.getBoundingClientRect(); return ( rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth) ); } function callbackFunc() { for (var i = 0; i < items.length; i++) { if (isElementInViewport(items[i])) { items[i].classList.add("in-view"); } } } // listen for events window.addEventListener("load", callbackFunc); window.addEventListener("resize", callbackFunc); window.addEventListener("scroll", callbackFunc); }, }; } ================================================ FILE: src/js/libs/components/sidebar/sidebar.js ================================================ export function initSidebar() { return { closeSidebar() { this.$store.app.isSiderbarOpen = false; }, openedMenu: "", openSidebarMenu(e) { const target = e.target.getAttribute("data-menu"); if (this.openedMenu === target) { this.openedMenu = ""; } else { this.openedMenu = target; } }, }; } ================================================ FILE: src/js/libs/components/tabs/tabs.js ================================================ export function initTabs() { return { activeTab: 'tab-1', switchTabs(e) { const tab = e.target.getAttribute('data-tab'); this.activeTab = tab; }, setupCountdown() { // Set the date we're counting down to var countDownDate = new Date().getTime() + (1000 * 60 * 60 * 24 * 7); // 7 days from now // Update the count down every 1 second var x = setInterval(function () { // Get todays date and time var now = new Date().getTime(); // Find the distance between now and the count down date var distance = countDownDate - now; var d = document; var daysElement = d.querySelector("#days-count"); var hoursElement = d.querySelector("#hours-count"); var minutesElement = d.querySelector("#minutes-count"); var secondsElement = d.querySelector("#seconds-count"); // Time calculations for days, hours, minutes and seconds daysElement.textContent = Math.floor(distance / (1000 * 60 * 60 * 24)); hoursElement.textContent = Math.floor( (distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60) ); minutesElement.textContent = Math.floor( (distance % (1000 * 60 * 60)) / (1000 * 60) ); secondsElement.textContent = Math.floor( (distance % (1000 * 60)) / 1000 ); // If the count down is finished, write some text if (distance < 0) { clearInterval(x); } }, 1000); }, } } ================================================ FILE: src/js/libs/utils/constants.js ================================================ export const env = 'development'; export const themeColors = { primary: '#00d1b2', secondary: '#00d1b2', accent: '#797bf2', success: '#06d6a0', info: '#039BE5', warning: '#faae42', danger: '#FF7273', purple: '#8269B2', blue: '#37C3FF', green: '#93E088', lightGreen: '#63ebc6', yellow: '#FFD66E', orange: '#FFA981', lightText: '#a2a5b9', fadeGrey: '#ededed', chartGrey: '#B0BDC4' } export const demoData = [ { "type": "user", "title": "Helen Miller", "content": "Los Angeles", "photoUrl": "/img/avatars/helen.jpg", "color": null }, { "type": "user", "title": "Shane Black", "content": "Los Angeles", "photoUrl": null, "color": "#7F00FF" }, { "type": "user", "title": "Daniella Walters", "content": "San Francisco", "photoUrl": null, "color": "#00D1B2" }, { "type": "user", "title": "Elie Daniels", "content": "Dublin", "photoUrl": "/img/avatars/elie.jpg", "color": null }, { "type": "user", "title": "Terry Daniels", "content": "New York", "photoUrl": "/img/avatars/terry.jpg", "color": null }, { "type": "user", "title": "Alex Walsh", "content": "Irvine", "photoUrl": "/img/avatars/alex.jpg", "color": null }, { "type": "user", "title": "Adam Klinsky", "content": "Seattle", "photoUrl": "/img/avatars/eric.png", "color": null }, { "type": "user", "title": "Christina Song", "content": "Mystic Falls", "photoUrl": "/img/avatars/christina.jpg", "color": null }, { "type": "user", "title": "Barry Smithers", "content": "Miami", "photoUrl": "/img/avatars/barry.jpg", "color": null }, { "type": "user", "title": "Sally Mitchells", "content": "San Francisco", "photoUrl": "/img/avatars/sally.jpg", "color": null }, { "type": "file", "title": "INV-49465", "content": "Pending invoice", "photoUrl": "/img/icons/search/1.svg", "color": null }, { "type": "file", "title": "INV-49789", "content": "Pending invoice", "photoUrl": "/img/icons/search/1.svg", "color": null }, { "type": "transaction", "title": "TR-8066", "content": "Transaction amount: + $874.99", "photoUrl": "/img/icons/search/2.svg", "color": null }, { "type": "transaction", "title": "TR-8067", "content": "Transaction amount: + $1042.99", "photoUrl": "/img/icons/search/2.svg", "color": null }, { "type": "transaction", "title": "TR-9078", "content": "Transaction amount: - $2500.00", "photoUrl": "/img/icons/search/2.svg", "color": null }, { "type": "transaction", "title": "TR-8066", "content": "Transaction amount: - $139.99", "photoUrl": "/img/icons/search/2.svg", "color": null }, { "type": "company", "title": "Airbnb", "content": "Company", "photoUrl": "/img/logo/companies/airbnb.svg", "color": null }, { "type": "company", "title": "Tesla", "content": "Company", "photoUrl": "/img/logo/companies/tesla.svg", "color": null }, { "type": "company", "title": "Alfresco", "content": "Company", "photoUrl": "/img/logo/companies/alfresco.svg", "color": null }, { "type": "company", "title": "H&M", "content": "Company", "photoUrl": "/img/logo/companies/hm.svg", "color": null }, { "type": "company", "title": "Amazon", "content": "Company", "photoUrl": "/img/logo/companies/amazon.svg", "color": null } ] ================================================ FILE: src/js/libs/utils/utils.js ================================================ export function getUrlParams(param) { const queryString = window.location.search; const urlParams = new URLSearchParams(queryString); return urlParams.get(param); } export function insertBgImages() { const targets = document.querySelectorAll("[data-background]"); if (typeof targets != "undefined" && targets != null) { for (var i = 0, len = targets.length; i < len; i++) { let bgUrl = targets[i].getAttribute("data-background"); targets[i].style.backgroundSize = "cover"; targets[i].style.backgroundRepeat = "no-repeat"; targets[i].style.backgroundImage = `url(${bgUrl})`; } } } ================================================ FILE: src/js/main.js ================================================ //Alpine JS and plugins import import Alpine from "alpinejs" import intersect from "@alpinejs/intersect" import collapse from '@alpinejs/collapse'; import persist from "@alpinejs/persist"; import 'iconify-icon'; window.Alpine = Alpine //Init intersect plugin Alpine.plugin(intersect) //Init persist plugin Alpine.plugin(persist) //Init collapse plugin Alpine.plugin(collapse); //Init store Alpine.store("app", { init() { this.isDark = window.matchMedia("(prefers-color-scheme: dark)").matches; }, isDark: Alpine.$persist(false), isSidebarOpened: Alpine.$persist(false), isSidebarOpenedMobile: Alpine.$persist(false), activeSidebar: Alpine.$persist("dashboard"), activeSidebarMenu: Alpine.$persist(""), isPanelOpened: Alpine.$persist(false), }); //Start Alpine JS Alpine.start() import { insertBgImages } from "./libs/utils/utils"; import "./libs/components"; document.onreadystatechange = function () { if (document.readyState == "complete") { //Switch backgrounds const changeBackgrounds = insertBgImages(); } }; ================================================ FILE: src/layouts/Default.astro ================================================ --- import { ViewTransitions } from 'astro:transitions' import Footer from '../components/Footer.astro' import BackToTop from '../components/BackToTop.astro' import '@fontsource-variable/cabin/index.css' import '@fontsource-variable/open-sans/index.css' import 'simplebar/dist/simplebar.min.css' import '../styles/main.scss' const { title } = Astro.props --- Krypton {'- ' + title}