@tsparticles/template-login 4.1.3 → 4.2.0

package/template/react/src/App.tsx

@@ -0,0 +1,140 @@
+import { useState, useEffect } from "react";
+import Particles, { ParticlesProvider } from "@tsparticles/react";
+import { loadSlim } from "@tsparticles/slim";
+import type { Engine, ISourceOptions } from "@tsparticles/engine";
+import "./App.css";
+
+async function init(engine: Engine): Promise<void> {
+  await loadSlim(engine);
+}
+
+const options: ISourceOptions = {
+  background: { color: { value: "transparent" } },
+  fpsLimit: 60,
+  particles: {
+    number: { value: 60, density: { enable: true } },
+    color: { value: ["#6c5ce7", "#a29bfe", "#fd79a8", "#00cec9"] },
+    shape: { type: "circle" },
+    opacity: { value: 0.5, random: true },
+    size: { value: { min: 1, max: 3 }, random: true },
+    move: { enable: true, speed: 1, direction: "none", random: true, straight: false, outModes: { default: "out" } },
+  },
+  interactivity: {
+    events: { onHover: { enable: true, mode: "bubble" } },
+    modes: { bubble: { distance: 200, size: 6, duration: 2, opacity: 0.8 } },
+  },
+  detectRetina: true,
+};
+
+function validateEmail(email: string): boolean {
+  return /^[^\s@]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)+$/.test(email);
+}
+
+export default function App() {
+  const [theme, setTheme] = useState(() => localStorage.getItem("theme") || "dark");
+  const [loginMode, setLoginMode] = useState(true);
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirm, setConfirm] = useState("");
+  const [emailErr, setEmailErr] = useState("");
+  const [passErr, setPassErr] = useState("");
+  const [confirmErr, setConfirmErr] = useState("");
+
+  useEffect(() => {
+    document.documentElement.setAttribute("data-theme", theme);
+    localStorage.setItem("theme", theme);
+  }, [theme]);
+
+  function toggleTheme() {
+    setTheme((t) => (t === "dark" ? "light" : "dark"));
+  }
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    let valid = true;
+
+    if (!email || !validateEmail(email)) {
+      setEmailErr("Please enter a valid email address");
+      valid = false;
+    } else {
+      setEmailErr("");
+    }
+
+    if (!password || password.length < 6) {
+      setPassErr("Password must be at least 6 characters");
+      valid = false;
+    } else {
+      setPassErr("");
+    }
+
+    if (!loginMode) {
+      if (password !== confirm) {
+        setConfirmErr("Passwords do not match");
+        valid = false;
+      } else {
+        setConfirmErr("");
+      }
+    }
+
+    if (!valid) return;
+
+    if (loginMode) {
+      alert("Logged in successfully! (demo)");
+    } else {
+      alert("Account created successfully! (demo)");
+      setLoginMode(true);
+    }
+
+    setEmail("");
+    setPassword("");
+    setConfirm("");
+  }
+
+  function toggleMode(e: React.MouseEvent) {
+    e.preventDefault();
+    setLoginMode((m) => !m);
+    setEmailErr("");
+    setPassErr("");
+    setConfirmErr("");
+  }
+
+  return (
+    <ParticlesProvider init={init}>
+      <Particles id="tsparticles" options={options} />
+      <div className="auth-container">
+        <div className="auth-card">
+          <div className="auth-header">
+            <h1>{loginMode ? "Login" : "Register"}</h1>
+            <button className="theme-btn" onClick={toggleTheme} aria-label="Toggle theme">
+              {theme === "dark" ? "\ud83c\udf19" : "\u2600\ufe0f"}
+            </button>
+          </div>
+          <form onSubmit={handleSubmit} noValidate>
+            <div className="form-group">
+              <label htmlFor="email">Email</label>
+              <input id="email" type="email" placeholder="you@example.com" value={email} onChange={(e) => setEmail(e.target.value)} required />
+              <span className="error">{emailErr}</span>
+            </div>
+            <div className="form-group">
+              <label htmlFor="password">Password</label>
+              <input id="password" type="password" placeholder="Enter password" value={password} onChange={(e) => setPassword(e.target.value)} required />
+              <span className="error">{passErr}</span>
+            </div>
+            {!loginMode && (
+              <div className="form-group">
+                <label htmlFor="confirmPassword">Confirm Password</label>
+                <input id="confirmPassword" type="password" placeholder="Confirm password" value={confirm} onChange={(e) => setConfirm(e.target.value)} />
+                <span className="error">{confirmErr}</span>
+              </div>
+            )}
+            <button type="submit">{loginMode ? "Sign In" : "Create Account"}</button>
+          </form>
+          <p className="toggle-text">
+            <span>{loginMode ? "Don't have an account?" : "Already have an account?"}</span>
+            <a href="#" onClick={toggleMode}>{loginMode ? "Register" : "Login"}</a>
+          </p>
+        </div>
+      </div>
+    </ParticlesProvider>
+  );
+}

package/template/riot/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "{{projectName}}",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "riot": "^10.0.0",
+    "@tsparticles/riot": "^4.1.3",
+    "@tsparticles/slim": "^4.1.3",
+    "@tsparticles/configs": "^4.1.3",
+    "@tsparticles/engine": "^4.1.3"
+  },
+  "devDependencies": {
+    "@riotjs/compiler": "^10.0.0",
+    "rollup-plugin-riot": "^10.0.0",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.0"
+  }
+}

package/template/riot/src/app.riot

@@ -0,0 +1,156 @@
+<app>
+  <div class="auth-container">
+    <div class="auth-card">
+      <div class="auth-header">
+        <h1>{ state.isLogin ? 'Login' : 'Register' }</h1>
+        <button class="theme-btn" onclick={ toggleTheme } aria-label="Toggle theme">{ state.theme === 'dark' ? '🌙' : '☀️' }</button>
+      </div>
+      <form onsubmit={ handleSubmit } novalidate>
+        <div class="form-group">
+          <label for="email">Email</label>
+          <input id="email" type="email" placeholder="you@example.com" ref="emailInput" required />
+          <span class="error">{ state.emailErr }</span>
+        </div>
+        <div class="form-group">
+          <label for="password">Password</label>
+          <input id="password" type="password" placeholder="Enter password" ref="passwordInput" required />
+          <span class="error">{ state.passErr }</span>
+        </div>
+        <div if={ !state.isLogin } class="form-group">
+          <label for="confirmPassword">Confirm Password</label>
+          <input id="confirmPassword" type="password" placeholder="Confirm password" ref="confirmInput" />
+          <span class="error">{ state.confirmErr }</span>
+        </div>
+        <button type="submit">{ state.isLogin ? 'Sign In' : 'Create Account' }</button>
+      </form>
+      <p class="toggle-text">
+        <span>{ state.isLogin ? "Don't have an account?" : 'Already have an account?' }</span>
+        <a href="#" onclick={ toggleMode }>{ state.isLogin ? 'Register' : 'Login' }</a>
+      </p>
+    </div>
+  </div>
+  <riot-particles id="tsparticles" options={ state.options }></riot-particles>
+
+  <script>
+    import { initParticlesEngine } from "@tsparticles/riot";
+    import { loadSlim } from "@tsparticles/slim";
+
+    function validateEmail(val) {
+      return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val);
+    }
+
+    export default {
+      state: {
+        isLogin: true,
+        theme: localStorage.getItem("theme") || "dark",
+        email: "",
+        password: "",
+        confirm: "",
+        emailErr: "",
+        passErr: "",
+        confirmErr: "",
+        options: {
+          background: { color: { value: "transparent" } },
+          fpsLimit: 60,
+          particles: {
+            number: { value: 60, density: { enable: true } },
+            color: { value: ["#6c5ce7", "#a29bfe", "#fd79a8", "#00cec9"] },
+            shape: { type: "circle" },
+            opacity: { value: 0.5, random: true },
+            size: { value: { min: 1, max: 3 }, random: true },
+            move: { enable: true, speed: 1, direction: "none", random: true, straight: false, outModes: { default: "out" } },
+          },
+          interactivity: {
+            events: { onHover: { enable: true, mode: "bubble" } },
+            modes: { bubble: { distance: 200, size: 6, duration: 2, opacity: 0.8 } },
+          },
+          detectRetina: true,
+        }
+      },
+      onMounted() {
+        document.documentElement.setAttribute("data-theme", this.state.theme);
+        void initParticlesEngine(async (engine) => {
+          await loadSlim(engine);
+        });
+      },
+      toggleTheme() {
+        const t = this.state.theme === "dark" ? "light" : "dark";
+        this.update({ theme: t });
+        document.documentElement.setAttribute("data-theme", t);
+        localStorage.setItem("theme", t);
+      },
+      handleSubmit(e) {
+        e.preventDefault();
+        let valid = true;
+
+        const email = this.refs.emailInput.value;
+        const password = this.refs.passwordInput.value;
+        const confirm = this.refs.confirmInput ? this.refs.confirmInput.value : "";
+
+        if (!email || !validateEmail(email)) {
+          this.update({ emailErr: "Please enter a valid email address" });
+          valid = false;
+        } else {
+          this.update({ emailErr: "" });
+        }
+
+        if (!password || password.length < 6) {
+          this.update({ passErr: "Password must be at least 6 characters" });
+          valid = false;
+        } else {
+          this.update({ passErr: "" });
+        }
+
+        if (!this.state.isLogin) {
+          if (password !== confirm) {
+            this.update({ confirmErr: "Passwords do not match" });
+            valid = false;
+          } else {
+            this.update({ confirmErr: "" });
+          }
+        }
+
+        if (!valid) return;
+
+        if (this.state.isLogin) {
+          alert("Logged in successfully! (demo)");
+        } else {
+          alert("Account created successfully! (demo)");
+          this.update({ isLogin: true });
+        }
+
+        this.refs.emailInput.value = "";
+        this.refs.passwordInput.value = "";
+        if (this.refs.confirmInput) this.refs.confirmInput.value = "";
+      },
+      toggleMode(e) {
+        e.preventDefault();
+        this.update({ isLogin: !this.state.isLogin, emailErr: "", passErr: "", confirmErr: "" });
+      }
+    }
+  </script>
+
+  <style>
+    body { margin: 0; font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--text); transition: background 0.3s, color 0.3s; }
+    :root { --bg: #0f0f1a; --card-bg: rgba(255, 255, 255, 0.05); --text: #fff; --border: rgba(255, 255, 255, 0.1); --input-bg: rgba(255, 255, 255, 0.08); --accent: #6c5ce7; --accent-hover: #a29bfe; --error: #e74c3c; }
+    [data-theme="light"] { --bg: #f0f0f5; --card-bg: rgba(255, 255, 255, 0.8); --text: #1a1a2e; --border: rgba(0, 0, 0, 0.1); --input-bg: rgba(0, 0, 0, 0.05); }
+    * { box-sizing: border-box; }
+    .auth-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; width: 100%; max-width: 400px; padding: 1rem; }
+    .auth-card { background: var(--card-bg); backdrop-filter: blur(10px); border: 1px solid var(--border); border-radius: 16px; padding: 2rem; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); }
+    .auth-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
+    .auth-header h1 { margin: 0; font-size: 1.8em; }
+    .theme-btn { background: none; border: 1px solid var(--border); border-radius: 8px; padding: 0.4em 0.6em; font-size: 1.2em; cursor: pointer; transition: background 0.2s; }
+    .theme-btn:hover { background: var(--input-bg); }
+    .form-group { margin-bottom: 1rem; }
+    label { display: block; margin-bottom: 0.3em; font-size: 0.9em; opacity: 0.8; }
+    input { width: 100%; padding: 0.7em 1em; font-size: 1em; border: 1px solid var(--border); border-radius: 8px; background: var(--input-bg); color: var(--text); outline: none; transition: border-color 0.2s; }
+    input:focus { border-color: var(--accent); }
+    input::placeholder { color: var(--text); opacity: 0.4; }
+    .error { display: block; margin-top: 0.3em; font-size: 0.8em; color: var(--error); min-height: 1em; }
+    button[type="submit"] { width: 100%; padding: 0.8em; font-size: 1em; font-weight: 600; border: none; border-radius: 8px; background: var(--accent); color: #fff; cursor: pointer; transition: background 0.2s; margin-top: 0.5rem; }
+    button[type="submit"]:hover { background: var(--accent-hover); }
+    .toggle-text { text-align: center; margin-top: 1.5rem; font-size: 0.9em; opacity: 0.7; }
+    .toggle-text a { color: var(--accent); text-decoration: none; margin-left: 0.3em; }
+    .toggle-text a:hover { text-decoration: underline; }
+  </style>
+</app>

package/template/solid/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "{{projectName}}",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "solid-js": "^1.8.11",
+    "@tsparticles/solid": "^4.1.3"
+  },
+  "devDependencies": {
+    "vite-plugin-solid": "^2.8.2"
+  }
+}

package/template/solid/src/App.tsx

@@ -0,0 +1,169 @@
+import { createSignal, createEffect, onMount } from "solid-js";
+import Particles, { initParticlesEngine } from "@tsparticles/solid";
+import { loadSlim } from "@tsparticles/slim";
+import type { ISourceOptions } from "@tsparticles/engine";
+
+export default function App() {
+  const [isLogin, setIsLogin] = createSignal(true);
+  const [theme, setTheme] = createSignal(localStorage.getItem("theme") || "dark");
+  const [email, setEmail] = createSignal("");
+  const [password, setPassword] = createSignal("");
+  const [confirm, setConfirm] = createSignal("");
+  const [emailError, setEmailError] = createSignal("");
+  const [passwordError, setPasswordError] = createSignal("");
+  const [confirmError, setConfirmError] = createSignal("");
+
+  createEffect(() => {
+    document.documentElement.setAttribute("data-theme", theme());
+  });
+
+  onMount(() => {
+    void initParticlesEngine(async (engine) => {
+      await loadSlim(engine);
+    });
+  });
+
+  const options: ISourceOptions = {
+    background: { color: { value: "transparent" } },
+    fpsLimit: 60,
+    particles: {
+      number: { value: 60, density: { enable: true } },
+      color: { value: ["#6c5ce7", "#a29bfe", "#fd79a8", "#00cec9"] },
+      shape: { type: "circle" },
+      opacity: { value: 0.5, random: true },
+      size: { value: { min: 1, max: 3 }, random: true },
+      move: {
+        enable: true,
+        speed: 1,
+        direction: "none",
+        random: true,
+        straight: false,
+        outModes: { default: "out" },
+      },
+    },
+    interactivity: {
+      events: {
+        onHover: { enable: true, mode: "bubble" },
+      },
+      modes: {
+        bubble: { distance: 200, size: 6, duration: 2, opacity: 0.8 },
+      },
+    },
+    detectRetina: true,
+  };
+
+  function validateEmail(value: string): boolean {
+    return /^[^\s@]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)+$/.test(value);
+  }
+
+  function handleSubmit(e: Event) {
+    e.preventDefault();
+    let valid = true;
+
+    if (!email() || !validateEmail(email())) {
+      setEmailError("Please enter a valid email address");
+      valid = false;
+    } else {
+      setEmailError("");
+    }
+
+    if (!password() || password().length < 6) {
+      setPasswordError("Password must be at least 6 characters");
+      valid = false;
+    } else {
+      setPasswordError("");
+    }
+
+    if (!isLogin() && password() !== confirm()) {
+      setConfirmError("Passwords do not match");
+      valid = false;
+    } else {
+      setConfirmError("");
+    }
+
+    if (!valid) return;
+
+    if (isLogin()) {
+      alert("Logged in successfully! (demo)");
+    } else {
+      alert("Account created successfully! (demo)");
+      setIsLogin(true);
+    }
+
+    setEmail("");
+    setPassword("");
+    setConfirm("");
+  }
+
+  function toggleMode() {
+    setIsLogin(!isLogin());
+    setEmailError("");
+    setPasswordError("");
+    setConfirmError("");
+  }
+
+  function toggleTheme() {
+    setTheme(theme() === "dark" ? "light" : "dark");
+    localStorage.setItem("theme", theme());
+  }
+
+  return (
+    <>
+      <div class="auth-container">
+        <div class="auth-card">
+          <div class="auth-header">
+            <h1>{isLogin() ? "Login" : "Register"}</h1>
+            <button class="theme-btn" onClick={toggleTheme} aria-label="Toggle theme">
+              {theme() === "dark" ? "🌙" : "☀️"}
+            </button>
+          </div>
+          <form onSubmit={handleSubmit} novalidate>
+            <div class="form-group">
+              <label for="email">Email</label>
+              <input
+                type="email"
+                id="email"
+                placeholder="you@example.com"
+                value={email()}
+                onInput={(e) => setEmail(e.currentTarget.value)}
+                required
+              />
+              <span class="error">{emailError()}</span>
+            </div>
+            <div class="form-group">
+              <label for="password">Password</label>
+              <input
+                type="password"
+                id="password"
+                placeholder="Enter password"
+                value={password()}
+                onInput={(e) => setPassword(e.currentTarget.value)}
+                required
+              />
+              <span class="error">{passwordError()}</span>
+            </div>
+            <div class="form-group" style={{ display: isLogin() ? "none" : "block" }}>
+              <label for="confirmPassword">Confirm Password</label>
+              <input
+                type="password"
+                id="confirmPassword"
+                placeholder="Confirm password"
+                value={confirm()}
+                onInput={(e) => setConfirm(e.currentTarget.value)}
+              />
+              <span class="error">{confirmError()}</span>
+            </div>
+            <button type="submit">{isLogin() ? "Sign In" : "Create Account"}</button>
+          </form>
+          <p class="toggle-text">
+            <span>{isLogin() ? "Don't have an account?" : "Already have an account?"}</span>
+            <a href="#" onClick={(e) => { e.preventDefault(); toggleMode(); }}>
+              {isLogin() ? "Register" : "Login"}
+            </a>
+          </p>
+        </div>
+      </div>
+      <Particles id="tsparticles" options={options} />
+    </>
+  );
+}

package/template/solid/src/index.css

@@ -0,0 +1,151 @@
+:root {
+  --bg: #0f0f1a;
+  --card-bg: rgba(255, 255, 255, 0.05);
+  --text: #fff;
+  --border: rgba(255, 255, 255, 0.1);
+  --input-bg: rgba(255, 255, 255, 0.08);
+  --accent: #6c5ce7;
+  --accent-hover: #a29bfe;
+  --error: #e74c3c;
+}
+
+[data-theme="light"] {
+  --bg: #f0f0f5;
+  --card-bg: rgba(255, 255, 255, 0.8);
+  --text: #1a1a2e;
+  --border: rgba(0, 0, 0, 0.1);
+  --input-bg: rgba(0, 0, 0, 0.05);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  background: var(--bg);
+  color: var(--text);
+  transition: background 0.3s, color 0.3s;
+}
+
+.auth-container {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+  width: 100%;
+  max-width: 400px;
+  padding: 1rem;
+}
+
+.auth-card {
+  background: var(--card-bg);
+  backdrop-filter: blur(10px);
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  padding: 2rem;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+}
+
+.auth-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1.5rem;
+}
+
+.auth-header h1 {
+  margin: 0;
+  font-size: 1.8em;
+}
+
+.theme-btn {
+  background: none;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 0.4em 0.6em;
+  font-size: 1.2em;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.theme-btn:hover {
+  background: var(--input-bg);
+}
+
+.form-group {
+  margin-bottom: 1rem;
+}
+
+label {
+  display: block;
+  margin-bottom: 0.3em;
+  font-size: 0.9em;
+  opacity: 0.8;
+}
+
+input {
+  width: 100%;
+  padding: 0.7em 1em;
+  font-size: 1em;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--input-bg);
+  color: var(--text);
+  outline: none;
+  transition: border-color 0.2s;
+}
+
+input:focus {
+  border-color: var(--accent);
+}
+
+input::placeholder {
+  color: var(--text);
+  opacity: 0.4;
+}
+
+.error {
+  display: block;
+  margin-top: 0.3em;
+  font-size: 0.8em;
+  color: var(--error);
+  min-height: 1em;
+}
+
+button[type="submit"] {
+  width: 100%;
+  padding: 0.8em;
+  font-size: 1em;
+  font-weight: 600;
+  border: none;
+  border-radius: 8px;
+  background: var(--accent);
+  color: #fff;
+  cursor: pointer;
+  transition: background 0.2s;
+  margin-top: 0.5rem;
+}
+
+button[type="submit"]:hover {
+  background: var(--accent-hover);
+}
+
+.toggle-text {
+  text-align: center;
+  margin-top: 1.5rem;
+  font-size: 0.9em;
+  opacity: 0.7;
+}
+
+.toggle-text a {
+  color: var(--accent);
+  text-decoration: none;
+  margin-left: 0.3em;
+}
+
+.toggle-text a:hover {
+  text-decoration: underline;
+}

package/template/solid/src/main.tsx

@@ -0,0 +1,9 @@
+import "./index.css";
+import { render } from "solid-js/web";
+import App from "./App";
+
+const root = document.getElementById("root");
+
+if (root) {
+  render(() => <App />, root);
+}

package/template/stencil/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "{{projectName}}",
+  "private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "stencil build --dev --watch --serve",
+    "build": "stencil build",
+    "preview": "stencil build --serve"
+  },
+  "dependencies": {
+    "@stencil/core": "^4.43.5",
+    "@tsparticles/stencil": "^4.1.3",
+    "@tsparticles/slim": "^4.1.3",
+    "@tsparticles/configs": "^4.1.3",
+    "@tsparticles/engine": "^4.1.3"
+  },
+  "devDependencies": {
+    "typescript": "^6.0.3"
+  }
+}