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

Compare commits

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

4 Commits
a6893613db ... main

Author SHA1 Message Date
Jan-Lukas Pagel
2d44012108 new design 2023-03-22 17:31:40 +01:00
Jan-Lukas Pagel
5ca968f389 wrap 2023-03-22 12:11:22 +01:00
Jan-Lukas Pagel
aa4d3ad7f1 add product infos and impress thx chatgpt 2023-03-22 12:00:59 +01:00
Jan-Lukas Pagel
0bc6d5cc6e add own bot html 2023-03-22 10:28:10 +01:00
7 changed files with 418 additions and 29 deletions
Expand all files Collapse all files

13
.gitignore vendored Normal file
View File

@@ -0,0 +1,13 @@
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
!.vscode/*.code-snippets
# Local History for Visual Studio Code
.history/
# Built Visual Studio Code Extensions
*.vsix

110
bot.html Normal file
View File

@@ -0,0 +1,110 @@
<!DOCTYPE html>
<html>
<head>
<!-- This styling is for the canvas demonstration purposes. It is recommended
that style is moved to separate file for organization in larger projects -->
<style>
html, body {
height: 100%;
}
body {
margin: 0;
}
h1 {
font-size: 16px;
font-family: Segoe UI;
line-height: 20px;
color: whitesmoke;
display: table-cell;
padding: 13px 0px 0px 20px;
}
.heading {
background-color: black;
height: 50px;
}
.main {
margin: 18px;
border-radius: 4px;
}
div[role="form"]{
background-color: white;
}
#webchat {
position: fixed;
height: calc(100% - 50px);
width: 100%;
top: 50px;
overflow: hidden;
}
</style>
</head>
<body>
<div>
<div class="heading">
<!-- Change the h1 text to change the bot name -->
<h1>Bei Technikfragen Holger fragen</h1>
</div>
<div id="webchat" role="main"></div>
</div>
<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
<script>
const styleOptions = {
// Add styleOptions to customize web chat canvas
hideUploadButton: true,
botAvatarInitials: 'HO',
accent: '#00809d',
botAvatarBackgroundColor: "#FFFFFF",
botAvatarImage: './images/holger.png',
};
// Add your BOT ID below
var BOT_ID = "a5e0b0b2-6ba9-409a-bc86-d421e7d56f91";
var theURL = "https://powerva.microsoft.com/api/botmanagement/v1/directline/directlinetoken?botId=" + BOT_ID;
const store = window.WebChat.createStore(
{},
({ dispatch }) => next => action => {
if (action.type === "DIRECT_LINE/CONNECT_FULFILLED") {
dispatch({
meta: {
method: "keyboard",
},
payload: {
activity: {
channelData: {
postBack: true,
},
//Web Chat will show the 'Greeting' System Topic message which has a trigger-phrase 'hello'
name: 'startConversation',
type: "event"
},
},
type: "DIRECT_LINE/POST_ACTIVITY",
});
}
return next(action);
}
);
fetch(theURL)
.then(response => response.json())
.then(conversationInfo => {
window.WebChat.renderWebChat(
{
directLine: window.WebChat.createDirectLine({
token: conversationInfo.token,
}),
store: store,
styleOptions: styleOptions
},
document.getElementById('webchat')
);
})
.catch(err => console.error("An error occurred: " + err));
</script>
</body>
</html>

BIN
images/holger.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

72
impressum.html Normal file
View File

@@ -0,0 +1,72 @@
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Technik Holger</title>
<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" 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/jqueryui/1.13.2/jquery-ui.min.js"></script>
</head>
<body>
<div id="header">
<h1>Technikholger.de - Dein IT Dienstleister deines Vertrauens</h1>
<div id="navbar">
<a id="element" href="./index.html">
<div >
<p>Startseite</p>
</div>
</a>
<a id="element">
<div >
<p>Mein Konto</p>
</div>
</a>
<a id="element" href="./impressum.html">
<div >
<p>Impressum</p>
</div>
</a>
</div>
</div>
<div id="impressum">
<h2>Impressum:</h2>
<p>Verantwortlich für den Inhalt dieser Website gemäß § 5 TMG:</p>
<p>Jan-Lukas Pagel<br>
Am Barkenkamp 13<br>
25474 Hasloh<br>
Deutschland</p>
<p>Kontakt:<br>
Telefon: +49 4106 6392721<br>
E-Mail: webmaster{at}technikholger.de</p>
<p>Haftungsausschluss:<br>
Trotz sorgfältiger inhaltlicher Kontrolle übernehmen wir keine Haftung für die Inhalte externer Links. Für den Inhalt der verlinkten Seiten sind ausschließlich deren Betreiber verantwortlich.</p>
<p>Urheberrecht:<br>
Die durch den Betreiber dieser Website erstellten Inhalte und Werke auf diesen Seiten unterliegen dem deutschen Urheberrecht. Die Vervielfältigung, Bearbeitung, Verbreitung und jede Art der Verwertung außerhalb der Grenzen des Urheberrechts bedürfen der schriftlichen Zustimmung des jeweiligen Autors bzw. Erstellers.</p>
<p>Datenschutz:<br>
Die Nutzung unserer Website ist in der Regel ohne Angabe personenbezogener Daten möglich. Soweit auf unseren Seiten personenbezogene Daten (beispielsweise Name, Anschrift oder E-Mail-Adressen) erhoben werden, erfolgt dies, soweit möglich, stets auf freiwilliger Basis. Weitere Informationen zum Datenschutz entnehmen Sie bitte unserer Datenschutzerklärung.</p>
<p>Quelle: muster-vorlagen.net</p>
</div>
<div id="help-div">
<button id="help">
<span class="material-symbols-outlined">
chat
</span>
</button>
</div>
<div id="chatbot">
<iframe src="./bot.html" frameborder="0" style="width: 100%; height: 100%;"></iframe>
</div>
<script src="script.js"></script>
</body>
</html>

169
index.html
View File

@@ -1,34 +1,163 @@
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Technik Holger</title>
<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"
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" 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/jqueryui/1.13.2/jquery-ui.min.js"></script>
</head>
<body>
</head>
<body>
<div id="header">
<h1>Technikholger.de - Dein IT Dienstleister deines Vertrauens</h1>
<div id="navbar">
<div id="element">
<p>Startseite</p>
</div>
<div id="element">
<p>Mein Konto</p>
</div>
<div id="element">
<p>Impressum</p>
</div>
<a id="element" href="./index.html">
<div >
<p>Startseite</p>
</div>
</a>
<a id="element" href="#">
<div >
<p>Mein Konto</p>
</div>
</a>
<a id="element" href="./impressum.html">
<div >
<p>Impressum</p>
</div>
</a>
</div>
</div>
<div id="products">
<div id="cloud">
<h2>
Wir bieten Ihnen professionelle Clouddienste als Software as a Service (SaaS) an.
</h2>
<p>
Mit unseren Cloud-Diensten können Sie Software-as-a-Service (SaaS) nutzen und von überall aus auf Ihre
Anwendungen zugreifen.
Unsere Password-Manager-Dienste bieten eine sichere Möglichkeit, all Ihre Passwörter an einem Ort zu
speichern und sicher zu verwalten.
Mit unserem Nextcloud-Hosting können Sie Dateien und Dokumente sicher in der Cloud speichern und von jedem
Gerät aus darauf zugreifen.
Vertrauen Sie auf unsere zuverlässigen Cloud-Dienste und lassen Sie uns Ihnen helfen, Ihre Online-Projekte
noch erfolgreicher zu machen.
</p>
<h2>SaaS Produkte</h2>
<ul>
<li>Drive (Cloudspeicher auf Nextcloud basis.)</li>
<li>Passwortmanager (Bitwarden)</li>
</ul>
</div>
<div id="webspace">
<h2>
Wir bieten Ihnen Webspace inkl. Top-Level - Domains an.
</h2>
<p>
Willkommen in der Welt des Webhostings! Bei uns erhalten Sie alles, was Sie brauchen, um Ihre Website online
zu bringen und erfolgreich zu machen.
Wir bieten Ihnen Webspace-Hosting inklusive SSL-Zertifikat, damit Ihre Website sicher und verschlüsselt ist.
Außerdem erhalten Sie bei uns eine Topleveldomain,
damit Ihre Website einen professionellen und vertrauenswürdigen Eindruck macht. Mit unseren
Email-Postfächern können Sie zudem
Ihre Geschäftskommunikation effektiv und zuverlässig organisieren. Verlassen Sie sich auf unsere
erstklassige Infrastruktur
und unseren kompetenten Support und starten Sie heute noch Ihre Online-Präsenz.
</p>
<h2>Webspace-Pakete</h2>
<h3>Basic-Paket:</h3>
<ul>
<li>Webspace-Hosting inklusive SSL-Zertifikat</li>
<li>1 Email-Postfach</li>
<li>Kostenlose Subdomain</li>
</ul>
<p>Das Basic-Paket bietet Ihnen alles, was Sie brauchen, um Ihre erste Website online zu stellen.</p>
<h3>Standard-Paket:</h3>
<ul>
<li>Webspace-Hosting inklusive SSL-Zertifikat</li>
<li>5 Email-Postfächer</li>
<li>Kostenlose Topleveldomain (.de, .com, .net oder .org)</li>
</ul>
<p>Das Standard-Paket bietet Ihnen alles, was Sie brauchen, um eine professionelle Website mit einer eigenen Domain und mehreren Email-Adressen zu betreiben.</p>
<h3>Business-Paket:</h3>
<ul>
<li>Webspace-Hosting inklusive SSL-Zertifikat</li>
<li>10 Email-Postfächer</li>
<li>Kostenlose Topleveldomain (.de, .com, .net oder .org)</li>
<li>Unbegrenzter Traffic</li>
</ul>
<p>Das Business-Paket bietet Ihnen alles, was Sie brauchen, um eine geschäftliche Website mit unbegrenztem Traffic und mehreren Email-Adressen zu betreiben.</p>
<h3>Pro-Paket:</h3>
<ul>
<li>Webspace-Hosting inklusive SSL-Zertifikat</li>
<li>20 Email-Postfächer</li>
<li>Kostenlose Topleveldomain (.de, .com, .net oder .org)</li>
<li>Unbegrenzter Traffic</li>
<li>Unbegrenzter Webspace</li>
<li>24/7-Support</li>
</ul>
<p>Das Pro-Paket bietet Ihnen alles, was Sie brauchen, um eine professionelle Website mit unbegrenztem Webspace, unbegrenztem Traffic und mehreren Email-Adressen zu betreiben.</p>
</div>
<div id="server">
<h2>
Wir bieten ihnen Serverhosting (KVM-Server auf Linux und Gameserver)
</h2>
<p>Unsere Serverhosting-Dienste bieten Ihnen die Flexibilität und Leistung, die Sie benötigen,
um Ihre Online-Projekte zum Erfolg zu führen. Mit unseren KVM-Servern haben Sie die volle Kontrolle über
Ihre virtuelle Maschine
und können sie ganz nach Ihren Wünschen konfigurieren. Unsere Gameserver sind optimiert für
Gaming-Performance und bieten Ihnen eine
zuverlässige und stabile Plattform für Online-Spiele mit Ihren Freunden oder der Gaming-Community. Vertrauen
Sie auf unsere
Expertise im Bereich Serverhosting und starten Sie noch heute durch!
</p>
<h2>Server-Hosting-Pakete</h2>
<h3>KVM-Pakete:</h3>
<ul>
<li>1 vCore, 1 GB RAM, 20 GB SSD-Speicher</li>
<li>2 vCores, 2 GB RAM, 40 GB SSD-Speicher</li>
<li>4 vCores, 4 GB RAM, 80 GB SSD-Speicher</li>
<li>8 vCores, 8 GB RAM, 160 GB SSD-Speicher</li>
</ul>
<p>Die KVM-Pakete bieten Ihnen flexible und leistungsstarke Virtual-Private-Server mit verschiedenen CPU-, RAM- und Speicher-Konfigurationen.</p>
<h3>Gameserver-Pakete:</h3>
<ul>
<li>10 Slots, 2 GB RAM, 20 GB SSD-Speicher</li>
<li>20 Slots, 4 GB RAM, 40 GB SSD-Speicher</li>
<li>30 Slots, 6 GB RAM, 60 GB SSD-Speicher</li>
<li>40 Slots, 8 GB RAM, 80 GB SSD-Speicher</li>
</ul>
<p>Die Gameserverpakete bietet Ihnen flexible und Leistungsstrake Gaming-Performance mit verschiedenen Slot-, RAM- und Speicher-Konfigurationen</p>
</div>
</div>
<div id="help-div">
<div class="l-quote quote">
<p>Sie haben ein Problem?<br> Fragen Sie Holger!</p>
</div>
<button id="help">
<span class="material-symbols-outlined">
chat
@@ -36,21 +165,11 @@
</button>
</div>
<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="./bot.html" frameborder="0" style="width: 100%; height: 100%;"></iframe>
</div>
<script>
$('#chatbot').dialog({
autoOpen: false,
height: 500,
width: 450,
positon: {my: 'center top'}
});
$('#help').click(() => $('#chatbot').dialog('open'));
</script>
<script src="script.js"></script>
</body>
</html>

70
main.css
View File

@@ -2,35 +2,97 @@
html, body {
height: 100%;
padding: 0;
margin: 0;
}
a, a:visited, a:hover, a:active {
color: inherit;
text-decoration: none;
}
h1 {
font-family: 'Roboto', sans-serif;
margin: 0;
color: #000;
}
#header {
background-color: #03a9f4;
padding: 20px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 20px;
flex-wrap: wrap;
border-top: 20px solid #1769aa;
}
#navbar {
display: flex;
flex-direction: row;
justify-content: flex-end;
flex-wrap: wrap;
}
#navbar #element {
font-family: 'Roboto', sans-serif;
margin-right: 10px;
background-color: lightgray;
background-color: #1de9b6;
border-radius: 5px;
padding: 5px 10px 5px 10px;
}
#navbar p {
color: #000;
}
#products {
display: flex;
}
@media (max-width: 686px) {
#products {
flex-wrap: wrap;
}
}
#cloud, #server, #webspace {
margin: 20px;
padding: 20px;
background-color: #03a9f4;
border-radius: 20px;
font-family: 'Roboto', sans-serif;
color: #000;
}
.l-quote {
position: relative;
width: auto;
padding: 15px 25px 20px;
margin: 20px auto;
color: #000;
font-family: 'Roboto', sans-serif;
background: #1de9b6;
opacity: .9;
border-radius: 20px;
}
.quote:after {
@include transform(skewX(-15deg));
content: "";
position: absolute;
top: 100%;
right: 25px;
border-width: 30px 30px 0 0;
border-style: solid;
border-color: #1de9b6 transparent;
opacity: 1;
}
#help-div {
z-index: 10;
position: fixed;
@@ -40,13 +102,13 @@ h1 {
#help {
margin-bottom: 10px;
background-color: aqua;
background-color: #1de9b6;
border-radius: 100%;
width: 60px;
height: 60px;
text-align: center;
float: right;
}
#help .material-symbols-outlined {
font-size: 40px;
}
}

13
script.js Normal file
View File

@@ -0,0 +1,13 @@
$('#chatbot').dialog({
autoOpen: false,
height: 500,
width: 450,
position: {my: 'right bottom', at: 'right-5 bottom-5', of: 'body'},
close: () => { $('#help-div').show();}
});
$('#help').click(() => {
$('#chatbot').dialog('open')
$('#help-div').hide();
} );