index.blade.php 27 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489
  1. @extends('user.layouts')
  2. @section('css')
  3. <link href="/assets/global/vendor/bootstrap-select/bootstrap-select.min.css" rel="stylesheet">
  4. <link href="/assets/global/fonts/font-awesome/font-awesome.min.css" rel="stylesheet">
  5. <link href="/assets/global/vendor/aspieprogress/asPieProgress.min.css" rel="stylesheet">
  6. @endsection
  7. @section('content')
  8. <div class="page-content container-fluid">
  9. <div class="row" data-plugin="matchHeight" data-by-row="true">
  10. @if (Session::has('successMsg'))
  11. <x-alert type="success" :message="Session::get('successMsg')" class="col-md-12"/>
  12. @endif
  13. <div class="col-xxl-3 col-xl-4 col-lg-5 col-md-6 col-12">
  14. <div class="card card-shadow">
  15. <div class="card-block p-20">
  16. <button type="button" class="btn btn-floating btn-sm btn-pure">
  17. <i class="wb-heart red-500"></i>
  18. </button>
  19. <span class="font-weight-400">{{trans('user.account.status')}}</span>
  20. @if(sysConfig('is_checkin'))
  21. <button class="btn btn-md btn-round btn-info float-right" onclick="checkIn()">
  22. <i class="wb-star yellow-400 mr-5"></i>
  23. {{trans('user.home.attendance.attribute')}}
  24. </button>
  25. @endif
  26. <div class="content-text text-center mb-0">
  27. @if(!$paying_user)
  28. <!--<p class="ml-15 mt-15 text-left">VIP套餐 30元/<code>月</code></p>-->
  29. <p class="ml-15 mt-15 text-left">{{trans('user.more')}}</p>
  30. <!--<p class="text-center">VIP套餐 75元/<code>季</code></p>-->
  31. <!--<p class="mb-15 mr-15 text-right">VIP套餐 268元/<code>年</code></p>-->
  32. <a href="{{route('shop')}}" class="btn btn-block btn-danger">{{trans('user.purchase_promotion')}}</a>
  33. @elseif(Auth::user()->enable)
  34. <i class="wb-check green-400 font-size-40 mr-10"></i>
  35. <span class="font-size-40 font-weight-100">{{trans('user.status.enabled')}}</span>
  36. <p class="font-weight-300 m-0 green-500">{{trans('user.account.reason.normal')}}</p>
  37. @elseif($remainDays === 0)
  38. <i class="wb-close red-400 font-size-40 mr-10"></i>
  39. <span class="font-size-40 font-weight-100">{{trans('user.status.expired')}}</span>
  40. <p class="font-weight-300 m-0 red-500">{{trans('user.account.reason.expired')}}</p>
  41. @elseif($unusedTraffic === 0)
  42. <i class="wb-close red-400 font-size-40 mr-10"></i>
  43. <span class="font-size-40 font-weight-100">{{trans('user.status.disabled')}}</span>
  44. <p class="font-weight-300 m-0 red-500">{{trans('user.account.reason.traffic_exhausted')}}</p>
  45. @elseif(Auth::user()->isTrafficWarning() || $banedTime)
  46. <i class="wb-alert orange-400 font-size-40 mr-10"></i>
  47. <span class="font-size-40 font-weight-100">{{trans('user.status.limited')}}</span>
  48. <p class="font-weight-300 m-0 orange-500">{!!trans('user.account.reason.overused', ['data'=>sysConfig('traffic_ban_value')])!!}</p>
  49. @else
  50. <i class="wb-help red-400 font-size-40 mr-10"></i>
  51. <span class="font-size-40 font-weight-100">{{trans('user.status.disabled')}}</span>
  52. <p class="font-weight-300 m-0 red-500">{{trans('user.account.reason.unknown')}}</p>
  53. @endif
  54. </div>
  55. </div>
  56. </div>
  57. <div class="card card-shadow">
  58. <div class="card-block p-20">
  59. <div class="row">
  60. <div class="col-lg-7 col-md-12 col-sm-7">
  61. <button type="button" class="btn btn-floating btn-sm btn-pure">
  62. <i class="wb-stats-bars cyan-500"></i>
  63. </button>
  64. <span class="font-weight-400">{{trans('user.account.remain')}}</span>
  65. <div class="text-center font-weight-100 font-size-40">
  66. {{$unusedTraffic}}
  67. <br>
  68. <h4>{{trans('user.account.level')}}:<code class="font-size-20">{{Auth::user()->level}}</code></h4>
  69. </div>
  70. <div class="text-center font-weight-300 blue-grey-500 mb-10">
  71. @if($paying_user && $resetDays && $remainDays > $resetDays && sysConfig('reset_traffic'))
  72. {{trans('user.account.reset', ['days' => $resetDays])}}
  73. @endif
  74. </div>
  75. </div>
  76. <div class="col-lg-5 col-md-12 col-sm-5">
  77. <div class="w-only-xs-p50 w-only-sm-p75 w-only-md-p50" data-plugin="pieProgress"
  78. data-valuemax="100"
  79. data-barcolor="#96A3FA" data-size="100" data-barsize="10"
  80. data-goal="{{$unusedPercent}}" aria-valuenow="{{$unusedPercent}}"
  81. role="progressbar">
  82. <span class="pie-progress-number blue-grey-700 font-size-20">
  83. {{$unusedPercent}}%</span>
  84. </div>
  85. </div>
  86. </div>
  87. </div>
  88. </div>
  89. <div class="card card-shadow">
  90. <div class="card-block p-20">
  91. <button type="button" class="btn btn-floating btn-sm btn-pure">
  92. <i class="wb-calendar green-500"></i>
  93. </button>
  94. <span class="font-weight-400">{{trans('user.account.time')}}</span>
  95. <div class="content-text text-center mb-0">
  96. @if($remainDays !== -1)
  97. <span class="font-size-40 font-weight-100">{{$remainDays.' '.trans('validation.attributes.day')}}</span>
  98. <p class="blue-grey-500 font-weight-300 m-0">{{$expireTime}}</p>
  99. @else
  100. <span class="font-size-40 font-weight-100">{{trans('user.status.expired')}}</span>
  101. <br/>
  102. <a href="{{route('shop')}}" class="btn btn-danger">{{trans('user.shop.buy')}}</a>
  103. @endif
  104. </div>
  105. </div>
  106. </div>
  107. @if($userLoginLog)
  108. <!--<div class="card card-shadow">-->
  109. <!-- <div class="card-block p-20">-->
  110. <!-- <button type="button" class="btn btn-floating btn-sm btn-pure">-->
  111. <!-- <i class="wb-globe purple-500"></i>-->
  112. <!-- </button>-->
  113. <!-- <span class="font-weight-400 mb-10"></span>-->
  114. <!-- <ul class="list-group list-group-dividered px-20 mb-0">-->
  115. <!--<li class="list-group-item px-0">-->
  116. <!-- <i class="icon wb-time"></i>-->
  117. <!-- {{trans('validation.attributes.time')}}:{{date_format($userLoginLog->created_at,'Y/m/d H:i')}}-->
  118. <!--</li>-->
  119. <!--<li class="list-group-item px-0">-->
  120. <!-- <i class="icon wb-code"></i>-->
  121. <!-- {{trans('user.attribute.ip')}}:{{$userLoginLog->ip}}-->
  122. <!--</li>-->
  123. <!--<li class="list-group-item px-0">-->
  124. <!-- <i class="icon wb-cloud"></i>-->
  125. <!-- {{trans('user.attribute.isp')}}:{{$userLoginLog->isp}}-->
  126. <!--</li>-->
  127. <!--<li class="list-group-item px-0">-->
  128. <!-- <i class="icon wb-map"></i>-->
  129. <!-- {{trans('user.attribute.address')}}:{{$userLoginLog->area ?: $userLoginLog->country.' '.$userLoginLog->province.' '.$userLoginLog->city}}-->
  130. <!--</li>-->
  131. <!-- </ul>-->
  132. <!-- </div>-->
  133. <!--</div>-->
  134. @endif
  135. </div>
  136. <div class="col-xxl-9 col-xl-8 col-lg-7 col-md-6 col-12">
  137. <div class="row" data-plugin="matchHeight" data-by-row="true">
  138. <div class="col-xl-4 mb-30">
  139. <div class="card card-shadow h-full">
  140. <div class="card-block text-center">
  141. <h3 class="card-header-transparent"><i class="icon wb-link-intact"></i>{{trans('user.subscribe.link')}}</h3>
  142. @if($subscribe_status)
  143. <div class="card-body">
  144. @if(count($subType)>1)
  145. <div class="form-group row">
  146. <label class="col-md-auto col-form-label" for="subType">{{trans('common.customize')}}</label>
  147. <div class="col">
  148. <select class="form-control" id="subType" name="subType" data-plugin="selectpicker" data-style="btn-outline btn-primary">
  149. <option value="" hidden>{{trans('common.all')}}</option>
  150. @if(in_array('ss',$subType))
  151. <option value="1">{{trans('user.subscribe.ss_only')}}</option>
  152. @endif
  153. @if(in_array('v2',$subType))
  154. <option value="2">{{trans('user.subscribe.v2ray_only')}}</option>
  155. @endif
  156. @if(in_array('trojan',$subType))
  157. <option value="3">{{trans('user.subscribe.trojan_only')}}</option>
  158. @endif
  159. </select>
  160. </div>
  161. </div>
  162. @endif
  163. <div class="form-group row">
  164. <label class="col-md-auto col-form-label" for="client">{{trans('user.client').trans('common.customize')}}</label>
  165. <div class="col">
  166. <select class="form-control" id="client" name="client" data-plugin="selectpicker" data-style="btn-outline btn-primary">
  167. <option value="" hidden>{{trans('common.default')}}</option>
  168. <option value="quantumult">Quantumult</option>
  169. <option value="quantumult%20x">QuantumultX</option>
  170. <option value="clash">Clash</option>
  171. <option value="surfboard">Surfboard</option>
  172. <option value="surge">Surge</option>
  173. <option value="shadowrocket">Shadowrocket</option>
  174. {{-- <option value="shadowsocks">SS路由器</option>--}}
  175. </select>
  176. </div>
  177. </div>
  178. </div>
  179. <div class="card-footer-transparent btn-group">
  180. <button class="btn btn-outline-danger" onclick="exchangeSubscribe();">
  181. <i class="icon wb-refresh" aria-hidden="true"></i>
  182. {{trans('common.replace')}}</button>
  183. <button class="btn btn-outline-info mt-clipboard" data-clipboard-action="copy">
  184. <i class="icon wb-copy" aria-hidden="true"></i>
  185. {{trans('common.copy.attribute')}}</button>
  186. </div>
  187. @else
  188. <x-alert type="danger" :message="trans('user.subscribe.baned')"/>
  189. @endif
  190. </div>
  191. </div>
  192. </div>
  193. <div class="col-xl-4 mb-30">
  194. <div class="card card-shadow h-full">
  195. <div class="card-block text-center">
  196. <i class="font-size-40 wb-wrench"></i>
  197. <h4 class="card-title">{{trans('user.client')}}</h4>
  198. <p class="card-text">{{trans('common.download').' & '.trans('user.tutorials')}}</p>
  199. <a href="/" class="btn btn-primary mb-10">{{trans('common.goto')}}</a>
  200. </div>
  201. </div>
  202. </div>
  203. <!-- <div class="col-xl-4 mb-30">-->
  204. <!-- <div class="card card-shadow text-center h-full">-->
  205. <!-- <div class="card-block">-->
  206. <!-- @if(sysConfig('is_push_bear') && sysConfig('push_bear_qrcode'))-->
  207. <!-- <h4 class="card-title"><i class="wb-bell mr-10 yellow-600"></i>{{trans('user.home.wechat_push')}}-->
  208. <!-- </h4>-->
  209. <!-- <div id="qrcode" class="mb-10"></div>-->
  210. <!-- @else-->
  211. <!-- <h4 class="card-title"><i class="wb-bell mr-10 yellow-600"></i>{{trans('user.home.chat_group')}}</h4>-->
  212. <!-- @endif-->
  213. <!-- </div>-->
  214. <!-- </div>-->
  215. <!-- </div>-->
  216. <!--</div>-->
  217. <!--<div class="row" data-plugin="matchHeight" data-by-row="true">-->
  218. <!-- <div class="col-xxl-6 mb-30">-->
  219. <!-- <div class="panel panel-info panel-line h-full">-->
  220. <!-- <div class="panel-heading">-->
  221. <!-- <h2 class="panel-title">-->
  222. <!-- <i class="wb-volume-high mr-10"></i>-->
  223. <!-- {{trans('user.home.announcement')}}-->
  224. <!-- </h2>-->
  225. <!-- <div class="panel-actions pagination-no-border pagination-sm">-->
  226. <!-- {{$announcements->links()}}-->
  227. <!-- </div>-->
  228. <!-- </div>-->
  229. <!-- <div class="panel-body" data-show-on-hover="false" data-direction="vertical"-->
  230. <!-- data-skin="scrollable-shadow" data-plugin="scrollable">-->
  231. <!-- <div data-role="container">-->
  232. <!-- <div class="pb-10" data-role="content">-->
  233. <!-- @forelse($announcements as $announcement)-->
  234. <!-- <h2 class="text-center">{!!$announcement->title!!}</h2>-->
  235. <!-- <p class="text-right"><small>{{trans('common.updated_at')}} <code>{{$announcement->updated_at}}</code></small></p>-->
  236. <!-- {!! $announcement->content !!}-->
  237. <!-- @empty-->
  238. <!-- <p class="text-center font-size-40">{{trans('user.home.empty_announcement')}}</p>-->
  239. <!-- @endforelse-->
  240. <!-- </div>-->
  241. <!-- </div>-->
  242. <!-- </div>-->
  243. <!-- </div>-->
  244. <!-- </div>-->
  245. <div class="col-xxl-6">
  246. <div class="panel panel-primary panel-line h-full">
  247. <div class="panel-heading">
  248. <h1 class="panel-title"><i class="wb-pie-chart mr-10"></i>{{trans('user.home.traffic_logs')}}
  249. </h1>
  250. <div class="panel-actions">
  251. <ul class="nav nav-pills" role="tablist">
  252. <li class="nav-item">
  253. <a class="nav-link active" data-toggle="tab" href="#daily" aria-controls="daily" role="tab" aria-expanded="true"
  254. aria-selected="false">{{trans('validation.attributes.day')}}</a>
  255. </li>
  256. <li class="nav-item">
  257. <a class="nav-link" data-toggle="tab" href="#monthly" aria-controls="monthly" role="tab"
  258. aria-selected="true">{{trans('validation.attributes.month')}}</a>
  259. </li>
  260. </ul>
  261. </div>
  262. </div>
  263. <x-alert type="danger" :message="trans('user.traffic_logs.tips')"/>
  264. <div class="panel-body">
  265. <div class="tab-content">
  266. <div class="tab-pane active" id="daily" role="tabpanel">
  267. <canvas id="dailyChart" aria-label="{{trans('user.traffic_logs.24hours')}}" role="img"></canvas>
  268. </div>
  269. <div class="tab-pane" id="monthly" role="tabpanel">
  270. <canvas id="monthlyChart" aria-label="{{trans('user.traffic_logs.30days')}}" role="img"></canvas>
  271. </div>
  272. </div>
  273. </div>
  274. </div>
  275. </div>
  276. </div>
  277. </div>
  278. </div>
  279. </div>
  280. @endsection
  281. @section('javascript')
  282. <script src="/assets/custom/clipboardjs/clipboard.min.js"></script>
  283. <script src="/assets/global/vendor/aspieprogress/jquery-asPieProgress.min.js"></script>
  284. <script src="/assets/global/vendor/matchheight/jquery.matchHeight-min.js"></script>
  285. <script src="/assets/global/vendor/chart-js/Chart.min.js"></script>
  286. <script src="/assets/global/vendor/bootstrap-select/bootstrap-select.min.js"></script>
  287. <script src="/assets/global/js/Plugin/aspieprogress.js"></script>
  288. <script src="/assets/global/js/Plugin/matchheight.js"></script>
  289. <script src="/assets/global/js/Plugin/bootstrap-select.js"></script>
  290. @if(sysConfig('is_push_bear') && sysConfig('push_bear_qrcode'))
  291. <script src="/assets/custom/easy.qrcode.min.js"></script>
  292. <script>
  293. // Options
  294. const options = {
  295. text: @json(sysConfig('push_bear_qrcode')),
  296. width: 150,
  297. height: 150,
  298. backgroundImage: '{{asset('/assets/images/wechat.png')}}',
  299. autoColor: true,
  300. };
  301. // Create QRCode Object
  302. new QRCode(document.getElementById('qrcode'), options);
  303. </script>
  304. @endif
  305. <script>
  306. // 更换订阅地址
  307. function exchangeSubscribe() {
  308. swal.fire({
  309. title: '{{trans('common.warning')}}',
  310. text: '{{trans('user.subscribe.exchange_warning')}}',
  311. icon: 'warning',
  312. showCancelButton: true,
  313. cancelButtonText: '{{trans('common.close')}}',
  314. confirmButtonText: '{{trans('common.confirm')}}',
  315. }).then((result) => {
  316. if (result.value) {
  317. $.post('{{route('changeSub')}}', {_token: '{{csrf_token()}}'}, function(ret) {
  318. if (ret.status === 'success') {
  319. swal.fire({title: ret.message, icon: 'success', timer: 1000, showConfirmButton: false}).then(() => window.location.reload());
  320. } else {
  321. swal.fire({title: ret.message, icon: 'error'}).then(() => window.location.reload());
  322. }
  323. });
  324. }
  325. });
  326. }
  327. const clipboard = new ClipboardJS('.mt-clipboard', {
  328. text: function(trigger) {
  329. let base = @json($subUrl);
  330. const client = $('#client').val();
  331. const subType = $('#subType').val();
  332. if (subType && client) {
  333. base += '?target=' + client + '&type=' + subType;
  334. } else if (subType) {
  335. base += '?type=' + subType;
  336. } else if (client) {
  337. base += '?target=' + client;
  338. }
  339. return base;
  340. },
  341. });
  342. clipboard.on('success', function() {
  343. swal.fire({
  344. title: '{{trans('common.copy.success')}}',
  345. icon: 'success',
  346. timer: 1300,
  347. showConfirmButton: false,
  348. });
  349. });
  350. clipboard.on('error', function() {
  351. swal.fire({
  352. title: '{{trans('common.copy.failed')}}',
  353. icon: 'error',
  354. timer: 1500,
  355. showConfirmButton: false,
  356. });
  357. });
  358. // 签到
  359. function checkIn() {
  360. $.post('{{route('checkIn')}}', {_token: '{{csrf_token()}}'}, function(ret) {
  361. if (ret.status === 'success') {
  362. swal.fire(ret.title, ret.message, 'success');
  363. } else {
  364. swal.fire(ret.title, ret.message, 'error');
  365. }
  366. });
  367. }
  368. const dailyChart = new Chart(document.getElementById('dailyChart').getContext('2d'), {
  369. type: 'line',
  370. data: {
  371. labels: {{$dayHours}},
  372. datasets: [
  373. {
  374. fill: true,
  375. backgroundColor: 'rgba(98, 168, 234, .1)',
  376. borderColor: Config.colors('primary', 600),
  377. pointRadius: 4,
  378. borderDashOffset: 2,
  379. pointBorderColor: '#fff',
  380. pointBackgroundColor: Config.colors('primary', 600),
  381. pointHoverBackgroundColor: '#fff',
  382. pointHoverBorderColor: Config.colors('primary', 600),
  383. data: {{$trafficHourly}},
  384. }],
  385. },
  386. options: {
  387. legend: {
  388. display: false,
  389. },
  390. responsive: true,
  391. scales: {
  392. xAxes: [
  393. {
  394. display: true,
  395. scaleLabel: {
  396. display: true,
  397. labelString: '{{trans('validation.attributes.hour')}}',
  398. },
  399. }],
  400. yAxes: [
  401. {
  402. display: true,
  403. ticks: {
  404. beginAtZero: true,
  405. userCallback: function(tick) {
  406. return tick.toString() + ' GB';
  407. },
  408. },
  409. scaleLabel: {
  410. display: true,
  411. labelString: '{{trans('user.traffic_logs.24hours')}}',
  412. },
  413. }],
  414. },
  415. },
  416. });
  417. const monthlyChart = new Chart(document.getElementById('monthlyChart').getContext('2d'), {
  418. type: 'line',
  419. data: {
  420. labels: {{$monthDays}},
  421. datasets: [
  422. {
  423. fill: true,
  424. backgroundColor: 'rgba(98, 168, 234, .1)',
  425. borderColor: Config.colors('primary', 600),
  426. pointRadius: 4,
  427. borderDashOffset: 2,
  428. pointBorderColor: '#fff',
  429. pointBackgroundColor: Config.colors('primary', 600),
  430. pointHoverBackgroundColor: '#fff',
  431. pointHoverBorderColor: Config.colors('primary', 600),
  432. data: {{$trafficDaily}},
  433. }],
  434. },
  435. options: {
  436. legend: {
  437. display: false,
  438. },
  439. responsive: true,
  440. scales: {
  441. xAxes: [
  442. {
  443. display: true,
  444. scaleLabel: {
  445. display: true,
  446. labelString: '{{trans('validation.attributes.day')}}',
  447. },
  448. }],
  449. yAxes: [
  450. {
  451. display: true,
  452. ticks: {
  453. beginAtZero: true,
  454. userCallback: function(tick) {
  455. return tick.toString() + ' GB';
  456. },
  457. },
  458. scaleLabel: {
  459. display: true,
  460. labelString: '{{trans('user.traffic_logs.30days')}}',
  461. },
  462. }],
  463. },
  464. },
  465. });
  466. @if($banedTime)
  467. // 每秒更新计时器
  468. const countDownDate = new Date("{{$banedTime}}").getTime();
  469. const x = setInterval(function() {
  470. const distance = countDownDate - new Date().getTime();
  471. const hours = Math.floor(distance % 86400000 / 3600000);
  472. const minutes = Math.floor((distance % 3600000) / 60000);
  473. const seconds = Math.floor((distance % 60000) / 1000);
  474. document.getElementById('countdown').innerHTML = hours + '{{trans('validation.attributes.hour')}} ' + minutes
  475. + '{{trans('validation.attributes.minute')}} ' + seconds + '{{trans('validation.attributes.second')}}';
  476. if (distance <= 0) {
  477. clearInterval(x);
  478. document.getElementById('countdown').remove();
  479. }
  480. }, 1000);
  481. @endif
  482. </script>
  483. @endsection