Update post-social-en.html

therealtimex · Dec 10, 2024 · 25850f0 · 25850f0
1 parent ae05a03
commit 25850f0
Showing 1 changed file with 30 additions and 53 deletions.
diff --git a/html/post-templates/post-social-en.html b/html/post-templates/post-social-en.html
@@ -11,6 +11,7 @@
     <script src="https://therealtimex.github.io/rtlibrary/js/rt-html-abs.js" defer></script>
     <script src="https://therealtimex.github.io/rtlibrary/js/rt-html-css-fallback.js" defer></script>
     <script src="https://therealtimex.github.io/rtlibrary/js/rt-button-status.js" defer></script>
+    <script src="https://cdn.jsdelivr.net/gh/MarketingPipeline/Markdown-Tag/markdown-tag.js"></script>
 
     <style>
         :root {
@@ -43,50 +44,6 @@
 </head>
 
 <body>
-    <pre style="display: none;">
-        <h2>Post Breakdown</h2>
-
-        <div class="email-field">
-            <strong>Hook:</strong>
-            <p>The dramatic cost reduction in AI technology is a compelling hook that immediately grabs attention of entrepreneurs and tech enthusiasts. The specific numbers make it concrete and relatable.</p>
-        </div>
-
-        <div class="email-field">
-            <strong>Visual Elements:</strong>
-            <p>Recommend including a simple graph showing the cost decline of AI inference over time, with clear visualization of the 50X drop.</p>
-        </div>
-
-        <div class="email-field">
-            <strong>Engagement Hooks:</strong>
-            <ul>
-                <li>Specific numbers create credibility</li>
-                <li>Thread promise signals valuable insights to come</li>
-                <li>Mentioning Google adds authority</li>
-                <li>Cost reduction implies opportunity</li>
-            </ul>
-        </div>
-
-        <div class="email-field">
-            <strong>Algorithm Optimization:</strong>
-            <ul>
-                <li>Opens with high-impact numbers</li>
-                <li>Uses strategic emojis without overcrowding</li>
-                <li>Promises thread content</li>
-                <li>Name drops major tech company</li>
-                <li>Focuses on breaking news/insights</li>
-            </ul>
-        </div>
-
-        <div class="email-field">
-            <strong>The post is designed to:</strong>
-            <ul>
-                <li>Trigger curiosity about AI costs</li>
-                <li>Appeal to builders and entrepreneurs</li>
-                <li>Generate discussion about AI accessibility</li>
-                <li>Prompt questions about implementation</li>
-            </ul>
-        </div>
-    </pre>
     <div class="email-container">
         <div class="email-info-box">
             <h2>Post Preview</h2>
@@ -99,26 +56,46 @@ <h2>Post Preview</h2>
         </div>
     </div>
     <footer class="action-buttons">
-        <button class="btn" onclick="callCloudPhone(this)" data-phone="$phone" data-video-call="false"
-            data-call-out="true" data-custom-data='{"email": "$recipient"}' aria-label="Internet Call">
+        <button class="btn-shade" style="--btn-shade: 0%" onclick="callCloudPhone(this)" data-phone="$phone"
+            data-video-call="false" data-call-out="true" data-custom-data='{"email": "$recipient"}'
+            aria-label="Internet Call">
             <span aria-hidden="true">🌐📞</span> Internet Call
         </button>
-        <button class="btn" onclick="sendSMS(this)" data-phone="$phone" data-default-msg="$body"
-            aria-label="Send SMS">
+        <button class="btn-shade" style="--btn-shade: 0%" onclick="sendSMS(this)" data-phone="$phone"
+            data-default-msg="$body" aria-label="Send SMS">
             <span aria-hidden="true">💬</span> Send SMS
         </button>
-        <button class="btn" onclick="callPhone(this)" data-phone="$phone" aria-label="Phone Call">
+        <button class="btn-shade" style="--btn-shade: 0%" onclick="callPhone(this)" data-phone="$phone"
+            aria-label="Phone Call">
             <span aria-hidden="true">📱</span> Phone Call
         </button>
-        <button class="btn" onclick="shareContent(this)" data-copy="true" data-body="$body" aria-label="Copy Email">
+        <button class="btn-shade" style="--btn-shade: 0%" onclick="shareContent(this)" data-copy="true"
+            data-body="$body" aria-label="Copy Email">
             <span aria-hidden="true">📋</span> Copy Email
         </button>
-        <button class="btn" onclick="shareContent(this)" data-copy="false" data-body="$body"
-            data-subject="Share Email" 
-            aria-label="Share">
+        <button class="btn-shade" style="--btn-shade: 0%" onclick="shareContent(this)" data-copy="false"
+            data-body="$body" data-subject="Share Email" aria-label="Share">
             <span aria-hidden="true">📤</span> Share
         </button>
+        <button class="btn-shade" style="--btn-shade: 0%" onclick="showBreakdown()" 
+            aria-label="Share">
+            <span aria-hidden="true">📤</span> Post Breakdown
+        </button>
     </footer>
+
+    <dialog id="breakdownDialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h3>Post Breakdown</h3>
+                <button class="close-btn" onclick="closeBreakdown()" aria-label="Close">×</button>
+            </div>
+            <div class="modal-body">
+                <md>
+                $postbreakdown
+                </md>
+            </div>
+        </div>
+    </dialog>
 </body>
 
 </html>