-
-
+
+
+
+ {/* Features Section */}
+
+
+
+ {/* Compatibility Section */}
+
+
+
+ {/* Target Users Section */}
+
+
+
+ Open Source • Under Development
+
+
+
+ Development Warning
+
+
+ This is an open source project currently under active development.
+ Please consider using it for fun and not for real password
+ management until we officially release a stable version.
+
+
+
+
+ + Take Down the Headache of Remembering Passwords +
++ An open source Android app that helps you keep your passwords safe + and secure in your own local storage without ever needing to push + them to the cloud. +
+ + {/* Warning Alert */} +
+
+
+
+
+
+ + Why Choose Passcodes? +
+
+
+
+ Local Storage First
+
+ Your passwords stay on your device. Full control over your
+ sensitive data.
+
+
+
+
+
+
+ Open Source
+
+ Transparent, auditable code. Contribute, customize, and extend
+ as needed.
+
+
+
+
+
+
+ Highly Customizable
+
+ Extensible architecture designed for power users who want
+ control.
+
+
+
+
+
+
+
+
+
+
+
+
+ + Compatibility +
+
+ Android Requirements
+
+
+
+
+
+ Compile SDK
++ Android 16 (API level 36) +
+
+
+ Minimum Version
++ Android 8+ (API level 26+) +
+
+
+ Officially Supported
++ Android 14 (API level 34) +
+
+
+ Higher Versions
++ Can run but not officially guaranteed +
+
+
+
+
+ );
+}
diff --git a/website/src/components/theme-provider.tsx b/website/src/components/theme-provider.tsx
new file mode 100644
index 00000000..984415a2
--- /dev/null
+++ b/website/src/components/theme-provider.tsx
@@ -0,0 +1,9 @@
+"use client";
+
+import * as React from "react";
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+import { type ThemeProviderProps } from "next-themes";
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+ return {children} ;
+}
diff --git a/website/src/components/theme-toggle.tsx b/website/src/components/theme-toggle.tsx
new file mode 100644
index 00000000..eb76c790
--- /dev/null
+++ b/website/src/components/theme-toggle.tsx
@@ -0,0 +1,38 @@
+"use client";
+
+import * as React from "react";
+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
+import { Button } from "@/components/ui/button";
+
+export function ThemeToggle() {
+ const { theme, setTheme } = useTheme();
+ const [mounted, setMounted] = React.useState(false);
+
+ React.useEffect(() => {
+ setMounted(true);
+ }, []);
+
+ if (!mounted) {
+ return (
+
+ );
+ }
+
+ return (
+
+ );
+}
diff --git a/website/src/components/ui/accordion.tsx b/website/src/components/ui/accordion.tsx
new file mode 100644
index 00000000..4a8cca46
--- /dev/null
+++ b/website/src/components/ui/accordion.tsx
@@ -0,0 +1,66 @@
+"use client"
+
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDownIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Accordion({
+ ...props
+}: React.ComponentProps) {
+ return ) {
+ return (
+ ) {
+ return (
+
+ svg]:rotate-180",
+ className
+ )}
+ {...props}
+ >
+ {children}
+
+
+ )
+}
+
+function AccordionContent({
+ className,
+ children,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+ )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
diff --git a/website/src/components/ui/alert-dialog.tsx b/website/src/components/ui/alert-dialog.tsx
new file mode 100644
index 00000000..0863e40d
--- /dev/null
+++ b/website/src/components/ui/alert-dialog.tsx
@@ -0,0 +1,157 @@
+"use client"
+
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+function AlertDialog({
+ ...props
+}: React.ComponentProps) {
+ return ) {
+ return (
+ ) {
+ return (
+ ) {
+ return (
+ ) {
+ return (
+
+
+ )
+}
+
+function AlertDialogHeader({
+ className,
+ ...props
+}: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function AlertDialogFooter({
+ className,
+ ...props
+}: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function AlertDialogTitle({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+ ) {
+ return (
+ ) {
+ return (
+ ) {
+ return (
+ ) {
+ return (
+
+ )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function AlertDescription({
+ className,
+ ...props
+}: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+export { Alert, AlertTitle, AlertDescription }
diff --git a/website/src/components/ui/aspect-ratio.tsx b/website/src/components/ui/aspect-ratio.tsx
new file mode 100644
index 00000000..3df3fd02
--- /dev/null
+++ b/website/src/components/ui/aspect-ratio.tsx
@@ -0,0 +1,11 @@
+"use client"
+
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
+
+function AspectRatio({
+ ...props
+}: React.ComponentProps) {
+ return ) {
+ return (
+ ) {
+ return (
+ ) {
+ return (
+ & { asChild?: boolean }) {
+ const Comp = asChild ? Slot : "span"
+
+ return (
+ & {
+ asChild?: boolean
+ }) {
+ const Comp = asChild ? Slot : "button"
+
+ return (
+ & {
+ buttonVariant?: React.ComponentProps["variant"]
+}) {
+ const defaultClassNames = getDefaultClassNames()
+
+ return (
+ svg]:rotate-180`,
+ String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+ className
+ )}
+ captionLayout={captionLayout}
+ formatters={{
+ formatMonthDropdown: (date) =>
+ date.toLocaleString("default", { month: "short" }),
+ ...formatters,
+ }}
+ classNames={{
+ root: cn("w-fit", defaultClassNames.root),
+ months: cn(
+ "flex gap-4 flex-col md:flex-row relative",
+ defaultClassNames.months
+ ),
+ month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
+ nav: cn(
+ "flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
+ defaultClassNames.nav
+ ),
+ button_previous: cn(
+ buttonVariants({ variant: buttonVariant }),
+ "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+ defaultClassNames.button_previous
+ ),
+ button_next: cn(
+ buttonVariants({ variant: buttonVariant }),
+ "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+ defaultClassNames.button_next
+ ),
+ month_caption: cn(
+ "flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
+ defaultClassNames.month_caption
+ ),
+ dropdowns: cn(
+ "w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
+ defaultClassNames.dropdowns
+ ),
+ dropdown_root: cn(
+ "relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md",
+ defaultClassNames.dropdown_root
+ ),
+ dropdown: cn(
+ "absolute bg-popover inset-0 opacity-0",
+ defaultClassNames.dropdown
+ ),
+ caption_label: cn(
+ "select-none font-medium",
+ captionLayout === "label"
+ ? "text-sm"
+ : "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",
+ defaultClassNames.caption_label
+ ),
+ table: "w-full border-collapse",
+ weekdays: cn("flex", defaultClassNames.weekdays),
+ weekday: cn(
+ "text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none",
+ defaultClassNames.weekday
+ ),
+ week: cn("flex w-full mt-2", defaultClassNames.week),
+ week_number_header: cn(
+ "select-none w-(--cell-size)",
+ defaultClassNames.week_number_header
+ ),
+ week_number: cn(
+ "text-[0.8rem] select-none text-muted-foreground",
+ defaultClassNames.week_number
+ ),
+ day: cn(
+ "relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
+ defaultClassNames.day
+ ),
+ range_start: cn(
+ "rounded-l-md bg-accent",
+ defaultClassNames.range_start
+ ),
+ range_middle: cn("rounded-none", defaultClassNames.range_middle),
+ range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
+ today: cn(
+ "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
+ defaultClassNames.today
+ ),
+ outside: cn(
+ "text-muted-foreground aria-selected:text-muted-foreground",
+ defaultClassNames.outside
+ ),
+ disabled: cn(
+ "text-muted-foreground opacity-50",
+ defaultClassNames.disabled
+ ),
+ hidden: cn("invisible", defaultClassNames.hidden),
+ ...classNames,
+ }}
+ components={{
+ Root: ({ className, rootRef, ...props }) => {
+ return (
+
+ )
+ },
+ Chevron: ({ className, orientation, ...props }) => {
+ if (orientation === "left") {
+ return (
+
+
+ )
+ },
+ ...components,
+ }}
+ {...props}
+ />
+ )
+}
+
+function CalendarDayButton({
+ className,
+ day,
+ modifiers,
+ ...props
+}: React.ComponentProps) {
+ const defaultClassNames = getDefaultClassNames()
+
+ const ref = React.useRef(null)
+ React.useEffect(() => {
+ if (modifiers.focused) ref.current?.focus()
+ }, [modifiers.focused])
+
+ return (
+
+ Who Is This For? +
+
+
+
+
+ For those who want to optimize their password management
+ workflow and are willing to learn and customize.
+
+
+
+
+
+
+
+ Clean, maintainable, and extensible codebase for developers
+ who want to modify and extend the app.
+
+
+
+
+
+
+
+ While supported, the app is optimized for customization rather
+ than simplicity. Consider this a starting point for your
+ password management journey.
+
+
+
-
+ Primary Target
+ Tech-Savvy Users
+
+
+ Secondary Target
+ Software Engineers
+
+
+ End Users
+ General Users
+
+
-
+
+
+ {/* Security Section */}
+
-
- 🥳🥳 Coming Soon!! 🎉🎉
-
-
+ - Passcodes Website & App will be offically release on 17/8 - . -
-- Passcodes App will be unoffically (only for special users) - release on 16/8. -
-
+
+
+ Important Security Notice
+
+
+ Passcodes is an open source project under MIT License, provided
+ "as is" without warranty. Your passwords are as safe as writing
+ them on paper or in a text file. We recommend waiting for the
+ stable release before trusting it with real passwords.
+
+
+
+
- + Security Considerations +
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Lock the app using your phone's settings +
+
+
+
+ + Use a different password than your lock screen +
+
+
+
+ + Hide the app if you don't use it often +
+
+
+
+ + 1st Priority: Customization & Extensibility +
+
+
+
+ + 2nd Priority: Security & Robustness +
+
+
+
+ + Performance is not our main focus +
+-
-
-
- Get started by editing{" "}
-
- src/app/page.tsx -- . -
- - - Save and see your changes instantly. - -
-
-
);
diff --git a/website/src/components/navigation.tsx b/website/src/components/navigation.tsx
new file mode 100644
index 00000000..a950584b
--- /dev/null
+++ b/website/src/components/navigation.tsx
@@ -0,0 +1,102 @@
+"use client";
+
+import Link from "next/link";
+import { Shield, Code, Menu, X } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { ThemeToggle } from "./theme-toggle";
+import { useState } from "react";
+
+export function Navigation() {
+ const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+ return (
+
+
+
+
+ {/* Mobile Menu */}
+ {isMenuOpen && (
+ Passcodes
+ + + {/* Desktop Navigation */} + + + {/* Mobile Navigation */} +
+
+
+
+
+ )}
+ {children}
+
+ {children}
+
+