Initial

.github/workflows/deploy.yml

@@ -0,0 +1,37 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Build project
+        run: |
+          mkdir -p dist
+          cp -r src/css/* dist/
+          cp -r src/js/* dist/
+          cp -r src/images/* dist/
+          # Add any build steps here (e.g., minification, bundling)
+          # Example: npm run build
+
+      - name: Deploy to gh-pages
+        uses: peaceiris/actions-gh-pages@v4
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./dist
+          publish_branch: gh-pages

README.md

@@ -0,0 +1,3 @@
+# Openterface_assets
+
+Openterface_assets is a static asset project that includes CSS, JavaScript, and image files for web development. This project is designed to provide a foundation for building web applications with a focus on simplicity and ease of use.

css/extra.css

@@ -0,0 +1,63 @@
+:root {
+    --admonition-border-color: #FF8D1A;
+    --admonition-bg-color-base: rgba(155, 120, 43, 0.1);
+    --icon-frequent-question: url(/assets/frequent-question.svg);
+    --icon-faq: url(/assets/faq.svg);
+}
+
+.md-typeset {
+    .admonition.frequent-question,
+    details.frequent-question,
+    .admonition.faq,
+    details.faq {
+        border-color: var(--admonition-border-color);
+    }
+
+    .frequent-question, .faq {
+        & > .admonition-title, & > summary {
+            background-color: var(--admonition-bg-color-base);
+        }
+
+        & > .admonition-title::before, & > summary::before {
+            background-color: var(--admonition-border-color);
+        }
+    }
+
+    .frequent-question {
+        & > .admonition-title::before, & > summary::before {
+            -webkit-mask-image: var(--icon-frequent-question);
+            mask-image: var(--icon-frequent-question);
+        }
+    }
+
+    .faq {
+        & > .admonition-title::before, & > summary::before {
+            -webkit-mask-image: var(--icon-faq);
+            mask-image: var(--icon-faq);
+        }
+    }
+}
+
+mark.state1 {
+    background-color: #ffd699; /* A somewhat orange color */
+}
+
+mark.state2 {
+    background-color: #ffcccc;
+}
+  
+mark.state3 {
+    background-color: #ccccff;
+}
+  
+mark.state4 {
+    background-color: #ccffcc;
+}
+
+.youtube {
+    color: #EE0F0F;
+}
+
+.faq {
+    color: #FF8D1A
+}

css/signup_form.css

@@ -0,0 +1,158 @@
+/* Signup Form Styles */
+.signup-form-container {
+    width: 100%;
+    max-width: 400px;
+    margin: 1rem auto;
+}
+
+#form_signup {
+    background: transparent;
+    border-radius: 4px;
+    padding: 1rem;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+#form_signup h2 {
+    color: var(--md-footer-fg-color);
+    font-size: 1.2rem;
+    margin-top: 0;
+    margin-bottom: 0.5rem;
+}
+
+#form_signup .gf-field-group {
+    margin-bottom: 0.5rem;
+}
+
+#form_signup input[type="text"],
+#form_signup input[type="email"] {
+    width: 100%;
+    padding: 0.5rem;
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    border-radius: 4px;
+    background-color: rgba(255, 255, 255, 0.1);
+    color: var(--md-footer-fg-color);
+}
+
+#form_signup input[type="text"]::placeholder,
+#form_signup input[type="email"]::placeholder {
+    color: rgba(255, 255, 255, 0.6);
+}
+
+#form_signup .button {
+    background-color: var(--md-accent-fg-color);
+    color: var(--md-accent-bg-color);
+    border: none;
+    padding: 0.5rem 1rem;
+    border-radius: 4px;
+    cursor: pointer;
+    font-weight: bold;
+    transition: background-color 0.3s ease, color 0.3s ease;
+    width: 100%;
+}
+
+#form_signup .button:hover {
+    background-color: #FAA22B;
+    color: var(--md-accent-bg-color);
+}
+
+#form_signup .footnote {
+    text-align: center;
+    font-size: 0.6rem;
+    color: rgba(255, 255, 255, 0.6);
+}
+
+/* Media Queries for Responsive Design */
+@media screen and (max-width: 76.1875em) {
+    .signup-form-container {
+        max-width: 100%;
+    }
+}
+
+@media screen and (max-width: 60em) {
+    #form_signup h2 {
+        font-size: 1rem;
+    }
+}
+
+
+/* Footer flex container */
+.footer-flex-container {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+}
+
+.footer-flex-item {
+    flex: 1 1 auto;
+}
+
+/* Default order for larger screens */
+.signup-form-container {
+    order: 2;
+    max-width: 400px;
+}
+
+.footer-copyright {
+    order: 1;
+}
+
+.footer-social {
+    order: 3;
+}
+
+/* Media query for larger screens */
+@media screen and (min-width: 76.25em) {
+    .footer-flex-container {
+        flex-wrap: nowrap;
+    }
+
+    .signup-form-container {
+        flex: 0 1 auto;
+        margin: 0 1rem;
+    }
+
+    .footer-copyright {
+        text-align: left;
+    }
+
+    .footer-social {
+        text-align: right;
+    }
+}
+
+/* Media query for smaller screens */
+@media screen and (max-width: 76.1875em) {
+    .footer-flex-container {
+        flex-direction: column;
+    }
+
+    .signup-form-container {
+        order: 1;
+        max-width: 100%;
+    }
+
+    .footer-copyright {
+        order: 2;
+        text-align: center;
+    }
+
+    .footer-social {
+        order: 3;
+    }
+
+    /* Center align the content inside the copyright container */
+    .footer-copyright .md-copyright {
+        text-align: center;
+    }
+
+    .footer-copyright .md-copyright__highlight {
+        display: block;
+        margin-bottom: 0.5rem;
+    }
+}
+
+#form-message {
+    font-size: 0.8rem;
+    margin-top: 0.5rem;
+}

images/feature-icons/icon-bios-access-d.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="47.5654" height="47.5652" viewBox="0 0 47.5654 47.5652">
+<defs>
+<clipPath id="clip_0">
+<path transform="matrix(1,0,0,-1,0,47.5652)" d="M0 47.565H47.565V0H0Z"/>
+</clipPath>
+</defs>
+<g clip-path="url(#clip_0)">
+<path transform="matrix(1,0,0,-1,2.9727,42.3629)" d="M0 0C0 .411 .333 .743 .743 .743H17.094C17.504 .743 17.837 .411 17.837 0 17.837-.41 17.504-.743 17.094-.743H.743C.333-.743 0-.41 0 0M1.486 6.689H16.351C17.171 6.689 17.837 6.023 17.837 5.203 17.837 4.381 17.171 3.716 16.351 3.716H1.486C.666 3.716 0 4.381 0 5.203 0 6.023 .666 6.689 1.486 6.689M38.647 5.203C38.647 6.023 39.313 6.689 40.133 6.689 40.954 6.689 41.62 6.023 41.62 5.203 41.62 4.381 40.954 3.716 40.133 3.716 39.313 3.716 38.647 4.381 38.647 5.203M32.701 5.203C32.701 6.023 33.367 6.689 34.188 6.689 35.009 6.689 35.674 6.023 35.674 5.203 35.674 4.381 35.009 3.716 34.188 3.716 33.367 3.716 32.701 4.381 32.701 5.203M1.486 39.39H40.133C40.954 39.39 41.62 38.725 41.62 37.904V17.094C41.62 16.273 40.954 15.607 40.133 15.607H1.486C.666 15.607 0 16.273 0 17.094V37.904C0 38.725 .666 39.39 1.486 39.39M1.486 42.363C-.976 42.363-2.973 40.367-2.973 37.904V17.094C-2.973 14.631-.976 12.635 1.486 12.635H14.864V9.662H0C-1.642 9.662-2.973 8.331-2.973 6.689V-2.229C-2.973-3.872-1.642-5.202 0-5.202H41.62C43.262-5.202 44.593-3.872 44.593-2.229V6.689C44.593 8.331 43.262 9.662 41.62 9.662H26.755V12.635H40.133C42.596 12.635 44.593 14.631 44.593 17.094V37.904C44.593 40.367 42.596 42.363 40.133 42.363Z" fill="#ffffff"/>
+<path transform="matrix(1,0,0,-1,11.1173,15.622702)" d="M0 0H-2.974V-3.784H.108C1.693-3.784 2.487-3.118 2.487-1.784 2.415-.63 1.585-.036 0 0M-.216 4.758H-2.974V1.352H-.216C1.261 1.387 2.019 1.982 2.054 3.136 2.019 4.217 1.261 4.758-.216 4.758M.378-5.027H-4.649V6.055H.108C2.451 5.983 3.694 5.1 3.839 3.407 3.802 2 3.045 1.136 1.568 .812V.757C3.262 .468 4.181-.414 4.325-1.892 4.325-3.982 3.009-5.027 .378-5.027" fill="#ffffff"/>
+<path transform="matrix(1,0,0,-1,0,47.5652)" d="M17.274 37.998H18.95V26.915H17.274Z" fill="#ffffff"/>
+<path transform="matrix(1,0,0,-1,26.0264,19.461102)" d="M0 0C2.306 .108 3.514 1.532 3.623 4.271 3.514 6.974 2.325 8.416 .054 8.597-2.217 8.416-3.425 6.974-3.568 4.271-3.46 1.604-2.271 .18 0 0M.108 10.056C3.46 9.84 5.262 7.911 5.514 4.271 5.334 .703 3.514-1.17 .054-1.352-3.406-1.17-5.209 .703-5.353 4.271-5.173 7.948-3.352 9.875 .108 10.056" fill="#ffffff"/>
+<path transform="matrix(1,0,0,-1,32.6695,17.2985)" d="M0 0 1.73 .378C1.982-1.388 3.009-2.271 4.812-2.271 6.398-2.235 7.227-1.604 7.299-.378 7.407 .45 6.667 1.082 5.083 1.514 4.938 1.586 4.631 1.676 4.164 1.785 4.019 1.82 3.91 1.838 3.838 1.838 1.424 2.343 .289 3.37 .433 4.92 .577 6.793 1.893 7.785 4.379 7.894 6.902 7.929 8.38 6.92 8.813 4.866L7.137 4.487C6.884 5.82 6.001 6.488 4.488 6.488 3.082 6.452 2.325 5.929 2.217 4.92 2.109 4.091 2.974 3.496 4.812 3.136 5.532 2.955 6.073 2.812 6.434 2.704 8.272 2.126 9.172 1.117 9.137-.324 9.065-2.379 7.641-3.441 4.866-3.514 2.09-3.585 .468-2.415 0 0" fill="#ffffff"/>
+</g>
+</svg>