body {
    background-color: #242e34; /* Dark mode body background */
    color: #ffffff; /* Light text color for readability */
}

.api-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.api-card {
    background: #2d3942; /* Dark mode card background */
    border: 1px solid #3f4954; /* Darker border for contrast */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Shadow effect without glow */
    width: 220px;
    padding: 20px;
    text-align: left;
    position: relative;
    transition: box-shadow 0.3s ease-in-out;
}

.api-card h3 {
    margin-top: 0;
    color: #cccccc; /* Lighter color for headings */
    font-size: 15px;
}

.api-card p {
    color: #e1e1e1; /* Lighter text color for readability */
    font-size: 10px;
    margin-bottom: 20px;
}

.api-logo {
    position: absolute;
    top: 15px;
    right: 20px;
    width: 25px;
    height: auto;
}

.api-link, .api-link-blue {
    display: inline-block;
    text-decoration: none;
    font-weight: bold;
    padding: 10px 15px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.api-link {
    color: #e84ce4; /* Purple text color */
    border: 1px solid #e84ce4; /* Purple border */
}

.api-link:hover {
    background-color: #e84ce4;
    color: #ffffff; /* White text on hover */
}

.api-card:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 0 15px #e84ce4; /* Stronger purple glow on hover */
}

.blue-glow:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 0 15px #007bff; /* Stronger blue glow on hover */
}

.api-link-blue {
    color: #007bff; /* Blue text color */
    border: 1px solid #007bff; /* Blue border */
}

.api-link-blue:hover {
    background-color: #007bff;
    color: #ffffff; /* White text on hover */
}

.section {
    margin-bottom: 40px;
}

.section h2 {
    color: #cccccc;
    font-size: 24px;
    text-align: center;
}

.section p {
    color: #e1e1e1;
    font-size: 16px;
    text-align: center;
    margin-bottom: 20px;
}


body {
  font-family: Arial, sans-serif;
  background-color: #fffff2;
  color: #000000;
}

.dark body {
  background-color: #1e1e1e;
  color: #ffffff;
}

.yearly-calendar-wrapper {
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
  padding-bottom: 20px; /* Add some padding for better scroll experience */
  border: 1px solid #9d32de;
}

.calendar {
  flex: 0 0 auto; /* Ensures the calendar takes up its width and doesn't shrink */
  min-width: 320px; /* Adjust as needed */
  margin-right: 20px;
  background-color: #f0f0f0;
  border: 1px solid #9d32de;
  border-radius: 10px; /* Rounded corners */
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Subtle shadow for depth */
}

.dark .calendar {
  background-color: #000;
  border: 1px solid #e040d7;
}

.calendar-header {
  font-weight: bold;
  font-size: 1.5em;
  text-align: center;
  margin-bottom: 20px;
  color: #000000;
}

.dark .calendar-header {
  color: #ffffff;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px; /* Increase the gap between days */
}

.calendar-day {
  border: 2px solid transparent; /* Add transparent border to maintain size */
  border-radius: 10px; /* Rounded corners */
  background-color: #f9f9f9; /* Light background for days */
  color: #000000; /* Black text color */
  padding: 15px; /* Adjust padding for better size match */
  text-align: center;
  font-size: 1.2em; /* Larger font size */
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.3s, border-color 0.3s, transform 0.3s, box-shadow 0.3s; /* Smooth transition for hover effect */
  box-sizing: border-box; /* Ensures padding is included in the element's total width and height */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
  cursor: default;
}

.dark .calendar-day {
  background-color: #3e3e3e; /* Dark background for days */
  border: 1px solid #555;
  color: #ffffff; /* White text color */
}

.calendar-day.has-updates {
  cursor: pointer;
  background-color: #6200ea;
  border: 1px solid #bb86fc;
  color: #ffffff;
}

.dark .calendar-day.has-updates {
  background-color: #9d32de;
  border: 1px solid #e040d7;
}

.calendar-day:hover {
  background-color: #e0e0e0; /* Lighter background on hover */
  transform: scale(1.05); /* Slightly enlarge on hover */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Increase shadow on hover */
}

.dark .calendar-day:hover {
  background-color: #4e4e4e;
}

.calendar-day.has-updates:hover {
  background-color: #7f39fb;
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.dark .calendar-day.has-updates:hover {
  background-color: #a740de;
}

.calendar-day.current-day {
  border-color: #f39c12; /* Highlight the current day */
}

.year-calendar {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px; /* Added margin for better spacing */
}

.month-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px; /* Gap between month buttons */
}

.month-button {
  border: 2px solid transparent; /* Add transparent border to maintain size */
  border-radius: 10px; /* Rounded corners */
  background-color: #3e3e3e; /* Dark background for months */
  color: #ffffff; /* White text color */
  padding: 20px; /* Adjust padding for better size match */
  text-align: center;
  font-size: 1.2em; /* Larger font size */
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.3s, border-color 0.3s, transform 0.3s, box-shadow 0.3s; /* Smooth transition for hover effect */
  box-sizing: border-box; /* Ensures padding is included in the element's total width and height */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
  text-decoration: none; /* Remove underline */
}

.month-button:hover {
  background-color: #9d32de; /* Color on hover */
  transform: scale(1.05); /* Slightly enlarge on hover */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Increase shadow on hover */
}

.dark .month-button {
  background-color: #3e3e3e;
  border: 1px solid #555;
}

.dark .month-button:hover {
  background-color: #9d32de; /* Color on hover for dark mode */
}

.calendar-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px; /* Added margin for better spacing */
}

@media (max-width: 768px) {
  .calendar {
    min-width: 100%;
    margin-right: 0;
  }

  .calendar-grid {
    grid-template-columns: repeat(4, 1fr); /* Adjust for smaller screens */
  }

  .month-grid {
    grid-template-columns: repeat(2, 1fr); /* Adjust for smaller screens */
  }
}

@media (max-width: 480px) {
  .calendar-grid {
    grid-template-columns: repeat(2, 1fr); /* Adjust for even smaller screens */
  }

  .month-grid {
    grid-template-columns: repeat(1, 1fr); /* Adjust for even smaller screens */
  }
}


.video-container {
  position: relative;
  width: 100%;
  max-height: 100%;
  overflow: hidden;
}

.video-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 93%;
  background: rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

.video-container h2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 10px 20px;
  font-size: 24px;
  text-align: center;
  white-space: nowrap;
}

.video-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.chain-abstraction {
  text-align: center;
  margin: 20px 0;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.chain-abstraction a {
  color: #9b59b6;
  font-weight: bold;
  text-decoration: none;
  margin: 0 10px;
}

.chain-abstraction a:hover {
  text-decoration: underline;
}

.chain-abstraction::before {
  content: "";
  display: block;
  width: 50%;
  height: 2px;
  background: #9b59b6;
  margin: 0 auto 20px auto;
}

.toggles {
  display: flex;
  gap: 10px;
}

.toggle-button {
  width: 50px;
  height: 50px;
  border: none;
  background-color: #545056;
  color: #FFFFFF;
  cursor: pointer;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.light .toggle-button {
  color: #9d32de;
}

.toggle-button.selected {
  background-color: #9d32de;
  color: white;
}

.icon {
  width: 30px;
  height: 30px;
}

.code-snippet {
  margin-top: 20px;
  overflow-x: auto;
  background-color: #0F1117;
  color: #0F1117;
  padding: 10px;
  border-radius: 15px;
}

.chain-selection {
  font-weight: bold;
  color: #FFFFFF;
  font-size: 20px;
  margin: 10px 0;
  margin-bottom: 30px;
  text-align: center;
  background-color: #0F1117;
  padding: 10px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #9d32de;
  gap: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.auth-selection {
  font-weight: bold;
  color: #FFFFFF;
  font-size: 20px;
  margin: 10px 0;
  margin-top: 30px;
  margin-bottom: 30px;
  text-align: center;
  background-color: #0F1117;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #9d32de;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.copy-container {
  display: flex;
  justify-content: flex-end;
  padding: 0;
  margin-bottom: 4px;
}

.copy-button {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 5px 8px;
  height: 30px;
}

.copy-icon {
  width: 16px;
  height: 16px;
  margin-right: 5px;
}

.copied-text {
  display: flex;
  align-items: center;
  height: 16px;
}

.snippet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #9d32de;
  padding: 8px 16px;
  border-bottom: 1px solid #9d32de;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  font-size: 14px;
  font-weight: bold;
  position: relative;
}

.language-label {
  display: inline-block;
}

.copied-text {
  color: #9d32de;
  font-weight: bold;
  font-size: 14px;
  transition: color 0.3s ease;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px; /* Adjust the gap between items as needed */
    padding: 20px;
  }
  .grid-container a {
    display: block;
    text-align: center; /* Center align the images */
  }
  .grid-container img {
    width: 100%;
    height: auto;
  }

// script.js
console.log("Script loaded");

const monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
const today = new Date();
let currentMonth = today.getMonth();
let currentYear = today.getFullYear();

document.addEventListener('DOMContentLoaded', function () {
  console.log("DOM fully loaded and parsed");
  loadMonth(currentYear, currentMonth);
});

function loadMonth(year, month) {
  console.log(`Loading month: ${monthNames[month]} ${year}`);

  const monthName = monthNames[month];
  document.getElementById('month-year').textContent = `${monthName} ${year}`;

  const daysInMonth = new Date(year, month + 1, 0).getDate();
  let calendarDays = '';
  for (let day = 1; day <= daysInMonth; day++) {
    const isToday = (year === today.getFullYear() && month === today.getMonth() && day === today.getDate());
    calendarDays += `<div class="calendar-day ${isToday ? 'current-day' : ''}">${day}</div>`;
  }

  document.querySelector('.calendar-grid').innerHTML = calendarDays;
  console.log("Calendar rendered");

  document.querySelector('.prev-month').addEventListener('click', (event) => {
    event.preventDefault();
    currentMonth = (currentMonth === 0) ? 11 : currentMonth - 1;
    currentYear = (currentMonth === 11) ? currentYear - 1 : currentYear;
    loadMonth(currentYear, currentMonth);
  });

  document.querySelector('.next-month').addEventListener('click', (event) => {
    event.preventDefault();
    currentMonth = (currentMonth === 11) ? 0 : currentMonth + 1;
    currentYear = (currentMonth === 0) ? currentYear + 1 : currentYear;
    loadMonth(currentYear, currentMonth);
  });
}


Particle Connect

Smart WaaS

Particle Network

Discord

GitHub

Demo

Particle Network docs

Introduction

Guides

APIs & SDKs

Changelog

Schedule a Demo

Dashboard

Blog

Support

May 20, 2024

Welcome to Particle Network's developer docs.

Overview of Particle Network's technology and products.

What is Particle Network?

Particle Network's road from a Wallet-as-a-Service tool to powering chain abstraction.

Next Step: Chain Abstraction

The first account abstraction protocol for the Bitcoin ecosystem

BTC Connect

How the Particle Network L1 powers chain abstraction through Universal Accounts.

Particle L1 Architecture

Universal Accounts

Unifying users' assets across all chains.

Universal Liquidity

Pay for transaction fees using any token from any source chain.

Universal Gas

Third-party tutorials on using Particle Network's SDKs.

External Tutorials

Collection of demos and examples application using Particle Network's products.

Example Repositories

Video walkthroughs on integrating Particle's SDKs and APIs.

Video Walkthroughs

Security Audits

Aggregation of Particle Network brand assets for external usage.

Brand Assets

API & SDK License Agreement

Privacy Policy

Terms of Use

Find resources to guide you through the Particle Network ecosystem.

Overview

A complete list of all networks covered by Particle Network's SDKs.

Network Coverage

Overview of the Particle Network Dashboard.

Particle Network's Dashboard

Discover Particle Network's SDKs for web development.

Web Support

Discover Particle Network's SDKs for Android development.

Android Support

Discover Particle Network's SDKs for iOS development.

iOS Support

Discover Particle Network's SDKs for Unity development.

Unity Support

Discover Particle Network's SDKs for Unreal Engine development.

Unreal Support

Discover Particle Network's SDKs for Cocos development.

Cocos Support

Discover Particle Network's SDKs for Flutter development.

Flutter Support

Discover Particle Network's SDKs for React Native development.

React Native Support

An overview of Wallet-as-a-Service solutions and their many advantages.

Understanding WaaS

Understanding Wallet-as-a-Service

Web Quickstart

Quickstart: Integrating Particle Connect into Your Web Application

iOS Quickstart

Android Quickstart

Flutter Quickstart

React Native Quickstart

Telegram Mini-App Quickstart

An SDK facilitating wallet generation and interactions via social logins.

Particle Auth

Implementing and customizing dApp-embeddable wallets through Particle's SDK.

Particle Wallet

Particle's main connection kit, allowing developers to integrate Web2 and Web3 logins.

Integrate social logins within RainbowKit through Particle Auth.

RainbowKit

Integrate social logins within Web3Modal through Particle Auth.

Web3Modal

Integrate social logins within Web3-Onboard through Particle Auth.

Web3-Onboard

Comprehensive tutorial diving into the process of using Particle Network's Auth Core and AA SDK on ZetaChain.

Leveraging Particle Network on ZetaChain

Leveraging Particle Auth with Alchemy’s Account Kit through aa-signers.

Particle Auth with Alchemy's Account Kit

Leveraging Particle Auth as an authentication mechanism within Openfort's tech stack.

Particle Auth with Openfort

Biconomy and Particle Network

Configuring and implementing BTC Connect within an application built on BOB.

Connecting Bitcoin Wallets to BOB using BTC Connect

Quickstart guide for leveraging Particle’s AA stack in web applications.

Web (Desktop) Quickstart

Web (Desktop) Quickstart - AA

Mobile (Android/iOS) Quickstart

Mobile (Android/iOS) Quickstart - AA

Bundler

Using Particle Network's Omnichain Paymaster for cross-chain gas sponsorships.

Paymaster

Selecting an external Bundler implementation to be used with Particle's AA SDK.

Choosing a Bundler

Omnichain Paymaster

Setting up the Particle Omnichain Paymaster

Session keys within Particle's AA Modular Stack.

Session Keys

Customizing the appearance of Particle's login modal.

Customizing Login Modal

Customizing the appearance of the Particle Wallet modal.

Customizing Wallet Modal

Customizing your JWT settings to integrate an existing user base.

Custom Authentication (JWT)

Customizing social login prompts for Google, Discord, and Microsoft accounts.

Set Social Authentication Prompt

Understanding login sessions on Particle Auth.

Login Session

Understanding the two kinds of passwords users can set up within Particle Auth.

Master Password & Payment Password

Overview of Particle Network's APIs & SDKs.

Introduction to APIs & SDKs

The SSO for Web3, aggregating both Web2 and Web3 onboarding options in a unified custom connection modal.

Introduction to Particle Connect

Leveraging Particle Connect within web applications.

Web (JS/TS) - Connect

Web (JavaScript/TypeScript) - Connect

Leveraging Particle Connect within Android applications.

Android (Kotlin) - Connect

Leveraging Particle Connect within iOS applications.

iOS (Swift) - Connect

Leveraging Particle Connect within mobile applications built on Unity

Unity (C#) - Connect

Leveraging Particle Connect within applications built using Flutter.

Flutter (Dart) - Connect

Leveraging Particle Connect within applications built using React Native.

React Native (JS) - Connect

React Native (JavaScript) - Connect

Find Frequently Asked Questions about Particle Connect.

Particle Connect FAQ

Particle Auth acts as the core authentication and interaction component within Particle WaaS, powering wallet creation and management via social logins.

Introduction to Particle Auth

Learn how to use the getUserInfo JSON-RPC method.

getUserInfo

Learn how to use the getUserInfoByIdentity JSON-RPC method.

getUserInfoByIdentity

Learn how to use the isProjectUser JSON-RPC method.

isProjectUser

Interacting with Particle Auth within web applications using either JavaScript or TypeScript.

Web (JS/TS) - Auth

Web (JavaScript/TypeScript) - Auth

Interacting with Particle Auth within games built on Unity using C#.

Unity (C#) Desktop - Auth

Interacting with Particle Auth on Android using Kotlin.

Android (Kotlin) SDK - Auth

Interacting with Particle Auth on iOS using Swift or Objective-C.

iOS (Swift/Obj-C) - Auth

Interacting with Particle Auth within applications made using Flutter.

Flutter (Dart) - Auth

Interacting with Particle Auth on Unity (Mobile) Using C#.

Unity (C#) Mobile - Auth

Interacting with Particle Auth within applications made using React Native.

React Native (JavaScript) - Auth

Interacting with Particle Auth within applications made using Cocos.

Cocos (JavaScript) - Auth

Interacting with Particle Auth within applications made using Unreal Engine.

Unreal Engine (No-Code) SDK

Find Frequently Asked Questions about Particle Auth.

Particle Auth FAQ

Particle Wallet is a unified interface for interacting with accounts from various origins (Particle Auth, external wallets, etc.)

Introduction to Particle Wallet

D2C fiat-crypto exchanges on your platform

Introduction to On-Ramp

Using Particle Wallet within a web application.

Web (JS/TS) - Wallet

Web (JavaScript/TypeScript) - Wallet

Working with Particle Wallet within Android applications.

Android (Kotlin/Java) - Wallet

Working with Particle Wallet within iOS applications.

iOS (Swift) - Wallet

Working with Particle Wallet within Unity applications.

Unity (C#) - Wallet

Working with Particle Wallet within flutter applications.

Flutter (Dart) - Wallet

Working with Particle Wallet within React Native applications.

React Native (JS) - Wallet

React Native (JavaScript) - Wallet

Find Frequently Asked Questions about Particle Wallet.

Particle Wallet FAQ

Particle Network's Account Abstraction SDK facilitates full-stack utilization of AA, working natively with Particle Auth.

CHANGELOG

​Particle Connect

​Smart WaaS

Particle Connect

Smart WaaS