466 lines
26 KiB
HTML
466 lines
26 KiB
HTML
{% extends 'navbar/navbar.html' %}
|
|
{% load static %}
|
|
{% block home %}
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<link rel="stylesheet" href="{% static 'dashboard/index.css' %}">
|
|
<link rel="stylesheet" href="{% static 'dashboard/bubble.css' %}">
|
|
<link rel="stylesheet" href="{% static 'dashboard/index-color.css' %}">
|
|
<title>x-sys</title>
|
|
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
|
|
<script src="{% static 'dashboard/js/chart.js' %}"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="ipSection">
|
|
<div class="ipIconImage">
|
|
<svg width="105" height="102" viewBox="0 0 105 102" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M104.501 78.98V84.25C104.091 84.59 104.131 85.1 104.021 85.54C102.371 92.6 96.0807 100.42 85.9007 101.42C77.8907 102.21 69.8207 97.71 66.0207 89.99C64.8807 87.68 65.1807 87.68 62.5707 88.63C49.9007 93.27 37.4507 93.16 25.2907 86.88C17.7007 82.96 11.3007 77.65 6.9407 70.22C2.6107 62.84 0.0606993 54.92 0.000699318 46.21C-0.0193007 42.96 0.390699 39.88 1.1007 36.77C2.4907 30.69 4.7207 24.96 8.3807 19.87C16.6107 8.43 27.9307 2.26 41.7807 0.44C43.1407 0.26 44.5407 0.52 45.8607 0H46.3407C46.5007 0.34 46.8207 0.22 47.0707 0.23C59.0307 0.84 69.5707 5.03 77.8807 13.66C90.5507 26.81 94.4907 42.37 89.3007 60.04C88.8307 61.63 88.8707 61.75 90.4207 62.28C96.1407 64.21 100.181 67.97 102.631 73.48C103.421 75.26 103.861 77.15 104.491 78.98H104.501ZM34.8307 28.7C33.8907 28.39 33.4207 28.98 33.0707 29.79C32.1307 31.94 31.1407 34.08 30.2507 36.25C28.4107 40.72 26.9807 45.32 25.8607 50.01C25.6607 50.86 25.3807 51.73 26.3507 52.37C28.0707 53.5 28.8307 55.13 28.6707 57.17C28.5907 58.16 29.0607 58.71 29.9207 59.1C36.2207 62.03 42.7207 64.4 49.4707 66.07C50.6407 66.36 51.4307 66.14 52.1307 65.13C53.2807 63.49 54.9607 62.81 56.9207 63.08C57.9507 63.23 58.4407 62.86 58.8507 61.97C61.9707 55.39 64.3607 48.57 66.0307 41.48C66.2507 40.52 66.1107 39.91 65.2407 39.38C63.6807 38.42 62.8107 36.99 62.8207 35.11C62.8207 34.02 62.3207 33.35 61.3307 32.9C54.9107 29.94 48.3007 27.53 41.3907 25.96C40.4907 25.76 39.8807 25.91 39.3107 26.65C38.2107 28.09 36.6307 28.57 34.8207 28.68L34.8307 28.7ZM24.4407 23.84C22.5207 23.71 20.6207 24 18.7207 24.2C15.1207 24.58 11.6607 25.44 8.5807 27.46C5.6307 29.39 4.3107 32.1 4.7107 35.61C4.8907 37.22 5.5107 38.68 6.3007 40.08C9.2407 45.28 13.6607 49.02 18.4307 52.43C18.8907 52.76 19.2907 52.75 19.7207 52.37C20.3607 51.8 21.1007 51.44 21.9807 51.41C22.7707 51.38 23.1907 50.91 23.3607 50.16C25.0207 42.61 27.6707 35.42 31.0207 28.47C31.5207 27.43 29.6507 24.17 28.4907 24.07C27.1407 23.95 25.7907 23.91 24.4407 23.84ZM23.5607 67.45C23.5207 69.25 23.6807 71.04 23.8707 72.82C24.2907 76.78 25.1207 80.61 27.5507 83.9C29.0207 85.89 30.9307 87.15 33.4507 87.31C35.2407 87.43 36.9407 87.06 38.5507 86.29C44.4407 83.47 48.4607 78.66 52.1807 73.52C52.5307 73.04 52.3807 72.63 52.0407 72.23C51.6307 71.74 51.2007 71.22 51.1507 70.57C51.0407 69.24 50.2907 68.65 49.0407 68.38C42.1307 66.85 35.5207 64.44 29.1507 61.37C28.0607 60.85 27.0707 60.6 26.1407 61.67C25.8307 62.03 25.3407 62.17 24.8607 62.28C24.1407 62.44 23.7807 62.9 23.7507 63.63C23.6907 64.9 23.6307 66.18 23.5707 67.45H23.5607ZM67.9907 23.86C67.9907 23.86 67.9107 23.86 67.8707 23.86C67.8707 22.55 67.9607 21.22 67.8507 19.92C67.5507 16.11 66.7007 12.44 64.7007 9.12C62.7207 5.84 59.3707 4.32 55.7407 5.07C53.3507 5.56 51.3007 6.8 49.3407 8.2C45.4607 10.97 42.5007 14.62 39.7107 18.43C39.3607 18.91 39.3007 19.35 39.6807 19.84C40.1307 20.41 40.5407 21.07 40.5307 21.78C40.5107 23.12 41.1907 23.62 42.3907 23.76C42.8607 23.81 43.3207 23.99 43.7807 24.1C50.2507 25.71 56.5207 27.91 62.5107 30.85C63.3707 31.27 64.0307 31.36 64.6907 30.53C65.2507 29.82 66.1007 29.47 66.9607 29.28C67.7407 29.1 68.0007 28.67 67.9907 27.93C67.9707 26.57 67.9907 25.22 67.9907 23.86ZM87.0407 58.07C87.1007 55.32 85.9807 52.96 84.5207 50.73C81.7507 46.49 77.9707 43.25 73.9507 40.27C71.6807 38.59 68.9407 39.56 68.3007 42.31C66.6307 49.44 64.2807 56.32 61.0607 62.89C60.5307 63.97 60.3507 64.86 61.3207 65.79C61.6107 66.06 61.7907 66.56 61.8307 66.98C61.9407 68.05 62.6007 68.27 63.4907 68.25C64.5607 68.23 65.6607 68.04 66.7007 68.35C67.9407 68.72 68.8007 68.35 69.6707 67.45C72.4607 64.53 75.8107 62.54 79.7907 61.65C81.3607 61.3 82.9507 61.25 84.5407 61.22C86.4707 61.18 86.9307 60.69 87.0307 58.79C87.0407 58.55 87.0307 58.31 87.0307 58.07H87.0407ZM24.0707 83.33C24.0807 82.49 23.6407 81.94 23.4007 81.33C21.2607 75.78 20.9607 70 21.3007 64.15C21.3707 62.98 21.0807 62.23 20.0107 61.63C18.0607 60.52 17.2207 58.73 17.5307 56.49C17.6907 55.37 17.3307 54.55 16.4107 53.93C15.8507 53.55 15.3207 53.13 14.7807 52.72C10.2507 49.3 6.2307 45.42 3.6707 40.25C3.5707 40.05 3.4807 39.79 3.1607 39.86C-1.2593 53.16 10.4707 77.67 24.0707 83.33ZM24.0107 21.56C25.3207 21.56 26.6407 21.56 27.9507 21.56C28.9207 21.56 29.6807 21.19 30.1107 20.33C31.3707 17.83 33.4507 17.04 36.0807 17.48C36.9807 17.63 37.5107 17.37 38.0607 16.61C41.7407 11.55 45.8507 6.91 51.5507 4C51.7407 3.9 52.0907 3.81 51.9707 3.52C51.8107 3.13 51.3707 3.2 51.0407 3.16C40.7607 1.96 31.2507 4.15 22.5007 9.67C16.9807 13.15 12.5607 17.74 9.0907 23.25C8.9107 23.53 8.5607 23.81 8.9007 24.19C9.1107 24.42 9.3407 24.26 9.5507 24.16C14.1407 22.04 19.0107 21.44 23.9907 21.56H24.0107ZM67.4707 8.73C68.0707 10.43 68.6207 11.79 69.0407 13.18C70.4007 17.74 70.6507 22.43 70.4107 27.15C70.3407 28.5 70.5007 29.52 71.8307 30.37C73.7007 31.56 74.3807 33.48 73.9407 35.69C73.7407 36.67 73.9407 37.34 74.7907 37.94C80.0507 41.7 84.9007 45.86 87.8907 51.78C88.0007 51.99 88.1207 52.23 88.4107 52.2C88.7407 52.17 88.7007 51.87 88.7307 51.65C88.8107 51.1 88.8907 50.54 88.9307 49.99C89.8507 36.96 85.8607 25.65 76.9307 16.13C74.2507 13.27 71.2407 10.8 67.4807 8.74L67.4707 8.73ZM39.3407 88.77C39.7107 88.88 39.9007 88.97 40.0807 88.99C48.1807 90.12 55.9407 88.86 63.4607 85.76C64.2007 85.45 64.4007 85.05 64.2907 84.31C63.6507 79.91 64.3907 75.74 66.4807 71.82C66.9207 70.99 66.6007 70.76 65.8107 70.73C64.8507 70.7 63.9007 70.68 62.9507 70.59C62.2307 70.52 61.7507 70.74 61.3907 71.4C60.2707 73.45 58.5607 74.47 56.1807 74.23C55.0707 74.12 54.3707 74.58 53.7107 75.5C50.3407 80.19 46.5807 84.49 41.5507 87.49C40.8807 87.89 40.0607 88.03 39.3507 88.76L39.3407 88.77ZM83.7107 81.8C83.7107 84.23 83.6907 86.66 83.7107 89.09C83.7207 90.04 83.4507 91.23 84.8807 91.44C85.7707 91.57 86.0907 90.92 86.0907 89.17C86.0907 87.5 86.1107 85.82 86.0907 84.15C86.0807 83.28 86.4507 82.91 87.3207 82.97C88.2707 83.04 89.2307 83.05 90.1807 82.92C93.2707 82.49 95.3207 80.18 95.1907 77.25C95.0707 74.47 92.7307 72.22 89.7607 72.08C88.4107 72.02 87.0507 72.03 85.7007 72.04C84.1507 72.04 83.7207 72.47 83.7107 74.03C83.7007 76.62 83.7107 79.21 83.7107 81.8ZM76.7307 81.62C76.7307 84.17 76.7307 86.72 76.7307 89.28C76.7307 89.6 76.7007 89.92 76.7607 90.23C76.8807 90.91 77.1907 91.45 78.0007 91.42C78.7507 91.4 79.0207 90.9 79.1107 90.25C79.1407 90.05 79.1507 89.85 79.1507 89.65C79.1507 84.39 79.1507 79.12 79.1507 73.86C79.1507 73.58 79.1307 73.3 79.0607 73.03C78.9307 72.5 78.5707 72.23 78.0207 72.22C77.5007 72.22 77.0907 72.39 76.8707 72.9C76.7007 73.28 76.7307 73.68 76.7307 74.08C76.7307 76.59 76.7307 79.1 76.7307 81.62Z" fill="#5C8DAC"/>
|
|
<path d="M28.7909 97.1306C28.2309 97.0006 27.6009 96.8906 26.9909 96.7206C19.5509 94.6406 12.7609 91.3906 7.27089 85.7806C7.21089 85.7206 7.16089 85.6606 7.10089 85.6106C6.46089 85.0206 5.97089 84.3906 6.78089 83.6006C7.50089 82.9006 8.13089 83.2606 8.75089 83.8306C9.68089 84.7006 10.6209 85.5606 11.6109 86.3706C16.3509 90.2406 21.7609 92.7606 27.6609 94.2906C28.2409 94.4406 28.8309 94.5706 29.3809 94.7806C30.0209 95.0306 30.2709 95.5406 30.1209 96.2306C29.9709 96.9106 29.4409 97.0406 28.8009 97.1306H28.7909Z" fill="#6492AF"/>
|
|
<path d="M5.92128 80.8797C5.95128 81.5297 5.75128 81.8797 5.33128 82.1197C4.89128 82.3697 4.46128 82.2997 4.12128 81.9897C3.23128 81.1797 2.58128 80.1897 2.25128 79.0097C2.11128 78.4997 2.31128 78.0697 2.74128 77.7697C3.09128 77.5197 3.48128 77.4297 3.84128 77.6997C4.96128 78.5397 5.63128 79.6797 5.92128 80.8597V80.8797Z" fill="#6A96B2"/>
|
|
<path d="M98.9897 39.2594C98.9897 40.1794 99.0197 41.0894 98.9897 42.0094C98.9597 42.7994 98.8197 43.5594 97.7597 43.5694C96.7197 43.5694 96.5097 42.8394 96.4897 42.0394C96.4297 39.4094 96.3197 36.7894 95.9097 34.1794C94.3997 24.4994 90.1997 16.2694 82.8197 9.73941C82.3697 9.33941 81.9097 8.96941 81.4797 8.54941C80.9497 8.02941 80.6497 7.39941 81.2297 6.75941C81.8097 6.12941 82.4497 6.20941 83.1297 6.75941C87.4597 10.2594 90.9797 14.4394 93.6197 19.3494C96.9697 25.5694 98.5997 32.2394 98.9897 39.2694V39.2594Z" fill="#6492B0"/>
|
|
<path d="M77.0414 5.4493C75.8314 5.0193 74.6314 4.4993 73.5914 3.6693C73.1514 3.3193 73.1814 2.8193 73.4414 2.3693C73.7114 1.8793 74.1314 1.5593 74.7214 1.7193C75.9614 2.0693 77.0914 2.6493 78.1014 3.4493C78.5414 3.7993 78.5714 4.2693 78.3614 4.7493C78.1214 5.2793 77.6514 5.4693 77.0514 5.4593L77.0414 5.4493Z" fill="#6996B2"/>
|
|
<path d="M86.1113 77.7801C86.1113 74.4601 86.1713 74.3901 89.5413 74.4701C91.4613 74.5201 92.7313 75.6601 92.8013 77.4101C92.8713 79.1501 91.6913 80.4001 89.7613 80.5501C88.8913 80.6201 88.0113 80.6101 87.1413 80.6101C86.4713 80.6101 86.1113 80.2701 86.1113 79.5801C86.1113 78.9801 86.1113 78.3801 86.1113 77.7901V77.7801Z" fill="#5F90AD"/>
|
|
</svg>
|
|
</div>
|
|
<h2 class="ipNumber" style="color: white;"></h2>
|
|
</div>
|
|
<div class="gridGraphSection">
|
|
<div class="graphTitle">
|
|
<p>Indicator Heatmap</p>
|
|
<select id="Indicator">
|
|
<option value="Daily">Daily</option>
|
|
<option value="Weekly">Weekly</option>
|
|
<option value="Monthly">Monthly</option>
|
|
</select>
|
|
</div>
|
|
<div class="graphContentFlex">
|
|
<div class="monthListFlex" id="MonthIndicator">
|
|
<p>Jan</p>
|
|
<p>Feb</p>
|
|
<p>Mar</p>
|
|
<p>Apr</p>
|
|
<p>May</p>
|
|
<p>Jun</p>
|
|
<p>Jul</p>
|
|
<p>Sug</p>
|
|
<p>Sep</p>
|
|
<p>Oct</p>
|
|
<p>Nov</p>
|
|
<p>Dec</p>
|
|
</div>
|
|
<div class="monthListFlex" id="WeekIndicator">
|
|
<p>Sun</p>
|
|
<p>Mon</p>
|
|
<p>Tue</p>
|
|
<p>Wed</p>
|
|
<p>Thu</p>
|
|
<p>Fri</p>
|
|
<p>Sat</p>
|
|
</div>
|
|
<div class="monthListFlex" id="DayIndicator">
|
|
<p>12AM</p>
|
|
<p>1AM</p>
|
|
<p>2AM</p>
|
|
<p>3AM</p>
|
|
<p>4AM</p>
|
|
<p>5AM</p>
|
|
<p>6AM</p>
|
|
<p>7AM</p>
|
|
<p>8AM</p>
|
|
<p>9AM</p>
|
|
<p>10AM</p>
|
|
<p>11AM</p>
|
|
<p>12PM</p>
|
|
<p>1PM</p>
|
|
<p>2PM</p>
|
|
<p>3PM</p>
|
|
<p>4PM</p>
|
|
<p>5PM</p>
|
|
<p>6PM</p>
|
|
<p>7PM</p>
|
|
<p>8PM</p>
|
|
<p>09PM</p>
|
|
<p>10PM</p>
|
|
<p>11PM</p>
|
|
</div>
|
|
<div id="gridDivSection" class="gridDivSection"></div>
|
|
<div class="monthListFlex" id="change-number" style="padding-top:10px;">
|
|
<p>92</p>
|
|
<p>91</p>
|
|
<p>89</p>
|
|
<p>95</p>
|
|
<p>98</p>
|
|
<p>90</p>
|
|
<p>93</p>
|
|
<p>92</p>
|
|
<p>81</p>
|
|
<p>98</p>
|
|
<p>97</p>
|
|
<p>91</p>
|
|
</div>
|
|
</div>
|
|
<div class="graphTitle">
|
|
<p>287 times 139.59.164.251 appeared in at least one feed</p>
|
|
<div class="LessMoreDivFlex">
|
|
<p class="LessMoreText">Less</p>
|
|
<span class="boxesSpan"></span>
|
|
<span class="boxesSpan"></span>
|
|
<span class="boxesSpan"></span>
|
|
<span class="boxesSpan"></span>
|
|
<span class="boxesSpan"></span>
|
|
<span class="boxesSpan"></span>
|
|
<p class="LessMoreText">More</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="gridGraphSection">
|
|
<div class="mainCalendarSection">
|
|
<div class="dateCalendarContentFlex" id="calendar"></div>
|
|
<div class="chartTitleLable">
|
|
<p><span></span>True Positive</p>
|
|
<p><span></span>False Positive</p>
|
|
<p><span></span>Anonymous Hit</p>
|
|
</div>
|
|
<div class="bubbleChartSection">
|
|
<div class="rowSection">
|
|
<div class="bubbleChartRowLine"></div>
|
|
<div class="bubbleChartRowLine"></div>
|
|
<div class="bubbleChartRowLine"></div>
|
|
<div class="bubbleChartRowLine"></div>
|
|
</div>
|
|
<div class="columnSection">
|
|
<div class="bubbleChartColumnLine"></div>
|
|
<div class="bubbleChartColumnLine"></div>
|
|
<div class="bubbleChartColumnLine"></div>
|
|
<div class="bubbleChartColumnLine"></div>
|
|
<div class="bubbleChartColumnLine"></div>
|
|
<div class="bubbleChartColumnLine"></div>
|
|
<div class="bubbleChartColumnLine"></div>
|
|
<div class="bubbleChartColumnLine"></div>
|
|
</div>
|
|
<div class="bottomTextSection" id="bubbleBottomTextChart">
|
|
<p>68</p>
|
|
<p>70</p>
|
|
<p>72</p>
|
|
<p>74</p>
|
|
<p>76</p>
|
|
<p>78</p>
|
|
<p>80</p>
|
|
<p>82</p>
|
|
</div>
|
|
<div class="bubble bubble-animation">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
<div class="bubble FalsePositive bubble-animation">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
<div class="bubble AnonymousHit bubble-animation">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
<div class="bubble bubble-animation">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
<div class="bubble FalsePositive bubble-animation">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
<div class="bubble AnonymousHit bubble-animation">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
<div class="bubble bubble-animation">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
<div class="bubble FalsePositive bubble-animation">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
<div class="bubble AnonymousHit bubble-animation">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
<div class="bubble bubble-animation">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
<div class="bubble bubble-animation">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
<script src="{% static 'dashboard/js/running-processes.js' %}"></script>
|
|
<script>
|
|
// Set the auth token in localStorage if it's provided
|
|
const authToken = "{{ authToken }}";
|
|
if (authToken) {
|
|
localStorage.setItem('authToken', authToken);
|
|
console.log('Auth token saved to localStorage:', authToken);
|
|
}
|
|
</script>
|
|
<script>
|
|
var colors = ["#1d86c7", "#5589a9", "#4fa0d3", "#2f6689", "#274654"];
|
|
|
|
const numbers = document.querySelectorAll('#change-number p');
|
|
let range = [10, 71]; // Initial range 10-71
|
|
let interval;
|
|
function changeNumbers() {
|
|
numbers.forEach(num => {
|
|
num.textContent = Math.floor(Math.random() * (range[1] - range[0])) + range[0];
|
|
});
|
|
}
|
|
function changeRange() {
|
|
clearInterval(interval);
|
|
if (range[1] === 71) {
|
|
range = [90, 100];
|
|
colors.push("#f02")
|
|
colors.push("#c9620a")
|
|
interval = setInterval(changeNumbers, 2000);
|
|
setTimeout(changeRange, 20000);
|
|
} else {
|
|
range = [10, 71];
|
|
colors.pop()
|
|
colors.pop()
|
|
interval = setInterval(changeNumbers, 2000);
|
|
setTimeout(changeRange, 60000);
|
|
}
|
|
changeNumbers();
|
|
}
|
|
changeRange();
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
var container = document.getElementById("gridDivSection");
|
|
|
|
for (var i = 0; i < 583; i++) {
|
|
var box = document.createElement("div");
|
|
box.className = "gridBox";
|
|
container.appendChild(box);
|
|
}
|
|
|
|
function getRandomColor() {
|
|
return colors[Math.floor(Math.random() * colors.length)];
|
|
}
|
|
|
|
function changeColor() {
|
|
var boxes = document.querySelectorAll(".gridBox");
|
|
boxes.forEach(function (box) {
|
|
box.style.backgroundColor = getRandomColor();
|
|
});
|
|
}
|
|
|
|
function animateColorChange() {
|
|
setInterval(changeColor, 1000); // Change color every second
|
|
}
|
|
|
|
animateColorChange(); // Start the animation
|
|
});
|
|
</script>
|
|
<script>
|
|
const numbersBubble = document.querySelectorAll('#bubbleBottomTextChart p');
|
|
const changeBubbleAnimation = document.querySelectorAll('.bubble');
|
|
let rangeBubble = [10, 71];
|
|
let intervalBubble;
|
|
function changeBubbleNumbers() {
|
|
numbersBubble.forEach(num => {
|
|
num.textContent = Math.floor(Math.random() * (rangeBubble[1] - rangeBubble[0])) + rangeBubble[0];
|
|
});
|
|
}
|
|
function changeBubbleRange() {
|
|
clearInterval(intervalBubble);
|
|
if (rangeBubble[1] === 71) {
|
|
rangeBubble = [10, 99];
|
|
changeBubbleAnimation.forEach(function(bubble) {
|
|
bubble.classList.add('bubble-animation-range-90');
|
|
bubble.classList.remove('bubble-animation');
|
|
});
|
|
intervalBubble = setInterval(changeBubbleNumbers, 2000);
|
|
setTimeout(changeBubbleRange, 2000);
|
|
} else {
|
|
rangeBubble = [10, 71];
|
|
changeBubbleAnimation.forEach(function(bubble) {
|
|
bubble.classList.remove('bubble-animation-range-90');
|
|
bubble.classList.add('bubble-animation');
|
|
});
|
|
intervalBubble = setInterval(changeBubbleNumbers, 2000);
|
|
setTimeout(changeBubbleRange, 300000);
|
|
}
|
|
changeBubbleNumbers();
|
|
}
|
|
changeBubbleRange()
|
|
</script>
|
|
<script>
|
|
function createCalendar(year, month) {
|
|
var numDays = new Date(year, month, 0).getDate();
|
|
var calendarHTML = "";
|
|
for (var i = 0; i < numDays; i++) {
|
|
var currentDate = new Date(year, month - 1, i + 1);
|
|
var formattedDate = currentDate.getDate().toString().padStart(2, '0') + '/' + (currentDate.getMonth() + 1).toString().padStart(2, '0') + '/' + currentDate.getFullYear().toString();
|
|
var dayPart = formattedDate.split('/')[0];
|
|
|
|
var dayNames = ['Tue','Wed', 'Thu', 'Fri', 'Sat','Sun', 'Mon'];
|
|
var dayName = dayNames[currentDate.getDay()];
|
|
|
|
var monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
|
|
var monthName = monthNames[currentDate.getMonth() + 1];
|
|
if(i + 1==1){
|
|
calendarHTML+=` <div class="YearSection">
|
|
<p class="monthText">${monthName}</p>
|
|
<p class="YearText">${currentDate.getFullYear()}</p>
|
|
</div>`;
|
|
}
|
|
var isCurrent = 0;
|
|
if (new Date(year, month , i + 1).toLocaleDateString() == new Date().toLocaleDateString()) {
|
|
isCurrent = 1;
|
|
}
|
|
|
|
calendarHTML += `<div class="dateSection ${isCurrent == 1 ? 'dateActiveSection' : ''}">
|
|
<p class="DateText">${dayPart}</p>
|
|
<p class="DaysText">${dayName}</p>
|
|
<p class="roundSection"></p>
|
|
</div>`;
|
|
|
|
}
|
|
|
|
return calendarHTML;
|
|
}
|
|
const currentDate = new Date();
|
|
const currentYear = currentDate.getFullYear();
|
|
const currentMonth = currentDate.getMonth() + 1;
|
|
const previousMonthDate = new Date();
|
|
previousMonthDate.setMonth(currentDate.getMonth() - 1);
|
|
const previousMonth = previousMonthDate.getMonth() + 1;
|
|
const nextMonthDate = new Date();
|
|
nextMonthDate.setMonth(currentDate.getMonth() + 1);
|
|
const nextMonth = nextMonthDate.getMonth() + 1;
|
|
|
|
var calendarHTML = createCalendar(currentYear, previousMonth);
|
|
calendarHTML += createCalendar(currentYear,currentMonth);
|
|
calendarHTML += createCalendar(currentYear, nextMonth);
|
|
document.getElementById("calendar").innerHTML = calendarHTML;
|
|
|
|
var dateSections = document.querySelectorAll('.dateSection');
|
|
dateSections.forEach(function(dateSection) {
|
|
dateSection.addEventListener('click', function() {
|
|
dateSections.forEach(function(dateSection) {
|
|
dateSection.classList.remove('dateActiveSection');
|
|
})
|
|
this.classList.toggle('dateActiveSection');
|
|
});
|
|
});
|
|
</script>
|
|
<script>
|
|
$("#Indicator").change(function(e){
|
|
let value=e.target.value;
|
|
displayNone()
|
|
if(value=="Daily"){
|
|
$("#DayIndicator").css('display','flex')
|
|
}else if(value=="Weekly"){
|
|
$("#WeekIndicator").css('display','flex')
|
|
}else if(value=="Monthly"){
|
|
$("#MonthIndicator").css('display','flex')
|
|
}
|
|
})
|
|
|
|
function displayNone(){
|
|
$("#DayIndicator").css('display','none')
|
|
$("#WeekIndicator").css('display','none')
|
|
$("#MonthIndicator").css('display','none')
|
|
}
|
|
displayNone()
|
|
$("#DayIndicator").css('display','flex')
|
|
</script>
|
|
<!-- <script>
|
|
window.onload = function() {
|
|
let authToken = "{{ authToken|default:'' }}"; // Default to an empty string if the token is not passed
|
|
console.log('Auth token received:', authToken); // Log the value of the token
|
|
|
|
if (authToken) {
|
|
// Store the token in localStorage
|
|
localStorage.setItem('authToken', authToken);
|
|
console.log('Token stored successfully!');
|
|
} else {
|
|
alert('Error: Token not found.');
|
|
}
|
|
}
|
|
</script> -->
|
|
<script>
|
|
fetch('/user-details-and-device-pods/')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
console.log(data); // Check the response data in the console
|
|
|
|
// Assuming data.device_pods is an array and you want to display the first pod
|
|
if (data.device_pods && data.device_pods.length > 0) {
|
|
document.querySelector('.ipnumber').textContent = data.device_pods[0].pod;
|
|
} else {
|
|
document.querySelector('.ipnumber').textContent = 'No pod information available';
|
|
}
|
|
})
|
|
.catch(error => console.error('Error fetching data:', error));</script>
|
|
</body>
|
|
{% endblock %}
|
|
</html> |