<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>F-Droid swap</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<style type="text/css">
body {
padding: 0;
margin: 0;
font-family: "Roboto Light", "Roboto Lt", Helvetica, sans-serif;
color: #fff;
background-color: #1c6bbc;
}
#swap-icon {
display: block;
margin: 1em auto 0 auto;
width: 25%;
max-width: 400px;
height: auto;
}
.tick {
display: block;
float: right;
margin-right: 1em;
width: 30px;
height: 30px;
}
h1 {
padding: 0 1.5em;
text-align: center;
font-size: 1.2em;
font-weight: normal;
}
ol {
counter-reset: li;
margin-left: 0;
margin-bottom: 0;
padding-left: 0;
}
ol > li, #download-from-web {
padding: 1em 0;
border-bottom: solid 1px rgba(245, 245, 245, 0.2);
box-sizing: border-box;
}
ol > li:first-child {
border-top: solid 1px rgba(245, 245, 245, 0.2);
}
ol > li:before {
content: counter(li);
counter-increment: li;
font: bold 1.4em Sans-Serif;
margin-left: 1em;
margin-right: 0.5em;
}
ol > li a {
font-family: "Roboto", Helvetica, sans-serif;
font-weight: bold;
color: #fff;
}
#download-from-web {
padding-left: 2em;
padding-right: 2em;
}
</style>
</head>
<body>
<img id="swap-icon" src="swap-icon.png" />
<h1>You're minutes away from having swap success!</h1>
<ol>
<li>
Find a swap
<img src="swap-tick-done.png" class="tick done" alt="Done"/>
</li>
<li>
<a href="{{CLIENT_URL}}">Download F-Droid</a>
<img src="swap-tick-not-done.png" class="tick not-done" alt="Not done" />
</li>
<li>
Install F-Droid
<img src="swap-tick-not-done.png" class="tick not-done" alt="Not done" />
</li>
<li>
<a href="{{REPO_URL}}">Add the swap to F-Droid</a>
<img src="swap-tick-not-done.png" class="tick not-done" alt="Not done" />
</li>
<li>
Install the apps you want
<img src="swap-tick-not-done.png" class="tick not-done" alt="Not done" />
</li>
</ol>
</body>
</html>