@tsparticles/template-login 4.1.3 → 4.2.0

package/template/inferno/src/App.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/inferno/src/App.tsx

@@ -0,0 +1,158 @@
+import { Component, type ComponentType } from "inferno";
+import Particles, { ParticlesProvider } from "@tsparticles/inferno";
+import { loadSlim } from "@tsparticles/slim";
+import type { Engine, ISourceOptions } from "@tsparticles/engine";
+import "./App.css";
+
+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(val: string): boolean {
+  return /^[^\s@]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)+$/.test(val);
+}
+
+interface AppState {
+  isLogin: boolean;
+  theme: string;
+  email: string;
+  password: string;
+  confirm: string;
+  emailErr: string;
+  passErr: string;
+  confirmErr: string;
+}
+
+const App: ComponentType<Record<string, unknown>> = class App extends Component<Record<string, unknown>, AppState> {
+  constructor(props: Record<string, unknown>) {
+    super(props);
+    this.state = {
+      isLogin: true,
+      theme: localStorage.getItem("theme") || "dark",
+      email: "",
+      password: "",
+      confirm: "",
+      emailErr: "",
+      passErr: "",
+      confirmErr: "",
+    };
+  }
+
+  componentDidMount(): void {
+    document.documentElement.setAttribute("data-theme", this.state.theme);
+  }
+
+  componentDidUpdate(): void {
+    document.documentElement.setAttribute("data-theme", this.state.theme);
+  }
+
+  private setTheme(t: string): void {
+    this.setState({ theme: t });
+    document.documentElement.setAttribute("data-theme", t);
+    localStorage.setItem("theme", t);
+  }
+
+  private toggleTheme = (): void => {
+    this.setTheme(this.state.theme === "dark" ? "light" : "dark");
+  };
+
+  private handleSubmit = (e: Event): void => {
+    e.preventDefault();
+    let valid = true;
+
+    if (!this.state.email || !validateEmail(this.state.email)) {
+      this.setState({ emailErr: "Please enter a valid email address" });
+      valid = false;
+    } else {
+      this.setState({ emailErr: "" });
+    }
+
+    if (!this.state.password || this.state.password.length < 6) {
+      this.setState({ passErr: "Password must be at least 6 characters" });
+      valid = false;
+    } else {
+      this.setState({ passErr: "" });
+    }
+
+    if (!this.state.isLogin) {
+      if (this.state.password !== this.state.confirm) {
+        this.setState({ confirmErr: "Passwords do not match" });
+        valid = false;
+      } else {
+        this.setState({ confirmErr: "" });
+      }
+    }
+
+    if (!valid) return;
+
+    if (this.state.isLogin) {
+      alert("Logged in successfully! (demo)");
+    } else {
+      alert("Account created successfully! (demo)");
+      this.setState({ isLogin: true });
+    }
+
+    this.setState({ email: "", password: "", confirm: "" });
+  };
+
+  private toggleMode = (e: Event): void => {
+    e.preventDefault();
+    this.setState({ isLogin: !this.state.isLogin, emailErr: "", passErr: "", confirmErr: "" });
+  };
+
+  render() {
+    return (
+      <ParticlesProvider init={async (engine: Engine): Promise<void> => { await loadSlim(engine); }}>
+        <div className="auth-container">
+          <div className="auth-card">
+            <div className="auth-header">
+              <h1>{this.state.isLogin ? "Login" : "Register"}</h1>
+              <button className="theme-btn" onClick={this.toggleTheme} aria-label="Toggle theme">{this.state.theme === "dark" ? "🌙" : "☀️"}</button>
+            </div>
+            <form onSubmit={this.handleSubmit} noValidate>
+              <div className="form-group">
+                <label htmlFor="email">Email</label>
+                <input id="email" type="email" placeholder="you@example.com" value={this.state.email} onInput={(e) => this.setState({ email: (e.target as HTMLInputElement).value })} required />
+                <span className="error">{this.state.emailErr}</span>
+              </div>
+              <div className="form-group">
+                <label htmlFor="password">Password</label>
+                <input id="password" type="password" placeholder="Enter password" value={this.state.password} onInput={(e) => this.setState({ password: (e.target as HTMLInputElement).value })} required />
+                <span className="error">{this.state.passErr}</span>
+              </div>
+              {!this.state.isLogin && (
+                <div className="form-group">
+                  <label htmlFor="confirmPassword">Confirm Password</label>
+                  <input id="confirmPassword" type="password" placeholder="Confirm password" value={this.state.confirm} onInput={(e) => this.setState({ confirm: (e.target as HTMLInputElement).value })} />
+                  <span className="error">{this.state.confirmErr}</span>
+                </div>
+              )}
+              <button type="submit">{this.state.isLogin ? "Sign In" : "Create Account"}</button>
+            </form>
+            <p className="toggle-text">
+              <span>{this.state.isLogin ? "Don't have an account?" : "Already have an account?"}</span>
+              <a href="#" onClick={this.toggleMode}>{this.state.isLogin ? "Register" : "Login"}</a>
+            </p>
+          </div>
+        </div>
+        <Particles id="tsparticles" options={options} />
+      </ParticlesProvider>
+    );
+  }
+};
+
+export default App;

package/template/jquery/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "{{projectName}}",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "jquery": "^3.7.1",
+    "@tsparticles/jquery": "^4.1.3",
+    "@tsparticles/slim": "^4.1.3",
+    "@tsparticles/configs": "^4.1.3",
+    "@tsparticles/engine": "^4.1.3"
+  },
+  "devDependencies": {
+    "typescript": "^5.7.2",
+    "vite": "^6.0.0"
+  }
+}

package/template/jquery/src/main.ts

@@ -0,0 +1,110 @@
+import $ from "jquery";
+import "@tsparticles/jquery";
+import { tsParticles } from "@tsparticles/engine";
+import { loadSlim } from "@tsparticles/slim";
+import "./style.css";
+
+let isLogin = true;
+
+function validateEmail(val: string): boolean {
+  return /^[^\s@]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)+$/.test(val);
+}
+
+function setTheme(theme: string): void {
+  document.documentElement.setAttribute("data-theme", theme);
+  $("#themeToggle").text(theme === "dark" ? "🌙" : "☀️");
+  localStorage.setItem("theme", theme);
+}
+
+const savedTheme = localStorage.getItem("theme") || "dark";
+setTheme(savedTheme);
+
+$("#themeToggle").on("click", () => {
+  const current = document.documentElement.getAttribute("data-theme") || "dark";
+  setTheme(current === "dark" ? "light" : "dark");
+});
+
+function validate(): boolean {
+  let valid = true;
+
+  const email = $("#email").val() as string;
+  const password = $("#password").val() as string;
+  const confirm = $("#confirmPassword").val() as string;
+
+  if (!email || !validateEmail(email)) {
+    $("#emailError").text("Please enter a valid email address");
+    valid = false;
+  } else {
+    $("#emailError").text("");
+  }
+
+  if (!password || password.length < 6) {
+    $("#passwordError").text("Password must be at least 6 characters");
+    valid = false;
+  } else {
+    $("#passwordError").text("");
+  }
+
+  if (!isLogin && password !== confirm) {
+    $("#confirmError").text("Passwords do not match");
+    valid = false;
+  } else {
+    $("#confirmError").text("");
+  }
+
+  return valid;
+}
+
+function toggleMode(): void {
+  isLogin = !isLogin;
+  $("#authTitle").text(isLogin ? "Login" : "Register");
+  $("#submitBtn").text(isLogin ? "Sign In" : "Create Account");
+  $("#toggleLabel").text(isLogin ? "Don't have an account?" : "Already have an account?");
+  $("#toggleAuth").text(isLogin ? "Register" : "Login");
+  $("#confirmGroup").toggle(!isLogin);
+  $("#emailError").text("");
+  $("#passwordError").text("");
+  $("#confirmError").text("");
+}
+
+$("#toggleAuth").on("click", (e) => {
+  e.preventDefault();
+  toggleMode();
+});
+
+$("#authForm").on("submit", (e) => {
+  e.preventDefault();
+
+  if (!validate()) return;
+
+  if (isLogin) {
+    alert("Logged in successfully! (demo)");
+  } else {
+    alert("Account created successfully! (demo)");
+    toggleMode();
+  }
+
+  $("#authForm")[0].reset();
+});
+
+(async () => {
+  await loadSlim(tsParticles);
+
+  $("#tsparticles").particles().load({
+    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,
+  });
+})();

package/template/jquery/src/style.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/lit/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "{{projectName}}",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "lit": "^3.5.0",
+    "@tsparticles/lit": "^4.1.3",
+    "@tsparticles/slim": "^4.1.3",
+    "@tsparticles/configs": "^4.1.3",
+    "@tsparticles/engine": "^4.1.3"
+  },
+  "devDependencies": {
+    "typescript": "^5.7.2",
+    "vite": "^6.0.0"
+  }
+}