From 31cbb7461dfc9506109ef4fe965f63315f1e2a12 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sun, 12 Oct 2025 07:18:13 +0000 Subject: [PATCH 1/3] Initial plan From 3dec985bb05b20cdbd770ceb2f7ff5ed16c504fe Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sun, 12 Oct 2025 07:22:13 +0000 Subject: [PATCH 2/3] Add Material Design template with MD3 principles Co-authored-by: QTechDevelopment <176184062+QTechDevelopment@users.noreply.github.com> --- Templates/MaterialDesign/README.md | 75 +++++++ Templates/MaterialDesign/index.html | 95 +++++++++ Templates/MaterialDesign/index.js | 37 ++++ Templates/MaterialDesign/style.css | 315 ++++++++++++++++++++++++++++ 4 files changed, 522 insertions(+) create mode 100644 Templates/MaterialDesign/README.md create mode 100644 Templates/MaterialDesign/index.html create mode 100644 Templates/MaterialDesign/index.js create mode 100644 Templates/MaterialDesign/style.css diff --git a/Templates/MaterialDesign/README.md b/Templates/MaterialDesign/README.md new file mode 100644 index 000000000..f8616809d --- /dev/null +++ b/Templates/MaterialDesign/README.md @@ -0,0 +1,75 @@ +# Material Design LinkFree Template + +A modern LinkFree template following Google's Material Design 3 guidelines. + +## Features + +- **Material Design 3**: Latest Google design system with updated color schemes and typography +- **Material Icons**: Official Google Material Icons for a polished look +- **Roboto Font**: Google's signature typeface for Material Design +- **Elevation System**: Multiple shadow levels for depth and hierarchy +- **Ripple Effects**: Interactive touch feedback on link cards +- **Responsive Design**: Optimized for mobile, tablet, and desktop screens +- **Smooth Animations**: Material motion with cubic-bezier easing +- **Accessibility**: Proper focus states and semantic HTML +- **State Layers**: Hover and active states following Material guidelines + +## Customization + +### Colors + +Edit the CSS variables in `style.css` to match your brand: + +```css +:root { + --md-primary: #6750A4; /* Primary brand color */ + --md-primary-container: #EADDFF; + --md-on-primary: #FFFFFF; + /* ... more color variables */ +} +``` + +### Content + +Update the following in `index.html`: + +1. **Profile Photo**: Replace the `src` in the `` tag +2. **Name & Username**: Update the text in profile card +3. **Bio**: Modify the profile description +4. **Links**: Add/remove link cards as needed +5. **Icons**: Change Material Icons to match your needs (see [Material Icons](https://fonts.google.com/icons)) + +### Adding New Links + +Copy and paste this structure to add more links: + +```html + + ICON_NAME +
+ Title + Subtitle +
+ arrow_forward +
+ +``` + +## Material Design Resources + +- [Material Design 3](https://m3.material.io/) +- [Material Icons](https://fonts.google.com/icons) +- [Material Color System](https://m3.material.io/styles/color/overview) +- [Material Typography](https://m3.material.io/styles/typography/overview) + +## Browser Support + +- Chrome (latest) +- Firefox (latest) +- Safari (latest) +- Edge (latest) +- Mobile browsers + +## License + +This template is part of the LinkFree project and follows the same license. diff --git a/Templates/MaterialDesign/index.html b/Templates/MaterialDesign/index.html new file mode 100644 index 000000000..0196d7f23 --- /dev/null +++ b/Templates/MaterialDesign/index.html @@ -0,0 +1,95 @@ + + + + + + Material Design LinkFree + + + + + + + + + + + + + + +
+ +
+
+ Profile Photo +
+

Your Name

+

@yourusername

+

Welcome to my links! Find all my social media and projects here.

+
+ + +
+ + + language +
+ My Website + Visit my personal website +
+ arrow_forward +
+ + + + code +
+ GitHub + Check out my code +
+ arrow_forward +
+ + + + work +
+ LinkedIn + Connect professionally +
+ arrow_forward +
+ + + + photo_camera +
+ Instagram + Follow my journey +
+ arrow_forward +
+ + + + email +
+ Contact Me + Get in touch +
+ arrow_forward +
+ +
+ + + +
+ + + + + diff --git a/Templates/MaterialDesign/index.js b/Templates/MaterialDesign/index.js new file mode 100644 index 000000000..bea507415 --- /dev/null +++ b/Templates/MaterialDesign/index.js @@ -0,0 +1,37 @@ +// Material Design Ripple Effect +document.addEventListener('DOMContentLoaded', function() { + const linkCards = document.querySelectorAll('.md-link-card'); + + linkCards.forEach(card => { + card.addEventListener('click', function(e) { + const ripple = this.querySelector('.md-ripple'); + + if (ripple) { + // Remove existing animation + ripple.style.animation = 'none'; + + // Trigger reflow + void ripple.offsetWidth; + + // Get click position relative to the card + const rect = this.getBoundingClientRect(); + const x = e.clientX - rect.left; + const y = e.clientY - rect.top; + + // Position the ripple + ripple.style.left = x + 'px'; + ripple.style.top = y + 'px'; + + // Restart animation + ripple.style.animation = 'ripple-animation 600ms'; + } + }); + }); +}); + +// Optional: Analytics tracking +function trackLinkClick(linkName) { + console.log('Link clicked:', linkName); + // Add your analytics code here (e.g., Google Analytics, Amplitude, etc.) + // Example: gtag('event', 'click', { 'event_category': 'link', 'event_label': linkName }); +} diff --git a/Templates/MaterialDesign/style.css b/Templates/MaterialDesign/style.css new file mode 100644 index 000000000..daf919098 --- /dev/null +++ b/Templates/MaterialDesign/style.css @@ -0,0 +1,315 @@ +/* Material Design 3 Theme */ +:root { + /* Material Design 3 Color Palette */ + --md-primary: #6750A4; + --md-primary-container: #EADDFF; + --md-on-primary: #FFFFFF; + --md-on-primary-container: #21005D; + + --md-secondary: #625B71; + --md-secondary-container: #E8DEF8; + --md-on-secondary: #FFFFFF; + --md-on-secondary-container: #1D192B; + + --md-surface: #FFFBFE; + --md-surface-variant: #E7E0EC; + --md-on-surface: #1C1B1F; + --md-on-surface-variant: #49454F; + + --md-background: #FFFBFE; + --md-on-background: #1C1B1F; + + --md-outline: #79747E; + --md-outline-variant: #CAC4D0; + + /* Material Design Elevation Shadows */ + --md-elevation-1: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15); + --md-elevation-2: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15); + --md-elevation-3: 0px 1px 3px rgba(0, 0, 0, 0.3), 0px 4px 8px 3px rgba(0, 0, 0, 0.15); + --md-elevation-4: 0px 2px 3px rgba(0, 0, 0, 0.3), 0px 6px 10px 4px rgba(0, 0, 0, 0.15); + + /* Typography - Material Design Type Scale */ + --md-font-family: 'Roboto', sans-serif; + + /* Transitions */ + --md-transition-duration: 300ms; + --md-transition-easing: cubic-bezier(0.4, 0, 0.2, 1); +} + +/* Base Styles */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: var(--md-font-family); + background-color: var(--md-background); + color: var(--md-on-background); + line-height: 1.5; + min-height: 100vh; + display: flex; + justify-content: center; + align-items: center; + padding: 16px; + background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); +} + +/* Material Container */ +.md-container { + max-width: 600px; + width: 100%; + margin: 0 auto; + padding: 24px 0; +} + +/* Profile Card - Material Design Surface */ +.md-card { + background-color: var(--md-surface); + border-radius: 24px; + padding: 32px 24px; + box-shadow: var(--md-elevation-2); + margin-bottom: 24px; + transition: box-shadow var(--md-transition-duration) var(--md-transition-easing); +} + +.md-card:hover { + box-shadow: var(--md-elevation-3); +} + +/* Profile Section */ +.profile-card { + text-align: center; +} + +.profile-image-wrapper { + margin-bottom: 16px; +} + +.profile-image { + width: 96px; + height: 96px; + border-radius: 50%; + object-fit: cover; + border: 4px solid var(--md-primary-container); + box-shadow: var(--md-elevation-2); +} + +.profile-name { + font-size: 28px; + font-weight: 500; + color: var(--md-on-surface); + margin-bottom: 4px; + letter-spacing: 0.15px; +} + +.profile-bio { + font-size: 16px; + font-weight: 400; + color: var(--md-primary); + margin-bottom: 12px; +} + +.profile-description { + font-size: 14px; + font-weight: 400; + color: var(--md-on-surface-variant); + line-height: 20px; + letter-spacing: 0.25px; +} + +/* Links Container */ +.links-container { + display: flex; + flex-direction: column; + gap: 12px; +} + +/* Material Design Link Cards */ +.md-link-card { + position: relative; + display: flex; + align-items: center; + gap: 16px; + padding: 16px 20px; + background-color: var(--md-surface); + border-radius: 16px; + text-decoration: none; + color: var(--md-on-surface); + box-shadow: var(--md-elevation-1); + transition: all var(--md-transition-duration) var(--md-transition-easing); + overflow: hidden; + cursor: pointer; +} + +.md-link-card:hover { + box-shadow: var(--md-elevation-3); + transform: translateY(-2px); + background-color: var(--md-primary-container); +} + +.md-link-card:active { + transform: translateY(0); + box-shadow: var(--md-elevation-2); +} + +/* Link Icon */ +.link-icon { + color: var(--md-primary); + font-size: 24px; + flex-shrink: 0; + transition: transform var(--md-transition-duration) var(--md-transition-easing); +} + +.md-link-card:hover .link-icon { + transform: scale(1.1); +} + +/* Link Content */ +.link-content { + flex: 1; + display: flex; + flex-direction: column; + gap: 2px; +} + +.link-title { + font-size: 16px; + font-weight: 500; + color: var(--md-on-surface); + letter-spacing: 0.1px; +} + +.link-subtitle { + font-size: 12px; + font-weight: 400; + color: var(--md-on-surface-variant); + letter-spacing: 0.4px; +} + +/* Link Arrow */ +.link-arrow { + color: var(--md-on-surface-variant); + font-size: 20px; + flex-shrink: 0; + transition: transform var(--md-transition-duration) var(--md-transition-easing); +} + +.md-link-card:hover .link-arrow { + transform: translateX(4px); + color: var(--md-primary); +} + +/* Material Design Ripple Effect */ +.md-ripple { + position: absolute; + border-radius: 50%; + background-color: rgba(103, 80, 164, 0.3); + width: 100px; + height: 100px; + margin-top: -50px; + margin-left: -50px; + top: 50%; + left: 50%; + animation: ripple-animation 600ms; + opacity: 0; + pointer-events: none; +} + +@keyframes ripple-animation { + from { + opacity: 1; + transform: scale(0); + } + to { + opacity: 0; + transform: scale(4); + } +} + +/* Footer */ +.md-footer { + text-align: center; + margin-top: 32px; + padding: 16px; + color: var(--md-on-surface-variant); + font-size: 14px; + font-weight: 400; +} + +/* Responsive Design - Material Breakpoints */ +@media (max-width: 600px) { + .md-container { + padding: 16px 0; + } + + .md-card { + padding: 24px 16px; + border-radius: 20px; + } + + .md-link-card { + padding: 12px 16px; + gap: 12px; + } + + .profile-name { + font-size: 24px; + } + + .link-icon { + font-size: 22px; + } + + .link-title { + font-size: 15px; + } + + .link-subtitle { + font-size: 11px; + } +} + +/* Tablet and Up */ +@media (min-width: 601px) { + body { + padding: 32px; + } + + .md-container { + padding: 32px 0; + } +} + +/* Focus States for Accessibility */ +.md-link-card:focus-visible { + outline: 2px solid var(--md-primary); + outline-offset: 2px; +} + +.md-link-card:focus { + outline: none; +} + +/* State Layer for Interactive Elements */ +.md-link-card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: var(--md-primary); + opacity: 0; + transition: opacity var(--md-transition-duration) var(--md-transition-easing); + pointer-events: none; +} + +.md-link-card:hover::before { + opacity: 0.08; +} + +.md-link-card:active::before { + opacity: 0.12; +} From 435fe3429c13d1bd37b041c0f0424dd064de9528 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sun, 12 Oct 2025 07:25:56 +0000 Subject: [PATCH 3/3] Address code review feedback for Material Design template Co-authored-by: QTechDevelopment <176184062+QTechDevelopment@users.noreply.github.com> --- Templates/MaterialDesign/README.md | 4 +++- Templates/MaterialDesign/index.js | 8 +++++++- Templates/MaterialDesign/style.css | 3 ++- 3 files changed, 12 insertions(+), 3 deletions(-) diff --git a/Templates/MaterialDesign/README.md b/Templates/MaterialDesign/README.md index f8616809d..59d38024a 100644 --- a/Templates/MaterialDesign/README.md +++ b/Templates/MaterialDesign/README.md @@ -33,12 +33,14 @@ Edit the CSS variables in `style.css` to match your brand: Update the following in `index.html`: -1. **Profile Photo**: Replace the `src` in the `` tag +1. **Profile Photo**: Replace the `src` in the `` tag with your own image URL (currently using a placeholder) 2. **Name & Username**: Update the text in profile card 3. **Bio**: Modify the profile description 4. **Links**: Add/remove link cards as needed 5. **Icons**: Change Material Icons to match your needs (see [Material Icons](https://fonts.google.com/icons)) +> **Note**: Make sure to replace the placeholder profile image with your own image URL! + ### Adding New Links Copy and paste this structure to add more links: diff --git a/Templates/MaterialDesign/index.js b/Templates/MaterialDesign/index.js index bea507415..5d808eff2 100644 --- a/Templates/MaterialDesign/index.js +++ b/Templates/MaterialDesign/index.js @@ -25,11 +25,17 @@ document.addEventListener('DOMContentLoaded', function() { // Restart animation ripple.style.animation = 'ripple-animation 600ms'; } + + // Optional: Track link clicks for analytics + const linkTitle = this.querySelector('.link-title'); + if (linkTitle) { + trackLinkClick(linkTitle.textContent); + } }); }); }); -// Optional: Analytics tracking +// Optional: Analytics tracking function function trackLinkClick(linkName) { console.log('Link clicked:', linkName); // Add your analytics code here (e.g., Google Analytics, Amplitude, etc.) diff --git a/Templates/MaterialDesign/style.css b/Templates/MaterialDesign/style.css index daf919098..cfbd4bc82 100644 --- a/Templates/MaterialDesign/style.css +++ b/Templates/MaterialDesign/style.css @@ -2,6 +2,7 @@ :root { /* Material Design 3 Color Palette */ --md-primary: #6750A4; + --md-primary-rgb: 103, 80, 164; --md-primary-container: #EADDFF; --md-on-primary: #FFFFFF; --md-on-primary-container: #21005D; @@ -205,7 +206,7 @@ body { .md-ripple { position: absolute; border-radius: 50%; - background-color: rgba(103, 80, 164, 0.3); + background-color: rgba(var(--md-primary-rgb), 0.3); width: 100px; height: 100px; margin-top: -50px;