X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2Fmodal%2Fwelcome-modal.component.html;h=8bfcc4bf69fd495b803288a744a894c833725fc1;hb=ebefc902f59be6c5542c19ff706e310d9dddf75f;hp=79e6d4667f2e838312f8712b235e6213436bf921;hpb=589d9f55f6f3f0d069d4bbb207d3d20769cc4ded;p=github%2FChocobozzz%2FPeerTube.git

diff --git a/client/src/app/modal/welcome-modal.component.html b/client/src/app/modal/welcome-modal.component.html
index 79e6d4667..8bfcc4bf6 100644
--- a/client/src/app/modal/welcome-modal.component.html
+++ b/client/src/app/modal/welcome-modal.component.html
@@ -1,68 +1,91 @@
 <ng-template #modal let-hide="close">
   <div class="modal-header">
-    <h4 i18n class="modal-title">Welcome on PeerTube dear administrator!</h4>
+    <h4 i18n class="modal-title">Welcome to PeerTube, dear administrator!</h4>
     <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
   </div>
 
   <div class="modal-body">
 
-    <div class="block-links">
-      <div i18n class="subtitle">Useful links</div>
-
-      <ul>
-        <li i18n>
-          Official PeerTube website: <a href="https://joinpeertube.org" target="_blank" rel="noopener noreferrer">https://joinpeertube.org</a>
-        </li>
-
-        <li i18n>
-          Discover CLI PeerTube tools (to upload or import videos, parse logs, prune storage directories, reset user password...):
-          <a href="https://docs.joinpeertube.org/#/maintain-tools" target="_blank" rel="noopener noreferrer">https://docs.joinpeertube.org/#/maintain-tools</a>
-        </li>
-
-        <li i18n>
-          Understand how to administer your instance (managing users, following other instances, dealing with spammers...):
-          <a href="https://docs.joinpeertube.org/#/admin-following-instances" target="_blank" rel="noopener noreferrer">https://docs.joinpeertube.org/#/admin-following-instances</a>
-        </li>
-
-        <li i18n>
-          Learn how to use PeerTube (setup your account, managing video playlists, discover third-party applications...):
-          <a href="https://docs.joinpeertube.org/#/use-setup-account" target="_blank" rel="noopener noreferrer">https://docs.joinpeertube.org/#/use-setup-account</a>
-        </li>
-      </ul>
+    <div class="block-documentation">
+      <div class="columns">
+        <a class="link-block" href="https://docs.joinpeertube.org/#/maintain-tools" target="_blank" rel="noopener noreferrer">
+          <a i18n class="link-title" href="https://docs.joinpeertube.org/#/maintain-tools" target="_blank" rel="noopener noreferrer">CLI
+            documentation</a>
+
+          <div i18n>Upload or import videos, parse logs, prune storage directories, reset user password...</div>
+        </a>
+
+        <a class="link-block" href="https://docs.joinpeertube.org/#/admin-following-instances" target="_blank" rel="noopener noreferrer">
+          <a i18n class="link-title" href="https://docs.joinpeertube.org/#/admin-following-instances" target="_blank" rel="noopener noreferrer">Administer
+            documentation</a>
+
+          <div i18n>Managing users, following other instances, dealing with spammers...</div>
+        </a>
+
+        <a class="link-block" href="https://docs.joinpeertube.org/#/use-setup-account" target="_blank" rel="noopener noreferrer">
+          <a i18n class="link-title" href="https://docs.joinpeertube.org/#/use-setup-account" target="_blank" rel="noopener noreferrer">Use
+            documentation</a>
+
+          <div i18n>Setup your account, managing video playlists, discover third-party applications...</div>
+        </a>
+      </div>
     </div>
 
-    <div class="block-configuration">
-      <div i18n class="subtitle">Configure your instance</div>
+    <div class="two-columns">
 
-      <p i18n>
-        Now it's time to configure your instance! Choosing your <strong>instance name</strong>, <strong>setting up a description</strong>,
-        specifying <strong>who you are</strong> and <strong>how long</strong> you plan to <strong>maintain your instance</strong>
-        is very important for visitors to understand on what type of instance they are.
-      </p>
+      <div class="mascot">
+        <img src="/client/assets/images/mascot/pointing.png" alt="mascot">
+      </div>
 
-      <p i18n>
-        If you want to open registrations, please decide what are <strong>your moderation rules</strong>, fill your <strong>instance terms</strong>
-        and specify the categories and languages you speak. This way, users that are looking for a PeerTube instance on which they can register
-        will be able to choose <strong>the right one</strong>.
-      </p>
+      <div class="block-links">
+        <div i18n class="subtitle">Useful links</div>
 
-      <div class="configure-instance">
-        <a i18n href="/admin/config/edit-custom" target="_blank" rel="noopener noreferrer">Configure your instance</a>
+        <ul>
+          <li i18n>Official PeerTube website (news, support, contribute...): <a href="https://joinpeertube.org" target="_blank"
+                                                                           rel="noopener noreferrer">https://joinpeertube.org</a></li>
+
+          <li i18n>Put your instance on the public PeerTube index: <a href="https://instances.joinpeertube.org/instances">https://instances.joinpeertube.org/instances</a>
+          </li>
+        </ul>
       </div>
     </div>
 
-    <div class="block-instance">
-      <div i18n class="subtitle">Index your instance</div>
+    <div class="two-columns">
+      <div class="mascot">
+        <img src="/client/assets/images/mascot/happy.png" alt="mascot">
+      </div>
+
+      <div class="block-configuration">
+        <div i18n class="subtitle">It's time to configure your instance!</div>
 
-      <ng-container i18n>
-        If you want, you can index your PeerTube instance on the public PeerTube instances list:
-        <a href="https://instances.joinpeertube.org/instances">https://instances.joinpeertube.org/instances</a>
-      </ng-container>
+        <p i18n>
+          Choosing your <strong>instance name</strong>, <strong>setting up a description</strong>, specifying <strong>who you are</strong>,
+          why <strong>you created your instance</strong> and <strong>how long</strong> you plan to <strong>maintain your it</strong>
+          is very important for visitors to understand on what type of instance they are.
+        </p>
+
+        <p i18n>
+          If you want to open registrations, please decide what are <strong>your moderation rules</strong>, fill your <strong>instance
+          terms</strong>
+          and specify the categories and languages you speak. This way, you will help users to register on <strong>the
+          appropriate</strong>
+          PeerTube instance.
+        </p>
+      </div>
     </div>
   </div>
 
   <div class="modal-footer inputs">
-    <span i18n class="action-button action-button-submit" (click)="hide()">Understood!</span>
+    <input
+      type="button" role="button" i18n-value value="Remind me later" class="action-button action-button-understood"
+      (click)="hide()" (key.enter)="hide()"
+    >
+
+    <a i18n (click)="doNotOpenAgain(); hide()" (key.enter)="doNotOpenAgain(); hide()"
+       class="configure-instance-button" href="/admin/config/edit-custom" target="_blank"
+       rel="noopener noreferrer" ngbAutofocus>
+      Configure my instance
+    </a>
   </div>
 
 </ng-template>