Tooth Generator

by Alex

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
<div class="app" ng-app="app">
    <div class="app-controller" ng-controller="AppSetting as setting">
        <div class="app-box">
            <div class="app-tooth js-tooth"></div>
            <div class="app-panel">
                <div class="app-line">
                    <label for="tooth-size" class="app-label">Tooth Size:</label>
                    <input type="range" name="toothsize" id="tooth-size" class="app-range" ng-model="setting.size" value="20">
                    <div class="app-value">{{setting.size}}</div>
                </div>
                <div class="app-line">
                    <div class="app-label">Tooth Color:</div>
                    <label for="tooth-r" class="app-label">R:</label>
                    <input type="number" name="r" id="tooth-r" class="app-number" min="0" max="255" ng-model="setting.r" value="33">
                    <label for="tooth-g" class="app-label">G:</label>
                    <input type="number" name="g" id="tooth-g" class="app-number" min="0" max="255" ng-model="setting.g" value="217">
                    <label for="tooth-b" class="app-label">B:</label>
                    <input type="number" name="b" id="tooth-b" class="app-number" min="0" max="255" ng-model="setting.b" value="240">
                </div>
            </div>
        </div>
        <style class="app-style">
.app-tooth {
    background-image: linear-gradient(rgba({{setting.r}},{{setting.g}},{{setting.b}},1), rgba({{setting.r}},{{setting.g}},{{setting.b}},1)),
                      linear-gradient(-45deg, rgba({{setting.r}},{{setting.g}},{{setting.b}},1) 50%, rgba({{setting.r}},{{setting.g}},{{setting.b}},0) 50%),
                      linear-gradient(45deg, rgba({{setting.r}},{{setting.g}},{{setting.b}},1) 50%, rgba({{setting.r}},{{setting.g}},{{setting.b}},0) 50%),
                      linear-gradient(-45deg,...

CSS

.app {
    width: 980px;
    margin: auto;
}
.app-style {
    background: #eee;
    font-family: monospace;
    display: block;
    white-space: pre;
    border: 1px solid #000;
    margin: 10px 0;
    padding: 5px;
    border-radius: 5px;
}
.app-box {
    display: flex;
}
.app-line {
    display: flex;
    margin: 10px 0;
}
.app-label {
    margin-right: 5px;
}
.app-range {
    margin-right: 10px;
}
.app-number {
    margin-right: 10px;
}
.app-panel {
    flex: auto;
    margin-left: 10px;
}
.app-tooth {
    width: 400px;
    height: 300px;
    flex: none;
    box-sizing: border-box;
}

JavaScript

angular.module('app', []).controller('AppSetting', function() {
    this.size = 20;
    this.r = 33;
    this.g = 217;
    this.b = 240;
});