maverick-wave 3.0.0

package/src/partials/footer-container.html

@@ -0,0 +1,113 @@
+<div class="mw-footer-top">
+  <div class="mw-footer-column">
+    <h3>The framework</h3>
+    <p>
+      A lightweight, modern CSS framework for building responsive websites with
+      elegance and speed. While AI tools helped kickstart the development of
+      some components and provided initial structure, approximately 80% of the
+      codebase required manual refinement and customization.
+    </p>
+  </div>
+
+  <div class="mw-footer-column">
+    <h3>Quick Links</h3>
+    <ul>
+      <li>
+        <a href="#home"> Home </a>
+      </li>
+      <li>
+        <a href="#documentation"> Documentation </a>
+      </li>
+      <li>
+        <a href="#components"> Components </a>
+      </li>
+      <li>
+        <a href="#form-elements"> Form & Elements </a>
+      </li>
+    </ul>
+  </div>
+
+  <div class="mw-footer-column">
+    <h3>Resources</h3>
+    <ul>
+      <li>
+        <a href="#get-started"> Get Started </a>
+      </li>
+      <li>
+        <a
+          href="https://github.com/m1well/maverick-wave/blob/main/CHANGELOG.md"
+          target="_blank"
+        >
+          Changelog
+        </a>
+      </li>
+      <li>
+        <a href="https://github.com/m1well/maverick-wave" target="_blank">
+          GitHub Repository
+        </a>
+      </li>
+    </ul>
+  </div>
+
+  <div class="mw-footer-column">
+    <h3>Contact Me</h3>
+    <p>Have questions or feedback? I'd love to hear from you!</p>
+    <p>Please use the social links below</p>
+  </div>
+</div>
+
+<div class="mw-social-links">
+  <a
+    href="https://github.com/m1well"
+    target="_blank"
+    type="button"
+    data-tooltip="GitHub"
+  >
+    <i class="fab fa-github"></i>
+  </a>
+  <a
+    href="https://www.linkedin.com/in/michael-wellner"
+    target="_blank"
+    data-tooltip="LinkedIn"
+  >
+    <i class="fab fa-linkedin"></i>
+  </a>
+  <a
+    href="https://www.xing.com/profile/Michael_Wellner5/"
+    target="_blank"
+    data-tooltip="Xing"
+  >
+    <i class="fab fa-xing"></i>
+  </a>
+  <a href="https://dev.to/m1well" target="_blank" data-tooltip="dev.to">
+    <i class="fab fa-dev"></i>
+  </a>
+  <a href="mailto:info@m1well.com" target="_blank" data-tooltip="Mail">
+    <i class="fa fa-envelope"></i>
+  </a>
+</div>
+
+<p class="mw-disclaimer">
+  MaverickWave is a lightweight, modern CSS framework for building responsive
+  websites with elegance and speed. It embodies the spirit of innovation and
+  fluidity, just like a maverick wave that charts its own course across the
+  ocean. The framework was named to reflect its bold approach to web
+  design—breaking free from conventional constraints while maintaining a natural
+  flow that adapts seamlessly to any environment. Like the powerful yet graceful
+  movement of waves, MaverickWave combines strength and flexibility, empowering
+  developers to create distinctive digital experiences that stand out in the
+  vast sea of the web.
+</p>
+
+<p class="mw-copyright">
+  &copy; <span>{{LAST_BUILD_YEAR}}</span> MaverickWave v{{VERSION}} - by
+  <a
+    href="https://m1well.com"
+    target="_blank"
+    class="mw-btn mw-btn-link mw-px-0 mw-py-0"
+  >
+    m1well
+  </a>
+</p>
+
+<p class="mw-last-updated">Last updated: <span>{{LAST_BUILD_DATE}}</span></p>

package/src/partials/form-container.html

@@ -0,0 +1,257 @@
+<h3 class="mw-section-subtitle">Form</h3>
+
+<div class="mw-card mw-card-simple">
+  <h3 class="mw-card-title">Example - User Profile Settings</h3>
+  <div class="mw-form">
+    <!-- Personal information -->
+    <div class="mw-form-group">
+      <p class="mw-text-muted mw-mb-3">Personal Information</p>
+      <div class="mw-grid-2">
+        <div class="mw-field">
+          <label class="mw-field-label mw-required" for="firstName"
+            >First Name</label
+          >
+          <input
+            id="firstName"
+            type="text"
+            class="mw-input"
+            placeholder="Jane"
+          />
+        </div>
+        <div class="mw-field">
+          <label class="mw-field-label mw-required" for="lastName"
+            >Last Name</label
+          >
+          <input id="lastName" type="text" class="mw-input" placeholder="Doe" />
+        </div>
+        <div class="mw-field">
+          <label class="mw-field-label mw-required" for="email"
+            >Email Address</label
+          >
+          <div class="mw-input-group">
+            <span class="mw-input-group-prefix"
+              ><i class="fas fa-envelope"></i
+            ></span>
+            <input
+              id="email"
+              type="email"
+              class="mw-input"
+              placeholder="jane.doe@example.com"
+            />
+          </div>
+          <span class="mw-field-hint">Used for login and notifications.</span>
+        </div>
+        <div class="mw-field">
+          <label class="mw-field-label" for="website">Personal Website</label>
+          <div class="mw-input-group">
+            <span class="mw-input-group-prefix">https://</span>
+            <input
+              id="website"
+              type="text"
+              class="mw-input"
+              placeholder="your-domain.com"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Account settings -->
+    <div class="mw-form-group">
+      <p class="mw-text-muted mw-mb-3">Account Settings</p>
+      <div class="mw-grid-2">
+        <div class="mw-field">
+          <label class="mw-field-label mw-required" for="username"
+            >Username</label
+          >
+          <div class="mw-input-group">
+            <span class="mw-input-group-prefix">@</span>
+            <input
+              id="username"
+              type="text"
+              class="mw-input"
+              placeholder="jane_doe"
+            />
+          </div>
+          <span class="mw-field-hint">Visible on your public profile.</span>
+        </div>
+        <div class="mw-field">
+          <label class="mw-field-label mw-required" for="role">Role</label>
+          <select id="role" class="mw-select">
+            <option value="" disabled selected>Select a role</option>
+            <option>Developer</option>
+            <option>Designer</option>
+            <option>Product Manager</option>
+            <option>DevOps Engineer</option>
+            <option>QA Engineer</option>
+          </select>
+        </div>
+        <div class="mw-field">
+          <label class="mw-field-label" for="account-id">Account ID</label>
+          <input
+            id="account-id"
+            type="text"
+            class="mw-input"
+            readonly
+            value="USR-00042"
+          />
+          <span class="mw-field-hint"
+            >This value is assigned and cannot be changed.</span
+          >
+        </div>
+        <div class="mw-field">
+          <label class="mw-field-label mw-required" for="country"
+            >Country</label
+          >
+          <select id="country" class="mw-select">
+            <option value="" disabled selected>Select country</option>
+            <option>Germany</option>
+            <option>Austria</option>
+            <option>Switzerland</option>
+            <option>United States</option>
+            <option>Canada</option>
+          </select>
+        </div>
+      </div>
+    </div>
+
+    <!-- Profile details -->
+    <div class="mw-form-group">
+      <p class="mw-text-muted mw-mb-3">Profile Details</p>
+      <div class="mw-grid-2">
+        <!-- Gender radio -->
+        <div>
+          <p class="mw-text-muted mw-text-sm mw-mb-2">Gender</p>
+          <div class="mw-radio-group mw-radio-group-inline">
+            <label class="mw-radio">
+              <input type="radio" name="gender" value="female" />
+              <div class="mw-radio-button"></div>
+              <div class="mw-radio-label">Female</div>
+            </label>
+            <label class="mw-radio">
+              <input type="radio" name="gender" value="male" />
+              <div class="mw-radio-button"></div>
+              <div class="mw-radio-label">Male</div>
+            </label>
+            <label class="mw-radio">
+              <input type="radio" name="gender" value="other" />
+              <div class="mw-radio-button"></div>
+              <div class="mw-radio-label">Other</div>
+            </label>
+          </div>
+        </div>
+
+        <!-- Interests checkboxes -->
+        <div>
+          <p class="mw-text-muted mw-text-sm mw-mb-2">Interests</p>
+          <div class="mw-checkbox-group mw-checkbox-group-inline">
+            <label class="mw-checkbox">
+              <input type="checkbox" name="interests" value="coding" />
+              <div class="mw-checkbox-box"></div>
+              <div class="mw-checkbox-label">Coding</div>
+            </label>
+            <label class="mw-checkbox">
+              <input type="checkbox" name="interests" value="design" />
+              <div class="mw-checkbox-box"></div>
+              <div class="mw-checkbox-label">Design</div>
+            </label>
+            <label class="mw-checkbox">
+              <input type="checkbox" name="interests" value="devops" />
+              <div class="mw-checkbox-box"></div>
+              <div class="mw-checkbox-label">DevOps</div>
+            </label>
+          </div>
+        </div>
+
+        <!-- Bio textarea -->
+        <div class="mw-field" style="grid-column: 1 / -1">
+          <label class="mw-field-label" for="bio">Bio</label>
+          <textarea
+            id="bio"
+            class="mw-textarea"
+            rows="3"
+            placeholder="Tell us a bit about yourself..."
+          ></textarea>
+          <span class="mw-field-hint"
+            >Maximum 500 characters. Shown on your public profile.</span
+          >
+        </div>
+      </div>
+    </div>
+
+    <!-- Notification preferences -->
+    <div class="mw-form-group">
+      <p class="mw-text-muted mw-mb-3">Notification Preferences</p>
+      <div class="mw-grid-2">
+        <div>
+          <p class="mw-text-muted mw-text-sm mw-mb-3">Channels</p>
+          <div class="mw-toggle-group">
+            <label class="mw-toggle">
+              <input type="checkbox" checked />
+              <div class="mw-toggle-track"></div>
+              <span class="mw-toggle-label">Email notifications</span>
+            </label>
+            <label class="mw-toggle">
+              <input type="checkbox" />
+              <div class="mw-toggle-track"></div>
+              <span class="mw-toggle-label">Push notifications</span>
+            </label>
+            <label class="mw-toggle mw-toggle-warning">
+              <input type="checkbox" checked />
+              <div class="mw-toggle-track"></div>
+              <span class="mw-toggle-label">SMS alerts (costs may apply)</span>
+            </label>
+          </div>
+        </div>
+        <div>
+          <p class="mw-text-muted mw-text-sm mw-mb-3">Account</p>
+          <div class="mw-toggle-group">
+            <label class="mw-toggle mw-toggle-success">
+              <input type="checkbox" checked />
+              <div class="mw-toggle-track"></div>
+              <span class="mw-toggle-label">Profile publicly visible</span>
+            </label>
+            <label class="mw-toggle">
+              <input type="checkbox" checked />
+              <div class="mw-toggle-track"></div>
+              <span class="mw-toggle-label">Weekly digest email</span>
+            </label>
+            <label class="mw-toggle mw-toggle-danger">
+              <input type="checkbox" />
+              <div class="mw-toggle-track"></div>
+              <span class="mw-toggle-label">Allow data for analytics</span>
+            </label>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Experience slider -->
+    <div class="mw-form-group">
+      <p class="mw-text-muted mw-mb-3">Experience</p>
+      <label>
+        <span>Years of professional experience</span>
+        <div class="mw-slider-container">
+          <div class="mw-slider-value mw-slider-numeric" data-value="3"></div>
+          <input
+            type="range"
+            class="mw-slider mw-slider-primary"
+            min="0"
+            max="10"
+            value="3"
+          />
+        </div>
+      </label>
+    </div>
+
+    <div class="mw-form-actions">
+      <p class="mw-form-actions-hint">
+        Changes are saved to your account immediately after clicking Save.
+      </p>
+      <button type="reset" class="mw-btn mw-btn-outline">Reset</button>
+      <button type="submit" class="mw-btn mw-btn-primary">
+        <i class="fas fa-save"></i> Save Profile
+      </button>
+    </div>
+  </div>
+</div>