Skip to main content

max / makenotwork

4.1 KB · 87 lines History Blame Raw
1 <div class="tab-content">
2 <h3>Embed codes</h3>
3 <p class="embed-intro">
4 Copy these snippets to embed this item on your website, blog, or portfolio.
5 </p>
6
7 {% if !item.is_free && item.can_access %}
8 {% else %}
9 {% endif %}
10
11 <!-- Buy Button -->
12 <div class="embed-option">
13 <h4>Buy Button</h4>
14 <p class="embed-option-desc">Minimal strip with title, price, and buy button. 300x60px.</p>
15 <div class="embed-preview">
16 <iframe src="{{ host_url }}/embed/i/{{ item.id }}/button" width="300" height="60" frameborder="0" class="embed-iframe"></iframe>
17 </div>
18 <div class="embed-code-row">
19 <code class="embed-snippet">&lt;iframe src="{{ host_url }}/embed/i/{{ item.id }}/button" width="300" height="60" frameborder="0" title="Buy {{ item.title }} on Makenot.work"&gt;&lt;/iframe&gt;</code>
20 <button class="copy-btn" onclick="copyEmbed(this)">Copy</button>
21 </div>
22 </div>
23
24 <!-- Product Card (Vertical) -->
25 <div class="embed-option">
26 <h4>Product Card</h4>
27 <p class="embed-option-desc">Rich card with cover art, description, and buy button.</p>
28 <div class="embed-layout-toggle">
29 <label><input type="radio" name="card-layout" value="vertical" checked onchange="switchCardLayout('vertical')"> Vertical (350x400)</label>
30 <label><input type="radio" name="card-layout" value="horizontal" onchange="switchCardLayout('horizontal')"> Horizontal (600x200)</label>
31 </div>
32 <div class="embed-preview">
33 <iframe id="card-preview" src="{{ host_url }}/embed/i/{{ item.id }}/card" width="350" height="400" frameborder="0" class="embed-iframe"></iframe>
34 </div>
35 <div class="embed-code-row">
36 <code id="card-code" class="embed-snippet">&lt;iframe src="{{ host_url }}/embed/i/{{ item.id }}/card" width="350" height="400" frameborder="0" title="{{ item.title }} on Makenot.work"&gt;&lt;/iframe&gt;</code>
37 <button class="copy-btn" onclick="copyEmbed(this)">Copy</button>
38 </div>
39 </div>
40
41 {% if is_audio %}
42 <!-- Audio Player -->
43 <div class="embed-option">
44 <h4>Audio Player</h4>
45 <p class="embed-option-desc">Preview player with cover art, playback controls, and buy button. 350x120px.</p>
46 <div class="embed-preview">
47 <iframe src="{{ host_url }}/embed/i/{{ item.id }}/player" width="350" height="120" frameborder="0" class="embed-iframe"></iframe>
48 </div>
49 <div class="embed-code-row">
50 <code class="embed-snippet">&lt;iframe src="{{ host_url }}/embed/i/{{ item.id }}/player" width="350" height="120" frameborder="0" title="Preview {{ item.title }} on Makenot.work"&gt;&lt;/iframe&gt;</code>
51 <button class="copy-btn" onclick="copyEmbed(this)">Copy</button>
52 </div>
53 </div>
54 {% endif %}
55
56 <!-- Direct Purchase Link -->
57 <div class="embed-option">
58 <h4>Direct Purchase Link</h4>
59 <p class="embed-option-desc">Focused purchase page, no navigation chrome. For link-in-bio, social media, newsletters.</p>
60 <div class="embed-code-row">
61 <code class="embed-snippet">{{ host_url }}/buy/{{ item.id }}</code>
62 <button class="copy-btn" onclick="copyEmbed(this)">Copy</button>
63 </div>
64 </div>
65 </div>
66
67 <script>
68 function copyEmbed(btn) {
69 const code = btn.previousElementSibling.textContent;
70 navigator.clipboard.writeText(code).then(() => {
71 btn.textContent = 'Copied!';
72 setTimeout(() => btn.textContent = 'Copy', 1500);
73 });
74 }
75
76 function switchCardLayout(layout) {
77 const iframe = document.getElementById('card-preview');
78 const code = document.getElementById('card-code');
79 const w = layout === 'horizontal' ? 600 : 350;
80 const h = layout === 'horizontal' ? 200 : 400;
81 iframe.src = '{{ host_url }}/embed/i/{{ item.id }}/card?layout=' + layout;
82 iframe.width = w;
83 iframe.height = h;
84 code.textContent = '<iframe src="{{ host_url }}/embed/i/{{ item.id }}/card?layout=' + layout + '" width="' + w + '" height="' + h + '" frameborder="0" title="{{ item.title }} on Makenot.work"></iframe>';
85 }
86 </script>
87