shadowsocks-manager/plugins/webgui/public/views/user/index.html

A shadowsocks manager tool for multi user and traffic control.

<div layout="row" layout-xs="column" layout-wrap>
    <div flex-xs="100" flex-sm="100" flex-gt-sm="50">
        <md-card>
            <md-card-title>
                <md-card-title-text><span class="md-headline default-cursor">{{ '公告' | translate }}</span></md-card-title-text>
            </md-card-title>
            <md-card-content>
                <md-list>
                    <md-divider></md-divider>
                    <md-list-item ng-repeat-start="notice in notices" ng-show="$index < 3" ng-click="showNotice(notice)">
                        <div flex layout="row" layout-align="space-between center">
                            <div>{{notice.title}}</div>
                        </div>
                    </md-list-item>
                    <md-divider ng-repeat-end ng-show="$index < 3"></md-divider>
                    <md-list-item ng-show="notices.length <=2" />
                    <md-divider ng-show="notices.length <=2"></md-divider>
                    <md-list-item ng-show="notices.length <=1" />
                    <md-divider ng-show="notices.length <=1"></md-divider>
                    <md-list-item ng-show="notices.length <=0"></md-list-item>
                    <md-divider ng-show="notices.length <=0"></md-divider>
                </md-list>
                <div style="text-align: right;" ng-click="toNotice()">
                    <md-button class="md-primary">{{ '更多' | translate }}&gt;&gt;</md-button>
                </div>
            </md-card-content>
        </md-card>
    </div>
    <div flex-xs="100" flex-sm="100" flex-gt-sm="50" ng-repeat="(key, notices) in otherNotices">
        <md-card>
            <md-card-title>
                <md-card-title-text><span class="md-headline default-cursor">{{ key }}</span></md-card-title-text>
            </md-card-title>
            <md-card-content>
                <md-list>
                    <md-divider></md-divider>
                    <md-list-item ng-repeat-start="notice in notices" ng-show="$index < 3" ng-click="showNotice(notice)">
                        <div flex layout="row" layout-align="space-between center">
                            <div>{{notice.title}}</div>
                        </div>
                    </md-list-item>
                    <md-divider ng-repeat-end ng-show="$index < 3"></md-divider>
                    <md-list-item ng-show="notices.length <=2" />
                    <md-divider ng-show="notices.length <=2"></md-divider>
                    <md-list-item ng-show="notices.length <=1" />
                    <md-divider ng-show="notices.length <=1"></md-divider>
                    <md-list-item ng-show="notices.length <=0"></md-list-item>
                    <md-divider ng-show="notices.length <=0"></md-divider>
                </md-list>
                <div style="text-align: right;" ng-click="toNotice()">
                    <md-button class="md-primary">{{ '更多' | translate }}&gt;&gt;</md-button>
                </div>
            </md-card-content>
        </md-card>
    </div>
    <div flex-xs="100" flex-sm="100" flex-gt-sm="50">
        <md-card ng-click="toMyAccount()" flex>
            <md-card-title>
                <md-card-title-text><span class="md-headline default-cursor">{{ '账号' | translate }}</span></md-card-title-text>
            </md-card-title>
            <md-card-content>
                <md-list>
                    <md-divider></md-divider>
                    <md-list-item>
                        <div flex layout="row" layout-align="space-between center">
                            <div flex="70" flex-xs="60" style="overflow: hidden; text-overflow: ellipsis;">
                                <span translate>今日</span>
                            </div>
                            <div flex="30" flex-xs="40" style="text-align: right;">
                                <span style="color: #555">{{ usage[0] | flow}}</span>
                            </div>
                        </div>
                    </md-list-item>
                    <md-divider></md-divider>
                    <md-list-item>
                        <div flex layout="row" layout-align="space-between center">
                            <div flex="70" flex-xs="60" style="overflow: hidden; text-overflow: ellipsis;">
                                <span translate>本周</span>
                            </div>
                            <div flex="30" flex-xs="40" style="text-align: right;">
                                <span style="color: #555">{{ usage[1] | flow}}</span>
                            </div>
                        </div>
                    </md-list-item>
                    <md-divider></md-divider>
                    <md-list-item>
                        <div flex layout="row" layout-align="space-between center">
                            <div flex="70" flex-xs="60" style="overflow: hidden; text-overflow: ellipsis;">
                                <span translate>本月</span>
                            </div>
                            <div flex="30" flex-xs="40" style="text-align: right;">
                                <span style="color: #555">{{ usage[2] | flow}}</span>
                            </div>
                        </div>
                    </md-list-item>
                    <md-divider></md-divider>
                </md-list>
                <div style="text-align: right;">
                    <md-button class="md-primary"><span translate>点击进入</span>&gt;&gt;</md-button>
                </div>
            </md-card-content>
        </md-card>
    </div>
    <div flex="100" layout="row" layout-xs="column" layout-sm="column" layout-wrap>
        <md-card ng-click="toCrisp()" flex ng-if="config.crisp">
            <md-card-title>
                <md-card-title-text><span class="md-headline default-cursor">{{ '客服咨询' | translate }}</span></md-card-title-text>
            </md-card-title>
            <md-card-content>
                <div style="text-align: right;">
                    <md-button class="md-primary"><span translate>点击进入</span>&gt;&gt;</md-button>
                </div>
            </md-card-content>
        </md-card>
        <md-card ng-click="toTelegram()" flex ng-if="config.telegram">
            <md-card-title>
                <md-card-title-text><span class="md-headline default-cursor">{{ '绑定Telegram' | translate }}</span></md-card-title-text>
            </md-card-title>
            <md-card-content>
                <div style="text-align: right;">
                    <md-button class="md-primary"><span translate>点击进入</span>&gt;&gt;</md-button>
                </div>
            </md-card-content>
        </md-card>
        <md-card ng-click="toRef()" flex ng-if="config.refCode">
            <md-card-title>
                <md-card-title-text><span class="md-headline default-cursor">{{ '邀请码' | translate }}</span></md-card-title-text>
            </md-card-title>
            <md-card-content>
                <div style="text-align: right;">
                    <md-button class="md-primary"><span translate>点击进入</span>&gt;&gt;</md-button>
                </div>
            </md-card-content>
        </md-card>
    </div>
    <div flex="100" style="height: 30px;"></div>
    <!-- <div flex="100" style="text-align: center;"><ga></ga></div> -->
</div>