Hugging Face's logo

Spaces:
JavedA
/
master_Thesis
Running

App Files Community
master_Thesis
File size: 4,317 Bytes 
d6b8d19
 
 
 
 
 
 
 
b6ed5af
d6b8d19
 
 
 
 
 
 
5ce9c54
d6b8d19
4abace5
d6b8d19
 
 
 
b6ed5af
d6b8d19
b6ed5af
d6b8d19
 
 
b6ed5af
d6b8d19
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
b6ed5af
d6b8d19
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
b6ed5af
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
d6b8d19
 
 
abe9a93
 
 
 
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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
 


<script>
console.log("Right Nav script is found and activated");
</script>


<div id="popper_Tooltip_Gen">
    Feel free to share your thoughts
<div id="pop_Arrow_Gen" data-popper-arrow></div>
</div>

<!-- Production version -->
<script src="https://unpkg.com/@popperjs/core@2"></script>

<!-- load external javascript-code -->
<script src="/Web_Code/Js/lotti_Sidebar_Anim.js"></script>

<script src='/Web_Code/Js/popper_Tooltip_General.js'></script>

<!-- documentation: https://docs.lottiefiles.com/dotlottie-player/ -->
<script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.js"></script>

<dotlottie-player
id="lotti_Anim_Each_Page"
mode="normal"
style="max-height:15rem"
background="transparent"
speed="1"
>
</dotlottie-player>

<script>
// get acceess to the right sidebar
const quartoMarginSidebar = document.getElementById("quarto-margin-sidebar");

// generate a place where the lotti animation shall be placed
const player = document.getElementById('lotti_Anim_Each_Page');

// take it from the previous position an move it to the new posistion --> removed prom previous DOM pos
quartoMarginSidebar.insertBefore(player, quartoMarginSidebar.firstChild);


/* --------------------------- get Feedback <p><a> -------------------------- */
// Create a new <p> element
const button_Elem = document.createElement('button');

// Create a new <a> element
const aElement = document.createElement('a');

// Set the href attribute of the <a> element
aElement.href = 'https://discord.gg/EEsXp39DaA';
aElement.id = 'feedback_A';
button_Elem.id = 'feedback_Button';

// button_Elem.setAttribute("aria-describedby","popper_Tooltip_Gen");
// aElement.setAttribute("aria-describedby","popper_Tooltip_Gen");

// Set the text content of the <a> element
const linkText = document.createElement('span');
linkText.textContent = 'Share your thoughts';

// Create a new SVG element
const svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svgElement.setAttribute('viewBox', '0 0 512 512'); // set the viewBox attribute to define the SVG size
svgElement.setAttribute('class', 'ionicon'); // set the class attribute to apply any CSS styles
svgElement.setAttribute('width', '2rem'); // set the width attribute to scale the SVG
svgElement.setAttribute('height', '2rem'); // set the height attribute to scale the SVG

// Set the content of the SVG element to the contents of the SVG file
svgElement.innerHTML = `<!-- see https://ionic.io/ionicons/
see <ion-icon name="chatbox-ellipses-outline"></ion-icon> -->
<path d="M408 64H104a56.16 56.16 0 00-56 56v192a56.16 56.16 0 0056 56h40v80l93.72-78.14a8 8 0 015.13-1.86H408a56.16 56.16 0 0056-56V120a56.16 56.16 0 00-56-56z" fill="none" stroke="#ecff7f" stroke-linejoin="round" stroke-width="32" />
<circle cx="160" cy="216" r="32" fill="#ecff7f" />
<circle cx="256" cy="216" r="32" fill="#ecff7f" />
<circle cx="352" cy="216" r="32" fill="#ecff7f" />`;


// Append the SVG element to the <a> element
aElement.appendChild(linkText);
aElement.appendChild(svgElement);

// Append the <a> element to the <p> element
button_Elem.appendChild(aElement);
quartoMarginSidebar.insertBefore(button_Elem, player.nextSibling);

// see: https://lottiefiles.com/129292-aeroplane-flying?lang=de
player.load('https://assets3.lottiefiles.com/packages/lf20_FsI2nYFYMo.json');
player.loop = false;

var second_Anim = false;

// Add event listener for click event
player.addEventListener('click', () => {
    player.play();
    complete_Check(second_Anim);

});


const popcorn = document.querySelector('#feedback_Button');
const tooltip = document.querySelector('#popper_Tooltip_Gen');

const popperInstance = Popper.createPopper(popcorn, tooltip, {
placement: 'top',
modifiers: [
    {
        name: 'offset',
    options: {
        offset: [0, 8],
    },
    },
],
});


// function onScriptLoad(popcorn) {
// if (typeof run_Pop === 'function') {
//     run_Pop(popcorn);
// }
// }

// document.addEventListener('readystatechange', (event) => {
// if (event.target.readyState === 'complete') {
//     onScriptLoad(popcorn);
// }
// });

// // If the script is already loaded before the readystatechange event, call the function directly
// if (document.readyState === 'complete') {
// onScriptLoad(popcorn);
// }


run_Pop(popcorn);

</script>