Add section for adding contacts remotely

content/manual.md

@@ -26,12 +26,41 @@ Tap "Create Account". When your account has been created you'll be taken to the
 
 ## Adding Contacts ##
 
-<img src="assets/img/contact-list-cropped.png" alt="The contact list">
+<img src="assets/img/add-contact-options-cropped.png" alt="Options for adding a contact">
 
-To add a contact, tap the plus icon at the top of the contact list.
+To add a contact, tap the plus icon at the bottom right of the contact list.
+
+Choose one of the two options that appear.
+
+<div style="clear:both"></div>
+
+### Add contact at a distance
+
+<img src="assets/img/add-contact-remotely.png" alt="Adding a contact at a distance">
+
+Copy the <code>briar://</code> link and send it to the contact you want to add.
+You can also share the link with another app for sending.
+
+Paste the link that you receive from the person you want to add into the text field below.
+Click "Continue" and add a nickname for the new contact.
+
+Finally, you will see a "Pending Contact Requests" screen
+that informs you about the state of each pending contact.
+Briar will attempt to connect to your contact regularly to add them.
+
+If it was unable to add your contact for more than 48h, you will need to try again.
+
+Once a connection succeeds, you'll be added to each other's contact lists.
+Congratulations! You're ready to communicate securely.
 
 <div style="clear:both"></div>
 
+<img src="assets/img/add-contact-pending-cropped.png" alt="Pending Contacts">
+
+<div style="clear:both"></div>
+
+### Add contact nearby
+
 <img src="assets/img/add-contact-1.png" alt="Adding a contact, step 1">
 
 You must meet up with the person you want to add as a contact. Each of you will scan a QR code from the other person's screen. This ensures you're connecting to the right person, so nobody else can impersonate you or read your messages.

crop-screenshots.py

@@ -9,6 +9,8 @@ POSTFIX = '-cropped'
 
 
 def main():
+    crop('add-contact-options.png', 93, 65)
+    crop('add-contact-pending.png', 22, 4)
     crop('manual_messaging.png', 50)
     crop('introduction-5.png', 77, 47)
     crop('manage-rss-feeds-2.png', 35)