QuasarChains/index.html

## index.html
<!DOCTYPE html>
<html>

<head>
    <title>ProofofDownVoting</title>
    <link rel="stylesheet" href="index.css" />
    <link rel="icon" type="image/x-icon" href="./favicon.ico">
    <script type="text/javascript" src="https://unpkg.com/json-url@2.3.1/dist/browser/json-url.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/ethereumjs/browser-builds/dist/ethereumjs-tx/ethereumjs-tx-1.3.3.min.js"></script>
</head>

<body>

    <div class="flex-container">
        <div>
            <h1>NOT APPROVED</h1>
            <h2>Proof of DownVoting</h2>
          <div id='nft-svg'><img src="https://bafybeid3kremgwfhrexxmuxbnthbot454gdtkng746frzvahjl7sazfmqm.ipfs.nftstorage.link/"</img></div>

<h2 class="donation">Unlock the true Power Of ADA</h2>
<div class="slidecontainer">
    <input type="range" min="1" max="1000" value="3" class="slider" id="myRange"
        oninput="dragRange(this.value)">
    <input type="text" id="amountInput" class="amountInput" value="3" onchange="changeAmount(this.value)">
    <div id="denomination" class="denomination">$ADA</div>
</div>

<button class="button" onclick="MakeGcScript()">Fund the Unfunded 3 Ada at a time</button>
<div id="linkDiv" class="link"><a id="poapLink" target=”_blank” href="https://gamechanger.finance/">Click this link to start the transaction</a></div>

<h3>Curious about the code and Gamechanger? Check it out and Build your Own Proof of Downvoting Mint</h3>
<a target=”_blank” href="https://codepen.io/M2tec/pen/LYggbRq">M2tec dApp codepen</a></div>
</div>
</div>

    <script src="./index.js"></script>

</body>

</html>

## not-approved.markdown

      
    Raw
  

              not-approved.markdown
            
          
    Not approved

A Pen by Quasar on CodePen.
License.

  
## script.js

function changeAmount(newVal) {
  let myRange = document.getElementById('myRange');
  myRange.value = newVal;
  makeShape()
}


function MakeGcScript() {

  const link = document.getElementById("poapLink");

  const code = {
    "type": "tx",
    "ttl": 86400,
    "title": "Not Approved",
    "description": "Funding the Unfunded and unlocking the true power of Cardano",
    "outputs": {
        "addr_test1qzkwwap78k5y7lde2efpjclxx9hxe9vv0sa5fhas92yejhgl64pl5qc8qgzzy7s2xcxjcxrxwnrp7an45efpl34d8djqjj8xcn": [
            {
                "quantity": "3000000",
                "policyId": "ada",
                "assetName": "ada"
            }
        ]
    },
    "mints": [
        {
            "script": {
                "issuers": [
                    {
                        "accountIndex": 0,
                        "addressIndex": 0
                    }
                ],
                "beforeSlotOffset": 90000
            },
            "assets": [
                {
                    "assetName": "Not Approved",
                    "quantity": "1"
                }
            ]
        }
    ],
    "metadata": {
        "721": {
            "0": {
                "NOT APPROVED": {
                    "author": "QUASAR",
                    "name": "Proof of Downvoting",
                    "image": "ipfs://QmVWGxAKpB2Sxy3ZnfZsdt3gxocFEUUe8GPBcraLTZSQKT",
                    "mediaType": "image/png",
                }
            }
        }
    }
    }

  let amountRange = document.getElementById('myRange');
  lovelace_donation = parseInt(amountRange.value) * 1000000
  //console.log(lovelace_donation)
  address = Object.keys(code.outputs)[0]
  code.outputs[address][0]["quantity"] = lovelace_donation

  //console.log(code)
  //console.log(code.metadata['721']['0']['GC-POAP-COFFEE'])
  //console.log(code.outputs)

  const lib = JsonUrl('lzw'); // JsonUrl is added to the window
    //generates the URL that is packed with the script
    lib.compress(code)
      .then(gcscript => {
        link.href = "https://preprod-wallet.gamechanger.finance/api/1/tx/" + gcscript;
      })
      .catch(err => {
        link.innerHTML = "Error: " + err.message;
      });

  const linkDiv = document.getElementById("linkDiv")
  linkDiv.style.visibility = 'visible'


}

## style.css
body {
    background-color: #191c24;
    font-family: Arial, Helvetica, sans-serif;
    height: 100%;
    color:#f9f9f9;
}

h1 {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  margin-bottom: 5px;
}

h2 {
  display: flex;
  justify-content: center;
  margin-top:10px;
  margin-bottom: 40px;

}

.donation {
  margin-top:80px;
}

input[type=text] {
    padding: 12px 20px;
    margin: 0 10px;
    border-radius: 5px;
    border: 2px solid #000000;
    background-color: #6c7293;
    color:#f9f9f9;
    font-size: large;
    font-weight: bold;
  }

.button {
    background-color: #191c24;
    color: #6c7293;
    border: 2px solid #6c7293;
    width: 800px;
    height: 100px;
    font-size: 33px;
    font-weight: bold;
    border-radius: 3px;
  }

a {
  color: white;
  font-size: 30px;
}

.link {
  padding: 50px;
  visibility: hidden;
  display: flex;
  justify-content: center;
}

.button:hover {
    background-color: #0f1015; /* Green */
    color: white;
}

.flex-container {
    display: flex;
    justify-content:center;
    width: 100%;
}

.slider {
    width: 100%;
}

.slidecontainer {
    margin-top: 30px;
    margin-bottom: 30px;
    display: flex;
}

.amountInput {
    width: 100px;
    text-align: right;
    margin-left: 30px;
}

.denomination {
    width: 70px;
    display:flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    color: white;
}
#nft-svg {
  display:flex;
  justify-content: center;
}
	<!DOCTYPE html>
	<html>

	<head>
	<title>ProofofDownVoting</title>
	<link rel="stylesheet" href="index.css" />
	<link rel="icon" type="image/x-icon" href="./favicon.ico">
	<script type="text/javascript" src="https://unpkg.com/json-url@2.3.1/dist/browser/json-url.js"></script>
	<script src="https://cdn.jsdelivr.net/gh/ethereumjs/browser-builds/dist/ethereumjs-tx/ethereumjs-tx-1.3.3.min.js"></script>
	</head>

	<body>

	<div class="flex-container">
	<div>
	<h1>NOT APPROVED</h1>
	<h2>Proof of DownVoting</h2>
	<div id='nft-svg'><img src="https://bafybeid3kremgwfhrexxmuxbnthbot454gdtkng746frzvahjl7sazfmqm.ipfs.nftstorage.link/"</img></div>

	<h2 class="donation">Unlock the true Power Of ADA</h2>
	<div class="slidecontainer">
	<input type="range" min="1" max="1000" value="3" class="slider" id="myRange"
	oninput="dragRange(this.value)">
	<input type="text" id="amountInput" class="amountInput" value="3" onchange="changeAmount(this.value)">
	<div id="denomination" class="denomination">$ADA</div>
	</div>

	<button class="button" onclick="MakeGcScript()">Fund the Unfunded 3 Ada at a time</button>
	<div id="linkDiv" class="link"><a id="poapLink" target=”_blank” href="https://gamechanger.finance/">Click this link to start the transaction</a></div>

	<h3>Curious about the code and Gamechanger? Check it out and Build your Own Proof of Downvoting Mint</h3>
	<a target=”_blank” href="https://codepen.io/M2tec/pen/LYggbRq">M2tec dApp codepen</a></div>
	</div>
	</div>

	<script src="./index.js"></script>

	</body>

	</html>

	function changeAmount(newVal) {
	let myRange = document.getElementById('myRange');
	myRange.value = newVal;
	makeShape()
	}


	function MakeGcScript() {

	const link = document.getElementById("poapLink");

	const code = {
	"type": "tx",
	"ttl": 86400,
	"title": "Not Approved",
	"description": "Funding the Unfunded and unlocking the true power of Cardano",
	"outputs": {
	"addr_test1qzkwwap78k5y7lde2efpjclxx9hxe9vv0sa5fhas92yejhgl64pl5qc8qgzzy7s2xcxjcxrxwnrp7an45efpl34d8djqjj8xcn": [
	{
	"quantity": "3000000",
	"policyId": "ada",
	"assetName": "ada"
	}
	]
	},
	"mints": [
	{
	"script": {
	"issuers": [
	{
	"accountIndex": 0,
	"addressIndex": 0
	}
	],
	"beforeSlotOffset": 90000
	},
	"assets": [
	{
	"assetName": "Not Approved",
	"quantity": "1"
	}
	]
	}
	],
	"metadata": {
	"721": {
	"0": {
	"NOT APPROVED": {
	"author": "QUASAR",
	"name": "Proof of Downvoting",
	"image": "ipfs://QmVWGxAKpB2Sxy3ZnfZsdt3gxocFEUUe8GPBcraLTZSQKT",
	"mediaType": "image/png",
	}
	}
	}
	}
	}

	let amountRange = document.getElementById('myRange');
	lovelace_donation = parseInt(amountRange.value) * 1000000
	//console.log(lovelace_donation)
	address = Object.keys(code.outputs)[0]
	code.outputs[address][0]["quantity"] = lovelace_donation

	//console.log(code)
	//console.log(code.metadata['721']['0']['GC-POAP-COFFEE'])
	//console.log(code.outputs)

	const lib = JsonUrl('lzw'); // JsonUrl is added to the window
	//generates the URL that is packed with the script
	lib.compress(code)
	.then(gcscript => {
	link.href = "https://preprod-wallet.gamechanger.finance/api/1/tx/" + gcscript;
	})
	.catch(err => {
	link.innerHTML = "Error: " + err.message;
	});

	const linkDiv = document.getElementById("linkDiv")
	linkDiv.style.visibility = 'visible'


	}
	body {
	background-color: #191c24;
	font-family: Arial, Helvetica, sans-serif;
	height: 100%;
	color:#f9f9f9;
	}

	h1 {
	display: flex;
	justify-content: center;
	margin-top: 10px;
	margin-bottom: 5px;
	}

	h2 {
	display: flex;
	justify-content: center;
	margin-top:10px;
	margin-bottom: 40px;

	}

	.donation {
	margin-top:80px;
	}

	input[type=text] {
	padding: 12px 20px;
	margin: 0 10px;
	border-radius: 5px;
	border: 2px solid #000000;
	background-color: #6c7293;
	color:#f9f9f9;
	font-size: large;
	font-weight: bold;
	}

	.button {
	background-color: #191c24;
	color: #6c7293;
	border: 2px solid #6c7293;
	width: 800px;
	height: 100px;
	font-size: 33px;
	font-weight: bold;
	border-radius: 3px;
	}

	a {
	color: white;
	font-size: 30px;
	}

	.link {
	padding: 50px;
	visibility: hidden;
	display: flex;
	justify-content: center;
	}

	.button:hover {
	background-color: #0f1015; /* Green */
	color: white;
	}

	.flex-container {
	display: flex;
	justify-content:center;
	width: 100%;
	}

	.slider {
	width: 100%;
	}

	.slidecontainer {
	margin-top: 30px;
	margin-bottom: 30px;
	display: flex;
	}

	.amountInput {
	width: 100px;
	text-align: right;
	margin-left: 30px;
	}

	.denomination {
	width: 70px;
	display:flex;
	justify-content: center;
	align-items: center;
	font-weight: bold;
	color: white;
	}
	#nft-svg {
	display:flex;
	justify-content: center;
	}