maverick-wave 3.0.0

package/gulpfile.js

@@ -0,0 +1,158 @@
+const gulp = require('gulp');
+const fileinclude = require('gulp-file-include');
+const sass = require('gulp-sass')(require('sass'));
+const postcss = require('gulp-postcss');
+const autoprefixer = require('autoprefixer');
+const cleanCSS = require('gulp-clean-css');
+const terser = require('gulp-terser');
+const fs = require('fs');
+const path = require('path');
+const rename = require('gulp-rename');
+const through = require('through2');
+const { deleteAsync } = require('del');
+
+// Paths
+const paths = {
+  root: '.',
+  src: 'src',
+  dist: 'dist',
+  scss: 'src/scss/**/*.scss',
+  html: '*.html',
+  js: 'src/js/*.js',
+  assets: 'src/assets/**/*',
+};
+
+function convertDateFormat(dateStr) {
+  // Use regex to match day, month, and year
+  const regex = /(\d{2})\/(\d{2})\/(\d{4})/;
+  // Replace with year-month-day format
+  return dateStr.replace(regex, '$3-$2-$1');
+}
+
+// Process HTML files
+gulp.task('html', function () {
+  return gulp
+    .src(paths.html)
+    .pipe(
+      fileinclude({
+        prefix: '@@',
+        basepath: '@file',
+      })
+    )
+    .pipe(gulp.dest(paths.dist));
+});
+
+// Process SCSS files
+gulp.task('scss-build', function () {
+  return gulp
+    .src(paths.scss)
+    .pipe(sass().on('error', sass.logError))
+    .pipe(postcss([autoprefixer()]))
+    .pipe(cleanCSS())
+    .pipe(rename('maverick-wave.min.css'))
+    .pipe(gulp.dest(path.join(paths.dist)));
+});
+gulp.task('scss-release', function () {
+  return gulp
+    .src(paths.scss)
+    .pipe(sass().on('error', sass.logError))
+    .pipe(postcss([autoprefixer()]))
+    .pipe(cleanCSS())
+    .pipe(rename('maverick-wave.min.css'))
+    .pipe(gulp.dest(path.join(paths.root)));
+});
+
+// Copy JavaScript files
+gulp.task('js-build', function () {
+  return gulp
+    .src(paths.js)
+    .pipe(terser())
+    .pipe(rename('maverick-wave.min.js'))
+    .pipe(gulp.dest(path.join(paths.dist)));
+});
+gulp.task('js-release', function () {
+  return gulp
+    .src(paths.js)
+    .pipe(terser())
+    .pipe(rename('maverick-wave.min.js'))
+    .pipe(gulp.dest(path.join(paths.root)));
+});
+
+// Copy assets
+gulp.task('assets', function () {
+  return gulp
+    .src(paths.assets, { encoding: false })
+    .pipe(gulp.dest(path.join(paths.dist)));
+});
+
+// Inject build info into HTML
+gulp.task('inject-build-info', function () {
+  // Get package.json data
+  const packageJson = JSON.parse(fs.readFileSync('./package.json', 'utf8'));
+
+  // Create build info object
+  const buildInfo = {
+    name: packageJson.name,
+    version: packageJson.version,
+    buildDate: convertDateFormat(new Date().toLocaleDateString('en-DE')),
+  };
+
+  // Create a custom transform stream to inject build info
+  const injectBuildInfo = through.obj(function (file, enc, cb) {
+    if (file.isBuffer()) {
+      let contents = file.contents.toString();
+
+      // Replace placeholders with actual values
+      contents = contents.replace(/\{\{VERSION\}\}/g, buildInfo.version);
+      contents = contents.replace(
+        /\{\{LAST_BUILD_DATE\}\}/g,
+        buildInfo.buildDate
+      );
+      contents = contents.replace(
+        /\{\{LAST_BUILD_YEAR\}\}/g,
+        buildInfo.buildDate.slice(0, 4)
+      );
+
+      file.contents = Buffer.from(contents);
+    }
+
+    this.push(file);
+    cb();
+  });
+
+  return gulp
+    .src(path.join(paths.dist, '*.html'))
+    .pipe(injectBuildInfo)
+    .pipe(gulp.dest(paths.dist));
+});
+
+// clean - remove dist and maverick-wave.css & maverick-wave.js
+gulp.task('clean', async function () {
+  await deleteAsync(['dist', 'maverick-wave.min.css', 'maverick-wave.min.js'], {
+    force: true,
+  });
+});
+
+// Watch for changes
+gulp.task('watch', function () {
+  gulp.watch(paths.scss, gulp.series('scss-build'));
+  gulp.watch('*.html', gulp.series('html', 'inject-build-info'));
+  gulp.watch('src/partials/*.html', gulp.series('html', 'inject-build-info'));
+  gulp.watch(paths.js, gulp.series('js-build'));
+  gulp.watch(paths.assets, gulp.series('assets'));
+});
+
+// Build task
+gulp.task(
+  'build',
+  gulp.series(
+    gulp.parallel('scss-build', 'js-build', 'assets', 'html'),
+    'inject-build-info'
+  )
+);
+
+// Release task
+gulp.task('release', gulp.series(gulp.parallel('scss-release', 'js-release')));
+
+// Default task
+gulp.task('default', gulp.series('build', 'watch'));

package/index.html

@@ -0,0 +1,472 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, minimum-scale=1, initial-scale=1"
+    />
+    <meta
+      name="format-detection"
+      content="telephone=no,email=no,address=no,date=no"
+    />
+    <title>MaverickWave</title>
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
+    />
+    <link rel="stylesheet" href="maverick-wave.min.css" />
+    <!-- Basic favicon -->
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+
+    <!-- PNG favicons -->
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="favicon/favicon-32x32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="favicon/favicon-16x16.png"
+    />
+
+    <!-- Apple Touch Icon (for iOS devices) -->
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="favicon/apple-touch-icon.png"
+    />
+
+    <!-- Safari Pinned Tab Icon -->
+    <link
+      rel="mask-icon"
+      href="favicon/safari-pinned-tab.svg"
+      color="#5bbad5"
+    />
+
+    <!-- Android/Chrome Icons -->
+    <link rel="manifest" href="favicon/site.webmanifest" />
+
+    <!-- Microsoft Tiles (for Windows) -->
+    <meta name="msapplication-TileColor" content="#da532c" />
+    <meta name="msapplication-config" content="favicon/browserconfig.xml" />
+
+    <!-- Theme Color for browsers that support it -->
+    <meta name="theme-color" content="#ffffff" />
+    <style>
+      /* Additional styles only for the showcase page */
+      .position-relative {
+        position: relative;
+      }
+
+      .version-corner {
+        position: absolute;
+        top: -24px;
+        right: 13%;
+        background: var(--mw-primary-color);
+        color: var(--mw-primary-text-color);
+        font-size: 1.1rem;
+        padding: 0.3rem 0.7rem;
+        border-radius: 0.4rem;
+        font-weight: 600;
+        box-shadow: 3px 7px 10px var(--mw-shadow);
+        transform: rotate(7deg);
+      }
+
+      .color-card {
+        padding: 18px;
+      }
+
+      .color-card p {
+        margin-bottom: 5px !important;
+        font-size: 0.9rem;
+      }
+
+      .color-swatch {
+        width: 100%;
+        height: 70px;
+        border-radius: 6px;
+        margin-bottom: 9px;
+        border: 1px solid var(--mw-border);
+      }
+
+      /* Medium screens */
+      @media (max-width: 992px) {
+        .version-corner {
+          right: 7%;
+          font-size: 1rem;
+        }
+      }
+
+      /* Small screens */
+      @media (max-width: 576px) {
+        .version-corner {
+          right: 4%;
+        }
+
+        .color-swatch {
+          margin: 0 auto 7px auto;
+          width: 92%;
+          height: 50px;
+        }
+      }
+    </style>
+
+    <script src="maverick-wave.min.js"></script>
+  </head>
+
+  <body>
+    <!-- Header -->
+    <header class="mw-header mw-localhost-indicator-activated">
+      <div class="mw-container">
+        @@include('./src/partials/header-container.html')
+      </div>
+    </header>
+
+    <main class="mw-main">
+      <!-- Home section -->
+      <section id="home">
+        <div class="mw-container">
+          @@include('./src/partials/home-container.html')
+        </div>
+      </section>
+
+      <!-- Get started section -->
+      <section id="get-started">
+        <div class="mw-container">
+          <h2 class="mw-section-title">Get started</h2>
+          @@include('./src/partials/get-started-container.html')
+        </div>
+      </section>
+
+      <!-- Documentation section -->
+      <section id="documentation" class="mw-section-alternate">
+        <div class="mw-container">
+          <h2 class="mw-section-title">Documentation</h2>
+          @@include('./src/partials/documentation-container.html')
+        </div>
+      </section>
+
+      <!-- Foundations section -->
+      <section id="foundations">
+        <div class="mw-container">
+          <h2 class="mw-section-title">Foundations</h2>
+          <div class="mw-button-bar mw-button-bar-primary">
+            <a href="#typography" class="mw-btn">Typography</a>
+            <a href="#colors" class="mw-btn">Main Colors</a>
+            <a href="#utilities" class="mw-btn">Utilities</a>
+            <a href="#header-utilities" class="mw-btn">Header Utilities</a>
+            <a href="#coming-soon" class="mw-btn">Coming Soon Banner</a>
+            <a href="#divider" class="mw-btn">Divider</a>
+          </div>
+
+          <!-- Typography container -->
+          <div id="typography">
+            @@include('./src/partials/typography-container.html')
+          </div>
+
+          <!-- Colors container -->
+          <div id="colors">
+            @@include('./src/partials/colors-container.html')
+          </div>
+
+          <!-- Utilities container -->
+          <div id="utilities">
+            @@include('./src/partials/utilities-container.html')
+          </div>
+
+          <!-- Header Utilities container -->
+          <div id="header-utilities">
+            @@include('./src/partials/header-utilities-container.html')
+          </div>
+
+          <!-- Coming Soon container -->
+          <div id="coming-soon">
+            @@include('./src/partials/coming-soon-container.html')
+          </div>
+
+          <!-- Divider container -->
+          <div id="divider">
+            @@include('./src/partials/divider-container.html')
+          </div>
+        </div>
+      </section>
+
+      <!-- Layout section -->
+      <section id="layout" class="mw-section-alternate">
+        <div class="mw-container">
+          <h2 class="mw-section-title">Layout</h2>
+          <div class="mw-button-bar mw-button-bar-primary">
+            <a href="#grid" class="mw-btn">Grid System</a>
+            <a href="#cards" class="mw-btn">Cards</a>
+            <a href="#panels" class="mw-btn">Panels</a>
+            <a href="#tabs" class="mw-btn">Tabs</a>
+            <a href="#accordions" class="mw-btn">Accordions</a>
+            <a href="#tiles" class="mw-btn">Tiles</a>
+            <a href="#breadcrumbs" class="mw-btn">Breadcrumbs</a>
+            <a href="#modals" class="mw-btn">Modals</a>
+            <a href="#html-lists" class="mw-btn">HTML Lists</a>
+            <a href="#item-lists" class="mw-btn">Item Lists</a>
+            <a href="#stepper" class="mw-btn">Stepper</a>
+          </div>
+
+          <!-- Grid container -->
+          <div id="grid">@@include('./src/partials/grid-container.html')</div>
+
+          <!-- Cards container -->
+          <div id="cards">@@include('./src/partials/cards-container.html')</div>
+
+          <!-- Panels container -->
+          <div id="panels">
+            @@include('./src/partials/panels-container.html')
+          </div>
+
+          <!-- Tabs container -->
+          <div id="tabs">@@include('./src/partials/tabs-container.html')</div>
+
+          <!-- Accordions contaier -->
+          <div id="accordions">
+            @@include('./src/partials/accordions-container.html')
+          </div>
+
+          <!-- Tiles container -->
+          <div id="tiles">@@include('./src/partials/tiles-container.html')</div>
+
+          <!-- Breadcrumbs container -->
+          <div id="breadcrumbs">
+            @@include('./src/partials/breadcrumbs-container.html')
+          </div>
+
+          <!-- Modals container -->
+          <div id="modals">
+            @@include('./src/partials/modals-container.html')
+          </div>
+
+          <!-- HTML Lists container -->
+          <div id="html-lists">
+            @@include('./src/partials/html-lists-container.html')
+          </div>
+
+          <!-- Item Lists container -->
+          <div id="item-lists">
+            @@include('./src/partials/item-lists-container.html')
+          </div>
+
+          <!-- Stepper container -->
+          <div id="stepper">
+            @@include('./src/partials/stepper-container.html')
+          </div>
+        </div>
+      </section>
+
+      <!-- Components section -->
+      <section id="components">
+        <div class="mw-container">
+          <h2 class="mw-section-title">Components</h2>
+          <div class="mw-button-bar mw-button-bar-primary">
+            <a href="#buttons" class="mw-btn">Buttons</a>
+            <a href="#button-bar" class="mw-btn">Button Bar</a>
+            <a href="#progress" class="mw-btn">Progress Bars</a>
+            <a href="#spinners" class="mw-btn">Loading Spinners</a>
+            <a href="#avatars" class="mw-btn">Avatars</a>
+            <a href="#tags" class="mw-btn">Tags</a>
+            <a href="#ratings" class="mw-btn">Ratings</a>
+            <a href="#info" class="mw-btn">Info</a>
+            <a href="#alerts" class="mw-btn">Alerts</a>
+            <a href="#code" class="mw-btn">Code</a>
+            <a href="#skeleton" class="mw-btn">Skeleton</a>
+            <a href="#empty-state" class="mw-btn">Empty State</a>
+          </div>
+
+          <!-- Buttons container -->
+          <div id="buttons">
+            @@include('./src/partials/buttons-container.html')
+          </div>
+
+          <!-- Button Bar container -->
+          <div id="button-bar">
+            @@include('./src/partials/button-bar-container.html')
+          </div>
+
+          <!-- Progress container -->
+          <div id="progress">
+            @@include('./src/partials/progress-container.html')
+          </div>
+
+          <!-- Spinners container -->
+          <div id="spinners">
+            @@include('./src/partials/spinners-container.html')
+          </div>
+
+          <!-- Avatars container -->
+          <div id="avatars">
+            @@include('./src/partials/avatars-container.html')
+          </div>
+
+          <!-- Tags container -->
+          <div id="tags">@@include('./src/partials/tags-container.html')</div>
+
+          <!-- Ratings container -->
+          <div id="ratings">
+            @@include('./src/partials/ratings-container.html')
+          </div>
+
+          <!-- Info container -->
+          <div id="info">@@include('./src/partials/info-container.html')</div>
+
+          <!-- Alerts container -->
+          <div id="alerts">
+            @@include('./src/partials/alerts-container.html')
+          </div>
+
+          <!-- Code container -->
+          <div id="code">@@include('./src/partials/code-container.html')</div>
+
+          <!-- Skeleton container -->
+          <div id="skeleton">
+            @@include('./src/partials/skeleton-container.html')
+          </div>
+
+          <!-- Empty State container -->
+          <div id="empty-state">
+            @@include('./src/partials/empty-state-container.html')
+          </div>
+        </div>
+      </section>
+
+      <!-- Forms section -->
+      <section id="forms" class="mw-section-alternate">
+        <div class="mw-container">
+          <h2 class="mw-section-title">Forms</h2>
+          <div class="mw-button-bar mw-button-bar-primary">
+            <a href="#form-elements" class="mw-btn">Form Elements</a>
+            <a href="#input-group" class="mw-btn">Input Group</a>
+            <a href="#form-field" class="mw-btn">Field Pattern</a>
+            <a href="#form" class="mw-btn">Form</a>
+            <a href="#login" class="mw-btn">Login</a>
+          </div>
+
+          <!-- Form elements container -->
+          <div id="form-elements">
+            @@include('./src/partials/form-elements-container.html')
+          </div>
+
+          <!-- Input Group container -->
+          <div id="input-group">
+            @@include('./src/partials/input-group-container.html')
+          </div>
+
+          <!-- Form Field pattern container -->
+          <div id="form-field">
+            @@include('./src/partials/form-field-container.html')
+          </div>
+
+          <!-- Form container -->
+          <div id="form">@@include('./src/partials/form-container.html')</div>
+
+          <!-- Login container -->
+          <div id="login">@@include('./src/partials/login-container.html')</div>
+        </div>
+      </section>
+
+      <!-- Data & display section -->
+      <section id="data-display">
+        <div class="mw-container">
+          <h2 class="mw-section-title">Data & Display</h2>
+          <div class="mw-button-bar mw-button-bar-primary">
+            <a href="#meta-info" class="mw-btn">Meta Info</a>
+            <a href="#tables" class="mw-btn">Tables</a>
+            <a href="#pagination" class="mw-btn">Pagination</a>
+            <a href="#timelines" class="mw-btn">Timelines</a>
+            <a href="#gallery" class="mw-btn">Image Gallery</a>
+            <a href="#techstack-bucket" class="mw-btn"
+              >Technology Stack Bucket</a
+            >
+            <a href="#content-slider" class="mw-btn">Content Slider</a>
+            <a href="#blog-posts" class="mw-btn">Blog Posts</a>
+          </div>
+
+          <!-- Meta Info container -->
+          <div id="meta-info">
+            @@include('./src/partials/meta-info-container.html')
+          </div>
+
+          <!-- Tables container -->
+          <div id="tables">
+            @@include('./src/partials/tables-container.html')
+          </div>
+
+          <!-- Pagination container -->
+          <div id="pagination">
+            @@include('./src/partials/pagination-container.html')
+          </div>
+
+          <!-- Timeline container -->
+          <div id="timelines">
+            @@include('./src/partials/timelines-container.html')
+          </div>
+
+          <!-- Gallery container-->
+          <div id="gallery">
+            @@include('./src/partials/gallery-container.html')
+          </div>
+
+          <!-- Tech stack container-->
+          <div id="techstack-bucket">
+            @@include('./src/partials/techstack-bucket-container.html')
+          </div>
+
+          <!-- Content slider container-->
+          <div id="content-slider">
+            @@include('./src/partials/content-slider-container.html')
+          </div>
+
+          <!-- Blogposts container-->
+          <div id="blog-posts">
+            @@include('./src/partials/blog-posts-container.html')
+          </div>
+        </div>
+      </section>
+    </main>
+
+    <!-- Footer -->
+    <footer class="mw-footer">
+      <div class="mw-container">
+        @@include('./src/partials/footer-container.html')
+      </div>
+    </footer>
+    <script>
+      // just for the showcase (login button triggers login error)
+      document.addEventListener('DOMContentLoaded', () => {
+        const loginCard = document.querySelector('.mw-login');
+        const form = document.getElementById('login-form');
+        if (form) {
+          const btn = form.querySelector('.mw-btn-primary');
+          if (btn) {
+            btn.addEventListener('click', (e) => {
+              e.preventDefault();
+              loginCard.classList.remove('mw-login-error');
+              void loginCard.offsetWidth;
+              loginCard.classList.add('mw-login-error');
+              setTimeout(() => {
+                loginCard.classList.remove('mw-login-error');
+              }, 4000);
+            });
+          }
+        }
+      });
+
+      // for the modals
+      function openModal(modalId) {
+        document.getElementById(modalId).classList.add('mw-modal-open');
+      }
+
+      function closeModal(modalId) {
+        document.getElementById(modalId).classList.remove('mw-modal-open');
+      }
+    </script>
+  </body>
+</html>