Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found
Select Git revision
  • master
1 result

Target

Select target project
  • websites/cesium_website
  • matograine/cesium_website
  • scanlegentil/cesium_website
  • vincentux/cesium_website
  • lelibreauquotidien/cesium_website
  • Vivakvo/cesium_website
  • llaq/cesium_website
  • BorisPAING/cesium_website_boris
8 results
Select Git revision
  • dev
  • master
  • patch-1
  • patch-2
4 results
Show changes
Showing
with 2789 additions and 0 deletions
<?php
$ttr = array(
'error_bar_color_invalid' => 'Couleur de barre invalide. Vérifiez votre syntaxe.',
'error_border_color_invalid' => 'Couleur de bordure invalide. Vérifiez votre syntaxe.',
'error_connect_node' => 'La connexion au noeud duniter a échoué. Modifiez le noeud utilisé.',
'error_date_start_invalid' => 'La date de début est incorrecte. Vérifiez votre syntaxe.',
'error_date_start_missing' => 'Il manque la date de début. Vérifiez votre syntaxe.',
'error_date_end_invalid' => 'La date de fin est incorrecte. Vérifiez votre syntaxe.',
'error_date_end_anterior' => 'La date de fin est antérieure à la date de début. Vérifiez votre syntaxe.',
'error_font_color_invalid' => 'Couleur de police invalide. Vérifiez votre syntaxe.',
'error_pubkey_invalid' => 'La clé publique n\'a pas le format attendu. Vérifiez votre syntaxe.',
'error_pubkey_missing' => 'Il manque la clé publique du compte à vérifier. Vérifiez votre syntaxe.',
'error_target_not_int' => 'La cible n\'est pas un entier. Vérifiez votre syntaxe.',
'error_target_negative' => 'La cible est un entier négatif ou nul. Vérifiez votre syntaxe.',
'error_target_missing' => 'Il manque le montant à atteindre. Vérifiez votre syntaxe.',
'title_default' => 'Financement participatif en monnaie libre',
'label_pubkey' => 'Clé publique du compte&nbsp;:',
'label_qrcode' => 'QRcode',
'label_reached' => 'atteints',
'label_donators' => 'Donateurs',
'ud' => 'DU',
'label_ontotal' => 'Sur un total de {{total}} {{unit}}',
'label_ontotal_short' => 'Sur {{total}} {{unit}}',
'label_remaining_d' => 'jours restants',
'label_contribute' => 'Contribuez maintenant !',
'graph_title' => 'Montant récolté',
'graph_target' => 'Objectif',
'graph_delta' => 'Contributions du jour'
);
?>
//! moment.js locale configuration
;(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined'
&& typeof require === 'function' ? factory(require('../moment')) :
typeof define === 'function' && define.amd ? define(['../moment'], factory) :
factory(global.moment)
}(this, (function (moment) { 'use strict';
var eo = moment.defineLocale('eo', {
months : 'januaro_februaro_marto_aprilo_majo_junio_julio_aŭgusto_septembro_oktobro_novembro_decembro'.split('_'),
monthsShort : 'jan_feb_mar_apr_maj_jun_jul_aŭg_sep_okt_nov_dec'.split('_'),
weekdays : 'dimanĉo_lundo_mardo_merkredo_ĵaŭdo_vendredo_sabato'.split('_'),
weekdaysShort : 'dim_lun_mard_merk_ĵaŭ_ven_sab'.split('_'),
weekdaysMin : 'di_lu_ma_me_ĵa_ve_sa'.split('_'),
longDateFormat : {
LT : 'HH:mm',
LTS : 'HH:mm:ss',
L : 'YYYY-MM-DD',
LL : 'D[-a de] MMMM, YYYY',
LLL : 'D[-a de] MMMM, YYYY HH:mm',
LLLL : 'dddd, [la] D[-a de] MMMM, YYYY HH:mm'
},
meridiemParse: /[ap]\.t\.m/i,
isPM: function (input) {
return input.charAt(0).toLowerCase() === 'p';
},
meridiem : function (hours, minutes, isLower) {
if (hours > 11) {
return isLower ? 'p.t.m.' : 'P.T.M.';
} else {
return isLower ? 'a.t.m.' : 'A.T.M.';
}
},
calendar : {
sameDay : '[Hodiaŭ je] LT',
nextDay : '[Morgaŭ je] LT',
nextWeek : 'dddd [je] LT',
lastDay : '[Hieraŭ je] LT',
lastWeek : '[pasinta] dddd [je] LT',
sameElse : 'L'
},
relativeTime : {
future : 'post %s',
past : 'antaŭ %s',
s : 'sekundoj',
ss : '%d sekundoj',
m : 'minuto',
mm : '%d minutoj',
h : 'horo',
hh : '%d horoj',
d : 'tago',//ne 'diurno', ĉar estas uzita por proksimumo
dd : '%d tagoj',
M : 'monato',
MM : '%d monatoj',
y : 'jaro',
yy : '%d jaroj'
},
dayOfMonthOrdinalParse: /\d{1,2}a/,
ordinal : '%da',
week : {
dow : 1, // Monday is the first day of the week.
doy : 7 // The week that contains Jan 7th is the first week of the year.
}
});
return eo;
})));
\ No newline at end of file
//! moment.js locale configuration
;(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined'
&& typeof require === 'function' ? factory(require('../moment')) :
typeof define === 'function' && define.amd ? define(['../moment'], factory) :
factory(global.moment)
}(this, (function (moment) { 'use strict';
var fr = moment.defineLocale('fr', {
months : 'janvier_février_mars_avril_mai_juin_juillet_août_septembre_octobre_novembre_décembre'.split('_'),
monthsShort : 'janv._févr._mars_avr._mai_juin_juil._août_sept._oct._nov._déc.'.split('_'),
monthsParseExact : true,
weekdays : 'dimanche_lundi_mardi_mercredi_jeudi_vendredi_samedi'.split('_'),
weekdaysShort : 'dim._lun._mar._mer._jeu._ven._sam.'.split('_'),
weekdaysMin : 'di_lu_ma_me_je_ve_sa'.split('_'),
weekdaysParseExact : true,
longDateFormat : {
LT : 'HH:mm',
LTS : 'HH:mm:ss',
L : 'DD/MM/YYYY',
LL : 'D MMMM YYYY',
LLL : 'D MMMM YYYY HH:mm',
LLLL : 'dddd D MMMM YYYY HH:mm'
},
calendar : {
sameDay : '[Aujourd’hui à] LT',
nextDay : '[Demain à] LT',
nextWeek : 'dddd [à] LT',
lastDay : '[Hier à] LT',
lastWeek : 'dddd [dernier à] LT',
sameElse : 'L'
},
relativeTime : {
future : 'dans %s',
past : 'il y a %s',
s : 'quelques secondes',
ss : '%d secondes',
m : 'une minute',
mm : '%d minutes',
h : 'une heure',
hh : '%d heures',
d : 'un jour',
dd : '%d jours',
M : 'un mois',
MM : '%d mois',
y : 'un an',
yy : '%d ans'
},
dayOfMonthOrdinalParse: /\d{1,2}(er|)/,
ordinal : function (number, period) {
switch (period) {
// TODO: Return 'e' when day of month > 1. Move this case inside
// block for masculine words below.
// See https://github.com/moment/moment/issues/3375
case 'D':
return number + (number === 1 ? 'er' : '');
// Words with masculine grammatical gender: mois, trimestre, jour
default:
case 'M':
case 'Q':
case 'DDD':
case 'd':
return number + (number === 1 ? 'er' : 'e');
// Words with feminine grammatical gender: semaine
case 'w':
case 'W':
return number + (number === 1 ? 're' : 'e');
}
},
week : {
dow : 1, // Monday is the first day of the week.
doy : 4 // The week that contains Jan 4th is the first week of the year.
}
});
return fr;
})));
\ No newline at end of file
<?php
require_once('conf.php');
require_once('functions.php');
require_once('Crowdfunding.class.php');
require_once('Color.class.php');
require_once('lib/locales.php');
$GETs = ['pubkey', 'unit', 'start_date', 'end_date'];
foreach ($GETs as $get) {
if (!isset($_GET[$get])) {
$_GET[$get] = NULL;
}
}
$myCrowdfunding = new Crowdfunding($_GET['pubkey'], $_GET['unit'], $_GET['start_date'], $_GET['end_date'], 'svg');
if (isset($_GET['target'])) {
$target = $myCrowdfunding->setTarget($_GET['target']);
}
if (isset($_GET['title'])) {
$myCrowdfunding->setTitle($_GET['title']);
}
if (isset($_GET['hide_title'])) {
$myCrowdfunding->setMustHideTitle($_GET['hide_title']);
}
if (isset($_GET['display_pubkey'])) {
$myCrowdfunding->setMustDisplayPubkey($_GET['display_pubkey']);
}
if (isset($_GET['display_qrcode'])) {
$myCrowdfunding->setMustDisplayQRCode(true);
}
/*
if (isset($_GET['node'])) {
$myCrowdfunding->addNodes(explode(' ', $_GET['node']));
}
*/
if (isset($_GET['logo'])) {
$myCrowdfunding->setLogo($_GET['logo']);
}
$theme = isset($_GET['theme']) ? $_GET['theme'] : DEFAULT_THEME;
if (!file_exists($tplPath = THEMES_PATH . '/' . $theme . '.svg.php')) {
$tplPath = THEMES_PATH . '/' . DEFAULT_THEME . '.svg.php';
}
if (file_exists($confPath = THEMES_PATH . '/' . $theme . '.conf.php')) {
require_once($confPath);
}
ob_clean();// Without this line, encoding problems (UTF-8 php files instead of ANSI) can cause image to not generate)
header('Content-type: image/svg+xml');
include($tplPath);
<div id="chart"></div>
<?php
if (isset($chart)) {
$targetGraph = new Graph($chart->getTargetLinePoints(), _('Objectif'));
$targetGraph->setStyle('type', 'line');
$targetGraph->setStyle('borderColor', 'green');
$targetGraph->setStyle('borderDash', [5, 5]);
$targetGraph->setStyle('radius', 0);
$targetGraph->setStyle('fill', false);
$chart->addGraph($targetGraph);
$amountCumulativeGraph = new Graph($chart->getAmountCollectedByDayCumulativePoints(), _('Montant total récolté'));
$amountCumulativeGraph->setStyle('type', 'line');
$amountCumulativeGraph->setStyle('borderColor', '#301873');
$amountCumulativeGraph->setStyle('backgroundColor', '#301873');
$amountCumulativeGraph->setStyle('lineTension', 0);
$amountCumulativeGraph->setStyle('pointRadius', 1);
$amountCumulativeGraph->setStyle('borderWidth', 2);
$amountCumulativeGraph->setStyle('steppedLine', false);
$chart->addGraph($amountCumulativeGraph);
echo $chart->getScripts($lang, '#chart');
}
?>
<script src="lib/js/jquery-3.4.1.min.js"></script>
<script src="lib/js/counter.js"></script>
<script>
$(document).ready(function(){
$('.progress-bar').animate({
width: '<?php echo $myCrowdfunding->getPercentage(); ?>%'
}, 1300, '');
});
</script>
body, p {
margin: 0;
padding: 0;
/*overflow: hidden;*/
}
p {
text-align: center;
}
.donorsList {
list-style-type: none;
margin: 0 auto;
padding: 0;
max-width: 500px;
text-align: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.donorsList > li {
padding: 0.10rem 0.5rem;
flex-shrink: 1;
box-sizing: border-box;
}
.donorsList > li span {
border-radius: 1em;
padding: 0 0.25em;
color: white;
}
.donorsList > li:nth-child(5n) span{
background: hsl(194, 100%, 70%);
color: black;
}
.donorsList > li:nth-child(5n+1) span{
background: hsl(185, 62%, 53%);
}
.donorsList > li:nth-child(5n+2) span{
background: hsl(210, 100%, 25%);
}
.donorsList > li:nth-child(5n+3) span{
background: hsl(194, 100%, 80%);
color: hsl(233, 88%, 9%);
}
.donorsList > li:nth-child(5n+4) span{
background: hsl(194, 100%, 60%);
color: hsl(233, 88%, 9%);
}
.donorsList > :nth-child(1) {
width: 100%;
}
.donorsList > :nth-child(2),
.donorsList > :nth-child(3) {
width: 50%;
}
.donorsList > :nth-child(2) {
text-align: right;
}
.donorsList > :nth-child(3) {
text-align: left;
}
.donorsList > :last-child {
width: 100%;
}
<?php
$donationsList = $myCrowdfunding->getDonationsList(true);
$min = $myCrowdfunding->getMinDonation();
$max = $myCrowdfunding->getMaxDonation();
if (empty($donationsList)) {
echo _('Pas encore de donateurs');
} else {
echo '<ul class="donorsList">';
foreach ($donationsList as $donation) {
echo '
<li style="font-size: '. (1 + ($donation->getAmount() / $max) * 2) . 'em;">
<span>
<a href="https://demo.cesium.app/#/app/wot/'. $donation->getDonorPubkey() .'/">
'. $myCrowdfunding->getDonorCesiumPlusProfile($donation->getDonorPubkey())->getName() .'
</a>
</span>
</li>';
}
echo '</ul>';
}
/* ================ General ================ */
@font-face {
font-family:"Font Awesome 5 Free";
font-style:normal;
font-weight:400;
font-display:auto;
src:url(../lib/webfonts/fontawesome/400/fa-regular-400.eot);
src:url(../lib/webfonts/fontawesome/400/fa-regular-400.eot?#iefix) format("embedded-opentype"),url(../lib/webfonts/fontawesome/400/fa-regular-400.woff2) format("woff2"),url(../lib/webfonts/fontawesome/400/fa-regular-400.woff) format("woff"),url(../lib/webfonts/fontawesome/400/fa-regular-400.ttf) format("truetype"),url(../lib/webfonts/fontawesome/400/fa-regular-400.svg#fontawesome) format("svg")
}
@font-face {
font-family:"Font Awesome 5 Free";
font-style:normal;
font-weight:900;
font-display:auto;
src:url(../lib/webfonts/fontawesome/900/fa-solid-900.eot);
src:url(../lib/webfonts/fontawesome/900/fa-solid-900.eot?#iefix) format("embedded-opentype"),url(../lib/webfonts/fontawesome/900/fa-solid-900.woff2) format("woff2"),url(../lib/webfonts/fontawesome/900/fa-solid-900.woff) format("woff"),url(../lib/webfonts/fontawesome/900/fa-solid-900.ttf) format("truetype"),url(../lib/webfonts/fontawesome/900/fa-solid-900.svg#fontawesome) format("svg")
}
body {
margin: 0;
padding: 0;
overflow: hidden;
color: hsl(0, 0.0%, 13.3%);
background: transparent;
line-height: 1.5;
font-weight: 400;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}
p {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.sr-only{
border: 0;
clip: rect(0,0,0,0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap;
}
/* ================ Progress bar ================ */
.progress-container {
background-color: hsl(210, 15.8%, 92.5%);
border: 0;
height: 0.5rem;
display: -ms-flexbox;
display: flex;
overflow: hidden;
font-size: .75rem;
}
@keyframes progress-bar-stripes {
from { background-position: 1rem 0; }
to { background-position: 0 0; }
}
.progress-bar {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: center;
justify-content: center;
color: #fff;
text-align: center;
white-space: nowrap;
background-color: hsl(153, 98.8%, 31.4%);
transition: width .6s ease;
-webkit-animation: progress-bar-stripes 1s linear infinite;
animation: progress-bar-stripes 1s linear infinite;
}
/* ================ Stats ================ */
section.stats {
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: space-around;
font-size: 2rem;
}
section.stats .label {
display: block;
font-size: 1rem;
font-weight: 400;
}
/* ================ Button ================ */
.CTA-button a,
.CTA-button a:visited {
background-color: hsl(153, 98.8%, 31.4%);
color: white;
text-decoration: none;
font-weight: 400;
display: block;
border-radius: .25rem;
border: 1px solid transparent;
padding: .375rem .75rem;
width: calc(100% - 1.5rem - 2px);
font-size: 1rem;
line-height: 1.5;
text-align: center;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
transition:
color .15s ease-in-out,
background-color .15s ease-in-out,
border-color .15s ease-in-out,
box-shadow .15s ease-in-out;
margin-bottom: 0;
}
.CTA-button a:hover {
background-color: hsl(153, 98.8%, 36.4%);
}
.CTA-button a:before {
font-family: "Font Awesome 5 Free";
font-weight: bold;
content: "\f1d8"; /* fa-paper-place */
margin-right: 0.5rem;
}
<section class="progress-container">
<div class="progress-bar"
aria-valuenow="<?php echo $myCrowdfunding->getPercentage(); ?>"
aria-valuemin="0"
aria-valuemax="100"
style="width:0%;">
<span class="sr-only">
<?php echo $myCrowdfunding->getPercentage(); ?>
</span>
</div>
</section>
<section class="stats">
<section class="amountCollected">
<p>
<span class="count">
<?php echo round($myCrowdfunding->getAmountCollected()); ?>
</span>
<?php echo $myCrowdfunding->printUnit(); ?>
<span class="label">
<?php
echo sprintf(_('déjà donnés sur un total de %s %s'), $myCrowdfunding->getTarget(), $myCrowdfunding->printUnit());
?>
</span>
</p>
</section>
<section class="donorsNb">
<p>
<span class="count">
<?php echo $myCrowdfunding->getDonorsNb(); ?>
</span>
<span class="label">
<?php echo _('donateurs') ?>
</span>
</p>
</section>
<?php
if (($daysLeft = $myCrowdfunding->getDaysLeft()) !== NULL) {
?>
<section class="daysLeft">
<p>
<?php
if ($daysLeft < 0) {
$daysPassed = abs($daysLeft);
?>
<span>
<?php echo _('Finie !'); ?>
</span>
<span class="label">
<?php
printf(
ngettext(
_('Cette campagne est terminée depuis hier.'),
_('Cette campagne est terminée depuis %d jours.'),
$daysPassed
),
$daysPassed
);
?>
</span>
<?php
} else {
?>
<span class="count">
<?php echo $daysLeft; ?>
</span>
<span class="label">
<?php echo _('jours restants'); ?>
</span>
<?php
}
?>
</p>
</section>
<?php
}
?>
</section>
<?php
if ($myCrowdfunding->getMustDisplayButton()) {
?>
<p class="CTA-button btn btn-success">
<a href="<?php echo $myCrowdfunding->getContributionURL(); ?>"
target="_blank"
role="button">
<?php echo sprintf(_('Je soutiens %s !'), $myCrowdfunding->getTitle()); ?>
</a>
</p>
<?php
}
?>
<script src="lib/js/jquery-3.4.1.min.js"></script>
<script src="lib/js/counter.js"></script>
<script>
$(document).ready(function(){
$('.progress-bar').animate({
width: '<?php echo $myCrowdfunding->getPercentage(); ?>%'
}, 1300, '');
});
</script>
<?php
$defaultColors = [
'background_color' => '#ffffff',
'border_color' => '#343a40',
'font_color' => '#212529',
'progress_color' => '#ffc107'
];
function computeStyle ($paramName, $value) {
switch ($paramName) {
case 'font_color': return '
body {
color: '. $value .';
}
';
case 'background_color': return '
body {
background-color: '. $value .';
}
';
case 'border_color': return '
.progress-container {
border-color: '. $value .';
}
';
case 'progress_color' : return '
.progress-bar {
background-color: '. $value .';
}
';
}
}
function getComputedStyles () {
$CSS = '';
global $defaultColors;
foreach ($defaultColors as $paramName => $defaultColor) {
if (!isset($_GET[$paramName])) {
$c = new Color($defaultColor);
} else {
try {
$c = new Color($_GET[$paramName]);
} catch (Exception $e) {
$myCrowdfunding->decease(sprintf($e->getMessage(), $paramName));
}
}
$CSS .= computeStyle($paramName, '#' . $c->getHex());
}
/*
if (!$myCrowdfunding->hasTarget()) {
$out = [];
$out[] = _('Il manque le montant à atteindre. Vérifiez votre syntaxe.');
$out[] = _('Vérifiez votre syntaxe.');
$myCrowdfunding->decease($out);
}*/
return $CSS;
}
/* ================ General ================ */
@font-face {
font-family:"Font Awesome 5 Free";
font-style:normal;
font-weight:400;
font-display:auto;
src:url(../lib/webfonts/fontawesome/400/fa-regular-400.eot);
src:url(../lib/webfonts/fontawesome/400/fa-regular-400.eot?#iefix) format("embedded-opentype"),url(../lib/webfonts/fontawesome/400/fa-regular-400.woff2) format("woff2"),url(../lib/webfonts/fontawesome/400/fa-regular-400.woff) format("woff"),url(../lib/webfonts/fontawesome/400/fa-regular-400.ttf) format("truetype"),url(../lib/webfonts/fontawesome/400/fa-regular-400.svg#fontawesome) format("svg")
}
@font-face {
font-family:"Font Awesome 5 Free";
font-style:normal;
font-weight:900;
font-display:auto;
src:url(../lib/webfonts/fontawesome/900/fa-solid-900.eot);
src:url(../lib/webfonts/fontawesome/900/fa-solid-900.eot?#iefix) format("embedded-opentype"),url(../lib/webfonts/fontawesome/900/fa-solid-900.woff2) format("woff2"),url(../lib/webfonts/fontawesome/900/fa-solid-900.woff) format("woff"),url(../lib/webfonts/fontawesome/900/fa-solid-900.ttf) format("truetype"),url(../lib/webfonts/fontawesome/900/fa-solid-900.svg#fontawesome) format("svg")
}
body {
margin: 0 auto;
padding: 0;
text-align: center;
color: hsl(210, 10.8%, 14.5%);
background-color: white;
line-height: 1.5;
font-weight:400;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}
@media (min-width: 576px) { body { max-width: 540px; } }
@media (min-width: 768px) { body { max-width: 720px; } }
@media (min-width: 992px) { body { max-width: 960px; } }
@media (min-width: 1200px) { body { max-width: 1140px; } }
.sr-only{
border: 0;
clip: rect(0,0,0,0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap;
}
/* ================ Header ================ */
h1 {
margin-top: 0;
font-size: 2.5rem;
}
.pubkey {
font-weight: 500;
}
/* ================ Progress bar ================ */
.progress-container {
background-color: hsl(210, 15.8%, 92.5%);
border: 1px solid hsl(210, 10.3%, 32.7%);
height: 2rem;
border-radius: 0;
display: -ms-flexbox;
display: flex;
overflow: hidden;
font-size: .75rem;
}
@keyframes progress-bar-stripes {
from { background-position: 1rem 0; }
to { background-position: 0 0; }
}
.progress-bar {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: center;
justify-content: center;
color: #fff;
text-align: center;
white-space: nowrap;
background-color: hsl(45, 100.0%, 51.4%);
transition: width .6s ease;
-webkit-animation: progress-bar-stripes 1s linear infinite;
animation: progress-bar-stripes 1s linear infinite;
}
/* ================ Stats ================ */
section.stats {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-around;
margin-top: 2rem;
margin-bottom: 2rem;
font-size: 2rem;
}
section.stats .label {
display: block;
font-size: 1rem;
font-weight: 500;
}
.reached > :first-child:before,
.donorsNb > :first-child:before,
.amountCollected > :first-child:before,
.daysLeft > :first-child:before {
font-family: "Font Awesome 5 Free";
display: block;
margin-bottom: 1rem;
}
.reached > :first-child:before {
content: "\f200"; /* Chart pie */
font-weight:900;
}
.donorsNb > :first-child:before {
content: "\f007"; /* user */
}
.amountCollected > :first-child:before {
content: "\f3d1"; /* fa-money-bill-alt */
}
.daysLeft > :first-child:before {
content: "\f073"; /* fa-calendar-alt */
}
/* ================ Button ================ */
.CTA-button {
margin-bottom: 0;
}
.CTA-button a {
display: block;
width: calc(100% - 1.5rem - 2px);
text-decoration: none;
margin-bottom: 0;
}
.CTA-button a:before {
font-family: "Font Awesome 5 Free";
font-weight: bold;
content: "\f1d8"; /* fa-paper-place */
margin-right: 0.5rem;
}
.btn {
transition:
color .15s ease-in-out,
background-color .15s ease-in-out,
border-color .15s ease-in-out,
box-shadow .15s ease-in-out;
padding: .375rem .75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: .25rem;
border: 1px solid transparent;
display: inline-block;
font-weight: 400;
color: #212529;
text-align: center;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: transparent;
}
.btn-success{
color: #fff;
background-color: #28a745;
border-color: #28a745;
}
.btn:hover {
color: #212529;
text-decoration: none;
}
.btn-success:hover {
color: #fff;
background-color: #218838;
border-color: #1e7e34;
}
<header>
<?php
if (!$myCrowdfunding->getMustHideTitle()) {
echo '
<h1>
' . $myCrowdfunding->getTitle() . '
</h1>';
}
?>
<?php
if ($myCrowdfunding->getMustDisplayPubkey()) {
echo '
<p class="pubkey">
' . sprintf(_('Clef publique du compte&nbsp;: %s'), $myCrowdfunding->getPubkey()) . '
</p>';
}
if ($qrCodePath = $myCrowdfunding->getQRCodePath()) {
echo '<p><img src="' . $qrCodePath . '" alt="'. _('QRcode du portefeuille') .'" /></p>';
} ?>
</header>
<div id="main">
<section class="progress-container">
<div class="progress-bar"
aria-valuenow="<?php echo $myCrowdfunding->getPercentage(); ?>"
aria-valuemin="0"
aria-valuemax="100"
style="width:0%;">
<span class="sr-only">
<?php echo $myCrowdfunding->getPercentage(); ?>%
</span>
</div>
</section>
<section class="stats">
<section class="reached">
<p>
<span class="count">
<?php echo $myCrowdfunding->getPercentage();?>
</span>&nbsp;%
<span class="label">
<?php echo _('atteints'); ?>
</span>
</p>
</section>
<section class="donorsNb">
<p>
<span class="count">
<?php echo $myCrowdfunding->getDonorsNb(); ?>
</span>
<span class="label">
<?php echo _('donateurs'); ?>
</span>
</p>
</section>
<section class="amountCollected">
<p>
<span class="count">
<?php echo round($myCrowdfunding->getAmountCollected()); ?>
</span>
<?php echo $myCrowdfunding->printUnit(); ?>
<span class="label">
<?php
if ($myCrowdfunding->hasTarget()) {
echo sprintf(_('sur un total de %s %s'), $myCrowdfunding->getTarget(), $myCrowdfunding->printUnit());
}
?>
</span>
</p>
</section>
<?php
if (!$myCrowdfunding->hasStartedYet()) {
?>
<section class="daysLeft">
<p>
<span class="count">
?
</span>
<span class="label">
<?php
printf(
_('Cette campagne débutera le %s'),
strftime('%x',
$myCrowdfunding->getStartDate()->getTimestamp()
)
);
?>
</span>
</p>
</section>
<?php
} else {
if ($myCrowdfunding->isEvergreen() != 'forever') {
$daysLeft = $myCrowdfunding->getDaysLeft();
?>
<section class="daysLeft">
<p>
<?php
if ($myCrowdfunding->isOver()) {
$daysPassed = abs($daysLeft) + 1;
?>
<span>
<?php echo _('Finie !'); ?>
</span>
<span class="label">
<?php
printf(
ngettext(
_('cette campagne est terminée depuis hier soir.'),
_('cette campagne est terminée depuis %s jours.'),
$daysPassed
),
$daysPassed
);
?>
</span>
<?php
} else {
?>
<span class="count">
<?php echo $daysLeft; ?>
</span>
<span class="label">
<?php
printf(
ngettext(
_('il reste jusqu\'à minuit pour contribuer'),
_('il reste %s jours pour contribuer'),
$daysLeft
),
$daysLeft
);
?>
</span>
<?php
}
?>
</p>
</section>
<?php
}
}
?>
</section>
<?php
if ($myCrowdfunding->getMustDisplayButton()) {
?>
<p class="CTA-button">
<a class="btn btn-success"
href="<?php echo $myCrowdfunding->getContributionURL(); ?>"
target="_blank"
role="button">
<?php echo _('Contribuer maintenant !'); ?>
</a>
</p>
<?php
}
?>
</div>
<?php
if (isset($chart)) {
$targetGraph = new Graph($chart->getTargetLinePoints(), _('Objectif'));
$targetGraph->setStyle('type', 'line');
$targetGraph->setStyle('borderColor', '#FF3E3D');
$targetGraph->setStyle('borderDash', [5, 5]);
$targetGraph->setStyle('radius', 0);
$targetGraph->setStyle('fill', false);
$chart->addGraph($targetGraph);
$amountDailyGraph = new Graph($chart->getAmountCollectedByDayPoints(), _('Contributions du jour'));
$amountDailyGraph->setStyle('type', 'bar');
$amountDailyGraph->setStyle('borderColor', 'rgba(0,200,100,0.7)');
$amountDailyGraph->setStyle('backgroundColor', 'rgba(96,200,120,0.7)');
$amountDailyGraph->setStyle('borderWidth', 2);
$chart->addGraph($amountDailyGraph);
$amountCumulativeGraph = new Graph($chart->getAmountCollectedByDayCumulativePoints(), _('Montant total récolté'));
$amountCumulativeGraph->setStyle('type', 'line');
$amountCumulativeGraph->setStyle('borderColor', '#0099FF');
$amountCumulativeGraph->setStyle('backgroundColor', '#80CCFF');
$amountCumulativeGraph->setStyle('lineTension', 0);
$amountCumulativeGraph->setStyle('pointRadius', 1);
$amountCumulativeGraph->setStyle('borderWidth', 2);
$amountCumulativeGraph->setStyle('steppedLine', true);
$chart->addGraph($amountCumulativeGraph);
echo $chart->getScripts($lang, '#main');
}
?>
<script src="lib/js/jquery-3.4.1.min.js"></script>
<script src="lib/js/counter.js"></script>
<script>
$(document).ready(function(){
$('.progress-bar').animate({
width: '<?php echo $myCrowdfunding->getPercentage(); ?>%'
}, 1300, '');
});
</script>
<?php
/**
* Note : *image.php theme files should not be encoded as UTF-8
*/
/* ===== Set fonts ====================================== */
$fonts = [];
$fonts['sans'] = FONTS_FOLDER . '/LiberationSans-Regular.ttf';
$fonts['faSolid'] = FONTS_FOLDER . '/fontawesome/900/fa-solid-900.ttf';
$fonts['faRegular'] = FONTS_FOLDER . '/fontawesome/400/fa-regular-400.ttf';
/* ===== Set dimensions ====================================== */
$gutter = 25;
$verticalSpacing = 25;
$content_x = $gutter;
$content_y = $verticalSpacing + 5;
$font_size = 15;
$iconFontSize = 20;
$errorMsgFontSize = 2;
$imgHeight = 200;
$imgWidth = 500;
$progressbarContainerWidth = 450;
$progressbarContainerHeight = 25;
if ($myCrowdfunding->hasLogo()) {
$logoRessource = imageCreateFromPNG($myCrowdfunding->getLogoPath());
$logoSize = imagesX($logoRessource);
$imgWidth += $logoSize + $gutter;
$content_x += $logoSize + $gutter;
}
if ($myCrowdfunding->getMustDisplayQrCode()) {
$qrCodeRessource = imageCreateFromPNG($myCrowdfunding->getQrCodePath());
$qrCodeSize = imagesX($qrCodeRessource);
$qrCodePosX = $imgWidth;
$qrCodePosY = 42;
$imgWidth += $qrCodeSize + $gutter;
}
/* ===== Create image ====================================== */
$imgRessource = imageCreateTrueColor($imgWidth, $imgHeight);
imageAlphaBlending($imgRessource, false);
/* ===== Set colors ====================================== */
$transparent = imageColorAllocateAlpha($imgRessource,
255, 255, 255,
127);
$colorsAllocs = [];
$colorsAllocs['progressbarContainerBg'] = imageColorAllocate($imgRessource, 233, 236, 239); // #e9ecef
foreach ($defaultColors as $paramName => $defaultColor) {
if (!isset($_GET[$paramName])) {
$c = new Color($defaultColor);
} else {
try {
$c = new Color($_GET[$paramName]);
} catch (Exception $e) {
$myCrowdfunding->decease(sprintf($e->getMessage(), $paramName));
}
}
$colorsAllocs[$paramName] = $c->getColorAllocation($imgRessource);
}
/* ===== Create background ====================================== */
imageFill(
$imgRessource,
0, 0,
$colorsAllocs['background_color']
);
imageFilledRectangle(
$imgRessource,
0, 0,
$imgWidth, $imgHeight,
$transparent
);
imageAlphaBlending($imgRessource, true);
imageSaveAlpha($imgRessource, true);
imageFill(
$imgRessource,
0, 0,
$colorsAllocs['background_color']
);
/* ===== Create borders ====================================== */
ImageRectangle(
$imgRessource,
0, 0,
($imgWidth-1), ($imgHeight-1),
$colorsAllocs['border_color']
);
ImageRectangle(
$imgRessource,
2, 2,
($imgWidth-3), ($imgHeight-3),
$colorsAllocs['border_color']
);
/* ===== Create logo ====================================== */
if ($myCrowdfunding->hasLogo()) {
imagecopy(
$imgRessource,
$logoRessource,
$gutter, $verticalSpacing,
0, 0, 150, 150
);
imagedestroy($logoRessource);
}
/* ===== Create QR Code ====================================== */
if ($myCrowdfunding->getMustDisplayQrCode()) {
imagecopymerge(
$imgRessource,
$qrCodeRessource,
$qrCodePosX,
$qrCodePosY,
0, 0,
$qrCodeSize, $qrCodeSize,
100
);
imagedestroy($qrCodeRessource);
}
/* ===== Create title ====================================== */
if (!$myCrowdfunding->getMustHideTitle()) {
$title_y = ($myCrowdfunding->getMustDisplayPubkey()) ? 23 : $content_y;
$title = $myCrowdfunding->getTitle();
imagettftext(
$imgRessource,
$font_size,
0,
($imgWidth - computeTextWidth($font_size, $fonts['sans'], $title)) / 2,
$title_y,
$colorsAllocs['font_color'],
$fonts['sans'],
$title
);
}
/* ==== Create pubkey ====================================== */
if ($myCrowdfunding->getMustDisplayPubkey()) {
imagettftext(
$imgRessource,
$font_size - 5,
0,
$content_x,
$content_y + 15,
$colorsAllocs['font_color'],
$fonts['sans'],
sprintf(_('Clef publique : %s'), $myCrowdfunding->getPubkey())
);
}
/* ===== Create progress bar ====================================== */
$progressbarWidth = $progressbarContainerWidth * min(100, $myCrowdfunding->getPercentage()) / 100;
ImageFilledRectangle(
$imgRessource,
$content_x + 1,
$content_y + $verticalSpacing+1,
$content_x + $progressbarContainerWidth,
$content_y + $verticalSpacing + $progressbarContainerHeight,
$colorsAllocs['progressbarContainerBg']
);
ImageFilledRectangle(
$imgRessource,
$content_x + 1,
$content_y + $verticalSpacing + 1 ,
$content_x + $progressbarWidth,
$content_y + $verticalSpacing + $progressbarContainerHeight,
$colorsAllocs['progress_color']
);
ImageRectangle(
$imgRessource,
$content_x,
$content_y + $verticalSpacing,
$content_x + $progressbarContainerWidth + 1,
$content_y + $verticalSpacing + $progressbarContainerHeight + 1,
$colorsAllocs['border_color']);
imagettftext(
$imgRessource,
$font_size,
0,
$content_x + $progressbarWidth/2,
$content_y + $verticalSpacing + $progressbarContainerHeight/2 + 9,
$colorsAllocs['font_color'],
$fonts['sans'],
$myCrowdfunding->getPercentage() . '%'
);
/* ===== Create stats ====================================== */
$iconFontSize = 20;
$statFontSize = 15;
$labelFontSize = 10;
$iconBottomMargin = 12;
$statBottomMargin = 3;
$columns = [];
$columns[0] = [
[
'text' => '"&#xF200;"',
'fontFile' => $fonts['faSolid'],
'fontSize' => $iconFontSize,
'bottomMargin' => $iconBottomMargin
], [
'text' => $myCrowdfunding->getPercentage() . '%',
'fontFile' => $fonts['sans'],
'fontSize' => $statFontSize,
'bottomMargin' => $statBottomMargin
], [
'text' => utf8_decode(_('atteints')),
'fontFile' => $fonts['sans'],
'fontSize' => $labelFontSize,
'bottomMargin' => 0
]
];
$columns[1] = [
[
'text' => '"&#xF007;"',
'fontFile' => $fonts['faRegular'],
'fontSize' => $iconFontSize,
'bottomMargin' => $iconBottomMargin
], [
'text' => $myCrowdfunding->getDonorsNb(),
'fontFile' => $fonts['sans'],
'fontSize' => $statFontSize,
'bottomMargin' => $statBottomMargin
], [
'text' => utf8_decode(_('donateurs')),
'fontFile' => $fonts['sans'],
'fontSize' => $labelFontSize,
'bottomMargin' => 0
]
];
$columns[2] = [
[
'text' => '"&#xF3D1;"',
'fontFile' => $fonts['faRegular'],
'fontSize' => $iconFontSize,
'bottomMargin' => $iconBottomMargin
], [
'text' => round($myCrowdfunding->getAmountCollected()) . ' ' . $myCrowdfunding->printUnit(),
'fontFile' => $fonts['sans'],
'fontSize' => $statFontSize,
'bottomMargin' => $statBottomMargin
], [
'text' => sprintf(_('sur %s %s'), $myCrowdfunding->getTarget(), $myCrowdfunding->printUnit()),
'fontFile' => $fonts['sans'],
'fontSize' => $labelFontSize,
'bottomMargin' => 0
]
];
if (($daysLeft = $myCrowdfunding->getDaysLeft()) > 0) {
$columns[3] = [
[
'text' => '"&#xF073;"',
'fontFile' => $fonts['faRegular'],
'fontSize' => $iconFontSize,
'bottomMargin' => $iconBottomMargin
], [
'text' => $daysLeft,
'fontFile' => $fonts['sans'],
'fontSize' => $statFontSize,
'bottomMargin' => $statBottomMargin
], [
'text' => _('jours restants'),
'fontFile' => $fonts['sans'],
'fontSize' => $labelFontSize,
'bottomMargin' => 0
]
];
}
$columnWidth = $progressbarContainerWidth / count($columns);
$columnMid = $columnWidth / 2;
$icone_pos_y = $content_y + $verticalSpacing + $progressbarContainerHeight + $verticalSpacing + $iconFontSize;
foreach ($columns as $colNum => $cells) {
$x = $content_x + $colNum * $columnWidth + $columnMid;
$y = $icone_pos_y;
$angle = 0;
foreach ($cells as $cell) {
imageTTFtext(
$imgRessource,
$cell['fontSize'],
$angle,
$x - (computeTextWidth($cell['fontSize'], $cell['fontFile'], $cell['text']) / 2),
$y,
$colorsAllocs['font_color'],
$cell['fontFile'],
$cell['text']
);
$y += $cell['fontSize'] + $cell['bottomMargin'];
}
}
imagepng($imgRessource);
imagedestroy($imgRessource);
<?php
/**
* Note : *svg.php theme files should not be encoded as UTF-8
*/
/* ===== Set colors ====================================================== */
$colorsHex = [];
$colorsHex['progressbarContainerBg'] = '#e9ecef';
foreach ($defaultColors as $paramName => $defaultColor) {
if (!isset($_GET[$paramName])) {
$c = new Color($defaultColor);
} else {
try {
$c = new Color($_GET[$paramName]);
} catch (Exception $e) {
$myCrowdfunding->decease(sprintf($e->getMessage(), $paramName));
}
}
$colorsHex[$paramName] = '#' . $c->getHex();
}
/* ===== Set dimensions ================================================== */
$iconSize = 25;
$qrCodeSize = 111;
$qrCodeSpaceAround = 32;
$logoSize = 150;
$progressbarBorderSize = 1;
$svgBorderSize = 1;
/* ===== Set dimensions : height and Y positionning ======================= */
$verticalSpacing = 20;
$progressbarHeight = 25;
$progressbarContainerHeight = $progressbarHeight + 2*$progressbarBorderSize;
$originY = 4*$svgBorderSize + $verticalSpacing;
$titlePosY = $originY;
$pubkeyPosY = $titlePosY;
$pubkeyPosY += $myCrowdfunding->getMustHideTitle() ? 0 : (27 + $verticalSpacing);
$progressbarContainerPosY = $pubkeyPosY;
$progressbarContainerPosY += $myCrowdfunding->getMustDisplayPubkey() ? (15 + $verticalSpacing) : 0;
$progressbarPosY = $progressbarContainerPosY + $progressbarBorderSize;
$statsPosY = $progressbarPosY + $progressbarHeight + $verticalSpacing;
$statNumberPosY = 0 + $iconSize + $verticalSpacing;
$statLabelPosY = $statNumberPosY + 21;
$qrCodePosY = $progressbarPosY + $progressbarBorderSize + $progressbarHeight/2- $qrCodeSpaceAround/2;
$svgHeight = $statsPosY + $statLabelPosY + 21 + $verticalSpacing;
$statsHeight = $svgHeight - $progressbarPosY - $progressbarHeight - $verticalSpacing;
if ($myCrowdfunding->getMustDisplayPubkey()){
$svgHeight += 10 + $verticalSpacing;
}
if (($daysLeft = $myCrowdfunding->getDaysLeft()) AND isset($daysLeft) AND ($daysLeft > 0)) {
$colNb = 4;
} else {
$colNb = 3;
}
/* ===== Set dimensions : width and X positionning ======================= */
$guttersWidth = 40;
$originX = $guttersWidth;
$progressbarContainerWidth = 500;
$svgWidth = $progressbarContainerWidth + (2 * $guttersWidth);
$colWidth = $progressbarContainerWidth / $colNb;
$iconX = $colWidth/2 - $iconSize/2;
$progressbarWidth = $progressbarContainerWidth * min(1, $myCrowdfunding->getPercentage()/100) - 2*$progressbarBorderSize;
if ($myCrowdfunding->getMustDisplayQRCode()) {
$svgWidth += $qrCodeSize + $guttersWidth;
$qrCodePosX = $originX + $logoSize + $guttersWidth + $progressbarContainerWidth + $guttersWidth;
}
if ($myCrowdfunding->hasLogo()) {
$svgWidth += $logoSize + $guttersWidth;
$originX += $logoSize + $guttersWidth;
}
/* ===== SVG ====================================================== */
echo '<?xml version="1.0" encoding="utf-8"?>'; // We must display this that way because <? can be interpreted as PHP tags by some servers
?><svg width="<?php echo $svgWidth; ?>"
height="<?php echo $svgHeight; ?>"
style="fill:<?php echo $colorsHex['font_color']; ?>;"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Borders -->
<rect
x="<?php echo $svgBorderSize; ?>"
y="<?php echo $svgBorderSize; ?>"
width="<?php echo ($svgWidth - 2*$svgBorderSize); ?>"
height="<?php echo ($svgHeight - 2*$svgBorderSize); ?>"
style="fill:<?php echo $colorsHex['background_color']; ?>;stroke:<?php echo $colorsHex['border_color']; ?>;stroke-width:<?php echo $svgBorderSize; ?>;"/>
<rect
x="<?php echo 4*$svgBorderSize; ?>"
y="<?php echo 4*$svgBorderSize; ?>"
width="<?php echo ($svgWidth - 8*$svgBorderSize); ?>"
height="<?php echo ($svgHeight - 8*$svgBorderSize); ?>"
style="fill:<?php echo $colorsHex['background_color']; ?>;stroke:<?php echo $colorsHex['border_color']; ?>;stroke-width:<?php echo $svgBorderSize; ?>;"/>
<!-- Campaign logo -->
<?php
if ($myCrowdfunding->hasLogo()) {
?>
<image xlink:href="<?php echo $myCrowdfunding->getLogoPath(); ?>"
x="<?php echo $guttersWidth; ?>"
y="<?php echo ($svgHeight - $logoSize) / 2; ?>"
width="<?php echo $logoSize; ?>"
height="<?php echo $logoSize; ?>" />
<?php
}
?>
<g style="font-family:sans-serif;">
<?php
if (!$myCrowdfunding->getMustHideTitle()) {
?>
<!-- Campaign title -->
<text
style="font-size:1.5rem;"
x="50%"
y="<?php echo $titlePosY; ?>"
text-anchor="middle"
dominant-baseline="hanging">
<?php echo $myCrowdfunding->getTitle(); ?>
</text>
<?php
}
?>
<!-- Pubkey -->
<?php
if ($myCrowdfunding->getMustDisplayPubkey()) {
?>
<text
style="font-size:.8rem;"
x="<?php echo $originX; ?>"
y="<?php echo $pubkeyPosY; ?>"
dominant-baseline="hanging">
Pubkey : <?php echo $myCrowdfunding->getPubkey(); ?>
</text>
<?php
}
?>
<!-- Progress bar container -->
<rect
style="fill:<?php echo $colorsHex['progressbarContainerBg']; ?>;stroke:<?php echo $colorsHex['border_color']; ?>;stroke-width:<?php echo $progressbarBorderSize; ?>;"
width="<?php echo $progressbarContainerWidth; ?>"
height="<?php echo $progressbarContainerHeight; ?>"
x="<?php echo $originX; ?>"
y="<?php echo $progressbarContainerPosY; ?>" />
<!-- Progress bar -->
<svg
x="<?php echo $originX + $progressbarBorderSize; ?>"
y="<?php echo $progressbarPosY; ?>"
width="<?php echo $progressbarWidth; ?>"
height="<?php echo $progressbarHeight; ?>">
<rect style="fill:<?php echo $colorsHex['progress_color']; ?>;" width="100%" height="100%" />
<!-- Percentage reached -->
<?php
if ($myCrowdfunding->getPercentage() > 7) {
?>
<text
style="font-size:1rem;"
x="50%"
y="50%"
dominant-baseline="central"
text-anchor="middle">
<?php echo $myCrowdfunding->getPercentage() . '%'; ?>
</text>
<?php
}
?>
</svg>
</g>
<!-- Stats -->
<svg x="<?php echo $originX; ?>"
y="<?php echo $statsPosY; ?>"
width="<?php echo $progressbarContainerWidth; ?>"
height="<?php echo $statsHeight; ?>">
<!-- Stat #1 : % reached -->
<svg width="<?php echo $colWidth; ?>" height="100%">
<!-- pie icon -->
<svg x="<?php echo $iconX; ?>"
viewBox="0 0 544 512"
width="<?php echo $iconSize; ?>"
height="<?php echo $iconSize; ?>">
<path d="M527.79 288H290.5l158.03 158.03c6.04 6.04 15.98 6.53 22.19.68 38.7-36.46 65.32-85.61 73.13-140.86 1.34-9.46-6.51-17.85-16.06-17.85zm-15.83-64.8C503.72 103.74 408.26 8.28 288.8.04 279.68-.59 272 7.1 272 16.24V240h223.77c9.14 0 16.82-7.68 16.19-16.8zM224 288V50.71c0-9.55-8.39-17.4-17.84-16.06C86.99 51.49-4.1 155.6.14 280.37 4.5 408.51 114.83 513.59 243.03 511.98c50.4-.63 96.97-16.87 135.26-44.03 7.9-5.6 8.42-17.23 1.57-24.08L224 288z"/>
</svg>
<text style="font-size:1.2rem;"
x="50%"
y="<?php echo $statNumberPosY; ?>"
dominant-baseline="hanging"
text-anchor="middle" >
<?php echo $myCrowdfunding->getPercentage() . '%'; ?>
</text>
<text style="font-size:.9rem;"
x="50%"
y="<?php echo $statLabelPosY; ?>"
dominant-baseline="hanging"
text-anchor="middle">
<?php echo _('atteints') ?>
</text>
</svg>
<!-- Stat #2 : number of donors -->
<svg x="<?php echo $colWidth; ?>" width="<?php echo $colWidth; ?>">
<!-- user icon -->
<svg x="<?php echo $iconX; ?>"
viewBox="0 0 448 512"
width="<?php echo $iconSize; ?>"
height="<?php echo $iconSize; ?>">
<path d="M313.6 304c-28.7 0-42.5 16-89.6 16-47.1 0-60.8-16-89.6-16C60.2 304 0 364.2 0 438.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-25.6c0-74.2-60.2-134.4-134.4-134.4zM400 464H48v-25.6c0-47.6 38.8-86.4 86.4-86.4 14.6 0 38.3 16 89.6 16 51.7 0 74.9-16 89.6-16 47.6 0 86.4 38.8 86.4 86.4V464zM224 288c79.5 0 144-64.5 144-144S303.5 0 224 0 80 64.5 80 144s64.5 144 144 144zm0-240c52.9 0 96 43.1 96 96s-43.1 96-96 96-96-43.1-96-96 43.1-96 96-96z"/>
</svg>
<text style="font-size:1.2rem;"
x="50%"
y="<?php echo $statNumberPosY; ?>"
dominant-baseline="hanging"
text-anchor="middle">
<?php echo $myCrowdfunding->getDonorsNb(); ?>
</text>
<text style="font-size:.9rem;"
x="50%"
y="<?php echo $statLabelPosY; ?>"
dominant-baseline="hanging"
text-anchor="middle">
<?php echo _('donateurs') ?>
</text>
</svg>
<!-- Stat #3 : amount collected -->
<svg x="<?php echo 2*$colWidth; ?>" width="<?php echo $colWidth; ?>">
<!-- bill icon -->
<svg x="<?php echo $iconX; ?>"
viewBox="0 0 640 512"
width="<?php echo $iconSize; ?>"
height="<?php echo $iconSize; ?>">
<path d="M320 144c-53.02 0-96 50.14-96 112 0 61.85 42.98 112 96 112 53 0 96-50.13 96-112 0-61.86-42.98-112-96-112zm40 168c0 4.42-3.58 8-8 8h-64c-4.42 0-8-3.58-8-8v-16c0-4.42 3.58-8 8-8h16v-55.44l-.47.31a7.992 7.992 0 0 1-11.09-2.22l-8.88-13.31a7.992 7.992 0 0 1 2.22-11.09l15.33-10.22a23.99 23.99 0 0 1 13.31-4.03H328c4.42 0 8 3.58 8 8v88h16c4.42 0 8 3.58 8 8v16zM608 64H32C14.33 64 0 78.33 0 96v320c0 17.67 14.33 32 32 32h576c17.67 0 32-14.33 32-32V96c0-17.67-14.33-32-32-32zm-16 272c-35.35 0-64 28.65-64 64H112c0-35.35-28.65-64-64-64V176c35.35 0 64-28.65 64-64h416c0 35.35 28.65 64 64 64v160z"/>
</svg>
<text style="font-size:1.2rem;"
x="50%"
y="<?php echo $statNumberPosY; ?>"
dominant-baseline="hanging"
text-anchor="middle">
<?php
echo round($myCrowdfunding->getAmountCollected()) . ' ' . $myCrowdfunding->printUnit();
?>
</text>
<text style="font-size:.9rem;"
x="50%"
y="<?php echo $statLabelPosY; ?>"
dominant-baseline="hanging"
text-anchor="middle">
<?php
echo sprintf(_('sur un total de %s %s'), $myCrowdfunding->getTarget(), $myCrowdfunding->printUnit());
?>
</text>
</svg>
<!-- Stat #4 : days left -->
<?php
if ($colNb == 4) {
?>
<svg x="<?php echo 3*$colWidth; ?>" width="<?php echo $colWidth; ?>">
<!-- calendar icon -->
<svg x="<?php echo $iconX; ?>" viewBox="0 0 448 512" width="<?php echo $iconSize; ?>" height="<?php echo $iconSize; ?>">
<path d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"/>
</svg>
<text style="font-size:1.2rem;"
x="50%"
y="<?php echo $statNumberPosY; ?>"
dominant-baseline="hanging"
text-anchor="middle">
<?php echo $myCrowdfunding->getDaysLeft(); ?>
</text>
<text style="font-size:.9rem;"
x="50%"
y="<?php echo $statLabelPosY; ?>"
dominant-baseline="hanging"
text-anchor="middle">
<?php echo _('jours restants'); ?>
</text>
</svg>
<?php
}
?>
</svg>
<?php
if ($myCrowdfunding->getMustDisplayQRCode()) {
?>
<image xlink:href="<?php echo $myCrowdfunding->getQRCodePath(); ?>"
width="<?php echo $qrCodeSize; ?>"
height="<?php echo $qrCodeSize; ?>"
x="<?php echo $qrCodePosX; ?>"
y="<?php echo $qrCodePosY; ?>"
/>
<?php
}
?>
</svg>
\ No newline at end of file
body, p {
margin: 0;
padding: 0;
/*overflow: hidden;*/
}
blockquote {
background: hsl(50, 91%, 85%);
padding: 1em;
margin: 2em auto;
max-width: 500px;
}
cite {
text-align: right;
display: block;
margin-top: 0.666em;
}
cite:before {
content: "― ";
}
body > :first-child {
margin-top: 0;
}
body > :last-child {
margin-bottom: 0;
}
<?php
define('DEFAULT_FILTER_MIN_COMMENT_LENGTH', 10);
define('DEFAULT_FILTER_MIN_DONATION', (1 * $myCrowdfunding->getUdAmount($myCrowdfunding->getStartDate())));
if (isset($_GET['min_comment_length'])) {
$myCrowdfunding->setFilterMinCommentLength($_GET['min_comment_length']);
} else {
$myCrowdfunding->setFilterMinCommentLength(DEFAULT_FILTER_MIN_COMMENT_LENGTH);
}
if (isset($_GET['min_donation_amount'])) {
$myCrowdfunding->setFilterMinDonation($_GET['min_donation_amount']);
} else {
$myCrowdfunding->setFilterMinDonation(DEFAULT_FILTER_MIN_DONATION);
}
$donationsList = array_reverse($myCrowdfunding->getDonationsList());
if (empty($donationsList)) {
echo '<p>' . _('Pas encore de citation.') . '</p>';
} else {
foreach ($donationsList as $t) {
echo '
<blockquote>';
echo $t->getComment();
echo '
<cite>'. $myCrowdfunding->getDonorCesiumPlusProfile($t->getDonorPubkey())->getName() .'</cite>
<time datetime="'. $t->getDate()->format("Y-m-d") . '"></time>
</blockquote>';
}
}
@import url('https://fonts.googleapis.com/css?family=Bitter&display=swap');
@font-face {
font-family:"Font Awesome 5 Free";
font-style:normal;
font-weight:400;
font-display:auto;
src:url(../lib/webfonts/fontawesome/400/fa-regular-400.eot);
src:url(../lib/webfonts/fontawesome/400/fa-regular-400.eot?#iefix) format("embedded-opentype"),url(../lib/webfonts/fontawesome/400/fa-regular-400.woff2) format("woff2"),url(../lib/webfonts/fontawesome/400/fa-regular-400.woff) format("woff"),url(../lib/webfonts/fontawesome/400/fa-regular-400.ttf) format("truetype"),url(../lib/webfonts/fontawesome/400/fa-regular-400.svg#fontawesome) format("svg")
}
@font-face {
font-family:"Font Awesome 5 Free";
font-style:normal;
font-weight:900;
font-display:auto;
src:url(../lib/webfonts/fontawesome/900/fa-solid-900.eot);
src:url(../lib/webfonts/fontawesome/900/fa-solid-900.eot?#iefix) format("embedded-opentype"),url(../lib/webfonts/fontawesome/900/fa-solid-900.woff2) format("woff2"),url(../lib/webfonts/fontawesome/900/fa-solid-900.woff) format("woff"),url(../lib/webfonts/fontawesome/900/fa-solid-900.ttf) format("truetype"),url(../lib/webfonts/fontawesome/900/fa-solid-900.svg#fontawesome) format("svg")
}
/* ================ General ================ */
body {
margin: 0;
padding: 0;
overflow: hidden;
color: hsl(0, 0.0%, 13.3%);
background: transparent;
line-height: 1.5;
font-weight: 400;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
display:flex;
flex-direction:column;
align-items:center;
}
p {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
/* ================ Stats ================ */
.count,
.unit,
.CTA-button * {
font-family: 'Bitter', sans;
font-weight: bold;
font-size: 2rem;
}
.label {
display: block;
font-size: 1rem;
font-weight: 400;
}
/* ================ Button ================ */
#copyButton
{
margin-bottom: 0.5rem;
}
.CTA-button button,
.CTA-button a,
.CTA-button a:visited {
cursor: pointer;
background-color: hsl(355, 65%, 55%);
color: white;
text-decoration: none;
display: inline-block;
border-radius: .25rem;
border: 1px solid transparent;
padding: .375rem .75rem;
width: auto;
font-size: 1.5rem;
line-height: 1.5;
text-align: center;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
transition:
color .15s ease-in-out,
background-color .15s ease-in-out,
border-color .15s ease-in-out,
box-shadow .15s ease-in-out;
margin-bottom: 0;
}
.CTA-button button:hover,
.CTA-button a:hover {
background-color: hsl(355, 70%, 60%);
}
.CTA-button button:before,
.CTA-button a:before {
font-family: "Font Awesome 5 Free";
font-weight: bold;
margin-right: 0.5rem;
}
.CTA-button button#supportButton:before {
content: "\f004"; /* fa-heart */
}
.CTA-button button#copyButton:before {
content: "\f328"; /* fa-clipboard */
}
.CTA-button a.api:before {
content: "\f1d8"; /* fa-paper-place */
}
#supportButtonContainer,
.stat
{
height: 100%;
overflow: hidden;
transition-property: opacity, height;
transition-delay: 0s, 0.50s;
transition-duration: 0.49s, 0s;
}
#pubkey-and-copy-button
{
opacity: 0;
height: 0;
transition-property: opacity, height;
transition-delay: 0.51s, 0.51s;
transition-duration: 0.50s, 0s;
}
#pubkey
{
border: transparent;
background: transparent;
font-family: inherit;
font-size: inherit;
}
#pubkey:focus
{
outline: 0;
}
#pubkey::selection
{
background: transparent;
border: 0;
}
.countup > *
{
margin-bottom: 1rem;
}
.countup
{
margin-bottom: 1.5rem;
}
#successMsg
{
opacity: 0;
/*height: 0;*/
line-height: 1.5em;
transition-property: opacity, height;
transition-duration: 1.5s, 0.5s;
}
/* ================ iframe autoHeight handling ================ */
body > :first-child {
margin-top: 0;
}
body > :last-child {
margin-bottom: 0;
}
<div>
<section class="stat amountCollected">
<p>
<span class="count"><?php
echo round($myCrowdfunding->getMonthlyAmountCollectedMean($myCrowdfunding->getMonthsToConsider()));
?></span><span class="unit"><?php
echo '&nbsp;' . $myCrowdfunding->printUnit();
?></span>
<span class="label">
<?php
echo sprintf(_('collectés en moyenne par mois'), $myCrowdfunding->getMonthsToConsider());
?>
</span>
</p>
</section>
<section class="stat donorsMean">
<p>
<span class="count">
<?php echo $myCrowdfunding->getPeriodDonorsMean($myCrowdfunding->getMonthsToConsider()); ?>
</span>
<span class="label">
<?php
printf(_('mécènes réguliers chaque mois'), $myCrowdfunding->getMonthsToConsider());
?>
</span>
</p>
</section>
<section class="stat donorsNb">
<p>
<span class="count">
<?php
echo $myCrowdfunding->getPeriodDonorsNb($myCrowdfunding->getMonthsToConsider());
?>
</span>
<span class="label">
<?php
printf(_('mécènes au total sur les %s deniers mois'), $myCrowdfunding->getMonthsToConsider());
?>
</span>
</p>
</section>
</div>
<?php
if ($myCrowdfunding->getMustDisplayButton()) {
if ($myCrowdfunding->getButtonType() == 'api') {
?>
<p class="CTA-button">
<a href="<?php echo $myCrowdfunding->getContributionURL(); ?>"
target="_blank"
role="button">
<?php echo sprintf(_('Je soutiens %s !'), $myCrowdfunding->getTitle()); ?>
</a>
</p>
<?php
} else if ($myCrowdfunding->getButtonType() == 'copy') {
} else {
?>
<p class="CTA-button" id="supportButtonContainer">
<button id="supportButton">
Encourager!
</button>
</p>
<div id="pubkey-and-copy-button">
<p class="pubkey">
Pour faire un don copiez la clef suivante :
<input id="pubkey" type="text" value="<?php echo $myCrowdfunding->getPubkey(); ?>" size="8" />...
</p>
<p class="CTA-button">
<button id="copyButton">
Copier la clef
</button>
</p>
<p id="successMsg">
Clef copiée dans le presse-papier ! Collez-la maintenant dans Cesium afin de faire votre don 😉<br>
</p>
</div>
<?php
}
}
?>
<script src="lib/js/jquery-3.4.1.min.js"></script>
<script src="lib/js/counter.js"></script>
<script>
$(document).ready(function(){
$('.progress-bar').animate({
width: '<?php echo $myCrowdfunding->getPercentage(); ?>%'
}, 1300, '');
});
</script>
<script>
function copy() {
var copyText = document.querySelector("#pubkey");
copyText.select();
document.execCommand("copy");
var successMsg = document.querySelector("#successMsg");
successMsg.style.opacity = "1";
/*successMsg.style.height = "3em";*/
}
function support() {
$(".stat, #supportButtonContainer").each(function( index ) {
console.log( index + ": " + $( this ).text() );
this.style.opacity = "0";
this.style.height = "0";
});
var pubkeyAndCopyButton = document.querySelector("#pubkey-and-copy-button");
pubkeyAndCopyButton.style.height = "100%";
pubkeyAndCopyButton.style.opacity = "1";
}
document.querySelector("#copyButton").addEventListener("click", copy);
document.querySelector("#supportButton").addEventListener("click", support);
</script>
.donorsList {
list-style: none;
font-family: sans-serif;
margin: 0;
padding: 0;
/*
display: flex;
flex-wrap: wrap;
*/
justify-content: center;
display: grid;
grid-row-gap: 1rem;
}
@media screen and (min-width: 448px) {
.donorsList {
grid-template-columns: repeat(2, 200px);
grid-column-gap: 20px;
}
.donorsList > li:nth-of-type(2n+1) {
grid-column: 1;
}
.donorsList > li:nth-of-type(2n+2) {
grid-column: 2;
}
}
@media screen and (min-width: 672px) {
.donorsList {
grid-template-columns: repeat(3, 204px);
grid-column-gap: 20px;
}
.donorsList > li:nth-of-type(3n+1) {
grid-column: 1;
}
.donorsList > li:nth-of-type(3n+2) {
grid-column: 2;
}
.donorsList > li:nth-of-type(3n+3) {
grid-column: 3;
}
}
@media screen and (min-width: 896px) {
.donorsList {
grid-template-columns: repeat(4, 204px);
grid-column-gap: 20px;
}
.donorsList > li:nth-of-type(4n+1) {
grid-column: 1;
}
.donorsList > li:nth-of-type(4n+2) {
grid-column: 2;
}
.donorsList > li:nth-of-type(4n+3) {
grid-column: 3;
}
.donorsList > li:nth-of-type(4n+4) {
grid-column: 4;
}
}
@media screen and (min-width: 1120px) {
.donorsList {
grid-template-columns: repeat(5, 204px);
grid-column-gap: 20px;
}
.donorsList > li:nth-of-type(5n+1) {
grid-column: 1;
}
.donorsList > li:nth-of-type(5n+2) {
grid-column: 2;
}
.donorsList > li:nth-of-type(5n+3) {
grid-column: 3;
}
.donorsList > li:nth-of-type(5n+4) {
grid-column: 4;
}
.donorsList > li:nth-of-type(5n+5) {
grid-column: 5;
}
}
@media screen and (min-width: 1344px) {
.donorsList {
grid-template-columns: repeat(6, 204px);
grid-column-gap: 20px;
}
.donorsList > li:nth-of-type(6n+1) {
grid-column: 1;
}
.donorsList > li:nth-of-type(6n+2) {
grid-column: 2;
}
.donorsList > li:nth-of-type(6n+3) {
grid-column: 3;
}
.donorsList > li:nth-of-type(6n+4) {
grid-column: 4;
}
.donorsList > li:nth-of-type(6n+5) {
grid-column: 5;
}
.donorsList > li:nth-of-type(6n) {
grid-column: 6;
}
}
.donorsList li {
/*
flex-basis: var(--base-width);
flex-grow: 0;
display: flex;
align-items: center;
*/
background-color: white;
overflow: hidden;
border: 2px solid hsl(0, 0%, 90%);
box-shadow: -1px 1px 10px hsla(0, 0%, 0%, 0.2);
margin: 0;
text-align: center;
border-radius: 1em;
}
.donorsList li a {
width: 100%;
color: hsl(0, 0%, 10%);
text-decoration: none;
font-size: 0.9em;
}
.donorsList li a img {
background-color: #1a237e;
width: 100%;
}
.donorsList li a img,
.donorsList li a .name {
width: 100%;
}
.donorsList li a .name {
display: block;
padding: 1rem 0;
font-weight: bold;
text-align: center;
}
.donorsList li a .name span {
display: inline-block;
padding: 0 1em;
text-align: left;
}
<?php
$donors = $myCrowdfunding->getDonors();
if (empty($donors)) {
echo _('Pas encore de donateurs');
} else {
echo '<ul class="donorsList">';
foreach ($donors as $donor) {
$donorProfile = $myCrowdfunding->getDonorCesiumPlusProfile($donor);
echo '
<li>';
echo '
<a href="https://demo.cesium.app/#/app/wot/'. $donor .'/">';
$avatar = $donorProfile->getAvatar();
if (!empty($avatar)) {
echo '<img src="data:'. $avatar->getContentType(). ';base64, '. $avatar->getContent() .'" />';
} else {
echo '<img src="'. DEFAULT_AVATAR .'" />';
}
echo '
<span class="name">
<span>
'. $donorProfile->getName() .'
</span>
</span>
</a>
</li>';
}
echo '</ul>';
}