@repobit/dex-system-design 0.2.0

package/src/components/FAQ/faq.js

@@ -0,0 +1,176 @@
+import { LitElement, html, css } from "lit";
+import { unsafeHTML } from "lit-html/directives/unsafe-html.js";
+
+import faqCSS from "../FAQ/faq.css.js";
+
+class FaqSection extends LitElement {
+  static properties = {
+    faqs: { type: Array },
+  };
+
+  constructor() {
+    super();
+    // this.title = "Questions? Answers.";
+
+    // this.faqs = [
+    //   {
+    //     question:
+    //       "How does Bitdefender Internet Security protect me against cyber threats?",
+    //     answer: `
+    //       <p>Bitdefender Internet Security provides the best protection in the industry, as proven by the last 10 years of independent test scores.</p>
+    //       <p>Bitdefender Internet Security has won the Product of The Year award from AV-Comparatives.</p>
+    //       <p>You get a wealth of advanced security and privacy features for Windows - plus many bonus features, including secure VPN, Firewall and Parental Control.</p>
+    //     `,
+    //     open: false,
+    //   },
+    //   {
+    //     question:
+    //       "Does Bitdefender Internet Security protect me against ransomware?",
+    //     answer: `
+    //       <p>Bitdefender Internet Security offers unbeatable ransomware protection that keeps your documents, pictures and videos safe from all known and emerging cyber threats.</p>
+    //       <p>This security solution can identify even the latest ransomware families through the use of multiple layers of protection.</p>
+    //     `,
+    //     open: false,
+    //   },
+    //   {
+    //     question:
+    //       "What type of devices and operating systems does Bitdefender Internet Security cover?",
+    //     answer: `
+    //       <p>Bitdefender Internet Security is a security software designed especially for Windows PCs.</p>
+    //     `,
+    //     open: false,
+    //   },
+    //   {
+    //     question: "Why do I need Bitdefender Internet Security on Windows 10?",
+    //     answer: `
+    //       <p>Windows 10 lets you run the security program of your choosing, and Bitdefender Internet Security is the perfect option if you need the best protection available today.</p>
+    //     `,
+    //     open: false,
+    //   },
+    //   {
+    //     question:
+    //       "How does Bitdefender Internet Security compare to other Bitdefender security products?",
+    //     answer: `
+    //       <p>Bitdefender Internet Security is a security software designed especially for Windows PCs.</p>
+    //       <p>Need security for all operating systems? Bitdefender Total Security offers cross-platform protection that covers Windows PCs, Macs, Smartphones and Tablets running Android or iOS for up to 10 devices.</p>
+    //       <p>Need more devices? Bitdefender Family Pack includes Bitdefender Total Security for up to 15 devices.</p>
+    //       <p>Need unlimited VPN traffic? Bitdefender Premium Security includes Bitdefender Total Security, Bitdefender Premium VPN for Unlimited Traffic & Premium Support.</p>
+    //     `,
+    //     open: false,
+    //   },
+    //   {
+    //     question:
+    //       "Do I get a VPN with my Bitdefender Internet Security subscription?",
+    //     answer: `
+    //       <p>Bitdefender Internet Security comes with a basic version of Bitdefender VPN that includes a generous amount of traffic (200 MB/ day, a total of 6GB/ month), free of charge.</p>
+    //       <p>If you need unlimited traffic, add Bitdefender Premium VPN to your Bitdefender subscription.</p>
+
+    //       `,
+    //     open: false,
+    //   },
+    //   {
+    //     question: "Can I try Bitdefender Internet Security before buying?",
+    //     answer: `
+    //       <p>You can always try before you buy. Download your free 30-day full trial version of Bitdefender Internet Security and test the complete package, no credit card required.</p>
+    //       `,
+    //     open: false,
+    //   },
+    //   {
+    //     question: "How do I activate Bitdefender Internet Security?",
+    //     answer: `
+    //       <p>Just go to your email after your purchase and follow the steps to create a Bitdefender Central Account and activate your subscription. Once your subscription is active in your Bitdefender Account, you can start installing & protecting your devices.</p>
+    //       `,
+    //     open: false,
+    //   },
+    //   {
+    //     question:
+    //       "I changed my computer. How do I reinstall Bitdefender Internet Security?",
+    //     answer: `
+    //       <p>Log in to your Bitdefender Central account, go to My Devices and start installing Bitdefender on your new device. If the old computer is no longer in use, you will not need an additional slot on your subscription.</p>
+    //       `,
+    //     open: false,
+    //   },
+    //   {
+    //     question: "Do I have to renew Bitdefender Internet Security?",
+    //     answer: `
+    //       <p>To help you stay protected, Bitdefender Internet Security can be purchased as a subscription that will automatically renew if you enrolled at the time of purchase.</p>
+    //                <p>You can check and modify the status any time in your Central Account (My Subscriptions -> My Payments) if you activated the subscription on the same email address used for purchase.</p>
+    //       <p>If you purchased Bitdefender Internet Security, you can choose to renew early or purchase for another year (or upgrade) close to the expiration date, depending on the time left on your subscription.</p>
+    //       <p>In any case, starting 30 days before your expiration date, you will receive emails informing you that your subscription is about to expire and describing the next steps.</p>
+
+    //       `,
+    //     open: false,
+    //   },
+    //   {
+    //     question: "I have not received the activation code. What should I do?",
+    //     answer: `
+    //       <p>Confirmation emails are typically received shortly after an order is placed. Make sure you also check your Promotions and Spam folders if your email client categorizes emails automatically. For more information, check this <a class="bd-link-noline" href="https://www.bitdefender.com/consumer/support/answer/94956/?adobe_mc=MCMID%3D63411747395182077784244429321314993670%7CMCORGID%3D0E920C0F53DA9E9B0A490D45%2540AdobeOrg%7CTS%3D1738663533" title="Support article.">Support article.</a></p>
+    //    <p>More helpful articles and video tutorials are also available in <a class="bd-link-noline" href="https://www.bitdefender.com/consumer/support/?adobe_mc=MCMID%3D63411747395182077784244429321314993670%7CMCORGID%3D0E920C0F53DA9E9B0A490D45%2540AdobeOrg%7CTS%3D1738663533" title="Bitdefender Support Center.">Bitdefender Support Center.</a></p>
+    //       `,
+    //     open: false,
+    //   },
+    // ];
+  }
+
+
+
+
+  render() {
+    return html`
+      <div class="bd-faq-container">
+        <div class="bd-header-section-faq">
+          <h1 class="bd-section-title">${this.title}</h1>
+        </div>
+        <slot></slot>
+      </div>
+    `;
+  }
+
+}
+class FaqSectionItem extends LitElement {
+  static properties = {
+    title: { type: String },
+    open: { type: Boolean, reflect: true },
+  };
+
+  constructor() {
+    super();
+    this.title = "";
+    this.open = false;
+  }
+
+  
+
+  toggleItem() {
+    this.open = !this.open;
+  }
+
+  render() {
+    return html`
+      <div
+        class="bd-faq-item ${this.open ? "open" : ""}"
+        @click=${this.toggleItem}
+      >
+        <div class="bd-question">
+          <span class="bd-icon">${this.open ? "−" : "+"}</span>
+          <span class="bd-question-text">${this.title}</span>
+        </div>
+
+        ${this.open
+          ? html`
+              <div class="bd-answer">
+                <slot></slot>
+              </div>
+            `
+          : null}
+      </div>
+    `;
+  }
+}
+
+
+FaqSection.styles = [faqCSS];
+FaqSectionItem.styles = [faqCSS];
+
+customElements.define("bd-faq-section-item", FaqSectionItem);
+customElements.define("bd-faq-section", FaqSection);

package/src/components/FAQ/faq.stories.js

@@ -0,0 +1,45 @@
+import { html } from 'lit';
+import './faq.js'; // Importul componentelor tale. Asigură-te că e corect!
+
+export default {
+  title: 'Components/FAQ Section',
+  component: 'bd-faq-section',
+  tags: ['autodocs'],
+  argTypes: {
+    title: { control: 'text' },
+  },
+};
+
+const Template = (args) => html`
+  <bd-faq-section title="${args.title}">
+    <bd-faq-section-item
+      title="How does Bitdefender Internet Security protect me?"
+    >
+      <p>Bitdefender Internet Security provides the best protection...</p>
+      <p>Bitdefender Internet Security provides the best protection...</p>
+      <p>Bitdefender Internet Security provides the best protection...</p>
+    </bd-faq-section-item>
+
+    <bd-faq-section-item
+      title="Does Bitdefender protect me against ransomware?"
+    >
+      <p>
+        Yes! Bitdefender Internet Security offers unbeatable ransomware
+        protection...
+      </p>
+    </bd-faq-section-item>
+
+    <bd-faq-section-item
+      title="Do I get a VPN with Bitdefender Internet Security?"
+    >
+      <p>
+        Bitdefender Internet Security includes a basic VPN with 200MB per day.
+      </p>
+    </bd-faq-section-item>
+  </bd-faq-section>
+`;
+
+export const Default = Template.bind({});
+Default.args = {
+  title: 'Questions? Answers.',
+};

package/src/components/Input/Input.js

@@ -0,0 +1,27 @@
+import { LitElement, html, css } from "lit";
+import inputCSS from '../input/input.css.js'
+
+class CustomInput extends LitElement {
+  static properties = {
+    label: { type: String },
+    type: { type: String },
+  };
+
+  constructor() {
+    super();
+    this.label = "Default Label";
+    this.type = "text"; 
+  }
+
+ 
+  render() {
+    return html`
+      <div class="input-container">
+        <label for="custom-input">${this.label}</label>
+        <input type="${this.type}" id="custom-input" />
+      </div>
+    `;
+  }
+}
+CustomInput.styles = [inputCSS];
+customElements.define("custom-input", CustomInput);

package/src/components/Input/input.css.js

@@ -0,0 +1,68 @@
+import { css } from "../../../node_modules/lit-element/lit-element";
+
+export default css`
+  .input-container {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 1em;
+  }
+
+  label {
+    font-size: 14px;
+    font-weight: bold;
+    margin-bottom: 5px;
+    color: #333;
+  }
+
+  input {
+    width: 20%;
+    padding: 10px;
+    font-size: 16px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    outline: none;
+    transition: border-color 0.3s ease, box-shadow 0.3s ease;
+  }
+
+  input:focus {
+    border-color: #006eff;
+    box-shadow: 0px 0px 5px rgba(0, 110, 255, 0.5);
+  }
+
+  form {
+    max-width: 400px;
+    margin: 20px auto;
+    padding: 10px;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    background-color: #f9f9f9;
+  }
+
+  .form-group {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 15px;
+  }
+
+  .form-group label {
+    font-size: 14px;
+    margin-bottom: 5px;
+    font-weight: bold;
+  }
+
+  .form-group input {
+    padding: 10px;
+    font-size: 16px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    transition: border-color 0.3s ease, box-shadow 0.3s ease;
+    width: 80% !important;
+  }
+
+  .form-group input:focus {
+    border-color: #006eff;
+    box-shadow: 0px 0px 5px rgba(0, 110, 255, 0.5);
+  }
+
+ 
+`;

package/src/components/carousel/carousel.css.js

@@ -0,0 +1,304 @@
+import { css } from "../../../node_modules/lit-element/lit-element";
+
+export default css`
+  :host {
+    display: block;
+    --background-card-grey: var(--color-neutral-25);
+    --border-card-grey: var(--color-neutral-50);
+    --bd-blue-color: var(--color-blue-500);
+  }
+
+  .bd-carousel {
+    display: block;
+    align-items: center;
+    position: relative;
+    margin-bottom: 100px;
+    max-width: 100%;
+    flex-direction: column;
+  }
+
+  .bd-section-title {
+    font-family: var(--font-family-sans);
+    font-weight: var(--font-weight-sans-semibold);
+    font-size: 2em;
+  }
+  div.bd-arrow {
+    padding: var(--size-2);
+  }
+  .bd-header-carousel {
+    display: block;
+    align-items: center;
+    text-align: center;
+    margin-bottom: 50px;
+    margin-top: 50px;
+  }
+  .bd-carousel-container {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding: 1rem;
+  }
+  .bd-arrow {
+    border-radius: 50%;
+    width: var(--size-44);
+    height: var(--size-44);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    box-shadow: var(--size-0) var(--size-2) var(--size-4) rgba(0, 0, 0, 0.1);
+    position: absolute;
+    bottom: -65px;
+    background: var(--bd-blue-color);
+    color: white;
+    font-size: var(--size-20);
+    line-height: 1;
+    text-align: center;
+  }
+
+  .bd-left-arrow {
+    content: url("src/assets/icons/left_normal.png");
+  }
+
+  .bd-left-arrow:hover {
+    content: url("src/assets/icons/left_hover.png");
+  }
+
+  .bd-left-arrow:active {
+    content: url("src/assets/icons/left_clicked.png");
+  }
+
+  .bd-left-arrow:disabled {
+    content: url("src/assets/icons/left_disabled.png");
+  }
+
+  .bd-right-arrow {
+    content: url("src/assets/icons/right_normal.png");
+  }
+
+  .bd-right-arrow:hover {
+    content: url("src/assets/icons/right_hover.png");
+  }
+
+  .bd-right-arrow:active {
+    content: url("src/assets/icons/right_clicked.png");
+  }
+
+  .bd-right-arrow:disabled {
+    content: url("src/assets/icons/right_disabled.png");
+  }
+  .bd-right-arrow.bd-disabled {
+    content: url("src/assets/icons/right_disabled.png");
+    cursor: not-allowed;
+  }
+  .bd-left-arrow.bd-disabled {
+    content: url("src/assets/icons/left_disabled.png");
+    cursor: not-allowed;
+  }
+  .bd-disabled {
+    background: #f1f2f3;
+    color: #a6adb4;
+    cursor: not-allowed;
+  }
+
+  .bd-arrow:first-of-type {
+    right: 60px;
+  }
+
+  .bd-arrow:last-of-type {
+    right: var(--size-10);
+  }
+
+  .bd-carousel-track {
+    display: flex;
+    gap: 2em;
+    scroll-behavior: smooth;
+    flex: 1;
+    padding: var(--size-0) var(--size-20);
+    position: relative;
+    overflow-x: hidden;
+    overflow-y: hidden;
+    z-index: 1;
+    scroll-behavior: smooth;
+    scroll-snap-type: x mandatory;
+    -webkit-overflow-scrolling: touch;
+    transition: scroll-snap-align 0.6s cubic-bezier(0.23, 1, 0.32, 1);
+  }
+
+  .bd-carousel-icon {
+    position: relative;
+    bottom: 30px;
+    max-width: 100%;
+    height: var(--size-40);
+    width: var(--size-40);
+  }
+  .bd-carousel-modal-icon {
+    position: relative;
+    bottom: 15px;
+    max-width: 100%;
+    height: var(--size-40);
+    width: var(--size-40);
+  }
+  .bd-box {
+    flex: 0 0 auto;
+    min-height: 217px;
+    min-width: unset;
+    width: 350px;
+    background: var(--background-card-grey);
+    border-radius: 28px;
+    border: var(--size-2) solid var(--border-card-grey);
+    padding: 2em;
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+    justify-content: center;
+    text-align: start;
+    cursor: pointer;
+    transition: transform 0.2s ease-in-out;
+
+    position: relative;
+    z-index: 2;
+  }
+
+  .bd-box h3 {
+    font-size: var(--size-18);
+    margin: var(--size-0) var(--size-0) 0.5em var(--size-0);
+    font-weight: 600;
+    font-family: var(--font-family-sans);
+  }
+
+  .bd-box p {
+    font-size: var(--size-16);
+    margin: var(--size-0) var(--size-0) 1em var(--size-0);
+    font-family: var(--font-family-sans);
+  }
+
+  .bd-modal {
+    position: fixed;
+    top: var(--size-0);
+    left: var(--size-0);
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999;
+    backdrop-filter: blur(var(--size-12));
+    opacity: 0;
+    transform: scale(0.9);
+    transition: opacity 0.3s ease, transform 0.3s ease;
+  }
+
+  .bd-modal[open] {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  .bd-modal-content {
+    background: #fff;
+    padding: 2em;
+    border-radius: var(--size-12);
+    max-width: 500px;
+    text-align: start;
+    box-shadow: var(--size-0) var(--size-2) var(--size-8) rgba(0, 0, 0, 0.2);
+    font-family: var(--font-family-sans);
+  }
+
+  .bd-modal-content h2 {
+    margin: var(--size-0) var(--size-0) 1em var(--size-0);
+    font-family: var(--font-family-sans);
+  }
+
+  .bd-modal-content button {
+    margin-top: 1em;
+    padding: 0.5em 1em;
+    background: var(--bd-blue-color);
+    color: #fff;
+    border: none;
+    border-radius: var(--size-8);
+    cursor: pointer;
+    font-family: var(--font-family-sans);
+  }
+
+  .bd-plus-button {
+    content: url("src/assets/icons/more_normal.png");
+    position: absolute;
+    bottom: var(--size-10);
+    right: var(--size-10);
+    color: var(--bd-blue-color);
+    width: var(--size-44);
+    height: var(--size-44);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    font-size: 30px;
+    font-weight: bold;
+    cursor: pointer;
+  }
+  .bd-plus-button:hover {
+    content: url("src/assets/icons/more_hover.png");
+  }
+  .bd-plus-button:active {
+    content: url("src/assets/icons/more_pressed.png");
+  }
+
+  .bd-left-arrow {
+    margin-right: var(--size-6);
+  }
+
+  .bd-right-arrow {
+    margin-left: var(--size-6);
+  }
+
+  @media (max-width: 768px) {
+    .bd-carousel-track {
+      flex-wrap: nowrap;
+      overflow-x: hidden;
+      gap: 1em;
+      padding: var(--size-0) var(--size-0);
+    }
+
+    .bd-box {
+      max-width: 100%;
+      margin: var(--size-0) auto;
+    }
+
+    .bd-modal-content {
+      max-width: 90%;
+      padding: 1.5em;
+    }
+
+    .bd-arrow {
+      bottom: -75px;
+      font-size: var(--size-16);
+    }
+
+    .bd-arrow:first-of-type {
+      right: 50px;
+    }
+
+    .bd-arrow:last-of-type {
+      right: var(--size-6);
+    }
+  }
+
+  @media (max-width: 480px) {
+    .bd-box {
+      padding: var(--size-0) var(--size-20);
+      min-height: 300px;
+    }
+
+    .bd-modal-content {
+      padding: 2em;
+    }
+
+    .bd-plus-icon {
+      font-size: var(--size-24);
+    }
+    .bd-carousel-icon {
+      bottom: var(--size-10);
+    }
+  }
+`;