create-switch-framework-app 0.1.0

package/templates/web/base/assets/logo.svg

@@ -0,0 +1,5 @@
+<svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="8" y="8" width="144" height="144" rx="36" fill="#E60023"/>
+  <path d="M53 59C53 49.6112 60.6112 42 70 42H90C99.3888 42 107 49.6112 107 59V63C107 72.3888 99.3888 80 90 80H78C72.4772 80 68 84.4772 68 90V94C68 103.389 60.3888 111 51 111H50" stroke="white" stroke-width="12" stroke-linecap="round"/>
+  <path d="M110 111H94" stroke="white" stroke-width="12" stroke-linecap="round"/>
+</svg>

package/templates/web/base/assets/script/states.js

@@ -0,0 +1,38 @@
+class States {
+    constructor() {
+        this.state = {"current_batch":{
+            "id":1,
+            "closed":"true"
+        }};
+    }
+
+    // Merge new state directly into the existing state
+    setState(newState = {}) {
+        this.state = Object.assign(this.state, newState);
+    }
+
+    // Retrieve the value of a specific state key
+    getState(stateKey = "") {
+        return stateKey ? this.state[stateKey] : this.state;
+    }
+
+    removeState(stateKey = "") {
+        if (!stateKey) {
+          // If no key provided, clear all state
+          this.state = {};
+          return true;
+        }
+    
+        if (Object.prototype.hasOwnProperty.call(this.state, stateKey)) {
+          delete this.state[stateKey];
+          return true;
+        }
+    
+        // Key not found; consider it a successful no-op or false based on preference
+        // Here we return false to indicate nothing was removed
+        return false;
+    }
+}
+const globalStates=new States();
+
+

package/templates/web/base/assets/script/themechanger.js

@@ -0,0 +1,14 @@
+const checkMode=()=>{
+    let theme = localStorage.getItem('theme');
+    if (!theme) {
+        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            theme = 'dark_mode';
+        } else {
+            theme = 'light_mode';
+        }
+        localStorage.setItem('theme', theme);
+    }
+    return theme;
+}
+
+document.body.classList.add(checkMode()||'light_mode');

package/templates/web/base/assets/styles/styles.css

@@ -0,0 +1,131 @@
+/* Regular */
+@font-face {
+    font-family: 'DM Sans';
+    src: url('/assets/fonts/DMSans-Regular.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+/* italic  */
+@font-face {
+    font-family: 'DM Sans';
+    src: url('/assets/fonts/DMSans-Italic.ttf') format('truetype');
+    font-weight: normal;
+    font-style: italic;
+}
+/* bold */
+@font-face {
+    font-family: 'DM Sans';
+    src: url('/assets/fonts/DMSans-Black.ttf') format('truetype');
+    font-weight: 900;
+    font-style: normal;
+}
+/* bold italic */
+@font-face {
+    font-family: 'DM Sans';
+    src: url('/assets/fonts/DMSans-BoldItalic.ttf') format('truetype');
+    font-weight: 900;
+    font-style: italic;
+}
+/* medium  */
+@font-face {
+    font-family: 'DM Sans';
+    src: url('/assets/fonts/DMSans-Medium.ttf') format('truetype');
+    font-weight: 500;
+    font-style: normal;
+}
+/* medium italic */
+@font-face {
+    font-family: 'DM Sans';
+    src: url('/assets/fonts/DMSans-MediumItalic.ttf') format('truetype');
+    font-weight: 500;
+    font-style: italic;
+} 
+
+
+
+:root {
+  /* Brand */
+  --main_color:           #e60023;
+  --main_color_hover:     #ad081b;
+  --main_color_light:     #fff0f1;
+  --main_color_op1:       rgba(230, 0, 35, 0.08);
+  --main_color_op2:       rgba(230, 0, 35, 0.18);
+
+  /* Surfaces */
+  --white_background:     #ffffff;
+  --page_background:      #ffffff;
+  --surface_2:            #f0f0f0;
+  --surface_3:            #e9e9e9;
+  --surface_hover:        #f8f8f8;
+
+  /* Text */
+  --main_text:            #111111;
+  --sub_text:             #767676;
+  --placeholder_text:     #b0b0b0;
+
+  /* Borders */
+  --border_color:         #e0e0e0;
+  --border_light:         #f0f0f0;
+
+  /* Shadows */
+  --shadow_xs:            0 1px 4px rgba(0,0,0,0.08);
+  --shadow_sm:            0 2px 8px rgba(0,0,0,0.10);
+  --shadow_md:            0 4px 16px rgba(0,0,0,0.12);
+  --shadow_lg:            0 8px 28px rgba(0,0,0,0.16);
+
+  /* Radius */
+  --radius_xs:            8px;
+  --radius_sm:            12px;
+  --radius_md:            16px;
+  --radius_lg:            24px;
+  --radius_pill:          999px;
+
+  /* Typography */
+  --font:                 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
+  --font_size_xs:         11px;
+  --font_size_sm:         13px;
+  --font_size_md:         15px;
+  --font_size_lg:         18px;
+  --font_size_xl:         24px;
+
+  /* Layout */
+  --sidebar_width:        72px;
+  --topbar_height:        64px;
+  --bottombar_height:     64px;
+
+  /* Transitions */
+  --transition_fast:      0.12s ease;
+  --transition_base:      0.2s ease;
+  --transition_slow:      0.35s ease;
+  --font:                 'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
+}
+
+html, body {
+  width: 100%;
+  overflow-x: hidden;
+}
+
+body {
+  margin: 0;
+  background: var(--page_background);
+  color: var(--main_text);
+  font-family: var(--font);
+}
+
+:root[data-theme="dark"] {
+  color-scheme: dark;
+  --white_background: #0b0f14;
+  --page_background: #0b0f14;
+  --surface_2: #111827;
+  --surface_3: #1f2937;
+  --surface_hover: #1f2937;
+  --main_text: #f3f4f6;
+  --sub_text: #9ca3af;
+  --placeholder_text: #6b7280;
+  --border_color: #293241;
+  --border_light: #1b2433;
+  --shadow_xs: 0 1px 4px rgba(0,0,0,0.55);
+  --shadow_sm: 0 2px 8px rgba(0,0,0,0.55);
+  --shadow_md: 0 4px 16px rgba(0,0,0,0.55);
+  --shadow_lg: 0 8px 28px rgba(0,0,0,0.6);
+}

package/templates/web/base/components/SwSplashScreen.js

@@ -0,0 +1 @@
+export { SwStarterSplashScreen as SwSplashScreen } from './SwStarterSplashScreen.js';

package/templates/web/base/components/SwStarterSplashScreen.js

@@ -0,0 +1,140 @@
+export class SwStarterSplashScreen extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  render() {
+    this.shadowRoot.innerHTML = `
+      ${this.styleSheet()}
+      <div class="wrap">
+        <div class="card">
+          <div class="logo-container">
+            <img class="logo" src="/assets/logo.svg" alt="Expo" />
+          </div>
+          <div class="title">Switch Framework</div>
+          <div class="sub">Launching...</div>
+          
+          <div class="loader-container">
+            <div class="loader"></div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  styleSheet() {
+    return `
+      <style>
+        :host {
+          position: fixed;
+          inset: 0;
+          display: block;
+          background: var(--page_background, #fff);
+          z-index: 9999;
+        }
+
+        * {
+          box-sizing: border-box;
+          font-family: var(--font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
+        }
+
+        .wrap {
+          height: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding: 18px;
+        }
+
+        .card {
+          width: min(520px, 100%);
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          gap: 16px;
+        }
+
+        .logo-container {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 100px;
+          height: 100px;
+          background: linear-gradient(135deg, #0091ff 0%, #0073e6 100%);
+          border-radius: 28px;
+          box-shadow: 0 20px 40px rgba(0, 145, 255, 0.25);
+          animation: fadeInScale 0.6s ease-out;
+        }
+
+        .logo {
+          width: 56px;
+          height: 56px;
+          filter: brightness(0) invert(1);
+        }
+
+        .title {
+          font-weight: 700;
+          font-size: 24px;
+          color: var(--main_text, #000);
+          animation: fadeIn 0.8s ease-out 0.2s both;
+        }
+
+        .sub {
+          font-weight: 600;
+          font-size: 13px;
+          color: var(--sub_text, #666);
+          animation: fadeIn 0.8s ease-out 0.3s both;
+        }
+
+        .loader-container {
+          margin-top: 12px;
+          animation: fadeIn 0.8s ease-out 0.4s both;
+        }
+
+        .loader {
+          width: 48px;
+          height: 48px;
+          border: 3px solid rgba(0, 145, 255, 0.15);
+          border-top: 3px solid #0091ff;
+          border-radius: 50%;
+          animation: spin 1s linear infinite;
+        }
+
+        @keyframes spin {
+          to {
+            transform: rotate(360deg);
+          }
+        }
+
+        @keyframes fadeIn {
+          from {
+            opacity: 0;
+          }
+          to {
+            opacity: 1;
+          }
+        }
+
+        @keyframes fadeInScale {
+          from {
+            opacity: 0;
+            transform: scale(0.8);
+          }
+          to {
+            opacity: 1;
+            transform: scale(1);
+          }
+        }
+      </style>
+    `;
+  }
+}
+
+if (!customElements.get('sw-starter-splash')) {
+  customElements.define('sw-starter-splash', SwStarterSplashScreen);
+}

package/templates/web/base/components/SwTabBar.js

@@ -0,0 +1,153 @@
+export class SwTabBar extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this._unsub = null;
+  }
+
+  connectedCallback() {
+    this.render();
+    this.updateActive();
+
+    if (globalStates?.subscribe) {
+      this._unsub = globalStates.subscribe(() => this.updateActive());
+    }
+
+    this.shadowRoot.addEventListener('click', (e) => {
+      const btn = e.target?.closest?.('button[data-route]');
+      if (!btn) return;
+      const route = btn.getAttribute('data-route');
+      const navigate = globalStates?.getState ? globalStates.getState('navigate') : null;
+      if (typeof navigate === 'function') navigate(route);
+    });
+  }
+
+  disconnectedCallback() {
+    if (this._unsub) this._unsub();
+  }
+
+  getTabs() {
+    const layout = globalStates?.getState ? globalStates.getState('tabsLayout') : null;
+    const tabs = Array.isArray(layout?.tabs) ? layout.tabs : [];
+    return tabs;
+  }
+
+  updateActive() {
+    const activeRoute = globalStates?.getState ? globalStates.getState('activeRoute') : '';
+    const tabs = this.getTabs();
+
+    tabs.forEach((t) => {
+      const el = this.shadowRoot.getElementById(`tab-${t.name}`);
+      if (!el) return;
+      const isActive = String(activeRoute || '').startsWith(String(t.name));
+      el.classList.toggle('active', isActive);
+    });
+  }
+
+  render() {
+    const tabs = this.getTabs();
+
+    this.shadowRoot.innerHTML = `
+      ${this.styleSheet()}
+      <nav class="bar" aria-label="Bottom tabs">
+        ${tabs.map((t) => `
+          <button class="tab" id="tab-${t.name}" data-route="${t.name}" type="button">
+            <span class="icon">${this.getIcon(t.icon)}</span>
+            <span class="label">${t.title || t.name}</span>
+          </button>
+        `).join('')}
+      </nav>
+    `;
+  }
+
+  getIcon(name) {
+    const map = {
+      home: `<span class='switch_icon_house'></span>`,
+      compass: `<span class='switch_icon_compass'></span>`,
+      settings: `<span class='switch_icon_gear'></span>`
+    };
+    return map[name] || map.home;
+  }
+
+  styleSheet() {
+    return `
+      <style>
+        @import '/assets/icons/style.css';
+
+        :host {
+          display: block;
+          width: 100%;
+          background: transparent;
+        }
+
+        * {
+          box-sizing: border-box;
+          font-family: var(--font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
+        }
+
+        .bar {
+          display: grid;
+          grid-template-columns: repeat(2, 1fr);
+          gap: 12px;
+          padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
+          border-top: 1px solid var(--border_color, #e5e5e5);
+          background: rgba(255, 255, 255, 0.95);
+          backdrop-filter: saturate(180%) blur(10px);
+        }
+
+        :root[data-theme="dark"] .bar {
+          background: rgba(11, 15, 20, 0.95);
+          border-top-color: rgba(255, 255, 255, 0.1);
+        }
+
+        .tab {
+          appearance: none;
+          border: none;
+          background: transparent;
+          border-radius: 20px;
+          padding: 12px 14px;
+          cursor: pointer;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          gap: 8px;
+          color: var(--sub_text, #666);
+          font-weight: 600;
+          transition: all 0.2s ease;
+        }
+
+        .tab:active {
+          transform: scale(0.95);
+        }
+
+        .tab.active {
+          background: rgba(0, 0, 0, 0.06);
+          color: var(--main_text, #000);
+        }
+
+        :root[data-theme="dark"] .tab.active {
+          background: rgba(255, 255, 255, 0.1);
+        }
+
+        .icon {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 24px;
+          line-height: 1;
+        }
+
+        .label {
+          display: block;
+          text-align: center;
+          font-size: 11px;
+          font-weight: 600;
+        }
+      </style>
+    `;
+  }
+}
+
+if (!customElements.get('sw-tab-bar')) {
+  customElements.define('sw-tab-bar', SwTabBar);
+}

package/templates/web/base/hooks/checkIntro.js

@@ -0,0 +1,14 @@
+export async function checkIntro() {
+  try {
+    const introDone = localStorage.getItem('intro') === 'true';
+    return {
+      introDone,
+      shouldShowIntro: !introDone
+    };
+  } catch (e) {
+    return {
+      introDone: false,
+      shouldShowIntro: false
+    };
+  }
+}

package/templates/web/base/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Switch Framework App</title>
+  <link rel="stylesheet" href="/assets/styles/styles.css">
+  <link rel="stylesheet" href="/assets/icons/style.css">
+</head>
+<body>
+  <sw-app-initial></sw-app-initial>
+  <script type="module" src="/index.js"></script>
+</body>
+</html>

package/templates/web/base/index.js

@@ -0,0 +1,5 @@
+import { startApp } from '/switch-framework/index.js';
+import layout from './app/_layout.js';
+import { appRegisters } from './app/register.js';
+
+startApp(layout, appRegisters);

package/templates/web/base/routes/api.js

@@ -0,0 +1 @@
+//your backend api routes here