Browse Source

Init

master
Apostolos Fanakis 5 years ago
commit
841c399eb2
  1. BIN
      assets/chrome.png
  2. BIN
      assets/firefox.png
  3. 1
      darkMode.js
  4. 15
      index.css
  5. 135
      index.html
  6. 1
      markdown.css

BIN
assets/chrome.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

BIN
assets/firefox.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

1
darkMode.js

File diff suppressed because one or more lines are too long

15
index.css

@ -0,0 +1,15 @@
.light-mode-button {
background: #000;
border-color: #000;
color: lightgrey;
}
.dark-mode-button {
background: lightgrey;
border-color: black;
}
.light-mode-button,.dark-mode-button {
border-radius: 100px;
border-style: solid;
}

135
index.html

@ -0,0 +1,135 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Apella usage guide</title>
<link rel="stylesheet" type="text/css" href="markdown.css">
<script src="darkMode.js"></script>
</head>
<body id="preview">
<!-- Header "Apella usage guide" -->
<h1 class="code-line" data-line-start=0 data-line-end=1 >
<a id="Apella_usage_guide_0"></a>
Apella usage guide
</h1>
<blockquote>
<p class="has-line-data" data-line-start="1" data-line-end="2">
This is a guide for setting up all the tools necessary to use the Apella platform.
</p>
</blockquote>
<p class="has-line-data" data-line-start="3" data-line-end="4">
Apella is a decentralized platform for creating communities where people can anonymously interact and execute (direct) democratic votings, using the systems integrated into the platform.
</p>
<p class="has-line-data" data-line-start="5" data-line-end="6">
The software powering Apella is blockchain. More specifically the platform uses Ethereum and its smart contracts software.
</p>
<!-- Header "Setup" -->
<h1 class="code-line" data-line-start=7 data-line-end=8 >
<a id="Setup_7"></a>Setup
</h1>
<!-- Header "Metamask" -->
<h2 class="code-line" data-line-start=9 data-line-end=10 >
<a id="Metamask__9"></a>Metamask <span class="darkmode-ignore">🧐</span>
</h2>
<p class="has-line-data" data-line-start="11" data-line-end="12">
In order to use blockchain based, decentralized applications the user needs to setup a gateway for their browser to communicate with blockchain. This is where <a href="https://metamask.io/">Metamask</a> comes in.
</p>
<p class="has-line-data" data-line-start="13" data-line-end="19">
<strong>
→ First you need to install it in your browser. Use one of the links bellow.
</strong>
<br>
<div style="display: flex;justify-content: center">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>
<a href="https://addons.mozilla.org/en-US/firefox/addon/ether-metamask/" target="_blank">
<img style="height: 64px" src="assets/firefox.png" alt="Firefox">
</a>
</th>
<th>
<a href="https://chrome.google.com/webstore/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn?hl=en" target="_blank">
<img style="height: 64px" src="assets/chrome.png" alt="Chrome">
</a>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Firefox</td>
<td>Chrome</td>
</tr>
</tbody>
</table>
</div>
<strong>After the installation a new tab should appear. If that doesn't happen click on the new Metamask icon in your toolbar.</strong>
<br>
<strong>→ Select ‘create a wallet’ option.</strong>
<br>
<strong>→ Enter a password.</strong>
<br>
<strong>→ Save the passphrase created and click next.</strong>
<br>
<strong>→ Enter the passphrase and login.</strong>
</p>
<!-- Header "Connect to the private blockchain" -->
<h2 class="code-line" data-line-start=20 data-line-end=21 >
<a id="Connect_to_the_private_blockchain__20"></a>
Connect to the private blockchain <span class="darkmode-ignore">🤨</span>
</h2>
<p class="has-line-data" data-line-start="22" data-line-end="26">
<strong>→ Click the Metamask icon in the toolbar.</strong>
<br>
<strong>→ Click the ethereum network from the top of the popup window.</strong>
<br>
<strong>→ Select custom rpc.</strong>
<br>
<strong>→ Type in the options:</strong>
</p>
<ul>
<li class="has-line-data" data-line-start="26" data-line-end="27">Network name: <code>apella</code></li>
<li class="has-line-data" data-line-start="27" data-line-end="28">New RPC URL: <code>https://83.212.109.171/</code></li>
<li class="has-line-data" data-line-start="28" data-line-end="30">The rest of the options can be skipped</li>
</ul>
<p class="has-line-data" data-line-start="30" data-line-end="31">
<strong>→ Click save and wait until connected to the network.</strong>
</p>
<!-- Header "Visit Apella" -->
<h3 class="code-line" data-line-start=32 data-line-end=33 >
<a id="Visit_Apellahttpswwwapellatk_and_enjoy_free_uncensored_communication__32"></a>
Visit <a href="https://www.apella.tk">Apella</a> and enjoy free, uncensored communication <span class="darkmode-ignore">🥳</span>
</h3>
<div id="blank-space-in-the-end" style="height: 15vh"/>
<script type="text/javascript">
const options = {
bottom: '32px',
right: '32px',
left: 'unset',
time: '0.3s',
mixColor: '#fff',
backgroundColor: '#fff',
buttonColorDark: '#100f2c',
buttonColorLight: '#fff',
saveInCookies: false,
label: '🌓',
autoMatchOsTheme: false
}
new Darkmode(options).showWidget();
</script>
</body>
</html>

1
markdown.css

File diff suppressed because one or more lines are too long
Loading…
Cancel
Save