From 820a6ca93456cbc0dadb2925a5cfbd7d829dd6cd 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:47 +0000 Subject: [PATCH 1/2] Initial plan From f8bd2a1bbd1b7d9cdc1d4af6a39d6783ca0cc986 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sun, 12 Oct 2025 07:23:44 +0000 Subject: [PATCH 2/2] Add Origami theme with paper folding effects Co-authored-by: QTechDevelopment <176184062+QTechDevelopment@users.noreply.github.com> --- Templates/Origami/README.md | 77 ++++++++++ Templates/Origami/index.html | 41 ++++++ Templates/Origami/style.css | 264 +++++++++++++++++++++++++++++++++++ 3 files changed, 382 insertions(+) create mode 100644 Templates/Origami/README.md create mode 100644 Templates/Origami/index.html create mode 100644 Templates/Origami/style.css diff --git a/Templates/Origami/README.md b/Templates/Origami/README.md new file mode 100644 index 000000000..37b2f520f --- /dev/null +++ b/Templates/Origami/README.md @@ -0,0 +1,77 @@ +# Origami Theme + +> A beautiful LinkFree theme inspired by the art of origami paper folding + +## Features + +- ðŸŽĻ Paper-inspired color palette with soft, warm tones +- 📄 Folded paper corner effects on cards +- ðŸĶĒ Decorative animated origami bird element +- 🌊 3D transform effects on hover +- ðŸ“ą Fully responsive design +- 🎭 Soft shadows mimicking paper depth + +## Preview + +The theme features: +- Gradient background in warm peachy tones +- Paper-textured content card with folded corner +- Profile photo with layered circular borders +- Link cards with origami-style folded corners +- Hover effects that lift and tilt the cards +- Floating origami bird decoration + +## Customization + +### To Use + +1. Fork and Clone the repo +2. Navigate to `Templates/Origami/` +3. Edit `index.html`: + - Change the title: + ```html + Your Name | Origami Theme + ``` + - Update the profile photo: + ```html + Your Name + ``` + - Change the username: + ```html +

@yourusername

+ ``` + - Add/Replace your links by editing or adding: + ```html + + Your Link Title + + ``` + +### Color Customization + +Edit the CSS variables in `style.css`: + +```css +:root { + --paper-white: #fafafa; /* Main card background */ + --paper-cream: #f5f1e8; /* Content background */ + --fold-shadow: #d4cfc4; /* Paper fold shadows */ + --accent-coral: #ff6b6b; /* Primary accent color */ + --accent-teal: #4ecdc4; /* Secondary accent color */ + --text-dark: #2d3436; /* Main text color */ + --text-light: #636e72; /* Footer text color */ +} +``` + +You can also modify the background gradient in the `body` selector: +```css +background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); +``` + +## Credits + +Theme inspired by the delicate art of origami paper folding, bringing elegance and creativity to your link page. + +## License + +Free to use and modify for personal and commercial projects. diff --git a/Templates/Origami/index.html b/Templates/Origami/index.html new file mode 100644 index 000000000..9c6734621 --- /dev/null +++ b/Templates/Origami/index.html @@ -0,0 +1,41 @@ + + + + + + Origami Theme | LinkFree + + + + +
+
+
+
+ User Photo +
+ +

@origami_lover

+ + + + +
+
+ + diff --git a/Templates/Origami/style.css b/Templates/Origami/style.css new file mode 100644 index 000000000..2255d27a6 --- /dev/null +++ b/Templates/Origami/style.css @@ -0,0 +1,264 @@ +@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap'); + +:root { + --font: 'Quicksand', sans-serif; + --paper-white: #fafafa; + --paper-cream: #f5f1e8; + --fold-shadow: #d4cfc4; + --accent-coral: #ff6b6b; + --accent-teal: #4ecdc4; + --text-dark: #2d3436; + --text-light: #636e72; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); + color: var(--text-dark); + font-family: var(--font); + min-height: 100vh; + display: flex; + align-items: center; + justify-content: center; + position: relative; + overflow-x: hidden; +} + +/* Decorative origami bird in corner */ +.origami-bird { + position: fixed; + top: 30px; + right: 30px; + width: 80px; + height: 80px; + background: var(--accent-teal); + clip-path: polygon(50% 0%, 0% 50%, 50% 100%, 100% 50%); + opacity: 0.3; + transform: rotate(45deg); + animation: float 6s ease-in-out infinite; + z-index: 1; +} + +@keyframes float { + 0%, 100% { + transform: rotate(45deg) translateY(0px); + } + 50% { + transform: rotate(45deg) translateY(-20px); + } +} + +.container { + width: 100%; + max-width: 600px; + padding: 20px; + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; +} + +.content { + width: 100%; + background: var(--paper-cream); + padding: 50px 40px; + border-radius: 10px; + position: relative; + box-shadow: + 0 10px 40px rgba(0, 0, 0, 0.1), + inset -5px -5px 10px rgba(0, 0, 0, 0.05); +} + +/* Paper fold effect on top corner */ +.content::before { + content: ''; + position: absolute; + top: 0; + right: 0; + width: 0; + height: 0; + border-style: solid; + border-width: 0 60px 60px 0; + border-color: transparent var(--fold-shadow) transparent transparent; + filter: drop-shadow(-2px 2px 3px rgba(0, 0, 0, 0.1)); +} + +.content::after { + content: ''; + position: absolute; + top: 0; + right: 0; + width: 0; + height: 0; + border-style: solid; + border-width: 0 60px 60px 0; + border-color: transparent var(--paper-white) transparent transparent; +} + +.photo-wrapper { + position: relative; + width: 120px; + height: 120px; + margin: 0 auto 30px; +} + +#userPhoto { + width: 120px; + height: 120px; + display: block; + border-radius: 50%; + border: 4px solid var(--paper-white); + box-shadow: + 0 8px 20px rgba(0, 0, 0, 0.15), + 0 0 0 8px var(--paper-cream), + 0 0 0 12px var(--accent-coral); + position: relative; + z-index: 2; +} + +#userName { + width: 100%; + color: var(--text-dark); + font-size: 1.8rem; + font-weight: 700; + text-align: center; + text-decoration: none; + line-height: 1.25; + display: block; + margin-bottom: 40px; + transition: color 0.3s ease; +} + +#userName:hover { + color: var(--accent-coral); +} + +#links { + width: 100%; + display: flex; + flex-direction: column; + gap: 20px; + margin-bottom: 30px; +} + +.link { + display: block; + padding: 18px 30px; + background: var(--paper-white); + color: var(--text-dark); + font-size: 1.1rem; + font-weight: 500; + text-align: center; + text-decoration: none; + border-radius: 8px; + position: relative; + overflow: hidden; + box-shadow: + 4px 4px 8px rgba(0, 0, 0, 0.1), + -2px -2px 6px rgba(255, 255, 255, 0.8); + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + transform-style: preserve-3d; +} + +/* Paper fold corner effect on links */ +.link::before { + content: ''; + position: absolute; + top: 0; + right: 0; + width: 0; + height: 0; + border-style: solid; + border-width: 0 25px 25px 0; + border-color: transparent var(--fold-shadow) transparent transparent; + transition: all 0.3s ease; + opacity: 0.5; +} + +.link:hover { + transform: translateY(-5px) rotateX(5deg); + box-shadow: + 8px 8px 20px rgba(0, 0, 0, 0.15), + -4px -4px 12px rgba(255, 255, 255, 0.9); + background: linear-gradient(135deg, var(--paper-white) 0%, var(--paper-cream) 100%); +} + +.link:hover::before { + border-width: 0 35px 35px 0; + border-color: transparent var(--accent-teal) transparent transparent; + opacity: 0.8; +} + +.link:active { + transform: translateY(-2px) rotateX(2deg); + box-shadow: + 4px 4px 12px rgba(0, 0, 0, 0.12), + -2px -2px 8px rgba(255, 255, 255, 0.9); +} + +.link-text { + position: relative; + z-index: 1; +} + +footer { + text-align: center; + color: var(--text-light); + font-size: 0.9rem; + font-weight: 400; + margin-top: 20px; + font-style: italic; +} + +/* Responsive adjustments */ +@media (max-width: 600px) { + .content { + padding: 40px 30px; + } + + .origami-bird { + width: 60px; + height: 60px; + top: 20px; + right: 20px; + } + + #userPhoto { + width: 100px; + height: 100px; + } + + .photo-wrapper { + width: 100px; + height: 100px; + } + + #userName { + font-size: 1.5rem; + } + + .link { + padding: 16px 25px; + font-size: 1rem; + } +} + +@media (max-width: 400px) { + .content { + padding: 30px 20px; + } + + #userName { + font-size: 1.3rem; + } + + .link { + padding: 14px 20px; + font-size: 0.95rem; + } +}