Semikolon/Technikholger
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: Semikolon:d01c3ecab2191b238b654b9f7ff8982711cb0bab
Branches Tags
Semikolon:main
...
compare: Semikolon:a6893613dba134beca6e46b9f31a30f270ced4a3
Branches Tags
Semikolon:main

2 Commits
d01c3ecab2 ... a6893613db

Author SHA1 Message Date
Jan-Lukas Pagel
a6893613db change name 2023-03-21 11:32:13 +01:00
Jan-Lukas Pagel
ec97706d2c add help button in right corner 2023-03-21 11:32:00 +01:00
2 changed files with 35 additions and 4 deletions
Show Stats Expand all files Collapse all files

17
index.html
View File

@ -5,6 +5,7 @@
<meta http-equiv='X-UA-Compatible' content='IE=edge'> <meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Technik Holger</title> <title>Technik Holger</title>
<meta name='viewport' content='width=device-width, initial-scale=1'> <meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
<link rel='stylesheet' type='text/css' media='screen' href='main.css'> <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/themes/smoothness/jquery-ui.css"> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
@ -19,7 +20,7 @@
<p>Startseite</p> <p>Startseite</p>
</div> </div>
<div id="element"> <div id="element">
<p>Kundenlogin</p> <p>Mein Konto</p>
</div> </div>
<div id="element"> <div id="element">
<p>Impressum</p> <p>Impressum</p>
@ -27,7 +28,14 @@
</div> </div>
</div> </div>
<button id="help">Ich brauche Hilfe!</button> <div id="help-div">
<button id="help">
<span class="material-symbols-outlined">
chat
</span>
</button>
</div>
<div id="chatbot"> <div id="chatbot">
<iframe src="https://web.powerva.microsoft.com/environments/Default-5e98bbb4-4a0c-4dae-8254-dcaa73b41da8/bots/new_bot_a5e0b0b26ba9409abc86d421e7d56f91/webchat" frameborder="0" style="width: 100%; height: 100%;"></iframe> <iframe src="https://web.powerva.microsoft.com/environments/Default-5e98bbb4-4a0c-4dae-8254-dcaa73b41da8/bots/new_bot_a5e0b0b26ba9409abc86d421e7d56f91/webchat" frameborder="0" style="width: 100%; height: 100%;"></iframe>
@ -36,7 +44,10 @@
<script> <script>
$('#chatbot').dialog({ $('#chatbot').dialog({
autoOpen: false autoOpen: false,
height: 500,
width: 450,
positon: {my: 'center top'}
}); });
$('#help').click(() => $('#chatbot').dialog('open')); $('#help').click(() => $('#chatbot').dialog('open'));

22
main.css
View File

@ -29,4 +29,24 @@ h1 {
background-color: lightgray; background-color: lightgray;
border-radius: 5px; border-radius: 5px;
padding: 5px 10px 5px 10px; padding: 5px 10px 5px 10px;
} }
#help-div {
z-index: 10;
position: fixed;
bottom: -4px;
right: 10px;
}
#help {
margin-bottom: 10px;
background-color: aqua;
border-radius: 100%;
width: 60px;
height: 60px;
text-align: center;
}
#help .material-symbols-outlined {
font-size: 40px;
}