+
+
+
+
diff --git a/script.js b/script.js
new file mode 100644
index 000000000..9a1a13ba9
--- /dev/null
+++ b/script.js
@@ -0,0 +1,87 @@
+// Retrieve AlgoSigner sdk from the browser
+const { AlgoSigner } = window;
+
+//define the adddresses
+const red_address = "";
+const blue_address = "";
+
+//Get DOM Elements
+const submitBtn = document.querySelector(".submit");
+const connectWallet = document.querySelector(".connect");
+const yes = document.querySelector(".yes-btn");
+const no = document.querySelector(".no-btn");
+
+let yesOrNo = "";
+const setValue = (value) => {
+ yesOrNo = value;
+};
+//Function to Connect User's Account
+const ConnectAccount = async () => {
+ //Check if AlgoSigner is installed
+ if (!AlgoSigner) {
+ return alert("Please install AlgoSigner");
+ }
+
+ //Connect Account if AlgoSigner is installed
+ await AlgoSigner.connect()
+ .then((d) => {})
+ .catch((e) => console.log("error in connection"));
+};
+
+// Sign the Transaction
+const signTransaction = async (receiver = blue_address) => {
+ const txn = await AlgoSigner.algod({
+ ledger: "TestNet",
+ path: "/v2/transactions/params",
+ })
+ .then((e) => {
+ return e;
+ })
+ .catch((e) => console.log("error in algod"));
+
+ //retrieve account details
+ const account = await AlgoSigner.accounts({
+ ledger: "TestNet",
+ })
+ .then((value) => value[0])
+ .then((result) => {
+ const { address } = result;
+
+ return address;
+ })
+
+ .catch((e) => console.log("cannot retrieve accounts"));
+
+ //Transaction signature
+ await AlgoSigner.sign({
+ from: account,
+ to: receiver,
+ amount: document.querySelector("hi"),
+ note: "voting",
+ fee: txn["min-fee"],
+ })
+ .then(() => console.log("complete"))
+ .catch((e) => console.log("error", e));
+};
+
+connectWallet.addEventListener("click", async (e) => {
+ await ConnectAccount();
+ connectWallet.value = "Connected";
+});
+
+submitBtn.addEventListener("click", (e) => {
+ console.log("welcome user");
+
+ //checks to see if the user click an option
+ if (!yesOrNo) {
+ alert("Please click either yes or no");
+ return;
+ }
+ if (yesOrNo == "Yes") {
+ signTransaction(blue_address);
+ }
+ if (yesOrNo == "No") {
+ signTransaction(red_address);
+ }
+ alert(`Transaction successful in successful in ${yesOrNo}`);
+});
diff --git a/style.css b/style.css
new file mode 100644
index 000000000..2b1c6fefb
--- /dev/null
+++ b/style.css
@@ -0,0 +1,197 @@
+* {
+ padding: 10px;
+ margin: 0;
+ box-sizing: border-box;
+ list-style: none;
+ text-decoration: none;
+ font-family: "Josefin Sans", sans-serif;
+ border: none;
+ outline: none;
+}
+
+body {
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+ flex-direction: column;
+ min-height: 100vh;
+ background-color: mediumslateblue;
+}
+
+.container {
+ border: 1px solid #fff;
+ width: auto;
+ border-radius: 5px;
+ box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px,
+ rgba(0, 0, 0, 0.22) 0px 10px 10px;
+}
+
+.first {
+ padding: 1px;
+ font-size: 18px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.first h4 {
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+ Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+ text-decoration: underline;
+ font-size: 20px;
+ font-weight: 800;
+ text-transform: capitalize;
+ color: transparent;
+}
+
+.first ::placeholder {
+ color: rgba(128, 128, 128, 0.407);
+ font-size: 20px;
+}
+
+.first button {
+ margin-left: 120px;
+ background-color: transparent;
+ font-size: 12px;
+ letter-spacing: 2px;
+ font-weight: bold;
+ color: #fff;
+ width: 140px;
+ padding: 10px;
+ font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+ font-weight: 600;
+ border: 1px solid #fff;
+ border-radius: 3px;
+ box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px,
+ rgba(0, 0, 0, 0.22) 0px 10px 10px;
+}
+
+.second {
+ padding: 25px;
+ margin-left: -20px;
+ width: 83%;
+}
+
+.second ::placeholder {
+ padding: 10px;
+ letter-spacing: 2px;
+ color: #000;
+ font-weight: 600;
+ text-transform: capitalize;
+}
+
+.second input {
+ /* background-color: darkslategrey; */
+ margin-left: 10px;
+ color: #000;
+ border-radius: 3px;
+ width: 100%;
+ height: 30px;
+ border: 1px solid gray;
+ box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px,
+ rgba(0, 0, 0, 0.22) 0px 10px 10px;
+}
+
+.sec-ond {
+ /* margin-bottom: 10px;
+ margin-top: -16px; */
+ margin: -16px 5px 10px 4px;
+ width: 40%;
+}
+
+.sec-ond ::placeholder {
+ color: #000;
+ padding: 10px;
+ letter-spacing: 2px;
+ font-weight: 600;
+ text-transform: capitalize;
+}
+
+.sec-ond input {
+ /* margin-left: 4px; */
+ /* background-color: darkslategrey; */
+ color: #000;
+ border-radius: 3px;
+ width: 100%;
+ height: 30px;
+ border: 1px solid gray;
+ box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px,
+ rgba(0, 0, 0, 0.22) 0px 10px 10px;
+}
+
+.third {
+ padding: 40px;
+ margin-left: 10px;
+ margin-right: 10px;
+ border: 1px solid;
+ background-color: rgba(124, 104, 238, 0.39);
+ border-radius: 5px;
+ border: 1px solid #fff;
+ /* box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px,
+ rgba(0, 0, 0, 0.22) 0px 10px 10px; */
+}
+
+.third h4 {
+ display: flex;
+ color: #fff;
+ text-transform: uppercase;
+ justify-content: center;
+ letter-spacing: 2px;
+ font-family: fantasy;
+ font-size: 20px;
+ font-weight: bold;
+}
+
+.rand-btn {
+ padding: 20px;
+ margin-left: 40px;
+ margin-right: 60px;
+ display: flex;
+ justify-content: space-between;
+}
+
+.rand-btn input {
+ background-color: #000;
+ color: #fff;
+ font-weight: 800;
+ font-size: 11px;
+ width: 100px;
+ padding: 7px;
+ border: none;
+ border-radius: 5px;
+ font-weight: bolder;
+ box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px,
+ rgba(0, 0, 0, 0.22) 0px 10px 10px;
+}
+
+.rand-btn .true {
+ border: 1px solid #fff;
+ background-color: transparent;
+ color: #fff;
+}
+.rand-btn .false {
+ border: 1px solid #fff;
+ background-color: transparent;
+ color: #fff;
+}
+
+.submit {
+ padding: 20px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.submit input {
+ width: 200px;
+ padding: 10px;
+ border: 1px solid #fff;
+ border-radius: 5px;
+ font-size: 15px;
+ font-weight: 800;
+ background-color: rgba(91, 50, 206, 0.578);
+ color: #fff;
+ letter-spacing: 2px;
+ box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px,
+ rgba(0, 0, 0, 0.22) 0px 10px 10px;
+}