v2.2
MENU ANIMATIONS
UI SURECART
BUTTONS
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/themify-icons@1.0.1/css/themify-icons.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Glass Card 3D Configurator - BricksFusion</title>
<style>
:root {
--background: #000;
--card-bg: #1e1e1e;
--card-bg-hover: #252525;
--text-primary: #f2f2f7;
--text-secondary: #8e8e93;
--accent: #ef6013;
--accent-hover: #c64c0c;
--border: #2c2c2e;
--shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
--track: #2c2c2e;
--thumb: #ef6013;
--card-radius: 16px;
--input-radius: 8px;
--button-radius: 12px;
--transition: all 0.25s ease;
--font: 'Inter', BlinkMacSystemFont, "San Francisco", "Helvetica Neue", Helvetica, Arial, sans-serif;
--action-bar-height: 70px;
--success: #28a745;
--warning: #ffc107;
--danger: #dc3545;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--font);
background-color: var(--background);
color: var(--text-primary);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
padding-bottom: var(--action-bar-height);
}
.action-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: var(--action-bar-height);
background: linear-gradient(145deg, #1a1a1a, #0f0f0f);
border-top: 1px solid var(--border);
z-index: 1000;
display: flex;
align-items: center;
padding: 0 1.5rem;
gap: 1rem;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
backdrop-filter: blur(10px);
}
.breadcrumb {
display: flex;
align-items: center;
gap: 0.5rem;
flex: 1;
}
.breadcrumb-item {
color: var(--text-secondary);
font-size: var(--text-xs);
font-weight: 500;
text-decoration: none;
transition: var(--transition);
padding: 0.5rem 0.75rem;
border-radius: 6px;
}
.breadcrumb-item:hover {
color: var(--text-primary);
background-color: rgba(255, 255, 255, 0.05);
}
.breadcrumb-item.active {
color: var(--accent);
background-color: rgba(239, 96, 19, 0.1);
}
.breadcrumb-separator {
color: var(--text-secondary);
font-size: var(--text-xs);
opacity: 0.5;
}
.action-buttons {
display: flex;
align-items: center;
gap: 0.75rem;
}
.action-btn {
padding: 0.6rem 1rem;
background-color: var(--card-bg);
color: var(--text-primary);
font-family: var(--font);
font-size: var(--text-xs);
font-weight: 500;
border: 1px solid var(--border);
border-radius: var(--button-radius);
cursor: pointer;
transition: var(--transition);
display: flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
white-space: nowrap;
}
.action-btn:hover {
background-color: var(--card-bg-hover);
border-color: var(--accent);
transform: translateY(-1px);
}
.action-btn.primary {
background: linear-gradient(90deg, var(--accent), #ff8c51);
border-color: var(--accent);
color: white;
}
.action-btn.primary:hover {
background: linear-gradient(90deg, var(--accent-hover), #e67a3f);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(239, 96, 19, 0.3);
}
.data-attribute-display {
background-color: rgba(50, 50, 50, 0.8);
border: 1px solid var(--border);
border-radius: 6px;
padding: 0.5rem 0.75rem;
font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
font-size: var(--text-xs);
color: #ff8c51;
cursor: pointer;
transition: var(--transition);
user-select: all;
}
.data-attribute-display:hover {
background-color: rgba(239, 96, 19, 0.2);
border-color: var(--accent);
}
.container {
max-width: 100%;
margin: 0 auto;
padding: 2rem 1.5rem;
}
.page-header {
text-align: center;
margin-bottom: 2rem;
}
.page-title {
font-size: 2.5rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 0.5rem;
background: linear-gradient(90deg, var(--accent), #ff8c51);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.page-subtitle {
font-size: var(--text-s);
color: var(--text-secondary);
font-weight: 500;
}
.instructions-toggle {
margin-bottom: 2rem;
}
.instructions-card {
background-color: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--card-radius);
box-shadow: var(--shadow);
overflow: hidden;
transition: var(--transition);
}
.instructions-header {
padding: 1rem 1.5rem;
cursor: pointer;
transition: var(--transition);
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid transparent;
}
.instructions-header:hover {
background-color: var(--card-bg-hover);
}
.instructions-card.expanded .instructions-header {
border-bottom-color: var(--border);
}
.instructions-title {
font-size: var(--text-s);
font-weight: 600;
}
.toggle-icon {
font-size: 1.2em;
transition: transform 0.3s ease;
}
.toggle-icon.expanded {
transform: rotate(180deg);
}
.instructions-content {
padding: 0 1.5rem;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease, padding 0.3s ease;
}
.instructions-content.show {
max-height: 500px;
padding: 1.5rem;
}
.instructions-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
.how-to-use ol {
padding-left: 1.5rem;
}
.how-to-use li {
margin-bottom: 0.75rem;
font-size: var(--text-xs);
color: var(--text-secondary);
line-height: 1.6;
}
.how-to-use strong {
color: var(--text-primary);
font-weight: 600;
}
.how-to-use code {
background-color: rgba(50, 50, 50, 0.5);
padding: 0.2rem 0.5rem;
border-radius: 4px;
font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
font-size: var(--text-xs);
color: #ff8c51;
}
.content {
display: grid;
grid-template-columns: 1fr 500px;
gap: 2rem;
align-items: start;
}
.preview-section {
position: sticky;
top: 2rem;
}
.controls-section {
max-width: 500px;
}
.card {
background-color: var(--card-bg);
border-radius: var(--card-radius);
box-shadow: var(--shadow);
overflow: hidden;
margin-bottom: 1.5rem;
border: 1px solid var(--border);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-2px);
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
}
.preview-container {
height: 400px;
width: 100%;
position: relative;
overflow: visible;
border-radius: var(--card-radius);
background-color: #252525;
border: 1px solid var(--border);
box-shadow: var(--shadow);
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
perspective: 1000px;
}
.preview-content {
color: white;
text-align: center;
font-weight: bold;
font-size: var(--text-s);
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
display: none;
}
.preview-controls {
position: absolute;
top: 1rem;
right: 1rem;
display: flex;
gap: 0.5rem;
z-index: 10;
}
.preview-btn {
padding: 0.5rem;
background-color: rgba(0, 0, 0, 0.7);
color: white;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 6px;
cursor: pointer;
transition: var(--transition);
font-size: var(--text-xs);
backdrop-filter: blur(5px);
}
.preview-btn:hover {
background-color: var(--accent);
border-color: var(--accent);
}
.preview-btn svg {
width: 18px;
height: 18px;
stroke: currentColor;
}
.background-selector-wrapper {
position: relative;
display: inline-block;
}
.background-selector-btn {
position: relative;
}
.background-selector-btn:hover {
background-color: rgba(239, 96, 19, 0.2);
border-color: var(--accent);
box-shadow: 0 0 8px rgba(239, 96, 19, 0.3);
}
.hidden-color-input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
z-index: 1;
}
.card-heading {
padding: 1rem 1.5rem;
font-size: var(--text-s);
font-weight: 600;
border-bottom: 1px solid var(--border);
letter-spacing: 0.3px;
display: flex;
justify-content: space-between;
align-items: center;
}
.card-actions {
display: flex;
gap: 0.5rem;
}
.card-action-btn {
padding: 0.4rem 0.8rem;
background-color: transparent;
color: var(--text-secondary);
border: 1px solid var(--border);
border-radius: 6px;
cursor: pointer;
font-size: var(--text-xs);
transition: var(--transition);
}
.card-action-btn:hover {
color: var(--text-primary);
border-color: var(--accent);
background-color: rgba(239, 96, 19, 0.1);
}
.card-content {
padding: 1.5rem;
}
.control-group {
margin-bottom: 1.5rem;
position: relative;
}
.control-group:last-child {
margin-bottom: 0;
}
.control-label {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.75rem;
}
.label-text {
font-size: var(--text-xs);
font-weight: 500;
letter-spacing: 0.2px;
display: flex;
align-items: center;
gap: 0.5rem;
}
.help-tooltip {
cursor: help;
opacity: 0.7;
transition: var(--transition);
}
.help-tooltip:hover {
opacity: 1;
color: var(--accent);
}
.value-display {
display: flex;
align-items: center;
gap: 0.5rem;
}
.value-text {
font-size: var(--text-xs);
color: var(--text-secondary);
background-color: rgba(50, 50, 50, 0.5);
padding: 2px 8px;
border-radius: 4px;
min-width: 45px;
text-align: center;
}
.reset-btn {
padding: 0.2rem 0.4rem;
background-color: transparent;
color: var(--text-secondary);
border: 1px solid var(--border);
border-radius: 4px;
cursor: pointer;
font-size: 10px;
transition: var(--transition);
}
.reset-btn:hover {
color: var(--danger);
border-color: var(--danger);
background-color: rgba(220, 53, 69, 0.1);
}
input[type="range"] {
-webkit-appearance: none;
width: 100%;
height: 6px;
background: var(--track);
border-radius: 3px;
outline: none;
margin: 0.8rem 0;
position: relative;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
background: var(--thumb);
border-radius: 50%;
cursor: pointer;
transition: var(--transition);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
input[type="range"]::-webkit-slider-thumb:hover {
transform: scale(1.2);
box-shadow: 0 0 10px rgba(239, 96, 19, 0.5);
}
input[type="text"],
input[type="number"],
select {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--border);
border-radius: var(--input-radius);
font-family: var(--font);
font-size: var(--text-xs);
color: var(--text-primary);
background-color: var(--card-bg);
margin-bottom: 0.75rem;
outline: none;
transition: var(--transition);
}
input[type="text"]:focus,
input[type="number"]:focus,
select:focus {
border-color: var(--accent);
box-shadow: 0 0 0 2px rgba(239, 96, 19, 0.2);
}
.color-input-group {
position: relative;
border: 1px solid var(--border);
border-radius: var(--input-radius);
padding: 0.75rem;
background-color: rgba(30, 30, 30, 0.7);
transition: var(--transition);
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 12px;
height: 52px;
}
.color-input-group:hover {
border-color: var(--accent);
box-shadow: 0 0 0 1px rgba(239, 96, 19, 0.1);
}
.color-preview {
width: 32px;
height: 32px;
border-radius: 6px;
cursor: pointer;
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
position: relative;
overflow: hidden;
flex-shrink: 0;
background-color: #1e1e1e;
}
.color-preview .gradient-preview {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.color-preview-extended {
flex: 1;
height: 32px;
border-radius: 6px;
position: relative;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
background-color: #1e1e1e;
}
.color-fill {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transition: var(--transition);
}
input[type="color"] {
-webkit-appearance: none;
opacity: 0;
position: absolute;
width: 32px;
height: 32px;
cursor: pointer;
border: none;
padding: 0;
margin: 0;
z-index: 1;
}
.social-inputs {
margin-top: 1rem;
padding: 1rem;
background-color: rgba(50, 50, 50, 0.3);
border-radius: var(--input-radius);
}
.social-inputs h4 {
font-size: var(--text-xs);
font-weight: 600;
margin-bottom: 1rem;
color: var(--text-primary);
}
.social-media-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
max-height: 300px;
overflow-y: auto;
padding-right: 0.5rem;
}
.social-media-list::-webkit-scrollbar {
width: 6px;
}
.social-media-list::-webkit-scrollbar-track {
background: var(--card-bg);
border-radius: 6px;
}
.social-media-list::-webkit-scrollbar-thumb {
background: var(--border);
border-radius: 6px;
}
.social-media-list::-webkit-scrollbar-thumb:hover {
background: var(--accent);
}
.social-media-item {
display: grid;
grid-template-columns: 42px 1fr 38px;
align-items: center;
gap: 0.75rem;
padding: 0.5rem;
background-color: rgba(40, 40, 40, 0.6);
border-radius: var(--input-radius);
border: 1px solid var(--border);
transition: var(--transition);
}
.social-media-item:hover {
border-color: var(--accent);
background-color: rgba(40, 40, 40, 0.8);
}
.social-icon-select {
display: flex;
align-items: center;
justify-content: center;
position: relative;
cursor: pointer;
}
.social-icon-preview {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--card-bg);
border-radius: 50%;
border: 1px solid var(--border);
transition: var(--transition);
}
.social-icon-preview i {
font-size: 16px;
color: var(--accent);
transition: var(--transition);
}
.social-url-input {
width: 100%;
margin: 0;
background-color: rgba(30, 30, 30, 0.8);
}
.social-remove-btn {
width: 28px;
height: 28px;
border-radius: 50%;
background-color: transparent;
border: 1px solid var(--border);
color: var(--text-secondary);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--transition);
}
.social-remove-btn:hover {
background-color: rgba(255, 51, 51, 0.2);
border-color: rgba(255, 51, 51, 0.6);
color: #ff6b6b;
}
.social-icons-dropdown {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
max-width: 580px;
max-height: 80vh;
overflow-y: auto;
background-color: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--card-radius);
z-index: 100;
display: none;
padding: 1.25rem;
grid-template-columns: repeat(6, 1fr);
gap: 0.75rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.icons-modal-header {
grid-column: 1 / -1;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--border);
}
.icons-modal-title {
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
}
.icons-modal-close {
background: none;
border: none;
color: var(--text-secondary);
cursor: pointer;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: var(--transition);
}
.icons-modal-close:hover {
background-color: rgba(255, 255, 255, 0.1);
color: var(--text-primary);
}
.icons-modal-search {
grid-column: 1 / -1;
margin-bottom: 1rem;
position: relative;
}
.icons-modal-search input {
width: 100%;
padding: 0.75rem 1rem 0.75rem 2.5rem;
background-color: rgba(30, 30, 30, 0.8);
border: 1px solid var(--border);
border-radius: var(--input-radius);
color: var(--text-primary);
}
.icons-modal-search i {
position: absolute;
left: 1rem;
top: 50%;
transform: translateY(-50%);
color: var(--text-secondary);
}
.icons-category {
grid-column: 1 / -1;
margin-top: 1rem;
margin-bottom: 0.5rem;
color: var(--text-secondary);
font-size: 14px;
font-weight: 600;
padding-left: 0.5rem;
}
.social-icons-dropdown.active {
display: grid;
}
.social-icon-option {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--card-bg-hover);
border-radius: 50%;
cursor: pointer;
transition: var(--transition);
}
.social-icon-option:hover {
background-color: var(--accent);
}
.social-icon-option i {
font-size: 20px;
color: var(--text-primary);
transition: var(--transition);
}
.social-icon-option:hover i {
color: white;
}
.modal-backdrop {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.7);
z-index: 99;
display: none;
backdrop-filter: blur(2px);
}
.modal-backdrop.active {
display: block;
}
.social-color-control {
margin-top: 1rem;
}
.social-color-label {
display: block;
font-size: var(--text-xs);
margin-bottom: 0.75rem;
font-weight: 500;
}
.color-input-group.social-color {
margin-bottom: 0;
}
.social-add-btn {
margin-top: 1rem;
padding: 0.75rem;
background-color: rgba(40, 40, 40, 0.6);
border: 1px dashed var(--border);
color: var(--text-secondary);
border-radius: var(--input-radius);
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
cursor: pointer;
transition: var(--transition);
}
.social-add-btn:hover {
background-color: rgba(40, 40, 40, 0.8);
border-color: var(--accent);
color: var(--text-primary);
}
.social-add-btn i {
font-size: 16px;
}
.notification {
position: fixed;
bottom: calc(var(--action-bar-height) + 1rem);
left: 50%;
background-color: var(--success);
color: white;
padding: 0.75rem 1rem;
border-radius: var(--input-radius);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
z-index: 1001;
transform: translate(-50%, 200px);
opacity: 0;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
font-size: var(--text-xs);
font-weight: 500;
max-width: 320px;
word-wrap: break-word;
line-height: 1.4;
text-align: center;
}
.notification.show {
transform: translate(-50%, 0);
opacity: 1;
}
/* Glass Card 3D Styles */
.glass-card-wrapper {
position: relative;
width: 300px;
height: 320px;
}
.glass-card-3d {
height: 100%;
border-radius: 50px;
background: linear-gradient(125deg, #FF9966 0%, #FF5E62 100%);
transition: all 0.5s ease-in-out;
transform-style: preserve-3d;
box-shadow: rgba(5, 71, 17, 0) 40px 50px 25px -40px, rgba(5, 71, 17, 0.2) 0px 25px 25px -5px;
position: relative;
}
.glass-card-3d .glass {
transform-style: preserve-3d;
position: absolute;
inset: 8px;
border-radius: 55px;
border-top-right-radius: 100%;
background: linear-gradient(0deg, rgba(255, 255, 255, 0.349) 0%, rgba(255, 255, 255, 0.815) 100%);
transform: translate3d(0px, 0px, 25px);
border-left: 1px solid white;
border-bottom: 1px solid white;
transition: all 0.5s ease-in-out;
}
.glass-card-3d .glass-content {
padding: 100px 60px 0px 30px;
transform: translate3d(0, 0, 26px);
position: relative;
z-index: 1;
}
.glass-card-3d .glass-title {
display: block;
color: #2D1B1B;
font-weight: 900;
font-size: 20px;
}
.glass-card-3d .glass-text {
display: block;
color: rgba(45, 27, 27, 0.8);
font-size: 15px;
margin-top: 20px;
}
.glass-card-3d .glass-bottom {
padding: 10px 12px;
transform-style: preserve-3d;
position: absolute;
bottom: 20px;
left: 20px;
right: 20px;
display: flex;
align-items: center;
justify-content: space-between;
transform: translate3d(0, 0, 26px);
z-index: 1;
}
.glass-card-3d .view-more {
display: flex;
align-items: center;
width: 40%;
justify-content: flex-end;
transition: all 0.2s ease-in-out;
}
.glass-card-3d .view-more:hover {
transform: translate3d(0, 0, 10px);
}
.glass-card-3d .view-more-button {
background: none;
border: none;
color: #2D1B1B;
font-weight: bolder;
font-size: 12px;
cursor: pointer;
text-decoration: none;
}
.glass-card-3d .view-more svg {
fill: none;
stroke: #2D1B1B;
stroke-width: 3px;
max-height: 15px;
width: 15px;
}
.glass-card-3d .social-buttons-container {
display: flex;
gap: 10px;
transform-style: preserve-3d;
}
.glass-card-3d .social-button {
width: 30px;
aspect-ratio: 1;
padding: 5px;
background: #2D1B1B;
border-radius: 50%;
border: none;
cursor: pointer;
display: grid;
place-content: center;
box-shadow: rgba(5, 71, 17, 0.5) 0px 7px 5px -5px;
transition: all 0.3s ease-in-out;
text-decoration: none;
}
.glass-card-3d .social-button i {
font-size: 14px;
color: #FF5E62;
transition: color 0.3s ease-in-out;
}
.glass-card-3d .social-button:hover {
background: #FF5E62;
transform: translateY(-2px);
box-shadow: rgba(5, 71, 17, 0.8) 0px 10px 8px -5px;
}
.glass-card-3d .social-button:hover i {
color: #ffffff;
}
.glass-card-3d .logo {
position: absolute;
right: 0;
top: 0;
transform-style: preserve-3d;
}
.glass-card-3d .circle {
display: block;
position: absolute;
aspect-ratio: 1;
border-radius: 50%;
top: 0;
right: 0;
box-shadow: rgba(100, 100, 111, 0.2) -10px 10px 20px 0px;
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
background: rgba(255, 255, 255, 0.2);
transition: all 0.5s ease-in-out;
}
.glass-card-3d .circle1 {
width: 170px;
transform: translate3d(0, 0, 20px);
top: 8px;
right: 8px;
}
.glass-card-3d .circle2 {
width: 140px;
transform: translate3d(0, 0, 40px);
top: 10px;
right: 10px;
backdrop-filter: blur(1px);
transition-delay: 0.4s;
}
.glass-card-3d .circle3 {
width: 110px;
transform: translate3d(0, 0, 60px);
top: 17px;
right: 17px;
transition-delay: 0.8s;
}
.glass-card-3d .circle4 {
width: 80px;
transform: translate3d(0, 0, 80px);
top: 23px;
right: 23px;
transition-delay: 1.2s;
}
.glass-card-3d .circle5 {
width: 50px;
height: 50px;
transform: translate3d(0, 0, 100px);
top: 30px;
right: 30px;
display: flex;
align-items: center;
justify-content: center;
transition-delay: 1.6s;
overflow: hidden;
border-radius: 50%;
}
.glass-card-3d .circle5 svg,
.glass-card-3d .circle5 img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
object-position: center;
}
.glass-card-3d:hover {
transform: rotate3d(1, 1, 0, 30deg);
box-shadow: rgba(5, 71, 17, 0.3) 30px 50px 25px -40px, rgba(5, 71, 17, 0.1) 0px 25px 30px 0px;
}
.glass-card-3d:hover .circle2 {
transform: translate3d(0, 0, 60px);
}
.glass-card-3d:hover .circle3 {
transform: translate3d(0, 0, 80px);
}
.glass-card-3d:hover .circle4 {
transform: translate3d(0, 0, 100px);
}
.glass-card-3d:hover .circle5 {
transform: translate3d(0, 0, 120px);
}
@media (max-width: 1200px) {
.content {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.preview-section {
position: static;
}
.controls-section {
max-width: 100%;
}
}
@media (max-width: 768px) {
.action-bar {
flex-direction: column;
height: auto;
min-height: var(--action-bar-height);
padding: 0.75rem;
}
.breadcrumb {
order: 1;
width: 100%;
}
.action-buttons {
order: 2;
width: 100%;
justify-content: center;
flex-wrap: wrap;
}
body {
padding-bottom: calc(var(--action-bar-height) + 20px);
}
.notification {
bottom: calc(var(--action-bar-height) + 2rem);
max-width: 280px;
transform: translate(-50%, 250px);
}
.notification.show {
transform: translate(-50%, 0);
opacity: 1;
}
.preview-container {
height: 300px;
}
.data-attribute-display {
font-size: 10px;
padding: 0.4rem 0.6rem;
}
.action-btn {
font-size: 11px;
padding: 0.5rem 0.8rem;
}
.page-title {
font-size: 2rem;
}
.glass-card-wrapper {
width: 250px;
height: 270px;
}
}
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
button:focus-visible,
input:focus-visible,
.action-btn:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: var(--background);
}
::-webkit-scrollbar-thumb {
background: var(--border);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--accent);
}
.loading {
opacity: 0.6;
pointer-events: none;
position: relative;
}
.loading::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
margin: -10px 0 0 -10px;
border: 2px solid var(--border);
border-top-color: var(--accent);
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="action-bar">
<nav class="breadcrumb">
<a href="https://bricksfusion.com" class="breadcrumb-item">Home</a>
<span class="breadcrumb-separator">›</span>
<a href="https://bricksfusion.com/visual-effects/" class="breadcrumb-item">Visual effects</a>
<span class="breadcrumb-separator">›</span>
<span class="breadcrumb-item active">Glass Card 3D</span>
</nav>
<div class="action-buttons">
<div class="data-attribute-display" id="quick-attribute" title="Click to copy data attribute">
data-3d-card
</div>
<button class="action-btn primary" id="download-config" title="Copy JavaScript code (Ctrl+D)" data-protection-animation="true">
<span>📋</span>
Copy JS
</button>
<button class="action-btn" id="copy-full-section" title="Copy complete section JSON for Bricks Builder (Ctrl+S)" data-protection-animation="true">
<span>📦</span>
Copy Full Section
</button>
</div>
</div>
<div class="container">
<div class="page-header">
<h1 class="page-title">Glass Card 3D</h1>
<p class="page-subtitle">Interactive 3D glass morphism cards for Bricks Builder</p>
</div>
<div class="instructions-toggle">
<div class="instructions-card" id="instructions-card">
<div class="instructions-header" id="instructions-toggle">
<div class="instructions-title">
How to Use & Code Information
</div>
<span class="toggle-icon">▼</span>
</div>
<div class="instructions-content" id="instructions-content">
<div class="instructions-grid">
<div class="how-to-use">
<ol>
<li>Customize your 3D glass card using the controls below</li>
<li>Click <strong>Copy JS</strong> to copy the JavaScript code to clipboard</li>
<li>In Bricks Builder, add a <strong>Code</strong> element</li>
<li>Paste or upload the JavaScript code</li>
<li>To add the effect to any section: go to <strong>Section → Style → Attributes</strong>, add <code>data-3d-card</code> as attribute name (leave value empty)</li>
</ol>
</div>
</div>
</div>
</div>
</div>
<div class="content">
<section class="preview-section">
<div class="preview-container" id="glass-card-preview">
<div class="glass-card-wrapper" data-3d-card>
<div class="glass-card-3d">
<div class="glass"></div>
<div class="logo">
<span class="circle circle1"></span>
<span class="circle circle2"></span>
<span class="circle circle3"></span>
<span class="circle circle4"></span>
<span class="circle circle5" style="overflow: hidden; border-radius: 50%; display: flex; align-items: center; justify-content: center; height: 50px;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29.667 31.69" class="svg">
<path id="Path_6" data-name="Path 6" d="M12.827,1.628A1.561,1.561,0,0,1,14.31,0h2.964a1.561,1.561,0,0,1,1.483,1.628v11.9a9.252,9.252,0,0,1-2.432,6.852q-2.432,2.409-6.963,2.409T2.4,20.452Q0,18.094,0,13.669V1.628A1.561,1.561,0,0,1,1.483,0h2.98A1.561,1.561,0,0,1,5.947,1.628V13.191a5.635,5.635,0,0,0,.85,3.451,3.153,3.153,0,0,0,2.632,1.094,3.032,3.032,0,0,0,2.582-1.076,5.836,5.836,0,0,0,.816-3.486Z" transform="translate(0 0)"></path>
<path id="Path_7" data-name="Path 7" d="M75.207,20.857a1.561,1.561,0,0,1-1.483,1.628h-2.98a1.561,1.561,0,0,1-1.483-1.628V1.628A1.561,1.561,0,0,1,70.743,0h2.98a1.561,1.561,0,0,1,1.483,1.628Z" transform="translate(-45.91 0)"></path>
<path id="Path_8" data-name="Path 8" d="M0,80.018A1.561,1.561,0,0,1,1.483,78.39h26.7a1.561,1.561,0,0,1,1.483,1.628v2.006a1.561,1.561,0,0,1-1.483,1.628H1.483A1.561,1.561,0,0,1,0,82.025Z" transform="translate(0 -51.963)"></path>
</svg>
</span>
</div>
<div class="glass-content">
<span class="glass-title">Card Title</span>
<span class="glass-text">Card description goes here</span>
</div>
<div class="glass-bottom">
<div class="social-buttons-container">
</div>
<div class="view-more">
<span class="view-more-button">View more</span>
<svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round">
<path d="m6 9 6 6 6-6"></path>
</svg>
</div>
</div>
</div>
</div>
<div class="preview-controls">
<button class="preview-btn" id="randomize-glass-card" title="Randomize (R)">🎲</button>
<div class="background-selector-wrapper">
<button class="preview-btn background-selector-btn" id="background-selector">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polygon points="12,2 2,7 12,12 22,7"/>
<polyline points="2,17 12,22 22,17"/>
<polyline points="2,12 12,17 22,12"/>
</svg>
</button>
<input type="color" id="preview-background-picker" class="hidden-color-input" value="#252525" title="Change Preview Background (B)">
</div>
</div>
</div>
</section>
<section class="controls-section">
<div class="card">
<div class="card-heading">
Content Settings
<div class="card-actions">
<button class="card-action-btn" id="reset-content" title="Reset Content Settings">↺</button>
</div>
</div>
<div class="card-content">
<div class="control-group">
<div class="control-label">
<span class="label-text">Card Title</span>
</div>
<input type="text" id="card-title" value="Card Title" placeholder="Enter card title">
</div>
<div class="control-group">
<div class="control-label">
<span class="label-text">Card Description</span>
</div>
<input type="text" id="card-subtitle" value="Card description goes here" placeholder="Enter card description">
</div>
<div class="control-group">
<div class="control-label">
<span class="label-text">Button Text</span>
</div>
<input type="text" id="button-text" value="View more" placeholder="Enter button text">
</div>
<div class="control-group">
<div class="control-label">
<span class="label-text">Button Link</span>
</div>
<input type="text" id="button-link" value="#" placeholder="Enter button link">
</div>
<div class="control-group">
<div class="control-label">
<span class="label-text">Logo Type</span>
</div>
<select id="logo-type">
<option value="default">Default SVG</option>
<option value="image">Image URL</option>
</select>
<input type="text" id="logo-url" style="display: none; margin-top: 0.5rem;" placeholder="Enter image URL">
</div>
</div>
</div>
<div class="card">
<div class="card-heading">
Color Settings
<div class="card-actions">
<button class="card-action-btn" id="reset-colors" title="Reset Color Settings">↺</button>
</div>
</div>
<div class="card-content">
<div class="control-group">
<div class="control-label">
<span class="label-text">Background Gradient - Color 1</span>
</div>
<div class="color-input-group">
<div class="color-preview" id="gradient-color-1-preview"></div>
<input type="color" id="gradient-color-1" value="#FF9966">
<div class="color-preview-extended" id="gradient-color-1-preview-extended">
<div class="color-fill" id="gradient-color-1-fill"></div>
</div>
</div>
</div>
<div class="control-group">
<div class="control-label">
<span class="label-text">Background Gradient - Color 2</span>
</div>
<div class="color-input-group">
<div class="color-preview" id="gradient-color-2-preview"></div>
<input type="color" id="gradient-color-2" value="#FF5E62">
<div class="color-preview-extended" id="gradient-color-2-preview-extended">
<div class="color-fill" id="gradient-color-2-fill"></div>
</div>
</div>
</div>
<div class="control-group">
<div class="control-label">
<span class="label-text">
Gradient Angle
<span class="help-tooltip" title="Angle of the background gradient">ℹ</span>
</span>
<div class="value-display">
<span class="value-text"><span id="gradient-angle-value">125</span>deg</span>
<button class="reset-btn" onclick="resetParameter('gradient-angle', 125)">↺</button>
</div>
</div>
<input type="range" id="gradient-angle" min="0" max="360" step="1" value="125">
</div>
<div class="control-group">
<div class="control-label">
<span class="label-text">Text Color</span>
</div>
<div class="color-input-group">
<div class="color-preview" id="text-color-preview"></div>
<input type="color" id="text-color" value="#2D1B1B">
<div class="color-preview-extended" id="text-color-preview-extended">
<div class="color-fill" id="text-color-fill"></div>
</div>
</div>
</div>
<div class="control-group">
<div class="control-label">
<span class="label-text">Button Color</span>
</div>
<div class="color-input-group">
<div class="color-preview" id="button-color-preview"></div>
<input type="color" id="button-color" value="#2D1B1B">
<div class="color-preview-extended" id="button-color-preview-extended">
<div class="color-fill" id="button-color-fill"></div>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-heading">
3D Effect Settings
<div class="card-actions">
<button class="card-action-btn" id="reset-3d" title="Reset 3D Settings">↺</button>
</div>
</div>
<div class="card-content">
<div class="control-group">
<div class="control-label">
<span class="label-text">
3D Intensity
<span class="help-tooltip" title="Strength of the 3D hover effect">ℹ</span>
</span>
<div class="value-display">
<span class="value-text"><span id="intensity-value">30</span>deg</span>
<button class="reset-btn" onclick="resetParameter('3d-intensity', 30)">↺</button>
</div>
</div>
<input type="range" id="3d-intensity" min="0" max="45" step="1" value="30">
</div>
<div class="control-group">
<div class="control-label">
<span class="label-text">
Glass Blur
<span class="help-tooltip" title="Blur intensity of the glass effect">ℹ</span>
</span>
<div class="value-display">
<span class="value-text"><span id="blur-value">5</span>px</span>
<button class="reset-btn" onclick="resetParameter('glass-blur', 5)">↺</button>
</div>
</div>
<input type="range" id="glass-blur" min="0" max="20" step="1" value="5">
</div>
<div class="control-group">
<div class="control-label">
<span class="label-text">
Glass Opacity
<span class="help-tooltip" title="Opacity of the glass overlay">ℹ</span>
</span>
<div class="value-display">
<span class="value-text"><span id="opacity-value">0.8</span></span>
<button class="reset-btn" onclick="resetParameter('glass-opacity', 0.8)">↺</button>
</div>
</div>
<input type="range" id="glass-opacity" min="0.1" max="1" step="0.05" value="0.8">
</div>
<div class="control-group">
<div class="control-label">
<span class="label-text">
Shadow Intensity
<span class="help-tooltip" title="Intensity of the card shadows">ℹ</span>
</span>
<div class="value-display">
<span class="value-text"><span id="shadow-value">0.2</span></span>
<button class="reset-btn" onclick="resetParameter('shadow-intensity', 0.2)">↺</button>
</div>
</div>
<input type="range" id="shadow-intensity" min="0" max="0.5" step="0.05" value="0.2">
</div>
<div class="control-group">
<div class="control-label">
<span class="label-text">
Animation Speed
<span class="help-tooltip" title="Speed of hover animations">ℹ</span>
</span>
<div class="value-display">
<span class="value-text"><span id="speed-value">0.5</span>s</span>
<button class="reset-btn" onclick="resetParameter('animation-speed', 0.5)">↺</button>
</div>
</div>
<input type="range" id="animation-speed" min="0.1" max="1" step="0.1" value="0.5">
</div>
</div>
</div>
<div class="card">
<div class="card-heading">
Social Media Settings
<div class="card-actions">
<button class="card-action-btn" id="reset-social" title="Reset Social Settings">↺</button>
</div>
</div>
<div class="card-content">
<div class="control-group">
<p style="font-size: var(--text-xs); color: var(--text-secondary); margin-bottom: 1rem;">
Add social media buttons to your card by selecting icons and entering URLs
</p>
<div class="social-inputs">
<div class="social-media-list" id="social-media-list">
</div>
<div class="social-add-btn" id="add-social-btn">
<i class="ti-plus"></i>
<span>Add Social Network</span>
</div>
<div class="social-color-control">
<span class="social-color-label">Icon Color:</span>
<div class="color-input-group social-color">
<div class="color-preview" id="social-color-preview"></div>
<input type="color" id="social-icon-color" value="#ef6013">
<div class="color-preview-extended" id="social-color-preview-extended">
<div class="color-fill" id="social-color-fill"></div>
</div>
</div>
</div>
</div>
<p style="font-size: 11px; color: var(--text-secondary); margin-top: 0.5rem;">
Select an icon for each social network and add the corresponding URL
</p>
</div>
</div>
</div>
</section>
</div>
</div>
<div class="notification" id="notification"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
let glassCardConfig = {
title: 'Card Title',
subtitle: 'Card description goes here',
buttonText: 'View more',
buttonLink: '#',
gradientColors: ['#FF9966', '#FF5E62'],
gradientAngle: 125,
textColor: '#2D1B1B',
buttonColor: '#2D1B1B',
intensity3D: 30,
glassBlur: 5,
glassOpacity: 0.8,
shadowIntensity: 0.2,
animationSpeed: 0.5,
logoType: 'default',
logoContent: '',
social: {
iconColor: '#ef6013',
networks: []
}
};
const defaultConfig = { ...glassCardConfig };
const socialIconsLibrary = [
{ name: 'Facebook', icons: ['fab fa-facebook', 'fab fa-facebook-f', 'ti-facebook'] },
{ name: 'Twitter / X', icons: ['fab fa-twitter', 'fab fa-x-twitter', 'ti-twitter'] },
{ name: 'Instagram', icons: ['fab fa-instagram', 'ti-instagram'] },
{ name: 'LinkedIn', icons: ['fab fa-linkedin', 'fab fa-linkedin-in', 'ti-linkedin'] },
{ name: 'YouTube', icons: ['fab fa-youtube', 'ti-youtube'] },
{ name: 'Pinterest', icons: ['fab fa-pinterest', 'fab fa-pinterest-p', 'ti-pinterest'] },
{ name: 'TikTok', icons: ['fab fa-tiktok'] },
{ name: 'Snapchat', icons: ['fab fa-snapchat', 'fab fa-snapchat-ghost'] },
{ name: 'Reddit', icons: ['fab fa-reddit', 'fab fa-reddit-alien'] },
{ name: 'Tumblr', icons: ['fab fa-tumblr', 'ti-tumblr'] },
{ name: 'Whatsapp', icons: ['fab fa-whatsapp', 'ti-whatsapp'] },
{ name: 'Telegram', icons: ['fab fa-telegram', 'fab fa-telegram-plane'] },
{ name: 'Discord', icons: ['fab fa-discord'] },
{ name: 'Skype', icons: ['fab fa-skype', 'ti-skype'] },
{ name: 'Dribbble', icons: ['fab fa-dribbble', 'ti-dribbble'] },
{ name: 'Behance', icons: ['fab fa-behance', 'ti-behance'] },
{ name: 'GitHub', icons: ['fab fa-github', 'ti-github'] },
{ name: 'Vimeo', icons: ['fab fa-vimeo', 'fab fa-vimeo-v', 'ti-vimeo'] },
{ name: 'Slack', icons: ['fab fa-slack', 'ti-slack'] },
{ name: 'Twitch', icons: ['fab fa-twitch'] },
{ name: 'Spotify', icons: ['fab fa-spotify'] },
{ name: 'SoundCloud', icons: ['fab fa-soundcloud'] },
{ name: 'Medium', icons: ['fab fa-medium', 'fab fa-medium-m'] },
{ name: 'VK', icons: ['fab fa-vk'] },
{ name: 'WeChat', icons: ['fab fa-weixin'] },
{ name: 'QQ', icons: ['fab fa-qq'] },
{ name: 'Weibo', icons: ['fab fa-weibo'] },
{ name: 'Line', icons: ['fab fa-line'] },
{ name: 'Email', icons: ['fas fa-envelope', 'ti-email'] },
{ name: 'Website', icons: ['fas fa-globe', 'ti-world'] }
];
function showNotification(message, type = 'success') {
const notification = document.getElementById('notification');
notification.textContent = message;
notification.className = `notification ${type}`;
notification.offsetHeight;
notification.style.visibility = 'visible';
notification.classList.add('show');
setTimeout(() => {
notification.classList.remove('show');
setTimeout(() => {
if (!notification.classList.contains('show')) {
notification.style.visibility = 'hidden';
}
}, 400);
}, 3000);
}
function generateUniqueId() {
return Math.random().toString(36).substring(2, 8);
}
function generateFullSectionJSON() {
// Generar IDs únicos para todos los elementos
const sectionId = generateUniqueId();
const containerId = generateUniqueId();
const divId = generateUniqueId();
const codeId = generateUniqueId();
const attributeId1 = generateUniqueId();
const attributeId2 = generateUniqueId();
// Obtener el JavaScript actual con la configuración del usuario
const jsCode = generateJavaScriptCode();
// Crear el objeto JSON completo de Bricks Builder
const bricksJSON = {
"content": [
{
"id": sectionId,
"name": "section",
"parent": 0,
"children": [containerId, codeId],
"settings": {
"_justifyContent": "center",
"_background": {
"color": {
"hex": "#000000"
}
},
"_attributes": [
{
"id": attributeId1,
"name": "data-gemini-effect"
}
]
}
},
{
"id": containerId,
"name": "container",
"parent": sectionId,
"children": [divId],
"settings": {
"_border": {
"radius": {
"top": "15",
"right": "15",
"bottom": "15",
"left": "15"
}
},
"_overflow": "hidden",
"_direction": "row",
"_justifyContent": "center"
}
},
{
"id": divId,
"name": "div",
"parent": containerId,
"children": [],
"settings": {
"_attributes": [
{
"id": attributeId2,
"name": "data-3d-card"
}
],
"_height": "350",
"_width": "350"
},
"label": "Glass Card Div"
},
{
"id": codeId,
"name": "code",
"parent": sectionId,
"children": [],
"settings": {
"javascriptCode": jsCode,
"executeCode": true,
"_display": "none"
},
"label": "Glass Card JS"
}
],
"source": "bricksCopiedElements",
"sourceUrl": "https://test.bricksfusion.com",
"version": "2.0.1",
"globalClasses": [],
"globalElements": []
};
return JSON.stringify(bricksJSON, null, 2);
}
function generateJavaScriptCode() {
return `class GlassCard3D {
constructor() {
this.config = {
title: '${glassCardConfig.title}',
subtitle: '${glassCardConfig.subtitle}',
buttonText: '${glassCardConfig.buttonText}',
buttonLink: '${glassCardConfig.buttonLink}',
gradientColors: ${JSON.stringify(glassCardConfig.gradientColors)},
gradientAngle: ${glassCardConfig.gradientAngle},
textColor: '${glassCardConfig.textColor}',
buttonColor: '${glassCardConfig.buttonColor}',
intensity3D: ${glassCardConfig.intensity3D},
glassBlur: ${glassCardConfig.glassBlur},
glassOpacity: ${glassCardConfig.glassOpacity},
shadowIntensity: ${glassCardConfig.shadowIntensity},
animationSpeed: ${glassCardConfig.animationSpeed},
logoType: '${glassCardConfig.logoType}',
logoContent: ${JSON.stringify(glassCardConfig.logoContent)},
social: ${JSON.stringify(glassCardConfig.social)}
};
this.init();
}
loadThemifyIcons() {
if (!document.getElementById('themify-icons')) {
const link = document.createElement('link');
link.id = 'themify-icons';
link.rel = 'stylesheet';
link.href = 'https://cdn.jsdelivr.net/npm/themify-icons@1.0.1/css/themify-icons.css';
document.head.appendChild(link);
}
if (!document.getElementById('font-awesome')) {
const link = document.createElement('link');
link.id = 'font-awesome';
link.rel = 'stylesheet';
link.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css';
document.head.appendChild(link);
}
}
init() {
if (Object.values(this.config.social).some(s => s.icon)) {
this.loadThemifyIcons();
}
document.querySelectorAll('[data-3d-card]').forEach(cardWrapper => {
this.setupCard(cardWrapper);
});
}
generateSocialButtons() {
const buttons = [];
this.config.social.networks.forEach(network => {
if (network.icon && network.url) {
buttons.push(\`
<a href="\${network.url}" class="social-button" target="_blank" rel="noopener noreferrer">
<i class="\${network.icon}" style="color: \${this.config.social.iconColor}"></i>
</a>
\`);
}
});
return buttons.join('');
}
getLogoContent() {
if (this.config.logoType === 'image' && this.config.logoContent) {
return \`<div style="width: 100%; height: 100%; overflow: hidden; border-radius: 50%; display: flex; align-items: center; justify-content: center;"><img src="\${this.config.logoContent}" alt="Logo" style="width: 100%; height: 100%; object-fit: cover; object-position: center;" /></div>\`;
} else {
return \`
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29.667 31.69" class="svg">
<path id="Path_6" data-name="Path 6" d="M12.827,1.628A1.561,1.561,0,0,1,14.31,0h2.964a1.561,1.561,0,0,1,1.483,1.628v11.9a9.252,9.252,0,0,1-2.432,6.852q-2.432,2.409-6.963,2.409T2.4,20.452Q0,18.094,0,13.669V1.628A1.561,1.561,0,0,1,1.483,0h2.98A1.561,1.561,0,0,1,5.947,1.628V13.191a5.635,5.635,0,0,0,.85,3.451,3.153,3.153,0,0,0,2.632,1.094,3.032,3.032,0,0,0,2.582-1.076,5.836,5.836,0,0,0,.816-3.486Z" transform="translate(0 0)"></path>
<path id="Path_7" data-name="Path 7" d="M75.207,20.857a1.561,1.561,0,0,1-1.483,1.628h-2.98a1.561,1.561,0,0,1-1.483-1.628V1.628A1.561,1.561,0,0,1,70.743,0h2.98a1.561,1.561,0,0,1,1.483,1.628Z" transform="translate(-45.91 0)"></path>
<path id="Path_8" data-name="Path 8" d="M0,80.018A1.561,1.561,0,0,1,1.483,78.39h26.7a1.561,1.561,0,0,1,1.483,1.628v2.006a1.561,1.561,0,0,1-1.483,1.628H1.483A1.561,1.561,0,0,1,0,82.025Z" transform="translate(0 -51.963)"></path>
</svg>
\`;
}
}
setupCard(cardWrapper) {
const uniqueId = \`glass-card-\${Math.random().toString(36).substr(2, 9)}\`;
cardWrapper.classList.add(uniqueId);
const titleText = cardWrapper.getAttribute('data-title') || this.config.title;
const subtitleText = cardWrapper.getAttribute('data-subtitle') || this.config.subtitle;
const buttonText = cardWrapper.getAttribute('data-button-text') || this.config.buttonText;
const buttonLink = cardWrapper.getAttribute('data-button-link') || this.config.buttonLink;
const fontFamily = cardWrapper.getAttribute('data-font') || 'inherit';
const card = document.createElement('div');
card.className = \`card \${uniqueId}\`;
card.innerHTML = \`
<div class="glass"></div>
<div class="logo">
<span class="circle circle1"></span>
<span class="circle circle2"></span>
<span class="circle circle3"></span>
<span class="circle circle4"></span>
<span class="circle circle5">
\${this.getLogoContent()}
</span>
</div>
<div class="content">
<span class="title">\${titleText}</span>
<span class="text">\${subtitleText}</span>
</div>
<div class="bottom">
<div class="social-buttons-container">
\${this.generateSocialButtons()}
</div>
<div class="view-more">
<a href="\${buttonLink}" class="view-more-button">\${buttonText}</a>
<svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round">
<path d="m6 9 6 6 6-6"></path>
</svg>
</div>
</div>
\`;
const glassOpacity = this.config.glassOpacity;
const styles = \`
.card.\${uniqueId} {
height: 100%;
border-radius: 50px;
background: linear-gradient(\${this.config.gradientAngle}deg, \${this.config.gradientColors[0]} 0%, \${this.config.gradientColors[1]} 100%);
transition: all \${this.config.animationSpeed}s ease-in-out;
transform-style: preserve-3d;
box-shadow: rgba(5, 71, 17, 0) 40px 50px 25px -40px, rgba(5, 71, 17, \${this.config.shadowIntensity}) 0px 25px 25px -5px;
position: relative;
font-family: \${fontFamily};
}
.card.\${uniqueId} .glass {
transform-style: preserve-3d;
position: absolute;
inset: 8px;
border-radius: 55px;
border-top-right-radius: 100%;
background: linear-gradient(0deg, rgba(255, 255, 255, \${glassOpacity * 0.4}) 0%, rgba(255, 255, 255, \${glassOpacity}) 100%);
transform: translate3d(0px, 0px, 25px);
border-left: 1px solid white;
border-bottom: 1px solid white;
transition: all \${this.config.animationSpeed}s ease-in-out;
backdrop-filter: blur(\${this.config.glassBlur}px);
-webkit-backdrop-filter: blur(\${this.config.glassBlur}px);
}
.card.\${uniqueId} .content {
padding: 100px 60px 0px 30px;
transform: translate3d(0, 0, 26px);
position: relative;
z-index: 1;
}
.card.\${uniqueId} .title {
display: block;
color: \${this.config.textColor};
font-weight: 900;
font-size: 20px;
}
.card.\${uniqueId} .text {
display: block;
color: \${this.config.textColor}cc;
font-size: 15px;
margin-top: 20px;
}
.card.\${uniqueId} .bottom {
padding: 10px 12px;
transform-style: preserve-3d;
position: absolute;
bottom: 20px;
left: 20px;
right: 20px;
display: flex;
align-items: center;
justify-content: space-between;
transform: translate3d(0, 0, 26px);
z-index: 1;
}
.card.\${uniqueId} .view-more {
display: flex;
align-items: center;
width: 40%;
justify-content: flex-end;
transition: all 0.2s ease-in-out;
}
.card.\${uniqueId} .view-more:hover {
transform: translate3d(0, 0, 10px);
}
.card.\${uniqueId} .view-more-button {
background: none;
border: none;
color: \${this.config.buttonColor};
font-weight: bolder;
font-size: 12px;
cursor: pointer;
text-decoration: none;
}
.card.\${uniqueId} .view-more .svg {
fill: none;
stroke: \${this.config.buttonColor};
stroke-width: 3px;
max-height: 15px;
}
.card.\${uniqueId} .social-buttons-container {
display: flex;
gap: 10px;
transform-style: preserve-3d;
}
.card.\${uniqueId} .social-button {
width: 30px;
aspect-ratio: 1;
padding: 5px;
background: \${this.config.buttonColor};
border-radius: 50%;
border: none;
cursor: pointer;
display: grid;
place-content: center;
box-shadow: rgba(5, 71, 17, 0.5) 0px 7px 5px -5px;
transition: all 0.3s ease-in-out;
text-decoration: none;
}
.card.\${uniqueId} .social-button i {
font-size: 14px;
color: \${this.config.social.iconColor};
transition: color 0.3s ease-in-out;
}
.card.\${uniqueId} .social-button:hover {
background: \${this.config.gradientColors[1]};
transform: translateY(-2px);
box-shadow: rgba(5, 71, 17, 0.8) 0px 10px 8px -5px;
}
.card.\${uniqueId} .social-button:hover i {
color: #ffffff;
}
.card.\${uniqueId} .logo {
position: absolute;
right: 0;
top: 0;
transform-style: preserve-3d;
}
.card.\${uniqueId} .circle {
display: block;
position: absolute;
aspect-ratio: 1;
border-radius: 50%;
top: 0;
right: 0;
box-shadow: rgba(100, 100, 111, 0.2) -10px 10px 20px 0px;
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
background: rgba(255, 255, 255, 0.2);
transition: all \${this.config.animationSpeed}s ease-in-out;
}
.card.\${uniqueId} .circle1 {
width: 170px;
transform: translate3d(0, 0, 20px);
top: 8px;
right: 8px;
}
.card.\${uniqueId} .circle2 {
width: 140px;
transform: translate3d(0, 0, 40px);
top: 10px;
right: 10px;
backdrop-filter: blur(1px);
transition-delay: 0.4s;
}
.card.\${uniqueId} .circle3 {
width: 110px;
transform: translate3d(0, 0, 60px);
top: 17px;
right: 17px;
transition-delay: 0.8s;
}
.card.\${uniqueId} .circle4 {
width: 80px;
transform: translate3d(0, 0, 80px);
top: 23px;
right: 23px;
transition-delay: 1.2s;
}
.card.\${uniqueId} .circle5 {
width: 50px;
height: 50px;
transform: translate3d(0, 0, 100px);
top: 30px;
right: 30px;
display: flex;
align-items: center;
justify-content: center;
transition-delay: 1.6s;
overflow: hidden;
border-radius: 50%;
}
.card.\${uniqueId} .circle5 svg,
.card.\${uniqueId} .circle5 img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
object-position: center;
}
.card.\${uniqueId}:hover {
transform: rotate3d(1, 1, 0, \${this.config.intensity3D}deg);
box-shadow: rgba(5, 71, 17, 0.3) 30px 50px 25px -40px, rgba(5, 71, 17, 0.1) 0px 25px 30px 0px;
}
.card.\${uniqueId}:hover .circle2 {
transform: translate3d(0, 0, 60px);
}
.card.\${uniqueId}:hover .circle3 {
transform: translate3d(0, 0, 80px);
}
.card.\${uniqueId}:hover .circle4 {
transform: translate3d(0, 0, 100px);
}
.card.\${uniqueId}:hover .circle5 {
transform: translate3d(0, 0, 120px);
}
@media (max-width: 768px) {
.card.\${uniqueId} .content {
padding: 60px 30px 0px 20px;
}
.card.\${uniqueId} .title {
font-size: 18px;
}
.card.\${uniqueId} .text {
font-size: 14px;
}
.card.\${uniqueId} .circle1 {
width: 140px;
}
.card.\${uniqueId} .circle2 {
width: 110px;
}
.card.\${uniqueId} .circle3 {
width: 80px;
}
.card.\${uniqueId} .circle4 {
width: 50px;
}
.card.\${uniqueId} .circle5 {
width: 30px;
height: 30px;
}
}
\`;
const styleSheet = document.createElement('style');
styleSheet.textContent = styles;
document.head.appendChild(styleSheet);
cardWrapper.innerHTML = '';
cardWrapper.appendChild(card);
}
}
document.addEventListener('DOMContentLoaded', () => {
new GlassCard3D();
});
document.addEventListener('bricks/element_added', () => {
new GlassCard3D();
});`;
}
function copyJsToClipboard() {
const jsCode = generateJavaScriptCode();
navigator.clipboard.writeText(jsCode)
.then(() => {
showNotification('JavaScript code copied to clipboard!');
})
.catch(err => {
try {
const textArea = document.createElement('textarea');
textArea.value = jsCode;
textArea.style.position = 'fixed';
textArea.style.opacity = '0';
document.body.appendChild(textArea);
textArea.select();
document.execCommand('copy');
document.body.removeChild(textArea);
showNotification('JavaScript code copied to clipboard!');
} catch (fallbackErr) {
showNotification('Failed to copy to clipboard. Please try again.', 'error');
}
});
}
function copyFullSectionToClipboard() {
const sectionJSON = generateFullSectionJSON();
navigator.clipboard.writeText(sectionJSON)
.then(() => {
showNotification('Full section JSON copied to clipboard!');
})
.catch(err => {
try {
const textArea = document.createElement('textarea');
textArea.value = sectionJSON;
textArea.style.position = 'fixed';
textArea.style.opacity = '0';
document.body.appendChild(textArea);
textArea.select();
document.execCommand('copy');
document.body.removeChild(textArea);
showNotification('Full section JSON copied to clipboard!');
} catch (fallbackErr) {
showNotification('Failed to copy to clipboard. Please try again.', 'error');
}
});
}
function copyToClipboard(text) {
navigator.clipboard.writeText(text)
.then(() => {
showNotification('Copied to clipboard!');
})
.catch(err => {
showNotification('Failed to copy to clipboard', 'error');
});
}
window.resetParameter = function(parameterId, defaultValue) {
const element = document.getElementById(parameterId);
if (element) {
element.value = defaultValue;
const valueElement = document.getElementById(`${parameterId}-value`);
if (valueElement) {
valueElement.textContent = defaultValue;
}
switch (parameterId) {
case 'gradient-angle':
glassCardConfig.gradientAngle = defaultValue;
updateGradient();
break;
case '3d-intensity':
glassCardConfig.intensity3D = defaultValue;
updateHoverEffect();
break;
case 'glass-blur':
glassCardConfig.glassBlur = defaultValue;
updateGlassEffect();
break;
case 'glass-opacity':
glassCardConfig.glassOpacity = defaultValue;
updateGlassEffect();
break;
case 'shadow-intensity':
glassCardConfig.shadowIntensity = defaultValue;
updateShadow();
break;
case 'animation-speed':
glassCardConfig.animationSpeed = defaultValue;
updateAnimationSpeed();
break;
}
showNotification(`${parameterId.replace(/-/g, ' ')} reset to default`);
}
};
function generateRandomColor() {
return '#' + Math.floor(Math.random() * 16777215).toString(16).padStart(6, '0');
}
function generateRandomGlassCard() {
glassCardConfig.gradientColors = [generateRandomColor(), generateRandomColor()];
glassCardConfig.gradientAngle = Math.floor(Math.random() * 360);
glassCardConfig.textColor = generateRandomColor();
glassCardConfig.buttonColor = generateRandomColor();
glassCardConfig.intensity3D = Math.floor(Math.random() * 45);
glassCardConfig.glassBlur = Math.floor(Math.random() * 20);
glassCardConfig.glassOpacity = Math.random() * 0.9 + 0.1;
glassCardConfig.shadowIntensity = Math.random() * 0.5;
glassCardConfig.animationSpeed = Math.random() * 0.9 + 0.1;
document.getElementById('gradient-color-1').value = glassCardConfig.gradientColors[0];
document.getElementById('gradient-color-2').value = glassCardConfig.gradientColors[1];
document.getElementById('gradient-angle').value = glassCardConfig.gradientAngle;
document.getElementById('text-color').value = glassCardConfig.textColor;
document.getElementById('button-color').value = glassCardConfig.buttonColor;
document.getElementById('3d-intensity').value = glassCardConfig.intensity3D;
document.getElementById('glass-blur').value = glassCardConfig.glassBlur;
document.getElementById('glass-opacity').value = glassCardConfig.glassOpacity;
document.getElementById('shadow-intensity').value = glassCardConfig.shadowIntensity;
document.getElementById('animation-speed').value = glassCardConfig.animationSpeed;
document.getElementById('gradient-angle-value').textContent = glassCardConfig.gradientAngle;
document.getElementById('intensity-value').textContent = glassCardConfig.intensity3D;
document.getElementById('blur-value').textContent = glassCardConfig.glassBlur;
document.getElementById('opacity-value').textContent = glassCardConfig.glassOpacity;
document.getElementById('shadow-value').textContent = glassCardConfig.shadowIntensity;
document.getElementById('speed-value').textContent = glassCardConfig.animationSpeed;
updateColorPreviews();
updatePreview();
showNotification('Random glass card generated!');
}
function updateColorPreviews() {
const colorMappings = [
{ id: 'gradient-color-1', config: 'gradientColors', index: 0 },
{ id: 'gradient-color-2', config: 'gradientColors', index: 1 },
{ id: 'text-color', config: 'textColor' },
{ id: 'button-color', config: 'buttonColor' }
];
colorMappings.forEach(mapping => {
const colorValue = mapping.index !== undefined
? glassCardConfig[mapping.config][mapping.index]
: glassCardConfig[mapping.config];
const preview = document.getElementById(`${mapping.id}-preview`);
const fill = document.getElementById(`${mapping.id}-fill`);
if (preview) preview.style.backgroundColor = colorValue;
if (fill) fill.style.backgroundColor = colorValue;
});
}
function setupColorInput(inputId, configKey, callback) {
const colorInput = document.getElementById(inputId);
const preview = document.getElementById(`${inputId}-preview`);
const fill = document.getElementById(`${inputId}-fill`);
if (colorInput) {
colorInput.addEventListener('input', function() {
if (configKey.includes('.')) {
const parts = configKey.split('.');
let obj = glassCardConfig;
for (let i = 0; i < parts.length - 1; i++) {
obj = obj[parts[i]];
}
obj[parts[parts.length - 1]] = this.value;
} else {
glassCardConfig[configKey] = this.value;
}
if (preview) preview.style.backgroundColor = this.value;
if (fill) fill.style.backgroundColor = this.value;
if (callback) callback(this.value);
});
}
if (preview) {
preview.addEventListener('click', function() {
if (colorInput) colorInput.click();
});
}
if (fill) {
fill.addEventListener('click', function() {
if (colorInput) colorInput.click();
});
}
}
function setupGradientColorInput(inputId, colorIndex) {
const colorInput = document.getElementById(inputId);
const preview = document.getElementById(`${inputId}-preview`);
const fill = document.getElementById(`${inputId}-fill`);
if (colorInput) {
colorInput.addEventListener('input', function() {
glassCardConfig.gradientColors[colorIndex] = this.value;
if (preview) preview.style.backgroundColor = this.value;
if (fill) fill.style.backgroundColor = this.value;
updateGradient();
});
}
if (preview) {
preview.addEventListener('click', function() {
if (colorInput) colorInput.click();
});
}
if (fill) {
fill.addEventListener('click', function() {
if (colorInput) colorInput.click();
});
}
}
function updateGradient() {
const gradient = `linear-gradient(${glassCardConfig.gradientAngle}deg, ${glassCardConfig.gradientColors[0]} 0%, ${glassCardConfig.gradientColors[1]} 100%)`;
document.querySelector('.glass-card-3d').style.background = gradient;
}
function updateGlassEffect() {
const glass = document.querySelector('.glass');
glass.style.backdropFilter = `blur(${glassCardConfig.glassBlur}px)`;
glass.style.webkitBackdropFilter = `blur(${glassCardConfig.glassBlur}px)`;
const opacity = glassCardConfig.glassOpacity;
glass.style.background = `linear-gradient(0deg, rgba(255, 255, 255, ${opacity * 0.4}) 0%, rgba(255, 255, 255, ${opacity}) 100%)`;
}
function updateShadow() {
const card = document.querySelector('.glass-card-3d');
const intensity = glassCardConfig.shadowIntensity;
card.style.boxShadow = `rgba(5, 71, 17, 0) 40px 50px 25px -40px, rgba(5, 71, 17, ${intensity}) 0px 25px 25px -5px`;
}
function updateAnimationSpeed() {
const card = document.querySelector('.glass-card-3d');
const speed = glassCardConfig.animationSpeed;
card.style.transition = `all ${speed}s ease-in-out`;
document.querySelectorAll('.glass, .circle').forEach(el => {
el.style.transition = `all ${speed}s ease-in-out`;
});
}
function updateHoverEffect() {
const card = document.querySelector('.glass-card-3d');
const intensity = glassCardConfig.intensity3D;
card.onmouseenter = function() {
this.style.transform = `rotate3d(1, 1, 0, ${intensity}deg)`;
this.style.boxShadow = `rgba(5, 71, 17, 0.3) 30px 50px 25px -40px, rgba(5, 71, 17, 0.1) 0px 25px 30px 0px`;
document.querySelector('.circle2').style.transform = 'translate3d(0, 0, 60px)';
document.querySelector('.circle3').style.transform = 'translate3d(0, 0, 80px)';
document.querySelector('.circle4').style.transform = 'translate3d(0, 0, 100px)';
document.querySelector('.circle5').style.transform = 'translate3d(0, 0, 120px)';
};
card.onmouseleave = function() {
this.style.transform = 'none';
this.style.boxShadow = `rgba(5, 71, 17, 0) 40px 50px 25px -40px, rgba(5, 71, 17, ${glassCardConfig.shadowIntensity}) 0px 25px 25px -5px`;
document.querySelector('.circle2').style.transform = 'translate3d(0, 0, 40px)';
document.querySelector('.circle3').style.transform = 'translate3d(0, 0, 60px)';
document.querySelector('.circle4').style.transform = 'translate3d(0, 0, 80px)';
document.querySelector('.circle5').style.transform = 'translate3d(0, 0, 100px)';
};
}
function updateLogo() {
const circle5 = document.querySelector('.circle5');
let logoContent = '';
if (glassCardConfig.logoType === 'default') {
logoContent = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29.667 31.69" class="svg">
<path id="Path_6" data-name="Path 6" d="M12.827,1.628A1.561,1.561,0,0,1,14.31,0h2.964a1.561,1.561,0,0,1,1.483,1.628v11.9a9.252,9.252,0,0,1-2.432,6.852q-2.432,2.409-6.963,2.409T2.4,20.452Q0,18.094,0,13.669V1.628A1.561,1.561,0,0,1,1.483,0h2.98A1.561,1.561,0,0,1,5.947,1.628V13.191a5.635,5.635,0,0,0,.85,3.451,3.153,3.153,0,0,0,2.632,1.094,3.032,3.032,0,0,0,2.582-1.076,5.836,5.836,0,0,0,.816-3.486Z" transform="translate(0 0)"></path>
<path id="Path_7" data-name="Path 7" d="M75.207,20.857a1.561,1.561,0,0,1-1.483,1.628h-2.98a1.561,1.561,0,0,1-1.483-1.628V1.628A1.561,1.561,0,0,1,70.743,0h2.98a1.561,1.561,0,0,1,1.483,1.628Z" transform="translate(-45.91 0)"></path>
<path id="Path_8" data-name="Path 8" d="M0,80.018A1.561,1.561,0,0,1,1.483,78.39h26.7a1.561,1.561,0,0,1,1.483,1.628v2.006a1.561,1.561,0,0,1-1.483,1.628H1.483A1.561,1.561,0,0,1,0,82.025Z" transform="translate(0 -51.963)"></path>
</svg>
`;
} else if (glassCardConfig.logoType === 'image' && glassCardConfig.logoContent) {
logoContent = `<div style="width: 100%; height: 100%; overflow: hidden; border-radius: 50%; display: flex; align-items: center; justify-content: center;"><img src="${glassCardConfig.logoContent}" alt="Logo" style="width: 100%; height: 100%; object-fit: cover; object-position: center;" /></div>`;
}
circle5.innerHTML = logoContent;
}
function updateSocialButtons() {
const container = document.querySelector('.social-buttons-container');
if (!container) return;
let buttons = '';
const iconColorElement = document.getElementById('social-icon-color');
const currentIconColor = iconColorElement ? iconColorElement.value : glassCardConfig.social.iconColor;
glassCardConfig.social.networks.forEach(network => {
if (network.icon && network.url) {
buttons += `
<a href="${network.url}" class="social-button" target="_blank" rel="noopener noreferrer">
<i class="${network.icon}" style="color: ${currentIconColor};"></i>
</a>
`;
}
});
container.innerHTML = buttons;
}
function updatePreview() {
updateGradient();
updateGlassEffect();
updateShadow();
updateAnimationSpeed();
updateHoverEffect();
updateLogo();
updateSocialButtons();
}
function renderSocialMediaList() {
const container = document.getElementById('social-media-list');
if (!container) return;
container.innerHTML = '';
glassCardConfig.social.networks.forEach((network, index) => {
const socialItem = createSocialNetworkItem(network, index);
container.appendChild(socialItem);
});
updateSocialButtons();
}
function createSocialNetworkItem(network = { icon: '', url: '' }, index) {
const item = document.createElement('div');
item.className = 'social-media-item';
item.dataset.index = index;
const currentColor = document.getElementById('social-icon-color')?.value || glassCardConfig.social.iconColor;
const iconSelect = document.createElement('div');
iconSelect.className = 'social-icon-select';
const iconPreview = document.createElement('div');
iconPreview.className = 'social-icon-preview';
if (network.icon) {
iconPreview.innerHTML = `<i class="${network.icon}" style="color: ${currentColor};"></i>`;
} else {
iconPreview.innerHTML = `<i class="fas fa-plus" style="color: ${currentColor};"></i>`;
}
iconSelect.addEventListener('click', function(e) {
showIconsModal(network, index);
e.stopPropagation();
});
iconSelect.appendChild(iconPreview);
const urlInput = document.createElement('input');
urlInput.type = 'text';
urlInput.className = 'social-url-input';
urlInput.placeholder = 'Enter URL';
urlInput.value = network.url || '';
urlInput.addEventListener('input', function() {
const itemIndex = parseInt(item.dataset.index);
glassCardConfig.social.networks[itemIndex].url = this.value;
updateSocialButtons();
});
const removeBtn = document.createElement('button');
removeBtn.className = 'social-remove-btn';
removeBtn.innerHTML = '<i class="ti-close"></i>';
removeBtn.addEventListener('click', function() {
const itemIndex = parseInt(item.dataset.index);
glassCardConfig.social.networks.splice(itemIndex, 1);
renderSocialMediaList();
});
item.appendChild(iconSelect);
item.appendChild(urlInput);
item.appendChild(removeBtn);
return item;
}
function showIconsModal(network, index) {
const backdrop = document.createElement('div');
backdrop.className = 'modal-backdrop';
document.body.appendChild(backdrop);
const modal = document.createElement('div');
modal.className = 'social-icons-dropdown';
document.body.appendChild(modal);
const header = document.createElement('div');
header.className = 'icons-modal-header';
const title = document.createElement('div');
title.className = 'icons-modal-title';
title.textContent = 'Select Social Media Icon';
const closeBtn = document.createElement('button');
closeBtn.className = 'icons-modal-close';
closeBtn.innerHTML = '<i class="ti-close"></i>';
closeBtn.addEventListener('click', function() {
closeIconsModal(modal, backdrop);
});
header.appendChild(title);
header.appendChild(closeBtn);
modal.appendChild(header);
const search = document.createElement('div');
search.className = 'icons-modal-search';
search.innerHTML = '<i class="ti-search"></i><input type="text" placeholder="Search icons...">';
modal.appendChild(search);
const searchInput = search.querySelector('input');
searchInput.addEventListener('input', function() {
const query = this.value.toLowerCase();
filterIcons(modal, query);
});
const currentColor = document.getElementById('social-icon-color')?.value || glassCardConfig.social.iconColor;
socialIconsLibrary.forEach(socialType => {
const categoryHeader = document.createElement('div');
categoryHeader.className = 'icons-category';
categoryHeader.textContent = socialType.name;
categoryHeader.dataset.category = socialType.name.toLowerCase();
modal.appendChild(categoryHeader);
socialType.icons.forEach(iconClass => {
const iconOption = document.createElement('div');
iconOption.className = 'social-icon-option';
iconOption.dataset.icon = iconClass;
iconOption.dataset.category = socialType.name.toLowerCase();
iconOption.innerHTML = `<i class="${iconClass}"></i>`;
iconOption.addEventListener('click', function() {
const iconClass = this.dataset.icon;
const iconPreviews = document.querySelectorAll('.social-icon-preview');
if (iconPreviews[index]) {
iconPreviews[index].innerHTML = `<i class="${iconClass}" style="color: ${currentColor};"></i>`;
}
glassCardConfig.social.networks[index].icon = iconClass;
closeIconsModal(modal, backdrop);
updateSocialButtons();
});
modal.appendChild(iconOption);
});
});
setTimeout(() => {
backdrop.classList.add('active');
modal.classList.add('active');
}, 10);
backdrop.addEventListener('click', function() {
closeIconsModal(modal, backdrop);
});
}
function closeIconsModal(modal, backdrop) {
modal.classList.remove('active');
backdrop.classList.remove('active');
setTimeout(() => {
document.body.removeChild(modal);
document.body.removeChild(backdrop);
}, 300);
}
function filterIcons(modal, query) {
if (!query) {
modal.querySelectorAll('.social-icon-option, .icons-category').forEach(el => {
el.style.display = '';
});
return;
}
modal.querySelectorAll('.icons-category').forEach(el => {
el.style.display = 'none';
});
let visibleCategories = new Set();
modal.querySelectorAll('.social-icon-option').forEach(el => {
const iconClass = el.dataset.icon.toLowerCase();
const category = el.dataset.category;
const matches = iconClass.includes(query) || category.includes(query);
el.style.display = matches ? '' : 'none';
if (matches) {
visibleCategories.add(category);
}
});
visibleCategories.forEach(category => {
modal.querySelector(`.icons-category[data-category="${category}"]`).style.display = '';
});
}
function addNewSocialNetwork() {
glassCardConfig.social.networks.push({ icon: '', url: '' });
renderSocialMediaList();
const container = document.getElementById('social-media-list');
container.scrollTop = container.scrollHeight;
}
function updateSocialIconPreviews() {
const previews = document.querySelectorAll('.social-icon-preview i');
const currentColor = document.getElementById('social-icon-color')?.value || glassCardConfig.social.iconColor;
previews.forEach(icon => {
icon.style.color = currentColor;
});
}
function initializeUI() {
const instructionsToggle = document.getElementById('instructions-toggle');
const instructionsContent = document.getElementById('instructions-content');
const instructionsCard = document.getElementById('instructions-card');
const toggleIcon = instructionsToggle.querySelector('.toggle-icon');
instructionsToggle.addEventListener('click', () => {
const isVisible = instructionsContent.classList.contains('show');
if (isVisible) {
instructionsContent.classList.remove('show');
instructionsCard.classList.remove('expanded');
toggleIcon.classList.remove('expanded');
} else {
instructionsContent.classList.add('show');
instructionsCard.classList.add('expanded');
toggleIcon.classList.add('expanded');
}
});
document.getElementById('quick-attribute').addEventListener('click', () => {
copyToClipboard('data-3d-card');
});
document.getElementById('download-config').addEventListener('click', () => {
copyJsToClipboard();
});
document.getElementById('copy-full-section').addEventListener('click', () => {
copyFullSectionToClipboard();
});
document.getElementById('randomize-glass-card').addEventListener('click', () => {
generateRandomGlassCard();
});
const backgroundPicker = document.getElementById('preview-background-picker');
const previewContainer = document.getElementById('glass-card-preview');
backgroundPicker.addEventListener('input', (e) => {
const selectedColor = e.target.value;
previewContainer.style.backgroundColor = selectedColor;
showNotification(`Preview background changed to ${selectedColor}`);
});
previewContainer.style.backgroundColor = '#252525';
document.getElementById('reset-content').addEventListener('click', () => {
glassCardConfig.title = defaultConfig.title;
glassCardConfig.subtitle = defaultConfig.subtitle;
glassCardConfig.buttonText = defaultConfig.buttonText;
glassCardConfig.buttonLink = defaultConfig.buttonLink;
glassCardConfig.logoType = defaultConfig.logoType;
glassCardConfig.logoContent = defaultConfig.logoContent;
document.getElementById('card-title').value = defaultConfig.title;
document.getElementById('card-subtitle').value = defaultConfig.subtitle;
document.getElementById('button-text').value = defaultConfig.buttonText;
document.getElementById('button-link').value = defaultConfig.buttonLink;
document.getElementById('logo-type').value = defaultConfig.logoType;
document.getElementById('logo-url').value = defaultConfig.logoContent;
document.querySelector('.glass-title').textContent = defaultConfig.title;
document.querySelector('.glass-text').textContent = defaultConfig.subtitle;
document.querySelector('.view-more-button').textContent = defaultConfig.buttonText;
updateLogo();
showNotification('Content settings reset');
});
document.getElementById('reset-colors').addEventListener('click', () => {
glassCardConfig.gradientColors = [...defaultConfig.gradientColors];
glassCardConfig.gradientAngle = defaultConfig.gradientAngle;
glassCardConfig.textColor = defaultConfig.textColor;
glassCardConfig.buttonColor = defaultConfig.buttonColor;
document.getElementById('gradient-color-1').value = defaultConfig.gradientColors[0];
document.getElementById('gradient-color-2').value = defaultConfig.gradientColors[1];
document.getElementById('gradient-angle').value = defaultConfig.gradientAngle;
document.getElementById('text-color').value = defaultConfig.textColor;
document.getElementById('button-color').value = defaultConfig.buttonColor;
document.getElementById('gradient-angle-value').textContent = defaultConfig.gradientAngle;
updateColorPreviews();
updatePreview();
showNotification('Colors reset to default');
});
document.getElementById('reset-3d').addEventListener('click', () => {
glassCardConfig.intensity3D = defaultConfig.intensity3D;
glassCardConfig.glassBlur = defaultConfig.glassBlur;
glassCardConfig.glassOpacity = defaultConfig.glassOpacity;
glassCardConfig.shadowIntensity = defaultConfig.shadowIntensity;
glassCardConfig.animationSpeed = defaultConfig.animationSpeed;
document.getElementById('3d-intensity').value = defaultConfig.intensity3D;
document.getElementById('glass-blur').value = defaultConfig.glassBlur;
document.getElementById('glass-opacity').value = defaultConfig.glassOpacity;
document.getElementById('shadow-intensity').value = defaultConfig.shadowIntensity;
document.getElementById('animation-speed').value = defaultConfig.animationSpeed;
document.getElementById('intensity-value').textContent = defaultConfig.intensity3D;
document.getElementById('blur-value').textContent = defaultConfig.glassBlur;
document.getElementById('opacity-value').textContent = defaultConfig.glassOpacity;
document.getElementById('shadow-value').textContent = defaultConfig.shadowIntensity;
document.getElementById('speed-value').textContent = defaultConfig.animationSpeed;
updatePreview();
showNotification('3D settings reset');
});
document.getElementById('reset-social').addEventListener('click', () => {
glassCardConfig.social = { ...defaultConfig.social, networks: [] };
document.getElementById('social-icon-color').value = defaultConfig.social.iconColor;
const socialColorPreview = document.getElementById('social-color-preview');
const socialColorFill = document.getElementById('social-color-fill');
if (socialColorPreview) socialColorPreview.style.backgroundColor = defaultConfig.social.iconColor;
if (socialColorFill) socialColorFill.style.backgroundColor = defaultConfig.social.iconColor;
renderSocialMediaList();
showNotification('Social settings reset');
});
// Text inputs
document.getElementById('card-title').addEventListener('input', function() {
glassCardConfig.title = this.value;
document.querySelector('.glass-title').textContent = this.value;
});
document.getElementById('card-subtitle').addEventListener('input', function() {
glassCardConfig.subtitle = this.value;
document.querySelector('.glass-text').textContent = this.value;
});
document.getElementById('button-text').addEventListener('input', function() {
glassCardConfig.buttonText = this.value;
document.querySelector('.view-more-button').textContent = this.value;
});
document.getElementById('button-link').addEventListener('input', function() {
glassCardConfig.buttonLink = this.value;
});
document.getElementById('logo-type').addEventListener('change', function() {
glassCardConfig.logoType = this.value;
const logoUrl = document.getElementById('logo-url');
logoUrl.style.display = 'none';
if (this.value === 'image') {
logoUrl.style.display = 'block';
}
updateLogo();
});
document.getElementById('logo-url').addEventListener('input', function() {
glassCardConfig.logoContent = this.value;
updateLogo();
});
setupGradientColorInput('gradient-color-1', 0);
setupGradientColorInput('gradient-color-2', 1);
setupColorInput('text-color', 'textColor', function(color) {
document.querySelector('.glass-title').style.color = color;
document.querySelector('.glass-text').style.color = color + 'cc';
document.querySelector('.view-more-button').style.color = color;
document.querySelector('.view-more svg').style.stroke = color;
});
setupColorInput('button-color', 'buttonColor', function(color) {
document.querySelector('.view-more-button').style.color = color;
document.querySelector('.view-more svg').style.stroke = color;
});
setupColorInput('social-icon-color', 'social.iconColor', function(color) {
updateSocialButtons();
updateSocialIconPreviews();
});
const rangeInputs = document.querySelectorAll('input[type="range"]');
rangeInputs.forEach(input => {
const valueElement = document.getElementById(`${input.id}-value`);
if (valueElement) {
valueElement.textContent = input.value;
}
input.addEventListener('input', () => {
if (valueElement) {
valueElement.textContent = input.value;
}
switch (input.id) {
case 'gradient-angle':
glassCardConfig.gradientAngle = parseInt(input.value);
updateGradient();
break;
case '3d-intensity':
glassCardConfig.intensity3D = parseInt(input.value);
updateHoverEffect();
break;
case 'glass-blur':
glassCardConfig.glassBlur = parseInt(input.value);
updateGlassEffect();
break;
case 'glass-opacity':
glassCardConfig.glassOpacity = parseFloat(input.value);
updateGlassEffect();
break;
case 'shadow-intensity':
glassCardConfig.shadowIntensity = parseFloat(input.value);
updateShadow();
break;
case 'animation-speed':
glassCardConfig.animationSpeed = parseFloat(input.value);
updateAnimationSpeed();
break;
}
});
});
const addSocialBtn = document.getElementById('add-social-btn');
if (addSocialBtn) {
addSocialBtn.addEventListener('click', function() {
addNewSocialNetwork();
});
}
document.addEventListener('keydown', (e) => {
if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') {
return;
}
if (e.ctrlKey || e.metaKey) {
switch (e.key.toLowerCase()) {
case 'd':
e.preventDefault();
const downloadBtn = document.getElementById('download-config');
if (downloadBtn && downloadBtn.hasAttribute('data-protection-animation')) {
downloadBtn.click();
} else {
copyJsToClipboard();
}
break;
case 's':
e.preventDefault();
const fullSectionBtn = document.getElementById('copy-full-section');
if (fullSectionBtn && fullSectionBtn.hasAttribute('data-protection-animation')) {
fullSectionBtn.click();
} else {
copyFullSectionToClipboard();
}
break;
}
} else {
switch (e.key.toLowerCase()) {
case 'r':
generateRandomGlassCard();
break;
case 'b':
document.getElementById('preview-background-picker').click();
break;
}
}
});
// Initialize UI values
document.getElementById('card-title').value = glassCardConfig.title;
document.getElementById('card-subtitle').value = glassCardConfig.subtitle;
document.getElementById('button-text').value = glassCardConfig.buttonText;
document.getElementById('button-link').value = glassCardConfig.buttonLink;
document.getElementById('gradient-color-1').value = glassCardConfig.gradientColors[0];
document.getElementById('gradient-color-2').value = glassCardConfig.gradientColors[1];
document.getElementById('gradient-angle').value = glassCardConfig.gradientAngle;
document.getElementById('text-color').value = glassCardConfig.textColor;
document.getElementById('button-color').value = glassCardConfig.buttonColor;
document.getElementById('3d-intensity').value = glassCardConfig.intensity3D;
document.getElementById('glass-blur').value = glassCardConfig.glassBlur;
document.getElementById('glass-opacity').value = glassCardConfig.glassOpacity;
document.getElementById('shadow-intensity').value = glassCardConfig.shadowIntensity;
document.getElementById('animation-speed').value = glassCardConfig.animationSpeed;
document.getElementById('logo-type').value = glassCardConfig.logoType;
document.getElementById('social-icon-color').value = glassCardConfig.social.iconColor;
document.getElementById('gradient-angle-value').textContent = glassCardConfig.gradientAngle;
document.getElementById('intensity-value').textContent = glassCardConfig.intensity3D;
document.getElementById('blur-value').textContent = glassCardConfig.glassBlur;
document.getElementById('opacity-value').textContent = glassCardConfig.glassOpacity;
document.getElementById('shadow-value').textContent = glassCardConfig.shadowIntensity;
document.getElementById('speed-value').textContent = glassCardConfig.animationSpeed;
updateColorPreviews();
const socialColorPreview = document.getElementById('social-color-preview');
const socialColorFill = document.getElementById('social-color-fill');
if (socialColorPreview) socialColorPreview.style.backgroundColor = glassCardConfig.social.iconColor;
if (socialColorFill) socialColorFill.style.backgroundColor = glassCardConfig.social.iconColor;
renderSocialMediaList();
updatePreview();
setTimeout(() => {
showNotification('BricksFusion Glass Card 3D Configurator loaded!');
}, 500);
function saveConfiguration() {
try {
localStorage.setItem('bricksfusion-glass-card-config', JSON.stringify(glassCardConfig));
} catch (e) {
}
}
function loadConfiguration() {
try {
const saved = localStorage.getItem('bricksfusion-glass-card-config');
if (saved) {
const savedConfig = JSON.parse(saved);
Object.assign(glassCardConfig, savedConfig);
// Update all UI elements with saved config
document.getElementById('card-title').value = savedConfig.title;
document.getElementById('card-subtitle').value = savedConfig.subtitle;
document.getElementById('button-text').value = savedConfig.buttonText;
document.getElementById('button-link').value = savedConfig.buttonLink;
document.getElementById('gradient-color-1').value = savedConfig.gradientColors[0];
document.getElementById('gradient-color-2').value = savedConfig.gradientColors[1];
document.getElementById('gradient-angle').value = savedConfig.gradientAngle;
document.getElementById('text-color').value = savedConfig.textColor;
document.getElementById('button-color').value = savedConfig.buttonColor;
document.getElementById('3d-intensity').value = savedConfig.intensity3D;
document.getElementById('glass-blur').value = savedConfig.glassBlur;
document.getElementById('glass-opacity').value = savedConfig.glassOpacity;
document.getElementById('shadow-intensity').value = savedConfig.shadowIntensity;
document.getElementById('animation-speed').value = savedConfig.animationSpeed;
document.getElementById('logo-type').value = savedConfig.logoType;
document.getElementById('social-icon-color').value = savedConfig.social.iconColor;
document.getElementById('gradient-angle-value').textContent = savedConfig.gradientAngle;
document.getElementById('intensity-value').textContent = savedConfig.intensity3D;
document.getElementById('blur-value').textContent = savedConfig.glassBlur;
document.getElementById('opacity-value').textContent = savedConfig.glassOpacity;
document.getElementById('shadow-value').textContent = savedConfig.shadowIntensity;
document.getElementById('speed-value').textContent = savedConfig.animationSpeed;
updateColorPreviews();
renderSocialMediaList();
updatePreview();
}
} catch (e) {
}
}
const originalUpdatePreview = updatePreview;
updatePreview = function() {
originalUpdatePreview();
saveConfiguration();
};
loadConfiguration();
}
initializeUI();
});
</script>
</body>
</html>LIGHT
Glass Card 3D
Creates a premium glassmorphism card with 3D depth effect. Features layered frosted glass appearance, decorative circles with depth, and smooth hover rotation. Includes optional logo image in smallest circle. Perfect for pricing cards, feature highlights, or modern portfolio items.
Glass Card 3D
Hover over the card to see the 3D effect.
Premium Card
Glassmorphism Design
This card features a beautiful frosted glass effect with layered depth circles and smooth 3D hover animations.
Gradient
Color 1
hex color
Start color of gradient background. Creates smooth color transition with Color 2.
Default: #FF9966 (orange)
Color 2
hex color
End color of gradient background. Blends with Color 1 for vibrant effect.
Default: #FF5E62 (red)
Angle
0-360 degrees
Direction of gradient flow. 0 is right, 90 is top, 180 is left, 270 is bottom.
Default: 125
Glass Effect
Blur
0-20 pixels
Intensity of backdrop blur filter. Higher creates stronger frosted glass appearance.
Default: 5
Opacity
0.1-1.0
Transparency of glass layer. Lower is more transparent, higher is more opaque.
Default: 0.8
3D Effects
Intensity 3D
0-60 degrees
Rotation angle on hover. Higher creates more dramatic 3D tilt effect.
Default: 30
Shadow Intensity
0.0-1.0
Strength of drop shadow. Enhances depth perception of floating card.
Default: 0.2
Animation
Speed
0.1-2.0 seconds
Duration of hover transitions. Lower is faster, higher is smoother and more elegant.
Default: 0.5
Logo
Logo Image
image URL
Optional image displayed in smallest circle. Automatically sized and rounded to fit.
Default: none
Performance
This element uses CSS 3D transforms with preserve-3d for layered depth effect. Features backdrop-filter for glassmorphism with fallback support. Creates decorative circles with staggered translateZ positioning. Hover effects use transform transitions for smooth animations. Very lightweight - suitable for all devices and multiple instances per page.