bootstrap-magic/3.1/partials/editor.html at master · csseditor/bootstrap-magic · 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
<div class="protected">
    <div class="navbar navbar-fixed-bottom" id="menuBottom" class="isEditor">
        <form action="" class="form-horizontal">
            <ul class="pull-left">
                <li><button class="btn btn-primary" ng-click="applyLess(false)">Apply</button></li>
                <li><label class="checkbox"><input type="checkbox" name="cssAutoapplyless" data-ng-model="autoapplyless">Auto</label></li>
                <li><button class="btn" ng-click="saveLessVariables()">Save Less Variables</button></li>
                <li><button class="btn" data-toggle="modal" href="#thankYou" ng-click="saveCSS()">Save CSS</button></li>
                <li><label class="checkbox"><input type="checkbox" name="cssMinified" data-ng-model="minified">Minified</label></li>
                <li><button data-toggle="modal" href="#myModal" class="btn">Import Less Variables</button></li>
                <li><button class="btn" ng-click="resetLessVariables()">Reset</button></li>
            </ul>
        </form>
        <span class="sign">Handmade by <a href="http://en.orson.io/17/build-responsive-website-without-coding/?utm_source=Bootstrap%20Magic%20&utm_medium=referral&utm_content=Footer&utm_campaign=Bootstrap" title="create your website easily">Orson Website Builder</a> x <a href="http://www.autreplanete.com/" title="web agency paris">Autre planète</a> in Paris.</span>
    </div>
</div>

<div class="container">
    <form class="piEditor">
        <section ng-repeat="group in variables" class="{{ group.name }}">
            <div class="row protected" >
                <div class="col-md-12">
                    <h2 class="groupNameTitle" id="{{ group.name }}">{{ group.name }}</h2>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <div ng-repeat="variable in group.data" class="protected form-group">
                        <label class="labelTitle">{{variable.key}}</label></td>
                        <div class="input {' ap-color-picker: variable.value': colorpicker(variable.type)}" data-color="{{ color(variable.type, variable.value) }}" data-color-format="hex" ng-class="{'input-group color colorpicker' : colorpicker(variable.type)}" color-picker-apply="">
                            <input id="" type="text" data-ng-model="variable.value" class="lessVariable form-control" ng-change="autoApplyLess()">
                            <span class="input-group-addon" ng-class="{ 'hidden' : !colorpicker(variable.type)}"><i></i></span>
                        </div>
                    </div>
                </div>
                <div class="col-md-8">
                    <div data-ng-include src="getGroupUrl()"></div>
                </div>
            </div>
        </section>
    </form>
</div>

<div class="protected">
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 id="myModalLabel"><span class="apico games apico-cloud-upload"></span>Import your Less Variables</h4>
            </div>
            <div class="modal-body">
                <p>Add your less variables to Bootstrap Magic.</p>
                <textarea class="form-control" ng-model="importedVariables" rows="3" placeholder="Example @text-color : #242424;" style="height:400px"></textarea>
            </div>
            <div class="modal-footer">
                <button  data-dismiss="modal" aria-hidden="true" class="btn btn-primary" ng-click="importLessVariables(importedVariables)">Import</button>
            </div>
          </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
      </div><!-- /.modal -->
</div>

<div class="protected">
    <div class="modal fade" id="thankYou" tabindex="-1" role="dialog" aria-labelledby="thankYouLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 id="myModalLabel"><span class="apico games apico-cloud-upload"></span>Thanks you for using Bootstrap Magic.</h4>
            </div>
            <div class="modal-body">
                <p>Thanks you for using Bootstrap Magic.
                   Just wait a little bit. We are compiling your CSS.
                </p>
                <br>
                <div class="text-center">
                    <!-- <a href="https://www.producthunt.com/tech" target="_blank">
                        <img class="img-responsive" style="margin: 0 auto" src="https://cc6f218bd2ea04cb4973-fc9c6b9d141db7665c9530be5d7ac377.ssl.cf1.rackcdn.com/files/5668663fb2a7161287000036/size_4_site-orson-producthunt-redpng.png">
                    </a> -->
                    <a class="" href="http://en.orson.io/17/build-responsive-website-without-coding/?utm_source=Bootstrap%20Magic%20&utm_medium=referral&utm_content=Footer&utm_campaign=Bootstrap" target="_blank" title="Try Orson website builder"><img src="../app/img/orson-website-ad.jpg" class="img-responsive" alt="Create responsive website without coding"></a>
                </div>
            </div>
            <div class="modal-footer">
                <button  data-dismiss="modal" aria-hidden="true" class="btn">Close</button>
            </div>
          </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
      </div><!-- /.modal -->
</div>

<div id="scrollTop" scroll-top="">↑</div>