updates

Author: antimoloch007

assets/badges/gemini-generated.svg

@@ -937,4 +937,165 @@ footer {
     .cta-section h2 {
         font-size: 1.5rem;
     }
+}
+
+/* Additional styles for the redesigned implementation section */
+.badge-selector {
+    margin-bottom: 2rem;
+    text-align: center;
+}
+
+.badge-type-dropdown {
+    padding: 0.5rem 1rem;
+    font-size: 1rem;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    min-width: 250px;
+    margin-left: 0.5rem;
+    cursor: pointer;
+}
+
+.implementation-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 2rem;
+    margin-bottom: 2rem;
+}
+
+.implementation-card {
+    background-color: var(--white);
+    border-radius: var(--radius-md);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+    padding: 1.5rem;
+    transition: all 0.3s;
+}
+
+.implementation-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+}
+
+.implementation-card h3 {
+    margin-bottom: 1rem;
+    text-align: center;
+    color: var(--primary);
+}
+
+.code-box {
+    background-color: #fafafa;
+    border-radius: var(--radius-sm);
+    padding: 0.5rem;
+    position: relative;
+    margin-bottom: 0.5rem;
+}
+
+.code-box pre {
+    margin: 0;
+    padding: 1rem;
+    overflow-x: auto;
+    font-family: 'Fira Code', monospace;
+    font-size: 0.9rem;
+}
+
+/* Platform badges container styles */
+.platform-badges-container {
+    max-width: 100%;
+    margin: 2rem auto;
+}
+
+.platform-badge-row {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 2rem;
+    margin-bottom: 2rem;
+}
+
+.platform-badge-item {
+    flex: 0 1 300px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    background-color: var(--white);
+    border-radius: var(--radius-md);
+    padding: 1.5rem;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+    transition: all 0.3s;
+}
+
+.platform-badge-item:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
+}
+
+.platform-badge-item h3 {
+    margin: 1rem 0 0.5rem;
+}
+
+.platform-badge-item p {
+    margin-bottom: 0;
+    font-size: 0.95rem;
+    color: var(--medium);
+}
+
+.platform-badge-item.try-demo {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: var(--primary-light);
+}
+
+/* Modal styles */
+.modal {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 1000;
+    opacity: 0;
+    transition: opacity 0.3s;
+}
+
+.modal.active {
+    display: block;
+    opacity: 1;
+}
+
+.modal-content {
+    position: relative;
+    background-color: var(--white);
+    margin: 10vh auto;
+    padding: 2rem;
+    width: 90%;
+    max-width: 800px;
+    border-radius: var(--radius-md);
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+    max-height: 80vh;
+    overflow-y: auto;
+    transform: scale(0.9);
+    transition: transform 0.3s;
+}
+
+.modal.active .modal-content {
+    transform: scale(1);
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .implementation-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .platform-badge-row {
+        flex-direction: column;
+        align-items: center;
+    }
+    
+    .platform-badge-item {
+        width: 100%;
+    }
 }

assets/badges/midjourney-generated.svg

@@ -7,6 +7,7 @@
     <meta name="description" content="See how attest.ink badges look on different content types">
     <link rel="stylesheet" href="css/styles.css">
     <link rel="stylesheet" href="css/demo.css">
+    <link rel="stylesheet" href="css/additional-styles.css">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
@@ -241,9 +242,9 @@ <h3>PDF Documents</h3>
                 <span class="modal-close">&times;</span>
                 <h2 id="modal-title">Code Example</h2>
                 <div class="modal-tabs">
-                    <button class="modal-tab-btn active" data-modal-tab="modal-html">HTML</button>
-                    <button class="modal-tab-btn" data-modal-tab="modal-markdown">Markdown</button>
-                    <button class="modal-tab-btn" data-modal-tab="modal-javascript">JavaScript</button>
+                    <button class="modal-tab-btn active" data-modal-tab="html">HTML</button>
+                    <button class="modal-tab-btn" data-modal-tab="markdown">Markdown</button>
+                    <button class="modal-tab-btn" data-modal-tab="javascript">JavaScript</button>
                 </div>
                 <div class="modal-tab-content active" id="modal-html-tab">
                     <pre><code id="modal-html-code"></code></pre>
@@ -359,7 +360,7 @@ <h3>Implementation</h3>
         <div id="video-template" class="video-preview">
             <div class="video-container">
                 <iframe width="100%" height="400" src="https://www.youtube.com/embed/2kigO0bR16Y" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-                <div class="video-title">Understanding Content Attribution</div>
+                <div class="video-title">AI Sponge Best Moments 1</div>
                 <div class="video-meta">
                     <span>4:32</span>
                     <span>May 5, 2025</span>