Ok. This script is ready for review. Note it needs some variables to
be linked with actual data, and all <a> links are unset.
Also, the CSS may not be to your liking, only some size and
positioning settings are important. The fill image is a transparent
glass effect, so the colour can be changed from CSS.
Get the "meter-scale.png"
http://www.filefactory.com/file/b562ac1/n/meter-scale.png
and get "meter-fill.png" from
http://www.filefactory.com/file/b562abh/n/meter-fill.png
Do you want a donate button or link? If button, chrome (browser
widget) button or image button?
--------------------------------------------- The script (embedded
HTML with PHP and CSS) ---------------------------------------------
<?php
$donation_goal = 2000;
$donation_current = 1568; // Where to link this?
$currency = '$'; // What currency to use?
$countdown = 20; // Where to link this?
$donation_percent = ($donation_current / $donation_goal) * 100;
if ($donation_percent > 100) {
$donation_percent = 100;
} elseif ($donation_percent > 99 && $donation_percent < 100) {
$donation_percent = 99;
} elseif ($donation_percent < 1 && $donation_percent > 0) {
$donation_percent = 1;
} else {
$donation_percent = round($donation_percent);
}
$donation_pixels = $donation_percent * 2;
?><html><head><title>Donate - version3</title>
<style>
div#donate {
width:400px;
border-radius:6px;
background:#efffef;
border:1px solid #106802;
overflow:hidden;
} #donate table {
width:100%;
} #donate p,h2 {
margin:0px 5px 3px;
} #donate h2 {
color:#111;
padding:0;
} #goal {
color:#222;
padding:0 0 2px;
} #marker0 {
cursor:default;
color:#106802;
position:relative;
top:-3px;
width:200px;
text-align:center;
} #marker1 {
cursor:default;
background:#ccf4c6;
margin:-5px 5px 5px;
width:200px;
} #marker2 {
position:relative;
width:<?php echo($donation_pixels);?>px;
height:15px;
background:#18a303 url('meter-fill.png') repeat-x;
bottom:0;
left:0;
display:block;
border-right:1px solid #18a303;
} #marker3 {
position:relative;
left:-1;
display:block;
width:202px;
}
</style></head><body>
<!--donation meter begin-->
<div id="donate"><?php
if ($countdown > 0) {?>
<table border="0" cellpadding="1"
cellspacing="0"><tbody>
<tr>
<td>
<h2>Donate Today!</h2>
</td>
<td rowspan="3" valign="middle" style="width:200px;">
<p id="marker0">
<?php
echo($currency.$donation_current.", ".$donation_percent);?>%
</p>
<div id="marker1">
<div id="marker2">
<img id="marker3" src="meter-scale.png"/>
</div>
</div>
</td>
</tr>
<tr>
<td>
<p id="goal">
Our target is: <?php echo($currency.$donation_goal);?>
</p>
</td>
</tr>
<tr>
<td>
<p id="countdown"><?php if($countdown < 5) echo("Only
");echo($countdown);?> days left!</p>
</td>
</tr>
<tr>
<td colspan="2" valign="middle">
<p style="text-align:center;"><a href="">Donate now!</a></p>
</td>
</tr>
</tbody></table>
<?php } else {?>
<h2>Time's up.</h2>
<p>You can <a href="">donate</a> anyway, though, if you want!</p><?php }?>
</div>
<!--donation meter end-->
</body></html>
--------------------------------------------- End of script
---------------------------------------------
--
Unsubscribe instructions: E-mail to website+help@libreoffice.org
List archive: http://listarchives.libreoffice.org/www/website/
*** All posts to this list are publicly archived for eternity ***
Context
- Re: [libreoffice-website] donation barometer (continued)
Privacy Policy |
Impressum (Legal Info) |
Copyright information: Unless otherwise specified, all text and images
on this website are licensed under the
Creative Commons Attribution-Share Alike 3.0 License.
This does not include the source code of LibreOffice, which is
licensed under the Mozilla Public License (
MPLv2).
"LibreOffice" and "The Document Foundation" are
registered trademarks of their corresponding registered owners or are
in actual use as trademarks in one or more countries. Their respective
logos and icons are also subject to international copyright laws. Use
thereof is explained in our
trademark policy.
