($20) Easy - Countdown Timer Gif in Php
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Create a script that generates a dynamic countdown timer animated gif.
You don't need to create a script from scratch - many scripts are provided below. You need to implement the look and feel provided, and tweak the libraries to adjust to the requirements given on this bounty.

Parameters needed:
- deadline: time and date of deadline
- timezone: timezone to calculate time offset
- background: background color without # (e.g: ccee00 => "#ccee00")

Sample Usage:
<img src="http://path/to/your/script/gif.php?deadline=2014-12-25+00:00:01&timezone=EST&background=000000">

Libraries to use:

This problem has already been solved by many developers in the past, and there are MANY libraries that can create countdown timer gifs for you:

Use any of the above, or search for a new library, or create your own. Whatever option you choose, ensure that your library handles well: outputting correct headers (gif), outputting correct cache behavior, it should output 60 frames (60 seconds).

Ensure your solution works for HEAVY traffic and implement some caching mechanism as you consider (hundred of thousands of emails may be sent at once)

Image to use as background
Use the following image as background, where you will print the text on top.
Modify any of the libraries chosen so the text is printed to match this background template.
This background is transparent. Overlay a background of color background (parameter) behind, so that it is no longer transparent.

Sample Final Look
Use the font that matches more closely this image:

- Maximum of 60 frames in a gif (could be less if less than 60 seconds are remaining, ensure that it always ends on 00:00:00 and doesn't go to negative numbers)
- If deadline has already passed at the moment of requesting the gif, then return 00:00:00 (with just 1 frame)
- Should be able to handle HEAVY traffic - implement cache mechanism as you consider necessary (hundred of thousands of emails may be sent at once).

EXTRA TIP OF $10 WILL BE GIVEN if you meet all these requirements.*

Technology: Php 5.6 / Imagick library / GD library

awarded to Chlegou

Crowdsource coding tasks.

1 Solution

Winning solution

Hi there ;) ,

i tried to work on it, and here is my done work, i made all parameters optionals:

default_date: past date, so zeros are promped

default_color: white (ffffff)

default_timezone: UTC


default_width: current background image width

default_height: current background image height

and you can set whatever you want, so even when missing, nothing went wrong.

also, image, isn't saved in cache as required.

gif.php, is the customized image, and index.html, is a demo webpage that shows a used example.

code is available at github:

link: https://github.com/chlegou/emailCountDownTimer

since php files aren't executed with github.io, i added a demo in my server (as always :p )

link: http://orbitcoins.website/demos/demo-emailCountdownTimer/

the GIF file, can be foud here, and can be costumized.


Full: http://orbitcoins.website/demos/demo-emailCountdownTimer/gif.php?time=2018-03-25+05:50:35&background=70eede&timezone=Africa/Tunis

Empty: http://orbitcoins.website/demos/demo-emailCountdownTimer/gif.php


width && height in action: http://orbitcoins.website/demos/demo-emailCountdownTimer/gif.php?time=2018-03-25+05:50:35&background=70eede&timezone=Africa/Tunis&width=300&height=100

Code is updated with the required font

Code is updated (in server) with the optional width and height parameters

Enjoy! ;)

didn't find a similar for the required font, if you can provide it, we can add it, also, numbers are adjusted manually, so need to fix with the new font.
Chlegou 1 year ago
Thanks so much! Here is the font: https://www.dropbox.com/sh/r1lzhuorachg21w/AAD09izCGvCBoF7hNZVif0OTa?dl=0 Please fix alignment, including the 00 00:00:00 case, and when days is zero, hours is zero, minutes is zero.
georgefountain 1 year ago
Use regular (not bold)
georgefountain 1 year ago
i have updated the code in both server and github, now is aligned and with required font
Chlegou 1 year ago
Excellent work! Thank you! Extra $10 bonus will be awarded through separate bounty
georgefountain 1 year ago