453 lines
15 KiB
HTML
453 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<!-- This site was created in Webflow. https://www.webflow.com -->
|
|
<!-- Last Published: Mon Aug 14 2023 08:14:49 GMT+0000 (Coordinated Universal Time) -->
|
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
|
<meta charset="utf-8">
|
|
<title>G1 Financement Quadratique !</title>
|
|
<meta content="Le Quadratic Funding (QF) est un mécanisme de financement par la foule qui amplifie les ressources disponibles en invitant les membres de la communauté à faire des dons (petits ou grands) qui agissent comme des votes sur l'affectation des fonds. Plus le soutien est large, plus la contrepartie est importante !" name="description">
|
|
<meta content="G1 Finanacement Quadratique" property="og:title">
|
|
<meta content="Le Quadratic Funding (QF) est un mécanisme de financement par la foule qui amplifie les ressources disponibles en invitant les membres de la communauté à faire des dons (petits ou grands) qui agissent comme des votes sur l'affectation des fonds. Plus le soutien est large, plus la contrepartie est importante !" property="og:description"><meta content="https://uploads-ssl.webflow.com/649310f4afac55816ade84fd/64b3d63632dbf85fa5628483_wtf-og.png" property="og:image">
|
|
<meta content="G1 Finanacement Quadratique" property="twitter:title">
|
|
<meta content="Le Quadratic Funding (QF) est un mécanisme de financement par la foule qui amplifie les ressources disponibles en invitant les membres de la communauté à faire des dons (petits ou grands) qui agissent comme des votes sur l'affectation des fonds. Plus le soutien est large, plus la contrepartie est importante !" property="twitter:description"><meta content="https://uploads-ssl.webflow.com/649310f4afac55816ade84fd/64b3d63632dbf85fa5628483_wtf-og.png" property="twitter:image"><meta property="og:type" content="website"><meta content="summary_large_image" name="twitter:card"><meta content="width=device-width, initial-scale=1" name="viewport"><meta content="Webflow" name="generator">
|
|
<link href="WTF%20is%20Quadratic%20Funding%20_fichiers/wtf-is-qf-v2.webflow.3b5916333.css" rel="stylesheet" type="text/css">
|
|
<script src="WTF%20is%20Quadratic%20Funding%20_fichiers/cwn8dxb.js" type="text/javascript"></script>
|
|
<style>
|
|
.matchingAmount,
|
|
.projectTable,
|
|
.addProjectCopyURL {
|
|
margin-bottom: 20px;
|
|
}
|
|
#projectTable {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
#projectTable th,
|
|
#projectTable td {
|
|
border: 1px solid #ddd;
|
|
padding: 10px;
|
|
}
|
|
|
|
/* Rounded corners for the first cell */
|
|
#projectTable tr:first-child th {
|
|
border-radius: 10px;
|
|
background: linear-gradient(to bottom, #22239F, #8586D6);
|
|
color: white;
|
|
}
|
|
|
|
/* Red background for the last column title cell */
|
|
#projectTable tr:first-child th:last-child {
|
|
background: linear-gradient(to bottom, #AC3600, #D26939) !important;
|
|
color: white;
|
|
}
|
|
|
|
#projectTable th {
|
|
background-color: #f2f2f2;
|
|
text-align: left;
|
|
}
|
|
.contributionTag {
|
|
display: inline-block;
|
|
background: #000;
|
|
margin: 5px;
|
|
padding: 1px 8px;
|
|
border-radius: 5px;
|
|
color: white;
|
|
}
|
|
.contributionTag button {
|
|
font-size: 8px;
|
|
margin-left: 5px;
|
|
}
|
|
#addProject,
|
|
#copyURL {
|
|
padding: 10px 20px;
|
|
font-size: 16px;
|
|
}
|
|
input {
|
|
padding: 5px;
|
|
font-size: 16px;
|
|
width: 95%;
|
|
background-color: white; /* White background color */
|
|
border: none; /* Remove borders */
|
|
border-radius: 10px; /* Rounded corners */
|
|
}
|
|
button.removeProject {
|
|
font-size: 14px;
|
|
width: 100%;
|
|
height: 100%;
|
|
border: 0;
|
|
padding: 10px;
|
|
background-color: transparent;
|
|
color: #C74D16;
|
|
/* font-weight: 100; */
|
|
}
|
|
input#matchAmount {
|
|
font-size: 40px;
|
|
width: auto;
|
|
max-width: 250px;
|
|
background-color: white; /* White background color */
|
|
border: none; /* Remove borders */
|
|
border-radius: 10px; /* Rounded corners */
|
|
padding: 10px; /* Additional padding */
|
|
}
|
|
label {
|
|
font-size: 20px;
|
|
margin-bottom: 10px;
|
|
}
|
|
button.removeContribution {
|
|
border: none;
|
|
background-color: transparent;
|
|
font-size: 12px;
|
|
color: white;
|
|
cursor:pointer;
|
|
}
|
|
|
|
/* TABLE LINES */
|
|
|
|
#projectTable {
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
}
|
|
|
|
#projectTable th,
|
|
#projectTable td {
|
|
padding: 10px;
|
|
}
|
|
|
|
#projectTable th:first-child,
|
|
#projectTable td:first-child {
|
|
border-left: none;
|
|
}
|
|
|
|
#projectTable th {
|
|
background-color: #f2f2f2;
|
|
text-align: left;
|
|
}
|
|
|
|
#projectTable tr:first-child th {
|
|
border-top-left-radius: 10px;
|
|
border-top-right-radius: 10px;
|
|
}
|
|
|
|
#projectTable tr:not(:first-child) td {
|
|
border-bottom: 2px solid white;
|
|
}
|
|
|
|
#projectTable td {
|
|
border: none; /* Remove vertical borders */
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="section fit interactive">
|
|
<div class="container">
|
|
<div data-w-id="0ab53c30-d57f-0722-984a-f1ac8c755abb" style="opacity: 1; transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg); transform-style: preserve-3d;" class="heading h5">Outil de Financement Quadratique</div>
|
|
<div id="w-node-_042829df-342f-0d5c-6e00-cb385f836fa9-6ade8509" class="w-layout-layout quick-stack-5 wf-layout-layout">
|
|
<div id="w-node-_042829df-342f-0d5c-6e00-cb385f836faa-6ade8509" class="w-layout-cell">
|
|
<div data-w-id="1d38072a-7163-a160-8503-dc367e1f4e05" style="opacity: 1;" class="paragraph">
|
|
<strong>01.</strong><br>
|
|
</div>
|
|
<div data-w-id="2d305a5b-8d7d-4e56-bd09-41b56367d19c" style="opacity: 1;" class="paragraph">Ajouter n'importe quel nombre de projets<br>
|
|
</div>
|
|
</div>
|
|
<div id="w-node-_042829df-342f-0d5c-6e00-cb385f836fab-6ade8509" class="w-layout-cell">
|
|
<div data-w-id="7b7890c6-e9a3-980a-c870-2bfff85971b8" style="opacity: 1;" class="paragraph">
|
|
<strong>02.</strong><br>
|
|
</div>
|
|
<div data-w-id="d488a91b-dc5e-78ea-c6b7-be9df21f8f6a" style="opacity: 1;" class="paragraph">Ajouter des contributions différentes (essayer des montants totaux similaires et des nombres différents de dons)<br>
|
|
</div></div><div id="w-node-d0d9ab88-ea17-bcf6-fd7c-30b951534ba1-6ade8509" class="w-layout-cell">
|
|
<div data-w-id="4f477589-8a4f-4572-2261-3d93f69dcf55" style="opacity: 1;" class="paragraph">
|
|
<strong>03.</strong><br>
|
|
</div><div data-w-id="23cdb603-afc2-5e21-762a-47dcd0771b50" style="opacity: 1;" class="paragraph">Modifiez les chiffres pour voir les montants correspondants changer<br>
|
|
</div></div></div></div>
|
|
<div class="container">
|
|
<div data-w-id="694ebedd-7918-fea5-2c6a-ee50a3290a65" style="opacity: 1;" class="w-embed w-script">
|
|
<script src="WTF%20is%20Quadratic%20Funding%20_fichiers/jquery.min.js"></script>
|
|
|
|
<div id="calculation">
|
|
</div>
|
|
|
|
<script>
|
|
$(document).ready(function () {
|
|
let quadraticFunding = {
|
|
matchAmount: 0, // Total match amount per round
|
|
projects: [],
|
|
};
|
|
|
|
// Update URL parameters on changes
|
|
function updateUrl() {
|
|
let params = new URLSearchParams();
|
|
params.set("match", quadraticFunding.matchAmount);
|
|
|
|
quadraticFunding.projects.forEach((project, i) => {
|
|
params.append("grant", project.contributions.join("-"));
|
|
});
|
|
|
|
// Update the URL only if it differs from the current state
|
|
if (window.location.search !== "?" + params.toString()) {
|
|
window.history.replaceState({}, "", "?" + params.toString());
|
|
}
|
|
}
|
|
|
|
let matchAmountInput = $("<input>")
|
|
.attr("id", "matchAmount")
|
|
.attr("placeholder", "Match Amount")
|
|
.attr("value", quadraticFunding.matchAmount)
|
|
.attr("class", "matching-input");
|
|
|
|
let addProjectButton = $("<button>")
|
|
.attr("id", "addProject")
|
|
.attr("class", "button")
|
|
.text("Add Project");
|
|
let copyURLButton = $("<button>")
|
|
.attr("id", "copyURL")
|
|
.attr("class", "button")
|
|
.text("Copy URL");
|
|
let projectTable = $("<table>").attr("id", "projectTable");
|
|
|
|
$("#calculation").append(
|
|
$("<div>")
|
|
.addClass("matchingAmount")
|
|
.append("<label>Montant Total (Ğ1)</label>")
|
|
.append(matchAmountInput),
|
|
$("<div>").addClass("projectTable").append(projectTable),
|
|
$("<div style='display: flex;'>")
|
|
.addClass("addProjectCopyURL")
|
|
.append(addProjectButton)
|
|
.append(copyURLButton)
|
|
);
|
|
|
|
$("#projectTable").append(
|
|
$("<tr>").append(
|
|
$('<th colspan="2">').text("Project"),
|
|
$("<th>").text("Contributions"),
|
|
$("<th>").text("Funded Amount"),
|
|
$("<th>").text("Match Amount"),
|
|
$("<th>").text("Remove")
|
|
)
|
|
);
|
|
|
|
// Add copy URL functionality
|
|
$("#copyURL").on("click", function () {
|
|
let url = window.location.href;
|
|
let $temp = $("<input>");
|
|
$("body").append($temp);
|
|
$temp.val(url).select();
|
|
document.execCommand("copy");
|
|
$temp.remove();
|
|
});
|
|
|
|
$("#addProject").on("click", function () {
|
|
let projectName = "Project #" + (quadraticFunding.projects.length + 1);
|
|
|
|
if (projectName) {
|
|
quadraticFunding.projects.push({
|
|
name: projectName,
|
|
contributions: [],
|
|
fundedAmount: 0,
|
|
matchAmount: 0,
|
|
});
|
|
|
|
let projectRow = $("<tr>")
|
|
.attr("data-project-name", projectName)
|
|
.append(
|
|
$("<td>").text(projectName),
|
|
$("<td>").append(
|
|
$("<input>")
|
|
.addClass("contributionInput")
|
|
.attr("placeholder", "Add a contribution and press Enter")
|
|
),
|
|
$("<td>").attr("class", "contributions"),
|
|
$("<td>").attr("class", "fundedAmount").text(0),
|
|
$("<td>").attr("class", "matchAmount").text(0),
|
|
$("<td>").append(
|
|
$("<button>").addClass("removeProject").text("\u2716")
|
|
)
|
|
);
|
|
|
|
$("#projectTable").append(projectRow);
|
|
}
|
|
});
|
|
|
|
$("#projectTable").on("click", ".removeProject", function () {
|
|
let projectName = $(this).closest("tr").data("projectName");
|
|
|
|
quadraticFunding.projects = quadraticFunding.projects.filter(function (
|
|
project
|
|
) {
|
|
return project.name !== projectName;
|
|
});
|
|
|
|
$(this).closest("tr").remove();
|
|
|
|
calculateMatchAmounts();
|
|
});
|
|
|
|
|
|
$("#projectTable").on("keypress", ".contributionInput", function (e) {
|
|
if (e.which === 13) {
|
|
let contribution = parseFloat($(this).val());
|
|
let projectName = $(this).closest("tr").data("projectName");
|
|
|
|
let project = quadraticFunding.projects.find(function (project) {
|
|
return project.name === projectName;
|
|
});
|
|
|
|
if (project && !isNaN(contribution)) {
|
|
project.contributions.push(contribution);
|
|
project.fundedAmount += contribution;
|
|
calculateMatchAmounts();
|
|
|
|
let contributionTag = $("<div>")
|
|
.addClass("contributionTag")
|
|
.append($("<span>").text("(Ğ1) " + contribution))
|
|
.append(
|
|
$("<button>").addClass("removeContribution").text("\u2716")
|
|
);
|
|
|
|
// Attach contribution index to the tag
|
|
contributionTag.attr(
|
|
"data-contribution-index",
|
|
project.contributions.length - 1
|
|
);
|
|
|
|
$(this).closest("tr").find(".contributions").append(contributionTag);
|
|
$(this)
|
|
.closest("tr")
|
|
.find(".fundedAmount")
|
|
.text("(Ğ1) " + project.fundedAmount.toFixed(2));
|
|
$(this).val("");
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
$("#projectTable").on("click", ".removeContribution", function (e) {
|
|
let contributionTag = $(this).parent();
|
|
let contributionIndex = contributionTag.data("contributionIndex");
|
|
let projectName = contributionTag.closest("tr").data("projectName");
|
|
|
|
let project = quadraticFunding.projects.find(function (project) {
|
|
return project.name === projectName;
|
|
});
|
|
|
|
if (project && contributionIndex !== undefined) {
|
|
let contribution = project.contributions[contributionIndex];
|
|
|
|
// Use splice to remove the contribution
|
|
project.contributions.splice(contributionIndex, 1);
|
|
project.fundedAmount -= contribution;
|
|
|
|
calculateMatchAmounts();
|
|
|
|
$(this)
|
|
.closest("tr")
|
|
.find(".fundedAmount")
|
|
.text("(Ğ1) " + project.fundedAmount.toFixed(2));
|
|
|
|
$(this)
|
|
.closest("tr")
|
|
.find(".contributionTag")
|
|
.each(function (index) {
|
|
$(this).attr("data-contribution-index", index);
|
|
});
|
|
contributionTag.remove();
|
|
}
|
|
});
|
|
|
|
function calculateMatchAmounts() {
|
|
const totalDonations = quadraticFunding.projects.reduce(
|
|
(total, project) => total + project.fundedAmount,
|
|
0
|
|
);
|
|
|
|
// If no donations are made yet, set matchAmount to 100
|
|
const matchAmountPerRound = totalDonations > 0 ? totalDonations : 100;
|
|
|
|
const squares = quadraticFunding.projects.map((project) => {
|
|
const sqrtSum = project.contributions.reduce(
|
|
(sum, contrib) => sum + Math.sqrt(contrib),
|
|
0
|
|
);
|
|
return sqrtSum * sqrtSum;
|
|
});
|
|
|
|
const totalSquares = squares.reduce((sum, sq) => sum + sq, 0);
|
|
|
|
const matches = squares.map(
|
|
(sq) => (sq / totalSquares) * matchAmountPerRound
|
|
);
|
|
|
|
for (let i = 0; i < quadraticFunding.projects.length; i++) {
|
|
const matchAmount = matches[i];
|
|
quadraticFunding.projects[i].matchAmount = matchAmount;
|
|
|
|
$("#projectTable")
|
|
.find(
|
|
`tr[data-project-name='${quadraticFunding.projects[i].name}'] .matchAmount`
|
|
)
|
|
.text("(Ğ1) " + matchAmount.toFixed(2));
|
|
}
|
|
|
|
$("#matchAmount").val(totalDonations);
|
|
|
|
updateUrl(); // Update URL after recalculating match amounts
|
|
}
|
|
|
|
|
|
// Load parameters from URL if exist
|
|
function loadDefaults() {
|
|
const params = new URLSearchParams(window.location.search);
|
|
if (params.has("match")) {
|
|
quadraticFunding.matchAmount = parseFloat(params.get("match"));
|
|
}
|
|
|
|
let projectsToLoad = [];
|
|
|
|
if (params.has("grant")) {
|
|
let grants = params.getAll("grant");
|
|
if (grants.length > 0) {
|
|
for (let i = 0; i < grants.length; i++) {
|
|
let contributions = grants[i]
|
|
.split("-")
|
|
.map(parseFloat)
|
|
.filter((num) => !isNaN(num));
|
|
projectsToLoad.push({
|
|
name: "Project #" + (i + 1),
|
|
contributions: contributions,
|
|
fundedAmount: contributions.reduce((a, b) => a + b, 0),
|
|
matchAmount: 0,
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
for (let project of projectsToLoad) {
|
|
$("#addProject").click();
|
|
let projectRow = $("#projectTable").find(
|
|
`tr[data-project-name='${project.name}']`
|
|
);
|
|
|
|
for (let contribution of project.contributions) {
|
|
projectRow.find(".contributionInput").val(contribution);
|
|
projectRow.find(".contributionInput").trigger(
|
|
jQuery.Event("keypress", {
|
|
which: 13,
|
|
})
|
|
);
|
|
}
|
|
}
|
|
|
|
// test if we have no grant in the url, add 4
|
|
if (!params.has("grant") && !params.has("match")) {
|
|
for (let i = 1; i <= 4; i++) {
|
|
$("#addProject").click();
|
|
}
|
|
}
|
|
}
|
|
|
|
// Call this function on page load to load the values from the URL
|
|
loadDefaults();
|
|
});
|
|
</script></div></div></div>
|
|
</html>
|