Skip to content

Commit 2dd1526

Browse files
committed
update imglab wishin ads
1 parent 923c5e0 commit 2dd1526

File tree

1 file changed

+126
-81
lines changed

1 file changed

+126
-81
lines changed

imglab/js/prompt.js

Lines changed: 126 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,26 @@ const ads = [
1515
url: 'https://play.google.com/store/apps/details?id=com.solothought.wishin',
1616
alt: 'Wishin Product'
1717
},
18+
{
19+
image: 'https://solothought.com/products/assets/images/wishin/inner-proof.png',
20+
url: 'https://play.google.com/store/apps/details?id=com.solothought.wishin',
21+
alt: 'Wishin Product'
22+
},
23+
{
24+
image: 'https://solothought.com/products/assets/images/wishin/old-habit.png',
25+
url: 'https://play.google.com/store/apps/details?id=com.solothought.wishin',
26+
alt: 'Wishin Product'
27+
},
28+
{
29+
image: 'https://solothought.com/products/assets/images/wishin/reason-for-habit.png',
30+
url: 'https://play.google.com/store/apps/details?id=com.solothought.wishin',
31+
alt: 'Wishin Product'
32+
},
33+
{
34+
image: 'https://solothought.com/products/assets/images/wishin/together-memories-give-strength.png',
35+
url: 'https://play.google.com/store/apps/details?id=com.solothought.wishin',
36+
alt: 'Wishin Product'
37+
},
1838
];
1939

2040
// Function to get random ad
@@ -29,99 +49,117 @@ function shouldShowAd() {
2949
return lastShown !== today;
3050
}
3151

32-
// Modified feature popup with ad on the left
33-
$(function () {
34-
const showAd = shouldShowAd();
35-
const selectedAd = showAd ? getRandomAd() : null;
36-
37-
const adColumn = showAd ? `
38-
<div class="col-md-4" style="padding-right: 20px; border-right: 2px solid #eee;">
39-
<a href="${selectedAd.url}" target="_blank" onclick="logAdClick('${selectedAd.url}')">
40-
<img src="${selectedAd.image}"
41-
alt="${selectedAd.alt}"
42-
style="width: 100%; height: auto; cursor: pointer; border-radius: 8px; margin-top: 10px;" />
43-
</a>
44-
</div>
45-
` : '';
46-
47-
const featureColClass = showAd ? 'col-md-8' : 'col-md-12';
52+
// Function to show the ad popup
53+
function showAdPopup(selectedAd, callback) {
54+
$.confirm({
55+
title: "",
56+
content: `
57+
<div style="text-align: center; padding: 20px;">
58+
<a href="${selectedAd.url}" target="_blank" onclick="logAdClick('${selectedAd.url}')">
59+
<img src="${selectedAd.image}"
60+
alt="${selectedAd.alt}"
61+
style="max-width: 100%; height: auto; cursor: pointer; border-radius: 8px;" />
62+
</a>
63+
</div>
64+
`,
65+
escapeKey: true,
66+
backgroundDismiss: true,
67+
useBootstrap: false,
68+
boxWidth: 600,
69+
buttons: {
70+
continue: {
71+
text: "Continue",
72+
action: function () {
73+
// Save that ad was shown today
74+
localStorage.setItem('adLastShown', new Date().toDateString());
75+
// Call the callback to show features
76+
callback();
77+
},
78+
},
79+
close: {
80+
text: "Close",
81+
action: function () {
82+
// Save that ad was shown today even if closed
83+
localStorage.setItem('adLastShown', new Date().toDateString());
84+
},
85+
},
86+
},
87+
});
88+
}
4889

90+
// Function to show the features popup
91+
function showFeaturesPopup() {
4992
$.confirm({
5093
title: "",
5194
content: `
5295
<div id="featurepopup">
53-
<div class="row">
54-
${adColumn}
55-
<div class="${featureColClass}">
56-
<div class="row text-center">
57-
<div class="col-md-4 col-sm-6">
58-
<i class="icon-github-circled featureicon" style="font-size: 48px;"></i>
59-
<div class="summary" style="font-size: 13px;">
60-
Free & Open source
61-
<a class="github-button" href="https://github.com/NaturalIntelligence/imglab" data-size="large" data-show-count="true" aria-label="Star NaturalIntelligence/imglab on GitHub">Star</a>
62-
</div>
63-
</div>
64-
<div class="col-md-4 col-sm-6">
65-
<i class="icon-user-secret featureicon" style="font-size: 48px;"></i>
66-
<div class="summary" style="font-size: 13px;">Your images and data are safe, they are saved locally</div>
67-
</div>
68-
<div class="col-md-4 col-sm-6">
69-
<i class="icon-object-group featureicon" style="font-size: 48px;"></i>
70-
<div class="summary" style="font-size: 13px;">Multiple label types: point, circle, boundary box, polygon</div>
96+
<div class="row text-center">
97+
<div class="col-md-4 col-sm-6">
98+
<i class="icon-github-circled featureicon" style="font-size: 48px;"></i>
99+
<div class="summary" style="font-size: 13px;">
100+
Free & Open source
101+
<a class="github-button" href="https://github.com/NaturalIntelligence/imglab" data-size="large" data-show-count="true" aria-label="Star NaturalIntelligence/imglab on GitHub">Star</a>
71102
</div>
72103
</div>
73-
<div class="row text-center">
74-
<div class="col-md-4 col-sm-6">
75-
<i class="icon-mouse-pointer featureicon" style="font-size: 48px;"></i>
76-
<div class="summary" style="font-size: 13px;">1 click face landmarking</div>
77-
</div>
78-
<div class="col-md-4 col-sm-6">
79-
<i class="icon-firefox featureicon" style="font-size: 48px;"></i>
80-
<div class="summary" style="font-size: 13px;">No installation, works in your browser</div>
81-
</div>
82-
<div class="col-md-4 col-sm-6">
83-
<i class="icon-doc-text featureicon" style="font-size: 48px;"></i>
84-
<div class="summary" style="font-size: 13px;">Multiple supported formats: dlib XML, dlib pts, Pascal VOC, COCO ..</div>
85-
</div>
104+
<div class="col-md-4 col-sm-6">
105+
<i class="icon-user-secret featureicon" style="font-size: 48px;"></i>
106+
<div class="summary" style="font-size: 13px;">Your images and data are safe, they are saved locally</div>
86107
</div>
87-
<div class="row text-center">
88-
<div class="col-md-4 col-sm-6">
89-
<i class="icon-tags featureicon" style="font-size: 48px;"></i>
90-
<div class="summary" style="font-size: 13px;">Multiple label types including name, category, tags</div>
91-
</div>
92-
<div class="col-md-4 col-sm-6">
93-
<i class="icon-emo-thumbsup featureicon" style="font-size: 48px;"></i>
94-
<div class="summary" style="font-size: 13px;">Better user experience with features like autofill, hotkeys, cut & paste labels...</div>
95-
</div>
96-
<div class="col-md-4 col-sm-6">
97-
<i class="icon-globe featureicon" style="font-size: 48px;"></i>
98-
<div class="summary" style="font-size: 13px;">Trusted by users from 45+ countries</div>
99-
</div>
108+
<div class="col-md-4 col-sm-6">
109+
<i class="icon-object-group featureicon" style="font-size: 48px;"></i>
110+
<div class="summary" style="font-size: 13px;">Multiple label types: point, circle, boundary box, polygon</div>
100111
</div>
101-
<div class="row text-center">
102-
<div class="col-md-4 col-sm-6">
103-
<i class="icon-laptop featureicon" style="font-size: 48px;"></i>
104-
<div class="summary" style="font-size: 13px;">Basic IDE features: zoom in/out, light, move, image thumbnails, drag ...</div>
105-
</div>
106-
<div class="col-md-4 col-sm-6">
107-
<div class="featureicon">
108-
<img src="img/icons/Offline_logo.svg" width="48px" />
109-
</div>
110-
<div class="summary" style="font-size: 13px;">Works offline</div>
111-
</div>
112-
<div class="col-md-4 col-sm-6">
113-
<i class="icon-picture featureicon" style="font-size: 48px;"></i>
114-
<div class="summary" style="font-size: 13px;">0.5 millions images annotated monthly</div>
112+
</div>
113+
<div class="row text-center">
114+
<div class="col-md-4 col-sm-6">
115+
<i class="icon-mouse-pointer featureicon" style="font-size: 48px;"></i>
116+
<div class="summary" style="font-size: 13px;">1 click face landmarking</div>
117+
</div>
118+
<div class="col-md-4 col-sm-6">
119+
<i class="icon-firefox featureicon" style="font-size: 48px;"></i>
120+
<div class="summary" style="font-size: 13px;">No installation, works in your browser</div>
121+
</div>
122+
<div class="col-md-4 col-sm-6">
123+
<i class="icon-doc-text featureicon" style="font-size: 48px;"></i>
124+
<div class="summary" style="font-size: 13px;">Multiple supported formats: dlib XML, dlib pts, Pascal VOC, COCO ..</div>
125+
</div>
126+
</div>
127+
<div class="row text-center">
128+
<div class="col-md-4 col-sm-6">
129+
<i class="icon-tags featureicon" style="font-size: 48px;"></i>
130+
<div class="summary" style="font-size: 13px;">Multiple label types including name, category, tags</div>
131+
</div>
132+
<div class="col-md-4 col-sm-6">
133+
<i class="icon-emo-thumbsup featureicon" style="font-size: 48px;"></i>
134+
<div class="summary" style="font-size: 13px;">Better user experience with features like autofill, hotkeys, cut & paste labels...</div>
135+
</div>
136+
<div class="col-md-4 col-sm-6">
137+
<i class="icon-globe featureicon" style="font-size: 48px;"></i>
138+
<div class="summary" style="font-size: 13px;">Trusted by users from 45+ countries</div>
139+
</div>
140+
</div>
141+
<div class="row text-center">
142+
<div class="col-md-4 col-sm-6">
143+
<i class="icon-laptop featureicon" style="font-size: 48px;"></i>
144+
<div class="summary" style="font-size: 13px;">Basic IDE features: zoom in/out, light, move, image thumbnails, drag ...</div>
145+
</div>
146+
<div class="col-md-4 col-sm-6">
147+
<div class="featureicon">
148+
<img src="img/icons/Offline_logo.svg" width="48px" />
115149
</div>
150+
<div class="summary" style="font-size: 13px;">Works offline</div>
151+
</div>
152+
<div class="col-md-4 col-sm-6">
153+
<i class="icon-picture featureicon" style="font-size: 48px;"></i>
154+
<div class="summary" style="font-size: 13px;">0.5 millions images annotated monthly</div>
116155
</div>
117-
</div>
118156
</div>
119157
</div>
120158
`,
121159
escapeKey: true,
122160
backgroundDismiss: true,
123161
useBootstrap: false,
124-
boxWidth: showAd ? 1100 : 900,
162+
boxWidth: 900,
125163
buttons: {
126164
confirm: {
127165
text: "Donate",
@@ -134,10 +172,19 @@ $(function () {
134172
},
135173
},
136174
});
175+
}
176+
177+
// Main initialization - show ad first, then features
178+
$(function () {
179+
const showAd = shouldShowAd();
137180

138-
// Save that ad was shown today
139181
if (showAd) {
140-
localStorage.setItem('adLastShown', new Date().toDateString());
182+
const selectedAd = getRandomAd();
183+
// Show ad first, then features popup
184+
showAdPopup(selectedAd, showFeaturesPopup);
185+
} else {
186+
// If no ad, just show features
187+
showFeaturesPopup();
141188
}
142189
});
143190

@@ -156,10 +203,8 @@ function displayDonationPrompt() {
156203
$.dialog({
157204
title: "Donate",
158205
content: `<div style="text-align:center;">
159-
160206
<div><a onclick="javascript:logPaypal()" href="https://paypal.me/naturalintelligence" target="_blank"><img src="img/support_paypal.svg" width="200px"></a></div>
161-
162-
<div>`,
207+
</div>`,
163208
escapeKey: true,
164209
backgroundDismiss: true,
165210
});

0 commit comments

Comments
 (0)