core/templates/pages/android-page/android-page.component.html - develop - githubmirror/oppia

core/templates/pages/android-page/android-page.component.html
243 строки14 KB
Basavaraj Ningasani
Fix part of #26108: Fix strict template checks for blog dashboard files. (#26866)
29 июл 2026, 20:13
29 июл 2026, 20:13d9d66af
<div class="oppia-android-page-container overflow-hidden">
  <div class="oppia-android-page">
    <div class="container ps-0">
      <div class="row gx-3">
        <div class="col-sm-6 col-8 px-3">
          <div class="oppia-android-main-body">
            <div class="oppia-android-main-text oppia-android-text-color">
              <div>
                {{ 'I18N_ANDROID_PAGE_AVAILABLE_FOR_DOWNLOAD_TEXT' | translate }}
              </div>
            </div>
            <div class="oppia-android-beta-description-container">
              <p class="oppia-android-beta-description"
                 [innerHTML]="'I18N_ANDROID_PAGE_BETA_DESCRIPTION' | translate">
              </p>
              <p class="oppia-mobile-only oppia-android-support-text">
                {{ 'I18N_ANDROID_PAGE_SUPPORT_TEXT' | translate }}
              </p>
              <a [href]="ANDROID_APP_URL" target="_blank" rel="noopener">
                <img class="oppia-android-google-play-logo e2e-test-play-store-redirect-img"
                     src="/assets/images/android/android-landing-google-play.svg"
                     alt="Link to Android app page">
              </a>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-4 px-3">
          <img class="oppia-android-hero-image"
               src="/assets/images/android/android-landing-0.svg"
               alt="Image showing the application in use">
        </div>
      </div>
    </div>

    <div class="oppia-android-learners-review">
      <div class="oppia-android-main-text oppia-android-text-color oppia-android-learners-review-text">
        {{ 'I18N_ANDROID_PAGE_REVIEWS_SECTION_HEADER' | translate }}
      </div>
      <div class="oppia-android-review-section-5-star-container">
        <img class="oppia-android-5-star-image" src="/assets/images/android/android-reviews-5-star.svg" alt="Image of 5 stars">
      </div>
      <div class="oppia-android-review-section row gx-3">
        <div class="oppia-android-review-component col-md-4 px-3">
          <div class="oppia-android-review-text">
            {{ 'I18N_ANDROID_PAGE_REVIEWS_REVIEW_1' | translate }}
          </div>
          <div class="oppia-android-reviewer">{{ 'I18N_ANDROID_PAGE_REVIEWS_REVIEWER_1' | translate }}</div>
        </div>
        <div class="oppia-android-review-component col-md-4 px-3">
          <div class="oppia-android-review-text">
            {{ 'I18N_ANDROID_PAGE_REVIEWS_REVIEW_2' | translate }}
          </div>
          <div class="oppia-android-reviewer">{{ 'I18N_ANDROID_PAGE_REVIEWS_REVIEWER_2' | translate }}</div>
        </div>
        <div class="oppia-android-review-component col-md-4 px-3">
          <div class="oppia-android-review-text">
            {{ 'I18N_ANDROID_PAGE_REVIEWS_REVIEW_3' | translate }}
          </div>
          <div class="oppia-android-reviewer">{{ 'I18N_ANDROID_PAGE_REVIEWS_REVIEWER_3' | translate }}</div>
        </div>
      </div>
    </div>
    <div class="oppia-android-features oppia-android-features-tablet">
      <p class="oppia-android-features-main-text"
         [innerHTML]="'I18N_ANDROID_PAGE_FEATURES_SECTION_HEADER' | translate">
      </p>
      <div class="container">
        <div class="row gx-0">
          <div class="oppia-android-key-feature-image-container">
            <img *ngIf="featuresShown === 0" class="oppia-android-key-feature-image" src="/assets/images/android/android-landing-1.svg" alt="Image showing the story page">
            <img *ngIf="featuresShown === 1" class="oppia-android-key-feature-image" src="/assets/images/android/android-landing-2.svg" alt="Image showing a lesson being played">
            <img *ngIf="featuresShown === 2" class="oppia-android-key-feature-image" src="/assets/images/android/android-landing-3.svg" alt="Image showing the lesson in different languages">
            <img *ngIf="featuresShown === 3" class="oppia-android-key-feature-image" src="/assets/images/android/android-landing-4.svg" alt="Image showing that maintaining different profiles are possible">
          </div>
        </div>
        <div class="oppia-android-key-feature-container row gx-3">
          <div class="oppia-android-key-feature-description col-12 px-3">
            <div *ngIf="featuresShown === 0" class="oppia-android-key-feature text-center">
              <div class="oppia-android-key-feature-text oppia-android-text-color">
                {{ 'I18N_ANDROID_PAGE_FEATURE_TEXT_1' | translate }}
              </div>
              <div class="oppia-android-key-feature-subtext">
                {{ 'I18N_ANDROID_PAGE_FEATURE_SUBTEXT_1' | translate }}
              </div>
            </div>
            <div *ngIf="featuresShown === 1" class="oppia-android-key-feature text-center">
              <div class="oppia-android-key-feature-text oppia-android-text-color">
                {{ 'I18N_ANDROID_PAGE_FEATURE_TEXT_2' | translate }}
              </div>
              <div class="oppia-android-key-feature-subtext">
                {{ 'I18N_ANDROID_PAGE_FEATURE_SUBTEXT_2' | translate }}
              </div>
            </div>
            <div *ngIf="featuresShown === 2" class="oppia-android-key-feature text-center">
              <div class="oppia-android-key-feature-text oppia-android-text-color">
                {{ 'I18N_ANDROID_PAGE_FEATURE_TEXT_3' | translate }}
              </div>
              <div class="oppia-android-key-feature-subtext mb-4"
                   [innerHTML]="'I18N_ANDROID_PAGE_FEATURE_SUBTEXT_3' | translate">
              </div>
              <div class="oppia-android-key-feature-subtext"
                   [innerHTML]="'I18N_ANDROID_PAGE_FEATURE_SUBTEXT_4' | translate">
              </div>
            </div>
            <div *ngIf="featuresShown === 3" class="oppia-android-key-feature text-center">
              <div class="oppia-android-key-feature-text oppia-android-text-color mb-5">
                {{ 'I18N_ANDROID_PAGE_FEATURE_TEXT_4' | translate }}
              </div>
              <div class="oppia-android-key-feature-subtext">
                {{ 'I18N_ANDROID_PAGE_FEATURE_SUBTEXT_5' | translate }}
              </div>
            </div>
          </div>
        </div>
        <div class="oppia-android-carousel-item-container row gx-3">
          <button class="oppia-android-carousel-item" [ngClass]="{'oppia-android-carousel-item-active': featuresShown === 0}" (click)="changeFeaturesShown(0)"></button>
          <button class="oppia-android-carousel-item" [ngClass]="{'oppia-android-carousel-item-active': featuresShown === 1}" (click)="changeFeaturesShown(1)"></button>
          <button class="oppia-android-carousel-item" [ngClass]="{'oppia-android-carousel-item-active': featuresShown === 2}" (click)="changeFeaturesShown(2)"></button>
          <button class="oppia-android-carousel-item" [ngClass]="{'oppia-android-carousel-item-active': featuresShown === 3}" (click)="changeFeaturesShown(3)"></button>
        </div>
      </div>
    </div>
    <div class="oppia-android-features-web oppia-android-empty-div"></div>
    <div class="oppia-android-features oppia-android-features-web oppia-web-only container mb-5">
      <span [innerHTML]="'I18N_ANDROID_PAGE_FEATURES_SECTION_HEADER' | translate"
            class="oppia-android-features-main-text row">
      </span>
      <div class="oppia-android-key-feature-container row">
        <div class="oppia-android-key-feature-description col-md-5 ps-0 px-3">
          <div class="oppia-android-key-feature">
            <div class="oppia-android-key-feature-text oppia-android-text-color">{{ 'I18N_ANDROID_PAGE_FEATURE_TEXT_1' | translate }}</div>
            <div class="oppia-android-key-feature-subtext">{{ 'I18N_ANDROID_PAGE_FEATURE_SUBTEXT_1' | translate }}</div>
          </div>
          <div class="oppia-android-key-feature">
            <div class="oppia-android-key-feature-text oppia-android-text-color">{{ 'I18N_ANDROID_PAGE_FEATURE_TEXT_2' | translate }}</div>
            <div class="oppia-android-key-feature-subtext">{{ 'I18N_ANDROID_PAGE_FEATURE_SUBTEXT_2' | translate }}</div>
          </div>
          <div class="oppia-android-key-feature">
            <div class="oppia-android-key-feature-text oppia-android-text-color">{{ 'I18N_ANDROID_PAGE_FEATURE_TEXT_3' | translate }}</div>
            <div class="oppia-android-key-feature-subtext mb-4"
                 [innerHTML]="'I18N_ANDROID_PAGE_FEATURE_SUBTEXT_3' | translate">
            </div>
            <div class="oppia-android-key-feature-subtext"
                 [innerHTML]="'I18N_ANDROID_PAGE_FEATURE_SUBTEXT_4' | translate">
            </div>
          </div>
          <div class="oppia-android-key-feature">
            <div class="oppia-android-key-feature-text oppia-android-text-color">{{ 'I18N_ANDROID_PAGE_FEATURE_TEXT_4' | translate }}</div>
            <div class="oppia-android-key-feature-subtext">{{ 'I18N_ANDROID_PAGE_FEATURE_SUBTEXT_5' | translate }}</div>
          </div>
        </div>
        <div class="oppia-android-key-feature-image-container oppia-web-only col-md-7 px-3">
          <div class="row oppia-android-carousel-direction">
            <button class="col-md-2 px-3 align-self-center oppia-android-carousel-button" (click)="changeFeaturesShown((3 + featuresShown) % 4)">
              <i class="fas fa-chevron-left oppia-android-carousel-chevron float-end "></i>
            </button>
            <div class="oppia-android-key-feature-image-container col-md-8">
              <img *ngIf="featuresShown === 0" class="oppia-android-key-feature-image" src="/assets/images/android/android-landing-1.svg" alt="Image showing the story page">
              <img *ngIf="featuresShown === 1" class="oppia-android-key-feature-image" src="/assets/images/android/android-landing-2.svg" alt="Image showing a lesson being played">
              <img *ngIf="featuresShown === 2" class="oppia-android-key-feature-image" src="/assets/images/android/android-landing-3.svg" alt="Image showing the lesson in different languages">
              <img *ngIf="featuresShown === 3" class="oppia-android-key-feature-image" src="/assets/images/android/android-landing-4.svg" alt="Image showing that maintaining different profiles are possible">
            </div>
            <div class="col-md-2 px-3 align-self-center" (click)="changeFeaturesShown((5 + featuresShown) % 4)">
              <i class="fas fa-chevron-right oppia-android-carousel-chevron"></i>
            </div>
          </div>
          <div class="oppia-android-carousel-item-container row oppia-android-carousel-direction">
            <button class="oppia-android-carousel-item" [ngClass]="{'oppia-android-carousel-item-active': featuresShown === 0}" (click)="changeFeaturesShown(0)"></button>
            <button class="oppia-android-carousel-item" [ngClass]="{'oppia-android-carousel-item-active': featuresShown === 1}" (click)="changeFeaturesShown(1)"></button>
            <button class="oppia-android-carousel-item" [ngClass]="{'oppia-android-carousel-item-active': featuresShown === 2}" (click)="changeFeaturesShown(2)"></button>
            <button class="oppia-android-carousel-item" [ngClass]="{'oppia-android-carousel-item-active': featuresShown === 3}" (click)="changeFeaturesShown(3)"></button>
          </div>
        </div>
      </div>
    </div>
    <div class="oppia-android-app-updates-container oppia-android-app-updates-background">
      <div class="container oppia-android-app-updates-content">
        <div class="row">
          <div class="oppia-android-updates-text-container col-md-6 px-3 col-12">
            <div class="oppia-android-updates-main-text"
                 [innerHTML]="'I18N_ANDROID_PAGE_UPDATES_MAIN_TEXT' | translate">
            </div>
            <div class="oppia-android-sub-text oppia-android-updates-sub-text mb-5 pe-5"
                 [innerHTML]="'I18N_ANDROID_PAGE_UPDATES_SUBTEXT' | translate">
            </div>
          </div>
          <div *ngIf="!userHasSubscribed"
               class="oppia-android-updates-input-container col-md-6 px-3 col-12">
            <div>
              <div class="oppia-android-updates-input-label">{{ 'I18N_ANDROID_PAGE_NAME_FIELD_LABEL' | translate }}</div>
              <input class="oppia-android-updates-input w-100"
                     type="text"
                     [(ngModel)]="name"
                     [ngModelOptions]="{standalone: true}">
            </div>
            <div class="oppia-android-updates-input-padding">
              <div class="oppia-android-updates-input-label">
                {{ 'I18N_ANDROID_PAGE_EMAIL_FIELD_LABEL' | translate }}
                <span class="oppia-android-updates-asterisk-color">*</span>
              </div>
              <input class="oppia-android-updates-input w-100"
                     type="email"
                     [(ngModel)]="emailAddress"
                     [ngModelOptions]="{standalone: true}"
                     required="true">
              <div *ngIf="emailAddress && !validateEmailAddress()" class="text-danger">
                Please enter a valid email address.
              </div>
            </div>
            <div class="oppia-android-updates-input-padding">
              <input class="oppia-android-updates-checkbox"
                     [(ngModel)]="userCanSubscribe"
                     type="checkbox">
              <span class="oppia-android-updates-checkbox-label">
                {{ 'I18N_ANDROID_PAGE_CONSENT_CHECKBOX_LABEL' | translate }}
                <span class="oppia-android-updates-asterisk-color">*</span>
              </span>
            </div>
            <div *ngIf="emailAddress && !userCanSubscribe" class="text-danger">
              Please confirm before subscribing.
            </div>
            <div class="oppia-android-updates-input-padding text-center">
              <oppia-primary-button (onClickPrimaryButton)="subscribeToAndroidList()"
                                    [disabled]="!userCanSubscribe || !validateEmailAddress()"
                                    [customClasses]="['btn', 'oppia-android-updates-button', 'w-100']"
                                    [buttonText]="'I18N_ANDROID_PAGE_UPDATES_SUBMIT_BUTTON_TEXT' | translate">
              </oppia-primary-button>
            </div>
          </div>
          <div *ngIf="userHasSubscribed"
               class="oppia-android-updates-input-container col-md-6 px-3 col-12 oppia-android-sub-text">
            You have subscribed to receive updates!
          </div>
        </div>
      </div>
      <div class="container">
        <img class="oppia-android-avatar-img mx-auto d-block" [src]="OPPIA_AVATAR_IMAGE_URL" alt="Image of Oppia mascot">
      </div>
    </div>
    <div class="oppia-android-app-updates-background oppia-android-otter-help-container">
    </div>
  </div>
</div>