templates/site/features.html.twig line 1

Open in your IDE?
  1. {% block replacestylesheets %}
  2.     <link rel="stylesheet" href="{{ asset('css/style.css') }}" type="text/css"/>
  3.     <link rel="stylesheet" href="{{ asset('css/features.css') }}" type="text/css"/>
  4. {% endblock %}
  5. {% extends 'new_navbar.html.twig' %}
  6. {% block title %}Features - Toast{% endblock %}
  7. {% block anchorAccount %}
  8.     <a href="#wrapper" class="anchor-title"></a>
  9. {% endblock %}
  10. {% block logo %}
  11.     <a href="{{ path('site_index') }}"><img src="{{ asset('img/logo.svg') }}" alt="toast"></a>
  12. {% endblock %}
  13. {% block bodyClass %}home features{% endblock %}
  14. {% block body %}
  15.     <main id="main">
  16.         <div class="features-container">
  17.             <div class="features-sidebar">
  18.                 <nav class="features-nav desktop-view">
  19.                     <a href="#create_session" class="features-link active">Create Folder</a>
  20.                     <a href="#open_session" class="features-link">Open & Preview Folder</a>
  21.                     <a href="#edit_session" class="features-link">Edit Folder</a>
  22.                     <a href="#share_session" class="features-link">Share Folder</a>
  23.                     <a href="#collaborate_session" class="features-link">Collaborate Folder</a>
  24.                     <a href="#synchronize_session" class="features-link">Synchronize Folder</a>
  25.                     <a href="#add_link" class="features-link">Add Link</a>
  26.                     <a href="#open_link" class="features-link">Open Link</a>
  27.                     <a href="#edit_link" class="features-link">Edit Link</a>
  28.                     <a href="#replace_tabs" class="features-link">Replace Tabs</a>
  29.                     <a href="#add_new_tab" class="features-link">Add New Tabs</a>
  30.                     <a href="#live_sync" class="features-link">Live Synchronization</a>
  31.                     <a href="#web_app_features" class="features-link">Web App Features</a>
  32.                     <a href="#shortcuts" class="features-link">Shortcuts</a>
  33.                 </nav>
  34.                 <div class="features-mob-bar">
  35.                     <button class="features-mob-btn">
  36.                         <span>Features List</span>
  37.                         <img src="{{ asset('img/features/icons/icon-add.svg') }}" alt="">
  38.                     </button>
  39.                     <div class="features-mob-wrap">
  40.                         <nav class="features-nav-mob">
  41.                             <a href="#create_session" class="features-link">Create Folder</a>
  42.                             <a href="#open_session" class="features-link">Open & Preview Folder</a>
  43.                             <a href="#edit_session" class="features-link">Edit Folder</a>
  44.                             <a href="#share_session" class="features-link">Share Folder</a>
  45.                             <a href="#collaborate_session" class="features-link">Collaborate Folder</a>
  46.                             <a href="#synchronize_session" class="features-link">Synchronize Folder</a>
  47.                             <a href="#add_link" class="features-link">Add Link</a>
  48.                             <a href="#open_link" class="features-link">Open Link</a>
  49.                             <a href="#edit_link" class="features-link">Edit Link</a>
  50.                             <a href="#replace_tabs" class="features-link">Replace Tabs</a>
  51.                             <a href="#add_new_tab" class="features-link">Add New Tabs</a>
  52.                             <a href="#live_sync" class="features-link">Live Synchronization</a>
  53.                             <a href="#web_app_features" class="features-link">Web App Features</a>
  54.                             <a href="#shortcuts" class="features-link">Shortcuts</a>
  55.                         </nav>
  56.                     </div>
  57.                 </div>
  58.             </div>
  59.             <div class="features-wrap">
  60.                 <div class="features-content">
  61.                     <h3 class="features-title" id="create_session">Create Folder</h3>
  62.                     <div class="features-row features-create-session">
  63.                         <div class="features-col-1 features-col">
  64.                             <p class="features-text">With Toast you can collect links into one group, we call it
  65.                                 “Folder”. Folder can be later reopened in one click, shared or collaborated with your
  66.                                 friends and colleagues. Links in folder can be easily added, removed, modified and open
  67.                                 one-by-one.
  68.                                 <br> <br> Toast provides you with numerous ways of folder creation, organization and
  69.                                 sharing. Below you can find multiple ways to create a folder of your own.</p>
  70.                         </div>
  71.                         <div class="features-col-2 features-col">
  72.                             <p class="features-text">
  73.                                 Note, methods using shortcut or context menu work via on-page popup. This popup won't
  74.                                 appear on internal browser pages, like New Tab, browser settings etc.
  75.                                 <br>
  76.                                 Also, if the shortcuts don't work for you, try checking if they were set automatically
  77.                                 by going to "Extensions" → "Keyboard Shortcuts" page in browser settings. There you can
  78.                                 also set your own shortcuts.
  79.                             </p>
  80.                         </div>
  81.                     </div>
  82.                     <div class="features-row features-preview">
  83.                         <div class="features-col-1 features-col" id="card-1">
  84.                             <img src="/img/features/img1.png" alt="illustration"
  85.                                  srcset="/img/features/img1@2x.png 2x"
  86.                                  class="features-img"/>
  87.                             <h4 class="features-sub-title">Create via extension</h4>
  88.                             <p class="features-text">
  89.                                 Open the extension and click the "Save All Tabs" button in the top right corner. Name the
  90.                                 folder, delete or rename links that are about to be saved. Once ready, press "Save" button to confirm a folder creation.
  91.                             </p>
  92.                         </div>
  93.                         <div class="features-col-2 features-col" id="card-2">
  94.                             <img src="/img/features/img2.png" alt="illustration"
  95.                                  srcset="/img/features/img2@2x.png 2x"
  96.                                  class="features-img"/>
  97.                             <h4 class="features-sub-title">Create using a shortcut</h4>
  98.                             <p class="features-text">
  99.                                 On any website press Ctrl+Shift+S (both Mac and PC) to show the Toast popup window with
  100.                                 the folder creation process. Just like in the extension, you can name the folder,
  101.                                 rename and delete links before saving.
  102.                             </p>
  103.                         </div>
  104.                     </div>
  105.                     <div class="features-row">
  106.                         <div class="features-col-1 features-col" id="card-3">
  107.                             <img src="/img/features/img3.png" alt="illustration"
  108.                                  srcset="/img/features/img3@2x.png 2x"
  109.                                  class="features-img"/>
  110.                             <h4 class="features-sub-title">Create via context menu</h4>
  111.                             <p class="features-text">
  112.                                 On any website click the right mouse button to open the context menu. Select "Toast -
  113.                                 Save All Tabs... ". A popup window will open with the folder creation process. Name the
  114.                                 folder, rename and delete links before saving.
  115.                             </p>
  116.                         </div>
  117.                         <div class="features-col-2 features-col" id="card-4">
  118.                             <img src="/img/features/img4.png" alt="illustration"
  119.                                  srcset="/img/features/img4@2x.png 2x"
  120.                                  class="features-img"/>
  121.                             <h4 class="features-sub-title">Create in the web app</h4>
  122.                             <p class="features-text">
  123.                                 After logging into <a href="dotoast.com">dotoast.com</a>, press "Add new folder" button
  124.                                 in the bottom left corner. Folder will be added to your list automatically with a
  125.                                 default name. Start typing a new name and press "enter" to confirm it.
  126.                             </p>
  127.                         </div>
  128.                     </div>
  129.                     <h3 class="features-title" id="open_session">
  130.                         Open & Preview Folder
  131.                     </h3>
  132.                     <div class="features-row">
  133.                         <div class="features-col-1 features-col">
  134.                             <p class="features-text">
  135.                                 After a folder was created in one of the methods listed above, you can reopen all links
  136.                                 from it in one click, preview & modify a list of links or open each link individually.
  137.                             </p>
  138.                         </div>
  139.                         <div class="features-col-2 features-col"></div>
  140.                     </div>
  141.                     <div class="features-row">
  142.                         <div class="features-col-1 features-col" id="card-5">
  143.                             <img src="/img/features/img5.png" alt="illustration"
  144.                                  srcset="/img/features/img5@2x.png 2x"
  145.                                  class="features-img"/>
  146.                             <h4 class="features-sub-title">Open from the home page in extension</h4>
  147.                             <p class="features-text">
  148.                                 The easiest way to open a folder it's just open Toast extension and click on a name of
  149.                                 the needed folder. Browser will open a new window with all tabs from the folder.
  150.                             </p>
  151.                         </div>
  152.                         <div class="features-col-2 features-col" id="card-6">
  153.                             <img src="/img/features/img6.png" alt="illustration"
  154.                                  srcset="/img/features/img6@2x.png 2x"
  155.                                  class="features-img"/>
  156.                             <h4 class="features-sub-title">Open from the folder details page in extension</h4>
  157.                             <p class="features-text">
  158.                                 Move your mouse over the folder to see the "3 dots" button. Click it. The "folder
  159.                                 details" page with all folder links listed will be open. In top right corner click
  160.                                 "Open All Links" to open all links in a new browser window.
  161.                             </p>
  162.                         </div>
  163.                     </div>
  164.                     <div class="features-row">
  165.                         <div class="features-col-1 features-col" id="card-7">
  166.                             <img src="/img/features/img7.png" alt="illustration"
  167.                                  srcset="/img/features/img7@2x.png 2x"
  168.                                  class="features-img"/>
  169.                             <h4 class="features-sub-title">Links list preview in extension</h4>
  170.                             <p class="features-text">
  171.                                 Move your mouse over the folder to see the "3 dots" button. Click it. The "folder
  172.                                 details" page with all folder links listed will be open. In top right corner click
  173.                                 "Open All Links" to open all links in a new browser window.
  174.                             </p>
  175.                         </div>
  176.                         <div class="features-col-2 features-col" id="card-8">
  177.                             <img src="/img/features/img8.png" alt="illustration"
  178.                                  srcset="/img/features/img8@2x.png 2x"
  179.                                  class="features-img"/>
  180.                             <h4 class="features-sub-title">Links preview in web app</h4>
  181.                             <p class="features-text">
  182.                                 Open Toast web app dotoast.com, log in if you are not logged yet. Select a needed
  183.                                 folder from the list in the left sidebar by clicking it. All your links will be shown
  184.                                 to the right.
  185.                             </p>
  186.                         </div>
  187.                     </div>
  188.                     <h3 class="features-title" id="edit_session">
  189.                         Edit Folder
  190.                     </h3>
  191.                     <div class="features-row">
  192.                         <div class="features-col-1 features-col">
  193.                             <p class="features-text">Saved folders can be modified, deleted, reordered and shared with
  194.                                 others.</p>
  195.                         </div>
  196.                         <div class="features-col-2 features-col"></div>
  197.                     </div>
  198.                     <div class="features-row">
  199.                         <div class="features-col-1 features-col" id="card-9">
  200.                             <img src="/img/features/img9.png" alt="illustration"
  201.                                  srcset="/img/features/img9@2x.png 2x"
  202.                                  class="features-img"/>
  203.                             <h4 class="features-sub-title">Rename via extension</h4>
  204.                             <p class="features-text">
  205.                                 Open the extension. Navigate to the "folder details" page by hovering your cursor over
  206.                                 the folder and clicking "3 dots" button. Press "Settings" in the bottom left. Then find
  207.                                 the "Rename" option. Enter a new name and hit "Enter" or click "↵Done" to save.
  208.                             </p>
  209.                         </div>
  210.                         <div class="features-col-2 features-col" id="card-10">
  211.                             <img src="/img/features/img10.png" alt="illustration"
  212.                                  srcset="/img/features/img10@2x.png 2x"
  213.                                  class="features-img"/>
  214.                             <h4 class="features-sub-title">Delete via extension</h4>
  215.                             <p class="features-text">
  216.                                 Open the extension. Navigate to the "folder details" page by hovering your cursor over
  217.                                 the folder and clicking "3 dots" button. Press "Settings" in the bottom left. Then find
  218.                                 the "Delete" option. Press it to delete the folder.
  219.                             </p>
  220.                         </div>
  221.                     </div>
  222.                     <div class="features-row">
  223.                         <div class="features-col-1 features-col" id="card-11">
  224.                             <img src="/img/features/img11.png" alt="illustration"
  225.                                  srcset="/img/features/img11@2x.png 2x"
  226.                                  class="features-img"/>
  227.                             <h4 class="features-sub-title">Rename via web app</h4>
  228.                             <p class="features-text">
  229.                                 Open Toast web app <a href="dotoast.com">dotoast.com.</a> Select the needed folder from
  230.                                 the left sidebar by clicking it. On the right side you'll see its content. Click the
  231.                                 folder name to start renaming process. Once ready press "Enter" key to confirm it.
  232.                             </p>
  233.                         </div>
  234.                         <div class="features-col-2 features-col" id="card-12">
  235.                             <img src="/img/features/img12.png" alt="illustration"
  236.                                  srcset="/img/features/img12@2x.png 2x"
  237.                                  class="features-img"/>
  238.                             <h4 class="features-sub-title">Delete via web app</h4>
  239.                             <p class="features-text">
  240.                                 Open Toast web app <a href="dotoast.com">dotoast.com.</a> Select the needed folder from
  241.                                 the left sidebar by clicking it. On the right side you'll see its content. Find a
  242.                                 "Delete" button in the top right corner of the screen. Press it to delete the folder.
  243.                             </p>
  244.                         </div>
  245.                     </div>
  246.                     <div class="features-row">
  247.                         <div class="features-col-1 features-col" id="card-13">
  248.                             <img src="/img/features/img13.png" alt="illustration"
  249.                                  srcset="/img/features/img13@2x.png 2x"
  250.                                  class="features-img"/>
  251.                             <h4 class="features-sub-title">Reorder links and folders via web app</h4>
  252.                             <p class="features-text">
  253.                                 Open Toast web app <a href="dotoast.com">dotoast.com.</a> To reorder folders hover your
  254.                                 mouse cursor over any folder. On the right side of it a "3 lines" button would appear.
  255.                                 Use it to grab and move the folder. Follow the same process to reorder the links by
  256.                                 hovering over any of them.
  257.                             </p>
  258.                         </div>
  259.                         <div class="features-col-2 features-col"></div>
  260.                     </div>
  261.                     <h3 class="features-title" id="share_session">
  262.                         Share Folder
  263.                     </h3>
  264.                     <div class="features-row">
  265.                         <div class="features-col-1 features-col">
  266.                             <p class="features-text">
  267.                                 Quickly share a folder (list of links essentially) with anyone in just a few clicks.
  268.                                 Send them a preview link or send a copy of your folder to their Toast.
  269.                                 <br>
  270.                                 <br>
  271.                                 Sharable web link can be accessed by anyone without special permissions or Toast
  272.                                 installed. Sharing via email requires recipient to have Toast account.
  273.                             </p>
  274.                         </div>
  275.                         <div class="features-col-2 features-col">
  276.                             <p class="features-text">
  277.                                 Note, methods using shortcut or context menu work via on-page popup. This popup won't
  278.                                 appear on internal browser pages, like New Tab, browser settings etc. Also, if the
  279.                                 shortcuts don't work for you, try checking if they were set automatically by going to
  280.                                 "Extensions" → "Keyboard Shortcuts" page in browser settings. There you can also set
  281.                                 your own shortcuts.
  282.                             </p>
  283.                         </div>
  284.                     </div>
  285.                     <div class="features-row">
  286.                         <div class="features-col-1 features-col" id="card-15">
  287.                             <img src="/img/features/img15.png" alt="illustration"
  288.                                  srcset="/img/features/img15@2x.png 2x"
  289.                                  class="features-img"/>
  290.                             <h4 class="features-sub-title">Share link in a settings page</h4>
  291.                             <p class="features-text">
  292.                                 Open the extension. Navigate to the "folder details" page by hovering over the folder
  293.                                 and clicking "3 dots" button. Press "Settings" in the bottom left. Find the "Share Link"
  294.                                 option. Click it to copy the folder sharable link.
  295.                             </p>
  296.                         </div>
  297.                         <div class="features-col-2 features-col" id="card-16">
  298.                             <img src="/img/features/img16.png" alt="illustration"
  299.                                  srcset="/img/features/img16@2x.png 2x"
  300.                                  class="features-img"/>
  301.                             <h4 class="features-sub-title">Share via link using a shortcut</h4>
  302.                             <p class="features-text">
  303.                                 On any website press Ctrl+Shift+E (both Mac and PC) to show the Toast popup window with
  304.                                 the folder creation & sharing process. After a folder creation a sharable web link
  305.                                 will be copied to your clipboard.
  306.                             </p>
  307.                         </div>
  308.                     </div>
  309.                     <div class="features-row">
  310.                         <div class="features-col-1 features-col" id="card-19">
  311.                             <img src="/img/features/img18.png" alt="illustration"
  312.                                  srcset="/img/features/img18@2x.png 2x"
  313.                                  class="features-img"/>
  314.                             <h4 class="features-sub-title">Share link via web app</h4>
  315.                             <p class="features-text">
  316.                                 Open Toast web app <a href="dotoast.com">dotoast.com.</a> Select the needed folder from
  317.                                 the left sidebar by clicking it. Find a "Share" button in the top right corner of the
  318.                                 screen. Click it to see 2 sharing options. Pick "Share Link".
  319.                             </p>
  320.                         </div>
  321.                         <div class="features-col-2 features-col" id="card-18">
  322.                             <img src="/img/features/img19.png" alt="illustration"
  323.                                  srcset="/img/features/img19@2x.png 2x"
  324.                                  class="features-img"/>
  325.                             <h4 class="features-sub-title">Share via email in settings page</h4>
  326.                             <p class="features-text">
  327.                                 Open the extension. Navigate to the "folder details" page by hovering over the folder
  328.                                 and clicking "3 dots" button. Press "Settings" in the bottom left. Find the "Email
  329.                                 folder" option. Enter the recipient's email and hit "Enter" or click "↵Done" send.
  330.                             </p>
  331.                         </div>
  332.                     </div>
  333.                     <div class="features-row">
  334.                         <div class="features-col-1 features-col" id="card-20">
  335.                             <img src="/img/features/img20.png" alt="illustration"
  336.                                  srcset="/img/features/img20@2x.png 2x"
  337.                                  class="features-img"/>
  338.                             <h4 class="features-sub-title">Share via email via web app</h4>
  339.                             <p class="features-text">
  340.                                 Open Toast web app <a href="dotoast.com">dotoast.com.</a> Select the needed folder from
  341.                                 the left sidebar by clicking it. Find a "Share" button in the top right corner of the
  342.                                 screen. Click it to see 2 sharing options. Pick "Email Folder". Enter the recipient's
  343.                                 email to send it.
  344.                             </p>
  345.                         </div>
  346.                         <div class="features-col-2 features-col"></div>
  347.                     </div>
  348.                     <h3 class="features-title" id="collaborate_session">
  349.                         Collaborate Folder
  350.                     </h3>
  351.                     <div class="features-row">
  352.                         <div class="features-col-1 features-col">
  353.                             <p class="features-text">
  354.                                 Select the needed folder from the left sidebar by clicking it. Find a "Share" button in
  355.                                 the top right corner of the screen. Click it to see 2 sharing options. Pick "Email
  356.                                 Folder". Enter the recipient's email to send it.
  357.                             </p>
  358.                         </div>
  359.                         <div class="features-col-2 features-col">
  360.                             <p class="features-text">
  361.                                 Note, in the extension main page collaborated folders are marked with an icon next to
  362.                                 the tabs count. You can also filter such folders by clicking the collaboration icon in
  363.                                 the top of the extension main page.
  364.                             </p>
  365.                         </div>
  366.                     </div>
  367.                     <div class="features-row">
  368.                         <div class="features-col-1 features-col" id="card-21">
  369.                             <img src="/img/features/img21.png" alt="illustration"
  370.                                  srcset="/img/features/img21@2x.png 2x"
  371.                                  class="features-img"/>
  372.                             <h4 class="features-sub-title">Activate collaboration via extension</h4>
  373.                             <p class="features-text">
  374.                                 Open the extension. Navigate to the "folder details" using the "3 dots" button of a
  375.                                 folder. Press "Settings" in the bottom left. Find the "Collaborate Folder" option.
  376.                                 Click the toggle next to it to activate/deactivate collaboration. Once activated,
  377.                                 proceed to the "Members" page to edit your collaborators.
  378.                             </p>
  379.                         </div>
  380.                         <div class="features-col-2 features-col" id="card-22">
  381.                             <img src="/img/features/img22new.png" alt="illustration"
  382.                                  srcset="/img/features/img22new@2x.png 2x"
  383.                                  class="features-img"/>
  384.                             <h4 class="features-sub-title">Invite and remove users via extension</h4>
  385.                             <p class="features-text">
  386.                                 Open the extension. Navigate to the "folder details" using the "3 dots" button of a
  387.                                 folder. Press "Settings" in the bottom left. Find the "Members" option. Click it to
  388.                                 open "Members" page, where you can manage collaborators.
  389.                             </p>
  390.                         </div>
  391.                     </div>
  392.                     <div class="features-row">
  393.                         <div class="features-col-1 features-col" id="card-23">
  394.                             <img src="/img/features/img23.png" alt="illustration"
  395.                                  srcset="/img/features/img23@2x.png 2x"
  396.                                  class="features-img"/>
  397.                             <h4 class="features-sub-title">Deactivate collaboration via extension</h4>
  398.                             <p class="features-text">
  399.                                 Open the extension. Navigate to the "folder details" using the "3 dots" button of a
  400.                                 folder. Press "Settings" in the bottom left. Find the "Members" option. Click it to
  401.                                 open "Members" page, where you can manage collaborators.
  402.                             </p>
  403.                         </div>
  404.                         <div class="features-col-2 features-col" id="card-24">
  405.                             <img src="/img/features/img24.png" alt="illustration"
  406.                                  srcset="/img/features/img24@2x.png 2x"
  407.                                  class="features-img"/>
  408.                             <h4 class="features-sub-title">Activate collaboration via web app</h4>
  409.                             <p class="features-text">
  410.                                 Open Toast web app <a href="dotoast.com">dotoast.com.</a> Select the needed folder from
  411.                                 the left sidebar by clicking it. Find a "Collaborate" button in the top right corner of
  412.                                 the screen. In its dropdown click the toggle to turn collaboration on/off.
  413.                             </p>
  414.                         </div>
  415.                     </div>
  416.                     <div class="features-row">
  417.                         <div class="features-col-1 features-col" id="card-25">
  418.                             <img src="/img/features/img25.png" alt="illustration"
  419.                                  srcset="/img/features/img25@2x.png 2x"
  420.                                  class="features-img"/>
  421.                             <h4 class="features-sub-title">Invite and remove users via web app</h4>
  422.                             <p class="features-text">
  423.                                 Open Toast web app <a href="dotoast.com">dotoast.com.</a> Select the needed folder from
  424.                                 the left sidebar by clicking it. Find a "Collaborate" button in the top right corner of
  425.                                 the screen. In its dropdown click "invite new member" to add a person by email or Click
  426.                                 delete icon next to the invited user to reject access.
  427.                             </p>
  428.                         </div>
  429.                         <div class="features-col-2 features-col" id="card-26">
  430.                             <img src="/img/features/img26.png" alt="illustration"
  431.                                  srcset="/img/features/img26@2x.png 2x"
  432.                                  class="features-img"/>
  433.                             <h4 class="features-sub-title">Deactivate collaboration via web app</h4>
  434.                             <p class="features-text">
  435.                                 Open Toast web app <a href="dotoast.com">dotoast.com.</a> Select the needed folder from
  436.                                 the left sidebar by clicking it. Find a "Collaborate" button in the top right corner of
  437.                                 the screen. In its dropdown click the toggle to turn collaboration on/off. Once
  438.                                 deactivated, all collaborators will lose access to it.
  439.                             </p>
  440.                         </div>
  441.                     </div>
  442.                     <h3 class="features-title" id="synchronize_session">
  443.                         Synchronize Folder
  444.                     </h3>
  445.                     <div class="features-row">
  446.                         <div class="features-col-1 features-col">
  447.                             <p class="features-text">
  448.                                 Toast removes barriers between browsers and devices and lets you access your links
  449.                                 everywhere. All your folders are safely stored in the cloud and are accessible from all
  450.                                 extensions and a web app on any device with a browser. Toast has native extensions for
  451.                                 almost every browser in the world.
  452.                             </p>
  453.                         </div>
  454.                         <div class="features-col-2 features-col">
  455.                             <p class="features-text">
  456.                                 Note, even on the free plan all your folders are always available from Toast web app <a
  457.                                         href="dotoast.com">dotoast.com.</a>
  458.                             </p>
  459.                         </div>
  460.                     </div>
  461.                     <div class="features-row">
  462.                         <div class="features-col-1 features-col" id="card-27">
  463.                             <img src="/img/features/img27.png" alt="illustration"
  464.                                  srcset="/img/features/img27@2x.png 2x"
  465.                                  class="features-img"/>
  466.                             <h4 class="features-sub-title">Synchronize in extensions and web app</h4>
  467.                             <p class="features-text">
  468.                                 Open your extension to see your folders from all browsers synced as one list (PRO).
  469.                                 Start working on a Safari on an office computer and continue working at home on Chrome
  470.                                 from Windows.
  471.                             </p>
  472.                         </div>
  473.                         <div class="features-col-2 features-col"></div>
  474.                     </div>
  475.                     <h3 class="features-title" id="add_link">
  476.                         Add Link
  477.                     </h3>
  478.                     <div class="features-row">
  479.                         <div class="features-col-1 features-col">
  480.                             <p class="features-text">
  481.                                 Have just a single link to save. No problem, one-by-one or all together, Toast can store
  482.                                 them all.
  483.                                 <br><br>
  484.                                 Note, methods using shortcut or context menu work via on-page popup. This popup won't
  485.                                 appear on internal browser pages, like New Tab, browser settings etc.
  486.                             </p>
  487.                         </div>
  488.                         <div class="features-col-2 features-col">
  489.                             <p class="features-text">
  490.                                 Also, if the shortcuts don't work for you, try checking if they were set automatically
  491.                                 by going to "Extensions" → "Keyboard Shortcuts" page in browser settings. There you can
  492.                                 also set your own shortcuts.
  493.                                 <br><br>
  494.                                 Toast extension automatically fills the "Add Link" field with the open website's link,
  495.                                 so that you don't even have to copy the link yourself if you want to add a current page.
  496.                             </p>
  497.                         </div>
  498.                     </div>
  499.                     <div class="features-row">
  500.                         <div class="features-col-1 features-col" id="card-70">
  501.                             <img src="/img/features/img70.png" alt="illustration"
  502.                                  srcset="/img/features/img70@2x.png 2x"
  503.                                  class="features-img"/>
  504.                             <h4 class="features-sub-title">Add current page to folder, home page</h4>
  505.                             <p class="features-text">
  506.                                 The easiest way to add a current page to a folder is to just open Toast extension and click plus button in the corresponding folder row.
  507.                             </p>
  508.                         </div>
  509.                         <div class="features-col-2 features-col" id="card-28">
  510.                             <img src="/img/features/img28.png" alt="illustration"
  511.                                  srcset="/img/features/img28@2x.png 2x"
  512.                                  class="features-img"/>
  513.                             <h4 class="features-sub-title">Add link to folder via extension, details page</h4>
  514.                             <p class="features-text">
  515.                                 Open the extension. Navigate to the "folder details" using the "3 dots" button of a
  516.                                 folder. Inside the "folder details" page find the "Add Link" button at the bottom.
  517.                                 Click it, paste your link and hit "Enter" key or click "↵Done" to add it.
  518.                             </p>
  519.                         </div>
  520.                     </div>
  521.                     <div class="features-row">
  522.                         <div class="features-col-1 features-col" id="card-29">
  523.                             <img src="/img/features/img29.png" alt="illustration"
  524.                                  srcset="/img/features/img29@2x.png 2x"
  525.                                  class="features-img"/>
  526.                             <h4 class="features-sub-title">Add current page to folder using a shortcut</h4>
  527.                             <p class="features-text">
  528.                                 On any website press Ctrl+Shift+U (both Mac and PC) to show the Toast popup window with
  529.                                 the link adding process. Name the link before saving or keep its own title. Select the
  530.                                 folder you'd like the link to be added to.
  531.                             </p>
  532.                         </div>
  533.                         <div class="features-col-2 features-col" id="card-30">
  534.                             <img src="/img/features/img30.png" alt="illustration"
  535.                                  srcset="/img/features/img30@2x.png 2x"
  536.                                  class="features-img"/>
  537.                             <h4 class="features-sub-title">Add current page via context menu</h4>
  538.                             <p class="features-text">
  539.                                 On any website click the right mouse button to open the context menu. Select "Toast -
  540.                                 Add Current Tab to Folder...". A popup window will open with the link adding process.
  541.                                 Name the link before saving or keep its own title. Select the folder you'd like the
  542.                                 link to be added to.
  543.                             </p>
  544.                         </div>
  545.                     </div>
  546.                     <div class="features-row">
  547.                         <div class="features-col-1 features-col" id="card-31">
  548.                             <img src="/img/features/img31new.png" alt="illustration"
  549.                                  srcset="/img/features/img31new@2x.png 2x"
  550.                                  class="features-img"/>
  551.                             <h4 class="features-sub-title">Add link to folder via web app</h4>
  552.                             <p class="features-text">
  553.                                 Open Toast web app <a href="dotoast.com">dotoast.com.</a> Select the needed folder from
  554.                                 the left sidebar by clicking it. Find a "Add Link" button at the end of the links list
  555.                                 on the right. Click it, paste your link and hit "Enter" key or click "↵Done" to add it.
  556.                             </p>
  557.                         </div>
  558.                     </div>
  559.                     <h3 class="features-title" id="open_link">Open Link</h3>
  560.                     <div class="features-row">
  561.                         <div class="features-col-1 features-col">
  562.                             <p class="features-text">
  563.                                 Toast can open an entire folder of links in one click, but that's not always what you
  564.                                 want. Sometimes you might need to open only one or couple links from a folder. And it's
  565.                                 as easy as it should be.
  566.                             </p>
  567.                         </div>
  568.                         <div class="features-col-2 features-col"></div>
  569.                     </div>
  570.                     <div class="features-row">
  571.                         <div class="features-col-1 features-col" id="card-32">
  572.                             <img src="/img/features/img32.png" alt="illustration"
  573.                                  srcset="/img/features/img32@2x.png 2x"
  574.                                  class="features-img"/>
  575.                             <h4 class="features-sub-title">Open link via extension </h4>
  576.                             <p class="features-text">
  577.                                 Open the extension. Navigate to the "folder details" using the "3 dots" button of a
  578.                                 folder. Inside the "folder details" you'll see a list of all folder links. Click one
  579.                                 or multiple to open a link in a new tab.
  580.                             </p>
  581.                         </div>
  582.                         <div class="features-col-2 features-col" id="card-33">
  583.                             <img src="/img/features/img33new.png" alt="illustration"
  584.                                  srcset="/img/features/img33new@2x.png 2x"
  585.                                  class="features-img"/>
  586.                             <h4 class="features-sub-title">Open link via web app</h4>
  587.                             <p class="features-text">
  588.                                 Open Toast web app <a href="dotoast.com">dotoast.com.</a> Select the needed folder from
  589.                                 the left sidebar by clicking it. To the right you'll see a list of all folder links.
  590.                                 Click one or multiple to open a link in a new tab.
  591.                             </p>
  592.                         </div>
  593.                     </div>
  594.                     <h3 class="features-title" id="edit_link">
  595.                         Edit Link
  596.                     </h3>
  597.                     <div class="features-row">
  598.                         <div class="features-col-1 features-col">
  599.                             <p class="features-text">
  600.                                 Your links, your rules. Name, rename, reorder or delete any of your saved links. It
  601.                                 isn't always clear what the link is about by the title set by its developers. Not a
  602.                                 problem with Toast. You can name it what you want.
  603.                             </p>
  604.                         </div>
  605.                         <div class="features-col-2 features-col"></div>
  606.                     </div>
  607.                     <div class="features-row">
  608.                         <div class="features-col-1 features-col" id="card-34">
  609.                             <img src="/img/features/img34.png" alt="illustration"
  610.                                  srcset="/img/features/img34@2x.png 2x"
  611.                                  class="features-img"/>
  612.                             <h4 class="features-sub-title">Rename link via extension</h4>
  613.                             <p class="features-text">
  614.                                 Open the extension. Navigate to the "folder details" using the "3 dots" button of a
  615.                                 folder. Find a link you want to rename and show its control buttons by hovering
  616.                                 over it. One of those buttons is "Rename". Click it to start renaming.
  617.                             </p>
  618.                         </div>
  619.                         <div class="features-col-2 features-col" id="card-35">
  620.                             <img src="/img/features/img35.png" alt="illustration"
  621.                                  srcset="/img/features/img35@2x.png 2x"
  622.                                  class="features-img"/>
  623.                             <h4 class="features-sub-title">Delete link via extension</h4>
  624.                             <p class="features-text">
  625.                                 Open the extension. Navigate to the "folder details" using the "3 dots" button of a
  626.                                 folder. Find a link you want to delete and show its control buttons by hovering
  627.                                 over it. One of those buttons is "Delete". Click it to delete the link.
  628.                             </p>
  629.                         </div>
  630.                     </div>
  631.                     <div class="features-row">
  632.                         <div class="features-col-1 features-col" id="card-36">
  633.                             <img src="/img/features/img36.png" alt="illustration"
  634.                                  srcset="/img/features/img36@2x.png 2x"
  635.                                  class="features-img"/>
  636.                             <h4 class="features-sub-title">Rename link via web app</h4>
  637.                             <p class="features-text">
  638.                                 Open Toast web app <a href="dotoast.com">dotoast.com.</a> Select the needed folder
  639.                                 from the left sidebar by clicking it. To the right you'll see a list of all folder
  640.                                 links. Hover over any of them to show control buttons. One of those is "Rename".
  641.                                 Click it to start renaming.
  642.                             </p>
  643.                         </div>
  644.                         <div class="features-col-2 features-col" id="card-37">
  645.                             <img src="/img/features/img37.png" alt="illustration"
  646.                                  srcset="/img/features/img37@2x.png 2x"
  647.                                  class="features-img"/>
  648.                             <h4 class="features-sub-title">Delete link via web app</h4>
  649.                             <p class="features-text">
  650.                                 Open Toast web app <a href="dotoast.com">dotoast.com.</a> Select the needed folder
  651.                                 from the left sidebar by clicking it. To the right you'll see a list of all folder
  652.                                 links. Hover over any of them to show control buttons. One of those is "Delete".
  653.                                 Click it to delete the link.
  654.                             </p>
  655.                         </div>
  656.                     </div>
  657.                     <h3 class="features-title" id="replace_tabs">
  658.                         Replace Tabs
  659.                     </h3>
  660.                     <div class="features-row">
  661.                         <div class="features-col-1 features-col">
  662.                             <p class="features-text">
  663.                                 If you use your folders for switching between the projects or work and home tabs you
  664.                                 might want to quickly replace the last saved tabs with currently open ones. It's just a
  665.                                 couple clicks task with Toast.
  666.                             </p>
  667.                         </div>
  668.                         <div class="features-col-2 features-col"></div>
  669.                     </div>
  670.                     <div class="features-row">
  671.                         <div class="features-col-1 features-col" id="card-38">
  672.                             <img src="/img/features/img38.png" alt="illustration"
  673.                                  srcset="/img/features/img38@2x.png 2x"
  674.                                  class="features-img"/>
  675.                             <h4 class="features-sub-title">Replace tabs via extension</h4>
  676.                             <p class="features-text">
  677.                                 Open Toast web app <a href="dotoast.com">dotoast.com.</a> Select the needed folder
  678.                                 from the left sidebar by clicking it. To the right you'll see a list of all folder
  679.                                 links. Hover over any of them to show control buttons. One of those is "Delete".
  680.                                 Click it to delete the link.
  681.                             </p>
  682.                         </div>
  683.                         <div class="features-col-2 features-col"></div>
  684.                     </div>
  685.                     <h3 class="features-title" id="add_new_tab">
  686.                         Add New Tabs
  687.                     </h3>
  688.                     <div class="features-row">
  689.                         <div class="features-col-1 features-col">
  690.                             <p class="features-text">
  691.                                 Found a bunch of interesting or useful websites that belong to one of your folders?
  692.                                 There's no need to add them one by one. In just a few clicks you can let Toast add all
  693.                                 of the new tabs to your folder.
  694.                             </p>
  695.                         </div>
  696.                         <div class="features-col-2 features-col">
  697.                             <p class="features-text">
  698.                                 Note, Toast automatically fills the "Add Link" field with the open website's link, so
  699.                                 that you don't even have to copy the link yourself if you want to add a current page.
  700.                             </p>
  701.                         </div>
  702.                     </div>
  703.                     <div class="features-row">
  704.                         <div class="features-col-1 features-col" id="card-40">
  705.                             <img src="/img/features/img39.png" alt="illustration"
  706.                                  srcset="/img/features/img39@2x.png 2x"
  707.                                  class="features-img"/>
  708.                             <h4 class="features-sub-title">Add new tabs by one click</h4>
  709.                             <p class="features-text">
  710.                                 Open the extension. Navigate to the "folder details" using the "3 dots" button of a
  711.                                 folder. Click the "Add New Tabs" button at the bottom right to add all of the new tabs
  712.                                 from your open browser window to the folder.
  713.                             </p>
  714.                         </div>
  715.                         <div class="features-col-2 features-col" id="repl-28">
  716.                             <img src="/img/features/img40new.png" alt="illustration"
  717.                                  srcset="/img/features/img40new@2x.png 2x"
  718.                                  class="features-img"/>
  719.                             <h4 class="features-sub-title">Add new tabs manually</h4>
  720.                             <p class="features-text">
  721.                                 Open the extension. Navigate to the "folder details" using the "3 dots" button of a
  722.                                 folder. Inside the "folder details" page find the "Add Link" button at the bottom.
  723.                                 Click it, paste your link and hit "Enter" key or click "↵Done" to add it.
  724.                             </p>
  725.                         </div>
  726.                     </div>
  727.                     <h3 class="features-title" id="live_sync">
  728.                         Live Synchronization
  729.                     </h3>
  730.                     <div class="features-row">
  731.                         <div class="features-col-1 features-col">
  732.                             <p class="features-text">
  733.                                 Do you know how you can see from your mobile Chrome which tabs are open on your desktop
  734.                                 Chrome? Toast brings that to every browser and across all of them.
  735.                             </p>
  736.                         </div>
  737.                         <div class="features-col-2 features-col">
  738.                             <p class="features-text">
  739.                                 From your mobile, from your Chrome, Safari, Opera or Edge... See what's open on any of
  740.                                 your browsers. This lets you easily continue where you left off on your other device.
  741.                                 Even when you're on the go.
  742.                             </p>
  743.                         </div>
  744.                     </div>
  745.                     <div class="features-row">
  746.                         <div class="features-col-1 features-col" id="card-40">
  747.                             <img src="/img/features/img41.png" alt="illustration"
  748.                                  srcset="/img/features/img41@2x.png 2x"
  749.                                  class="features-img"/>
  750.                             <h4 class="features-sub-title">Activate device</h4>
  751.                             <p class="features-text">
  752.                                 Open the extension. Click the cloud icon in the top to open the Live Synchronization
  753.                                 setup page. Give a name to this browser to easily recognize it later, hit "Enter" key or
  754.                                 click "↵Done" to confirm. That's it, from now on all your open tabs will automatically
  755.                                 be synchronized to Toast.
  756.                             </p>
  757.                         </div>
  758.                         <div class="features-col-2 features-col" id="card-41">
  759.                             <img src="/img/features/img42.png" alt="illustration"
  760.                                  srcset="/img/features/img42@2x.png 2x"
  761.                                  class="features-img"/>
  762.                             <h4 class="features-sub-title">Rename device</h4>
  763.                             <p class="features-text">
  764.                                 Open the extension. Click the cloud icon in the top to open the Live Synchronization
  765.                                 page. Hover over the current browser (first in the list) to see the "Settings" button.
  766.                                 Click it to access this browser's Live Sync settings. Inside, press the browser name to
  767.                                 change it.
  768.                             </p>
  769.                         </div>
  770.                     </div>
  771.                     <div class="features-row">
  772.                         <div class="features-col-1 features-col" id="card-42">
  773.                             <img src="/img/features/img43.png" alt="illustration"
  774.                                  srcset="/img/features/img43@2x.png 2x"
  775.                                  class="features-img"/>
  776.                             <h4 class="features-sub-title">Deactivate device</h4>
  777.                             <p class="features-text">
  778.                                 Open the extension. Click the cloud icon in the top to open the Live Synchronization
  779.                                 page. Hover over the current browser (first in the list) to see the "Settings" button.
  780.                                 Click it to access this browser's Live Sync settings. Inside you'll see a toggle to turn
  781.                                 ON/OFF the synchronization.
  782.                             </p>
  783.                         </div>
  784.                         <div class="features-col-2 features-col" id="card-43">
  785.                             <img src="/img/features/img44.png" alt="illustration"
  786.                                  srcset="/img/features/img44@2x.png 2x"
  787.                                  class="features-img"/>
  788.                             <h4 class="features-sub-title">Open device folder via extension</h4>
  789.                             <p class="features-text">
  790.                                 Open the extension. Click the cloud icon in the top to open the Live Synchronization
  791.                                 page. Navigate to the "folder details" page using the "3 dots" button to the right of
  792.                                 the needed browser. Open all links at once by clicking the "Open Folder" button in the
  793.                                 top right.
  794.                             </p>
  795.                         </div>
  796.                     </div>
  797.                     <div class="features-row">
  798.                         <div class="features-col-1 features-col" id="card-44">
  799.                             <img src="/img/features/img45.png" alt="illustration"
  800.                                  srcset="/img/features/img45@2x.png 2x"
  801.                                  class="features-img"/>
  802.                             <h4 class="features-sub-title">Open device folder via web app</h4>
  803.                             <p class="features-text">
  804.                                 Open Toast web app <a href="dotoast.com">dotoast.com.</a> Find a "Live Synchronization"
  805.                                 item in the left sidebar. Click it to expand/collapse the list of the browsers you have
  806.                                 live synchronization set up for and turned on. Click any of the browsers in the list to
  807.                                 see its tabs on the right side.
  808.                             </p>
  809.                         </div>
  810.                         <div class="features-col-2 features-col"></div>
  811.                     </div>
  812.                     <h3 class="features-title" id="web_app_features">
  813.                         Web App Features
  814.                     </h3>
  815.                     <div class="features-row">
  816.                         <div class="features-col-1 features-col">
  817.                             <p class="features-text">
  818.                                 Toast web app allows you to access all of your saved folder from anywhere you are as
  819.                                 well as every device with a browser. You can literally see your saved links on a smart
  820.                                 TV that has a browser. All you need to do is to navigate to
  821.                                 <a href="dotoast.com">dotoast.com</a> and log into your account.
  822.                             </p>
  823.                         </div>
  824.                         <div class="features-col-2 features-col">
  825.                             <p class="features-text">
  826.                                 In addition to the extension capabilities you can search for a folder or link, move
  827.                                 links between folders, reorder folders and links as you desire.
  828.                             </p>
  829.                         </div>
  830.                     </div>
  831.                     <div class="features-row">
  832.                         <div class="features-col-1 features-col" id="app--4" >
  833.                             <img src="/img/features/img46.png" alt="illustration"
  834.                                  srcset="/img/features/img46@2x.png 2x"
  835.                                  class="features-img"/>
  836.                             <h4 class="features-sub-title">Create folder</h4>
  837.                             <p class="features-text">
  838.                                 Press "Add new folder" button in the bottom left corner. Folder will be added to your
  839.                                 list automatically with a default name. Start typing a new name and press "enter" to
  840.                                 confirm it.
  841.                             </p>
  842.                         </div>
  843.                         <div class="features-col-2 features-col" id="app--8" >
  844.                             <img src="/img/features/img47.png" alt="illustration"
  845.                                  srcset="/img/features/img47@2x.png 2x"
  846.                                  class="features-img"/>
  847.                             <h4 class="features-sub-title">Links preview</h4>
  848.                             <p class="features-text">
  849.                                 Select a needed folder from the list in the left sidebar by clicking it. All your links
  850.                                 will be shown to the right.
  851.                             </p>
  852.                         </div>
  853.                     </div>
  854.                     <div class="features-row">
  855.                         <div class="features-col-1 features-col" id="app--11" >
  856.                             <img src="/img/features/img48.png" alt="illustration"
  857.                                  srcset="/img/features/img48@2x.png 2x"
  858.                                  class="features-img"/>
  859.                             <h4 class="features-sub-title">Rename folder</h4>
  860.                             <p class="features-text">
  861.                                 Select the needed folder from the left sidebar by clicking it. On the right side you'll
  862.                                 see its content. Click the folder name to start renaming process. Once ready press
  863.                                 "Enter" key to confirm it.
  864.                             </p>
  865.                         </div>
  866.                         <div class="features-col-2 features-col" id="app--12" >
  867.                             <img src="/img/features/img49.png" alt="illustration"
  868.                                  srcset="/img/features/img49@2x.png 2x"
  869.                                  class="features-img"/>
  870.                             <h4 class="features-sub-title">Delete folder</h4>
  871.                             <p class="features-text">
  872.                                 Select the needed folder from the left sidebar by clicking it. On the right side you'll
  873.                                 see its content. Find a "Delete" button in the top right corner of the screen. Press it
  874.                                 to delete the folder.
  875.                             </p>
  876.                         </div>
  877.                     </div>
  878.                     <div class="features-row">
  879.                         <div class="features-col-1 features-col" id="card-45">
  880.                             <img src="/img/features/img50.png" alt="illustration"
  881.                                  srcset="/img/features/img50@2x.png 2x"
  882.                                  class="features-img"/>
  883.                             <h4 class="features-sub-title">Reorder links and folders</h4>
  884.                             <p class="features-text">
  885.                                 To reorder folders hover your mouse cursor over any folder. On the right side of it a
  886.                                 "3 lines" button would appear. Use it to grab and move the folder. Follow the same
  887.                                 process to reorder the links by hovering over any of them.
  888.                             </p>
  889.                         </div>
  890.                         <div class="features-col-2 features-col" id="app--19" >
  891.                             <img src="/img/features/img51.png" alt="illustration"
  892.                                  srcset="/img/features/img51@2x.png 2x"
  893.                                  class="features-img"/>
  894.                             <h4 class="features-sub-title">Folder share link</h4>
  895.                             <p class="features-text">
  896.                                 Select the needed folder from the left sidebar by clicking it. Find a "Share" button in
  897.                                 the top right corner of the screen. Click it to see 2 sharing options. Pick "Share
  898.                                 Link".
  899.                             </p>
  900.                         </div>
  901.                     </div>
  902.                     <div class="features-row">
  903.                         <div class="features-col-1 features-col" id="app--20" >
  904.                             <img src="/img/features/img52.png" alt="illustration"
  905.                                  srcset="/img/features/img52@2x.png 2x"
  906.                                  class="features-img"/>
  907.                             <h4 class="features-sub-title">Share folder via email</h4>
  908.                             <p class="features-text">
  909.                                 Select the needed folder from the left sidebar by clicking it. Find a "Share" button in
  910.                                 the top right corner of the screen. Click it to see 2 sharing options. Pick "Email
  911.                                 Folder". Enter the recipient's email to send it.
  912.                             </p>
  913.                         </div>
  914.                         <div class="features-col-2 features-col" id="app--24" >
  915.                             <img src="/img/features/img53.png" alt="illustration"
  916.                                  srcset="/img/features/img53@2x.png 2x"
  917.                                  class="features-img"/>
  918.                             <h4 class="features-sub-title">Activate folder collaboration </h4>
  919.                             <p class="features-text">
  920.                                 Select the needed folder from the left sidebar by clicking it. Find a "Collaborate"
  921.                                 button in the top right corner of the screen. In its dropdown click the toggle to turn
  922.                                 collaboration on/off.
  923.                             </p>
  924.                         </div>
  925.                     </div>
  926.                     <div class="features-row">
  927.                         <div class="features-col-1 features-col" id="app--25">
  928.                             <img src="/img/features/img54.png" alt="illustration"
  929.                                  srcset="/img/features/img54@2x.png 2x"
  930.                                  class="features-img"/>
  931.                             <h4 class="features-sub-title">Invite and remove users for collaboration</h4>
  932.                             <p class="features-text">
  933.                                 Select the needed folder from the left sidebar by clicking it. Find a "Collaborate"
  934.                                 button in the top right corner of the screen. In its dropdown click "invite new member"
  935.                                 to add a person by email or Click delete icon next to the invited user to reject access.
  936.                             </p>
  937.                         </div>
  938.                         <div class="features-col-2 features-col" id="app--26">
  939.                             <img src="/img/features/img55.png" alt="illustration"
  940.                                  srcset="/img/features/img55@2x.png 2x"
  941.                                  class="features-img"/>
  942.                             <h4 class="features-sub-title">Deactivate folder collaboration</h4>
  943.                             <p class="features-text">
  944.                                 Select the needed folder from the left sidebar by clicking it. Find a "Collaborate"
  945.                                 button in the top right corner of the screen. In its dropdown click the toggle to turn
  946.                                 collaboration on/off. Once deactivated, all collaborators will lose access to it.
  947.                             </p>
  948.                         </div>
  949.                     </div>
  950.                     <div class="features-row">
  951.                         <div class="features-col-1 features-col" id="app--31">
  952.                             <img src="/img/features/img56.png" alt="illustration"
  953.                                  srcset="/img/features/img56@2x.png 2x"
  954.                                  class="features-img"/>
  955.                             <h4 class="features-sub-title">Add link to folder</h4>
  956.                             <p class="features-text">
  957.                                 Select the needed folder from the left sidebar by clicking it. Find a "Add Link" button
  958.                                 at the end of the links list on the right. Click it, paste your link and hit "Enter" key
  959.                                 or click "↵Done" to add it.
  960.                             </p>
  961.                         </div>
  962.                         <div class="features-col-2 features-col" id="app--33">
  963.                             <img src="/img/features/img57.png" alt="illustration"
  964.                                  srcset="/img/features/img57@2x.png 2x"
  965.                                  class="features-img"/>
  966.                             <h4 class="features-sub-title">Open link from folder</h4>
  967.                             <p class="features-text">
  968.                                 Select the needed folder from the left sidebar by clicking it. To the right you'll see
  969.                                 a list of all folder links. Click one or multiple to open a link in a new tab.
  970.                             </p>
  971.                         </div>
  972.                     </div>
  973.                     <div class="features-row">
  974.                         <div class="features-col-1 features-col" id="app--36">
  975.                             <img src="/img/features/img58.png" alt="illustration"
  976.                                  srcset="/img/features/img58@2x.png 2x"
  977.                                  class="features-img"/>
  978.                             <h4 class="features-sub-title">Rename link in folder</h4>
  979.                             <p class="features-text">
  980.                                 Select the needed folder from the left sidebar by clicking it. To the right you'll see
  981.                                 a list of all folder links. Hover over any of them to show control buttons. One of
  982.                                 those is "Rename". Click it to start renaming.
  983.                             </p>
  984.                         </div>
  985.                         <div class="features-col-2 features-col" id="app--37">
  986.                             <img src="/img/features/img59.png" alt="illustration"
  987.                                  srcset="/img/features/img59@2x.png 2x"
  988.                                  class="features-img"/>
  989.                             <h4 class="features-sub-title">Delete link from folder</h4>
  990.                             <p class="features-text">
  991.                                 Select the needed folder from the left sidebar by clicking it. To the right you'll see
  992.                                 a list of all folder links. Hover over any of them to show control buttons. One of
  993.                                 those is "Delete". Click it to delete the link.
  994.                             </p>
  995.                         </div>
  996.                     </div>
  997.                     <div class="features-row">
  998.                         <div class="features-col-1 features-col" id="app--44">
  999.                             <img src="/img/features/img60.png" alt="illustration"
  1000.                                  srcset="/img/features/img60@2x.png 2x"
  1001.                                  class="features-img"/>
  1002.                             <h4 class="features-sub-title">Open device folder for live synchronization</h4>
  1003.                             <p class="features-text">
  1004.                                 Find a "Live Synchronization" item in the left sidebar. Click it to expand/collapse the
  1005.                                 list of the browsers you have live synchronization set up for and turned on. Click any
  1006.                                 of the browsers in the list to see its tabs on the right side.
  1007.                             </p>
  1008.                         </div>
  1009.                         <div class="features-col-2 features-col" id="card-46">
  1010.                             <img src="/img/features/img61.png" alt="illustration"
  1011.                                  srcset="/img/features/img61@2x.png 2x"
  1012.                                  class="features-img"/>
  1013.                             <h4 class="features-sub-title">Search via web app</h4>
  1014.                             <p class="features-text">
  1015.                                 At the top you'll see a search field. Use it to search for a folder or a link using
  1016.                                 their names or URL (for a link). Once found you can open this folder content or open a
  1017.                                 link in a new tab.
  1018.                             </p>
  1019.                         </div>
  1020.                     </div>
  1021.                     <h3 class="features-title" id="shortcuts">
  1022.                         Shortcuts
  1023.                     </h3>
  1024.                     <div class="features-row">
  1025.                         <div class="features-col-1 features-col">
  1026.                             <p class="features-text">
  1027.                                 Toast is where you want it and how you want it. Like using a small native browser
  1028.                                 extension? Prefer having a full web app as your new tab page? Want to stay within your
  1029.                                 context and use context menus? It's there plus the keyboard shortcuts for true
  1030.                                 power-users.
  1031.                             </p>
  1032.                         </div>
  1033.                         <div class="features-col-2 features-col">
  1034.                             <p class="features-text">
  1035.                                 Note, shortcuts won't work on internal browser pages, like New Tab, browser settings
  1036.                                 etc. If the shortcuts don't work at all for you, try checking if they were set
  1037.                                 automatically by going to "Extensions" → "Keyboard Shortcuts" page in browser settings.
  1038.                                 There you can also set your own shortcuts.
  1039.                             </p>
  1040.                         </div>
  1041.                     </div>
  1042.                     <div class="features-row">
  1043.                         <div class="features-col-1 features-col" id="app--2">
  1044.                             <img src="/img/features/img62.png" alt="illustration"
  1045.                                  srcset="/img/features/img62@2x.png 2x"
  1046.                                  class="features-img"/>
  1047.                             <h4 class="features-sub-title">Create folder</h4>
  1048.                             <p class="features-text">
  1049.                                 On any website press Ctrl+Shift+S (both Mac and PC) to show the Toast popup window with
  1050.                                 the folder creation process. Just like in the extension, you can name the folder,
  1051.                                 rename and delete links before saving.
  1052.                             </p>
  1053.                         </div>
  1054.                         <div class="features-col-2 features-col" id="app--16">
  1055.                             <img src="/img/features/img63.png" alt="illustration"
  1056.                                  srcset="/img/features/img63@2x.png 2x"
  1057.                                  class="features-img"/>
  1058.                             <h4 class="features-sub-title">Create folder share link</h4>
  1059.                             <p class="features-text">
  1060.                                 On any website press Ctrl+Shift+E (both Mac and PC) to show the Toast popup window with
  1061.                                 the folder creation & sharing process. After a folder creation a sharable web link
  1062.                                 will be copied to your clipboard.
  1063.                             </p>
  1064.                         </div>
  1065.                     </div>
  1066.                     <div class="features-row">
  1067.                         <div class="features-col-1 features-col" id="app--29">
  1068.                             <img src="/img/features/img64.png" alt="illustration"
  1069.                                                          srcset="/img/features/img64@2x.png 2x"
  1070.                                                          class="features-img"/>
  1071.                             <h4 class="features-sub-title">Add current page to folder</h4>
  1072.                             <p class="features-text">
  1073.                                 On any website press Ctrl+Shift+U (both Mac and PC) to show the Toast popup window with
  1074.                                 the link adding process. Name the link before saving or keep its own title. Select the
  1075.                                 folder you'd like the link to be added to.
  1076.                             </p>
  1077.                         </div>
  1078.                         <div class="features-col-2 features-col"></div>
  1079.                     </div>
  1080.                 </div>
  1081.             </div>
  1082.         </div>
  1083.         <div class="video-popup">
  1084.             <div class="video-popup-container">
  1085.                 <button class="video-close"><img src="{{ asset('img/Close.svg') }}" alt=""></button>
  1086.                 <video id="video" src="" width="100%" height="auto" controls autoplay muted></video>
  1087.             </div>
  1088.         </div>
  1089.     </main>
  1090. {% endblock %}
  1091. {% block javascripts %}
  1092.     <script src="{{ asset('js/jquery.main.js') }}"></script>
  1093.     <script src="{{ asset('js/features.js') }}"></script>
  1094. {% endblock %}