cloudron-box/src/views/branding.html

<!-- Modal change avatar -->
<div class="modal fade" id="avatarChangeModal" tabindex="-1" role="dialog">
  <div class="modal-dialog">
      <div class="modal-content">
          <div class="modal-header">
              <h4 class="modal-title">Choose Cloudron Avatar</h4>
          </div>
          <div class="modal-body branding-avatar-selector">
              <img id="previewAvatar" width="128" height="128" ng-src="{{ avatarChange.avatarUrl() }}"/>
              <input type="file" id="avatarFileInput" style="display: none" accept="image/*"/>

              <br/>
              <br/>

              <div class="grid">
                  <div class="item" ng-repeat="avatar in avatarChange.availableAvatars" style="background-image: url('{{avatar.data || avatar.url}}');" ng-click="avatarChange.setPreviewAvatar(avatar)"></div>
                  <div class="item add" ng-click="avatarChange.showCustomAvatarSelector()"></div>
              </div>
          </div>
          <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
              <button type="button" class="btn btn-success" ng-click="avatarChange.setAvatar()"> Select</button>
          </div>
      </div>
  </div>
</div>

<div class="content">

  <div class="text-left">
    <h1>Branding</h1>
  </div>

  <div class="card" style="margin-bottom: 15px;">

    <div class="row">
      <div class="col-md-12">
        <form role="form" name="aboutForm" ng-submit="about.submit()" autocomplete="off">
          <fieldset>
            <div class="form-group" ng-class="{ 'has-error': (aboutForm.name.$dirty && aboutForm.name.$invalid) }">
              <label class="control-label">Cloudron Name</label>
              <div class="control-label" ng-show="about.error.cloudronName">{{about.error.cloudronName}}</div>
              <input type="text" class="form-control" id="inputCloudronName" name="name" ng-model="about.cloudronName">
            </div>

            <div class="form-group">
              <div>
                <label class="control-label">Logo</label>
              </div>
              <div class="branding-avatar" ng-click="avatarChange.showChangeAvatar()">
                <img ng-src="{{ about.avatarUrl() }}"/>
                <div class="overlay"></div>
              </div>
            </div>

            <input class="ng-hide" type="submit" ng-disabled="(!about.avatar && !aboutForm.$dirty) || aboutForm.$invalid || about.busy"/>
          </fieldset>
        </form>
      </div>
    </div>

    <div class="row">
      <div class="col-md-12 text-right">
        <button class="btn btn-outline btn-primary pull-right" ng-click="about.submit()" ng-disabled="(!about.avatar && !aboutForm.$dirty) || aboutForm.$invalid || about.busy"><i class="fa fa-circle-notch fa-spin" ng-show="about.busy"></i> Save</button>
      </div>
    </div>

  </div>

  <div class="text-left">
    <h3>Footer</h3>
  </div>

  <div class="card">
    <div class="row">
      <div class="col-md-12">
        <p ng-hide="config.features.branding">Customizing the footer is only available in the business plan.</p>

        <div ng-show="config.features.branding">
          <form role="form" name="footerForm" autocomplete="off">
            <p">Use <a href="https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet" target="_blank">markdown</a> to style the footer.</p>
            <textarea name="footer" class="form-control" ng-model="footer.content" ng-disabled="footer.busy"></textarea>
          </form>
        </div>
      </div>
    </div>

    <br/>

    <div class="row">
      <div class="col-md-12 text-right">
        <button class="btn btn-outline btn-primary pull-right" ng-click="footer.submit()" ng-disabled="!footerForm.$dirty || footerForm.$invalid || footer.busy"><i class="fa fa-circle-notch fa-spin" ng-show="footer.busy"></i> Save</button>
      </div>
    </div>

  </div>
</div>