rcreasey.github.io/src/html/menu/content/background/image.html at d54378113325fdabfef44131a6c5f4aa0f302d4b · rcreasey/rcreasey.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<div id="menu-content-background-image" class="menu-content-item">
  <div class="menu-item-header">
    <h1 class="menu-item-header-text">Image</h1>
  </div>
  <div class="menu-item-form">
    <div class="form-wrap">
      <input id="control-background-image-show" class="control-background-image-show" type="checkbox" tabindex="-1">
      <label for="control-background-image-show"><span class="label-icon"></span> Show</label>
    </div>
    <div class="form-wrap">
      <div class="form-indent">
        <div class="form-wrap">
          <input id="control-background-image-from-file" class="control-background-image-from-file" type="radio" name="control-background-image-from" value="file" tabindex="-1">
          <label for="control-background-image-from-file"><span class="label-icon"></span> Use local file</label>
        </div>
        <div class="form-wrap">
          <div class="form-indent">
            <div class="form-inline">
              <div class="form-input-button form-input-hide">
                <input id="control-background-image-file" class="control-background-image-file" type="file">
                <label for="control-background-image-file">Select image</label>
              </div>
              <button class="control-background-image-file-clear button">Clear image</button>
            </div>
            <div class="form-helper">
              <p class="control-background-image-file-helper form-helper-item">Max image size 5MB, (due to browser local storage limits).</p>
            </div>
            <div class="form-helper">
              <p class="control-background-image-file-helper form-helper-item">Take care with large files, they may impact performance.</p>
            </div>
            <div class="form-wrap">
              <div class="control-background-image-file-feedback form-feedback"></div>
            </div>
          </div>
        </div>
        <div class="form-wrap">
          <input id="control-background-image-from-url" class="control-background-image-from-url" type="radio" name="control-background-image-from" value="url" tabindex="-1">
          <label for="control-background-image-from-url"><span class="label-icon"></span> Use URL</label>
        </div>
        <div class="form-wrap">
          <div class="form-indent">
            <div class="form-wrap">
              <textarea id="control-background-image-url" class="control-background-image-url" spellcheck="false" placeholder="https://..." tabindex="-1"></textarea>
            </div>
            <div class="form-helper">
              <p class="control-background-image-url-helper form-helper-item">If adding more than one URL separate them by spaces or on new lines. If more than one is entered a random background image will be used on load.</p>
            </div>
            <hr>
            <div class="form-helper">
              <p class="control-background-image-url-helper form-helper-item">Unsplash can be used for random images, eg:</p>
            </div>
            <div class="form-helper">
              <p class="control-background-image-url-helper form-helper-item"><i>https://source.unsplash.com/random/1920x1080/?night,day,sky</i></p>
            </div>
            <div class="form-helper">
              <p class="control-background-image-url-helper form-helper-item">Change parameters after <i>.../random/</i> for more options. Loading times may vary.</p>
            </div>
          </div>
        </div>
        <hr>
        <div class="form-wrap">
          <label for="control-background-image-opacity-range">Opacity</label>
          <div class="form-group form-group-block">
            <input id="control-background-image-opacity-range" class="control-background-image-opacity-range mr-3" type="range" value="0" tabindex="-1">
            <input class="control-background-image-opacity-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
            <button class="control-background-image-opacity-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
          </div>
        </div>
        <div class="form-wrap">
          <label for="control-background-image-grayscale-range">Greyscale</label>
          <div class="form-group form-group-block">
            <input id="control-background-image-grayscale-range" class="control-background-image-grayscale-range mr-3" type="range" value="0" tabindex="-1">
            <input class="control-background-image-grayscale-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
            <button class="control-background-image-grayscale-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
          </div>
        </div>
        <div class="form-wrap">
          <label for="control-background-image-blur-range">Blur</label>
          <div class="form-group form-group-block">
            <input id="control-background-image-blur-range" class="control-background-image-blur-range mr-3" type="range" value="0" tabindex="-1">
            <input class="control-background-image-blur-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
            <button class="control-background-image-blur-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
          </div>
        </div>
        <div class="form-wrap">
          <label for="control-background-image-accent-range">Accent overlay</label>
          <div class="form-group form-group-block">
            <input id="control-background-image-accent-range" class="control-background-image-accent-range mr-3" type="range" value="0" tabindex="-1">
            <input class="control-background-image-accent-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
            <button class="control-background-image-accent-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
          </div>
        </div>
        <div class="form-wrap">
          <label for="control-background-image-scale-range">Size</label>
          <div class="form-group form-group-block">
            <input id="control-background-image-scale-range" class="control-background-image-scale-range mr-3" type="range" value="0" tabindex="-1">
            <input class="control-background-image-scale-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
            <button class="control-background-image-scale-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>