-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
164 lines (154 loc) · 8.36 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AdShuffle - Demo</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" />
<script src="dist/ad-shuffle.es.js?v=2024-11-08-1924"></script>
<script>
window.selectedEditor = AdManager.selectEditorByFrequency([['editor-1',80],['editor-2',20]]);
</script>
</head>
<body class="bg-gray-100 text-gray-800 font-sans">
<header class="bg-blue-600 text-white py-6">
<div class="container mx-auto">
<h1 class="text-3xl font-bold">AdShuffle - Demo</h1>
<p class="mt-2 text-lg">A JavaScript package for random banner rotation with frequency and date control.</p>
<a href="https://github.com/codions/ad-shuffle" class="mt-4 inline-block text-blue-100 hover:text-white underline">View on GitHub</a>
</div>
</header>
<main class="container mx-auto my-10">
<!-- Introduction Section -->
<section class="mb-8">
<h2 class="text-2xl font-semibold">About AdShuffle</h2>
<p class="mt-4">AdShuffle allows you to manage banner rotation based on frequency and date range settings. You can also enable automatic rotation with a set interval. Below are examples showcasing different cases and configurations.</p>
</section>
<!-- Script Inclusion Section -->
<section class="mb-8 bg-white p-6 rounded-lg shadow-md">
<h2 class="text-xl font-semibold">How to Add AdShuffle to Your Page</h2>
<p class="mt-4">To use AdShuffle on your website, simply add the following script tag to your HTML file:</p>
<pre class="bg-gray-800 text-white p-4 rounded-lg">
<script src="https://ad-shuffle.codions.dev/dist/ad-shuffle.es.js"></script>
</pre>
<p class="mt-4">This script will enable the functionality of banner rotation, allowing you to define banners with frequencies, start and end dates, and more.</p>
</section>
<!-- Button to toggle ads visibility -->
<div class="mb-8">
<button id="ads-toggle-button" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">
Hide Ads
</button>
</div>
<!-- Example 1: Sequential Auto-Rotation -->
<section class="mb-8">
<h3 class="text-xl font-semibold">Example 1: Sequential Auto-Rotation Every 3 Seconds</h3>
<p class="mb-4">This container rotates banners automatically every 3 seconds, in sequential order.</p>
<div class="bg-white p-4 shadow-md rounded-lg">
<div class="rb-ads" data-auto-rotate="true" data-interval="3" data-sequential="true">
<div class="rb-random-ads ads-styled">
<div class="ads-info">Advertisement</div>
Banner 1
</div>
<div class="rb-random-ads ads-styled">
<div class="ads-info">Advertisement</div>
Banner 2
</div>
<div class="rb-random-ads ads-styled">
<div class="ads-info">Advertisement</div>
Banner 3
</div>
</div>
</div>
</section>
<!-- Example 2: Random Auto-Rotation -->
<section class="mb-8">
<h3 class="text-xl font-semibold">Example 2: Random Auto-Rotation Every 5 Seconds</h3>
<p class="mb-4">This container rotates banners automatically every 5 seconds, with random selection.</p>
<div class="bg-white p-4 shadow-md rounded-lg">
<div class="rb-ads" data-auto-rotate="true" data-interval="5">
<div class="rb-random-ads ads-styled" data-frequency="50">
<div class="ads-info">Advertisement</div>
Banner 1 (50% Frequency)
</div>
<div class="rb-random-ads ads-styled" data-frequency="30">
<div class="ads-info">Advertisement</div>
Banner 2 (30% Frequency)
</div>
<div class="rb-random-ads ads-styled" data-frequency="20">
<div class="ads-info">Advertisement</div>
Banner 3 (20% Frequency)
</div>
</div>
</div>
</section>
<!-- Example 3: No Auto-Rotation -->
<section class="mb-8">
<h3 class="text-xl font-semibold">Example 3: No Auto-Rotation (Random Initial Selection)</h3>
<p class="mb-4">This container selects a random banner initially, based on the defined frequencies, but does not rotate automatically.</p>
<div class="bg-white p-4 shadow-md rounded-lg">
<div class="rb-ads">
<div class="rb-random-ads ads-styled" data-frequency="25" data-start-date="2024-09-10 00:00:00" data-end-date="2025-10-10 12:35:00">
<div class="ads-info">Advertisement</div>
Banner 1 - Frequency 25% (Starts 2024-09-10)
</div>
<div class="rb-random-ads ads-styled" data-frequency="75">
<div class="ads-info">Advertisement</div>
Banner 2 - Frequency 75%
</div>
</div>
</div>
</section>
<!-- Example 4: Equal Frequencies -->
<section class="mb-8">
<h3 class="text-xl font-semibold">Example 4: Equal Frequencies</h3>
<p class="mb-4">This container displays banners with equal frequencies (33%).</p>
<div class="bg-white p-4 shadow-md rounded-lg">
<div class="rb-ads">
<div class="rb-random-ads ads-styled" data-frequency="33">
<div class="ads-info">Advertisement</div>
Banner 1 - Frequency 33%
</div>
<div class="rb-random-ads ads-styled" data-frequency="33">
<div class="ads-info">Advertisement</div>
Banner 2 - Frequency 33%
</div>
<div class="rb-random-ads ads-styled" data-frequency="33">
<div class="ads-info">Advertisement</div>
Banner 3 - Frequency 33%
</div>
</div>
</div>
</section>
<!-- Example 5: Dynamic Ad Zone Loaded from Endpoint -->
<section class="mb-8">
<h3 class="text-xl font-semibold">Example 5: Dynamic Ad Zone Loaded from Endpoint</h3>
<p class="mb-4">This example demonstrates how to use the AdShuffle SDK to load an ad dynamically from an external endpoint. The ad content is fetched and displayed within the specified container.</p>
<div class="bg-white p-4 shadow-md rounded-lg">
<div class="rb-ads">
<div class="rb-random-ads ads-styled">
<div class="ads-info">Advertisement</div>
<div id="ADZONE1">Loading ad...</div>
<script>
AdManager.loadAdZone('ADZONE1', `https://ad-flux.codions.dev/ad/serve?z=ADZONE1&editor=${window.selectedEditor}`);
</script>
</div>
</div>
<div class="rb-ads">
<div class="rb-random-ads ads-styled">
<div class="ads-info">Advertisement</div>
<div id="ADZONE2">Loading ad...</div>
<script>
AdManager.loadAdZone('ADZONE2', `https://ad-flux.codions.dev/ad/serve?z=ADZONE2&editor=${window.selectedEditor}`);
</script>
</div>
</div>
</div>
</section>
</main>
<footer class="bg-blue-600 text-white py-4">
<div class="container mx-auto text-center">
<p>© 2024 AdShuffle - Developed by <a href="https://github.com/codions/ad-shuffle" class="underline text-blue-100 hover:text-white">Codions</a></p>
</div>
</footer>
</body>
</html>