Social Banner Starter

angular.json

            "styles": [
              "src/styles.css",
              "./node_modules/materialize-css/dist/css/materialize.css"
            ],
            "scripts": [
              "./node_modules/materialize-css/dist/js/materialize.js"
            ]

app.component.css

.banner {
  display: flex;
  justify-content: center;
  padding: 10px;
}

.badge {
  cursor: pointer;
  display: inline-block;
  float: none;
}

.banner-text {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  padding: 10px;
  text-align: center;
}

.settings {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 50%;
  margin: auto;
  padding: 30px 0 20px 0;
}

.colors {
  display: flex;
  justify-content: center;
}

.horizontal {
  display: flex;
}

.horizontalRev {
  display: flex;
  flex-direction: row-reverse;
}

.vertical {
  display: flex;
  flex-direction: column;
}

.verticalRev {
  display: flex;
  flex-direction: column-reverse;
}

app.component.html

<!-- Component Navbar -->
<nav>
  <div class="nav-wrapper black">
    <a class="brand-logo">Social Banners</a>
    <a href="#" class="brand-logo center">
      Pobierz
    </a>
    <ul id="nav-mobile" class="right hide-on-med-and-down">
      <li><a>Horizontal</a></li>
      <li><a>Horizontal Reverse</a></li>
      <li><a>Vertical</a></li>
      <li><a>Vertical Reverse</a></li>
    </ul>
  </div>
</nav>
<!-- Component Navbar End -->

<div>
  <!-- Component Banner -->
  <div class="banner">
    <div class="banner-text">
      <span contenteditable="true">
        Zacznij programować w Angularze
      </span>
    </div>
  </div>
  <!-- Component Banner End -->

  <!-- Component Settings -->
  <div class="settings">
    <label>Kolor 1</label>
    <div class="colors">
      <span class="badge"></span>
    </div>
    <input type="range" min="0" max="100" />

    <label>Kolor 2</label>
    <div class="colors">
      <span class="badge"></span>
    </div>
    <input type="range" min="0" max="100" />

    <label>Szerokość</label>
    <input type="range" min="0" max="1000" step="50" />

    <label>Wysokość</label>
    <input type="range" min="0" max="1000" step="50" />

    <label>Rozmiar czcionki</label>
    <input type="range" min="12" max="72" />
  </div>
  <!-- Component Settings End -->
</div>

app.component.ts

import { Component } from '@angular/core';
import { saveAs } from 'file-saver';
import domtoimage from 'dom-to-image';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  width = 600;
  height = 500;
  color1 = 'red';
  color2 = 'yellow';
  percentColor1 = 0;
  percentColor2 = 100;
  fontSize = 52;

  layout = {
    horizontal: false,
    horizontalRev: false,
    vertical: false,
    verticalRev: false,
  };

  colors = [
    'red',
    'purple',
    'blue',
    'green',
    'yellow',
    'brown',
    'grey',
    'black',
  ];

  getBannerStyles() {
    return {
      width: `${this.width}px`,
      height: `${this.height}px`,
      backgroundImage: `linear-gradient(to bottom, ${this.color1} ${this.percentColor1}%, ${this.color2} ${this.percentColor2}%)`,
    };
  }

  setLayout(selectedLayout: string) {
    Object.keys(this.layout).forEach(key => (this.layout[key] = false));
    this.layout[selectedLayout] = true;
  }

  saveImage(element: HTMLDivElement) {
    domtoimage.toBlob(element).then(blob => saveAs(blob));
  }
}

app.module.ts

  imports: [BrowserModule, FormsModule],

package.json

    "dom-to-image": "2.6.0",
    "file-saver": "2.0.2",
    "materialize-css": "1.0.0",

style.css

label {
  font-size: 16px;
}