2 changed files with 1119 additions and 1106 deletions
@ -1,184 +1,184 @@
@@ -1,184 +1,184 @@
|
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<title> |
||||
Kara |
||||
</title> |
||||
<meta charset="utf8"> |
||||
<link rel="icon" href="/favicon.ico"> |
||||
<link rel="manifest" href="manifest/kara.json"> |
||||
<link href="https://bootswatch.com/4/slate/bootstrap.min.css" rel="stylesheet" type="text/css"/> |
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/css/alertify.min.css"/> |
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/css/themes/default.min.css"/> |
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/css/themes/bootstrap.min.css"/> |
||||
<link rel="stylesheet" href="css/lightbox.min.css"/> |
||||
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no" name="viewport"> |
||||
</head> |
||||
<body> |
||||
<div class="container-fluid" id="kara"> |
||||
<div id="kara-banner" class="bg-dark text-light"> |
||||
<img src="/img/logo/luna/icon.ico" class="header-logo" alt="logo-header"/> |
||||
<div class="float-right"> |
||||
<div class="btn btn-sm btn-secondary" data-toggle="modal" data-target="#settingsModal"> |
||||
<i class="fas fa-sliders-h"></i> |
||||
</div> |
||||
<div class="btn btn-sm btn-secondary" data-toggle="modal" data-target="#noteModal" v-if="notes.length > 0"> |
||||
<i class="fas fa-clipboard"></i> |
||||
</div> |
||||
<div class="btn btn-sm btn-secondary" @click="scrollDown()"> |
||||
<i class="fas fa-chevron-down"></i> |
||||
</div> |
||||
</div> |
||||
{{ this.name }} |
||||
</div> |
||||
|
||||
<div id="chat-box"> |
||||
<template v-for="message in messages"> |
||||
<div :class="'message' + (message.bot === true ? ' bot-message float-left' : ' user-message float-right') + (message.command ? ' command-message' : '') + (message.me ? ' me-message' : '')" v-if="message.body"> |
||||
<template v-if="message.src"> |
||||
<a :href="message.src" :data-lightbox="message.body" :data-title="message.body"> |
||||
<img :src="message.src" :alt="message.body" class="message-image"/><br/> |
||||
</a> |
||||
</template> |
||||
{{ message.body }} |
||||
</div> |
||||
</template> |
||||
<div class="message bot-message typing float-left" v-if="isTyping"> |
||||
<div class="spinner-grow text-secondary" role="status"> |
||||
<span class="sr-only"> |
||||
Loading... |
||||
</span> |
||||
</div> |
||||
<div class="spinner-grow text-secondary" role="status"> |
||||
<span class="sr-only"> |
||||
Loading... |
||||
</span> |
||||
</div> |
||||
<div class="spinner-grow text-secondary" role="status"> |
||||
<span class="sr-only"> |
||||
Loading... |
||||
</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div id="chatbox-wrapper" class="bg-dark"> |
||||
<input class="form-control" |
||||
id="chatinput" |
||||
type="text" |
||||
v-model="chatbox" |
||||
v-on:keyup.enter="sendMessage()" |
||||
v-on:keyup.38="chatbox = lastMessage" |
||||
v-on:keyup.40="chatbox = ''" |
||||
required autofocus> |
||||
</div> |
||||
|
||||
<div class="modal fade" id="noteModal" tabindex="-1" role="dialog" aria-labelledby="noteModal" aria-hidden="true"> |
||||
<div class="modal-dialog" role="document"> |
||||
<div class="modal-content"> |
||||
<div class="modal-header"> |
||||
<h5 class="modal-title">Notes</h5> |
||||
<div class="float-right"> |
||||
<button class="btn btn-sm btn-secondary" @click="clearNotes"> |
||||
<i class="fas fa-trash"></i> |
||||
</button> |
||||
</div> |
||||
</div> |
||||
<div class="modal-body" style="max-height: 800px; overflow-y: scroll"> |
||||
<ul class="list-group"> |
||||
<li class="list-group-item" v-for="note in notes" v-if="!note.checked"> |
||||
<span class="float-right"> |
||||
<input type="checkbox" v-model="note.checked" @change="updateStorage()"/> |
||||
</span> |
||||
{{ note.body }} |
||||
</li> |
||||
</ul> |
||||
<hr/> |
||||
<ul class="list-group"> |
||||
<li class="list-group-item" v-for="note in notes" v-if="note.checked"> |
||||
<span class="float-right"> |
||||
<input type="checkbox" v-model="note.checked" @change="updateStorage()"/> |
||||
</span> |
||||
<span style="text-decoration: line-through;">{{ note.body }}</span> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
<div class="modal-footer"> |
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="modal fade" id="settingsModal" tabindex="-1" role="dialog" aria-labelledby="settingsModal" aria-hidden="true"> |
||||
<div class="modal-dialog" role="document"> |
||||
<div class="modal-content"> |
||||
<div class="modal-header"> |
||||
<h5 class="modal-title">Settings</h5> |
||||
</div> |
||||
<div class="modal-body"> |
||||
<div class="form-group" v-if="features.changeName"> |
||||
<label for="name">What's my name?</label> |
||||
<input type="text" class="form-control" id="name" v-model="settingsModal.name"> |
||||
</div> |
||||
<div class="form-group" v-if="username !== null"> |
||||
<label for="username">What's your name?</label> |
||||
<input type="text" class="form-control" id="username" v-model="settingsModal.username"> |
||||
</div> |
||||
<div class="form-group"> |
||||
<label for="location">What city do you live in? <small class="text-muted">(for weather-reports only)</small> </label> |
||||
<input type="text" class="form-control" id="location" v-model="settingsModal.location"> |
||||
</div> |
||||
<div class="form-group" v-if="features.themes"> |
||||
<label for="theme">Pick a theme</label> |
||||
<select name="theme" class="form-control" id="theme" v-model="activeTheme" @change="updateStorage()"> |
||||
<option v-for="theme in themes" :value="theme.name.toLowerCase()" v-text="theme.name"></option> |
||||
</select> |
||||
</div> |
||||
<div class="form-group"> |
||||
<label>Data</label> |
||||
<div class="row"> |
||||
<div class="col-sm-6"> |
||||
<button @click="clearChat()" class="btn btn-warning form-button" data-dismiss="modal"> |
||||
Delete chat |
||||
</button> |
||||
</div> |
||||
<div class="col-sm-6"> |
||||
<button @click="clearStorage()" class="btn btn-warning form-button"> |
||||
Delete everything |
||||
</button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="form-group"> |
||||
<div class="float-right"> |
||||
<i class="fa fa-code" aria-hidden="true"></i> App by <a href="/">Luna Development</a> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="modal-footer"> |
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> |
||||
<button type="button" class="btn btn-primary" data-dismiss="modal" @click="saveSettings()">Save</button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<link rel="stylesheet" :href="'https://maxcdn.bootstrapcdn.com/bootswatch/4.3.1/' + activeTheme + '/bootstrap.min.css'"> |
||||
<link href="app.css" rel="stylesheet" type="text/css"/> |
||||
</div> |
||||
|
||||
|
||||
<script src="https://kit.fontawesome.com/b54a4cceff.js" crossorigin="anonymous"></script> |
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment.min.js" crossorigin="anonymous"></script> |
||||
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" crossorigin="anonymous"></script> |
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" crossorigin="anonymous"></script> |
||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" crossorigin="anonymous"></script> |
||||
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> |
||||
<script src="https://code.jquery.com/jquery-3.5.1.js"></script> |
||||
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> |
||||
<script src="js/lightbox.min.js"></script> |
||||
<script src="https://cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/alertify.min.js"></script> |
||||
<script src="app.js"> |
||||
</script> |
||||
</body> |
||||
</html> |
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<title> |
||||
Kara |
||||
</title> |
||||
<meta charset="utf8"> |
||||
<link rel="icon" href="/favicon.ico"> |
||||
<link rel="manifest" href="manifest/kara.json"> |
||||
<link href="https://bootswatch.com/4/slate/bootstrap.min.css" rel="stylesheet" type="text/css"/> |
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/css/alertify.min.css"/> |
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/css/themes/default.min.css"/> |
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/css/themes/bootstrap.min.css"/> |
||||
<link rel="stylesheet" href="css/lightbox.min.css"/> |
||||
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no" name="viewport"> |
||||
</head> |
||||
<body> |
||||
<div class="container-fluid" id="kara"> |
||||
<div id="kara-banner" class="bg-dark text-light"> |
||||
<img src="/img/logo/luna/icon.ico" class="header-logo" alt="logo-header"/> |
||||
<div class="float-right"> |
||||
<div class="btn btn-sm btn-secondary" data-toggle="modal" data-target="#settingsModal"> |
||||
<i class="fas fa-sliders-h"></i> |
||||
</div> |
||||
<div class="btn btn-sm btn-secondary" data-toggle="modal" data-target="#todoModal" v-if="todos.length > 0"> |
||||
<i class="fas fa-clipboard"></i> |
||||
</div> |
||||
<div class="btn btn-sm btn-secondary" @click="scrollDown()"> |
||||
<i class="fas fa-chevron-down"></i> |
||||
</div> |
||||
</div> |
||||
{{ this.name }} |
||||
</div> |
||||
|
||||
<div id="chat-box"> |
||||
<template v-for="message in messages"> |
||||
<div :class="'message' + (message.bot === true ? ' bot-message float-left' : ' user-message float-right') + (message.command ? ' command-message' : '') + (message.me ? ' me-message' : '')" v-if="message.body"> |
||||
<template v-if="message.src"> |
||||
<a :href="message.src" :data-lightbox="message.body" :data-title="message.body"> |
||||
<img :src="message.src" :alt="message.body" class="message-image"/><br/> |
||||
</a> |
||||
</template> |
||||
{{ message.body }} |
||||
</div> |
||||
</template> |
||||
<div class="message bot-message typing float-left" v-if="isTyping"> |
||||
<div class="spinner-grow text-secondary" role="status"> |
||||
<span class="sr-only"> |
||||
Loading... |
||||
</span> |
||||
</div> |
||||
<div class="spinner-grow text-secondary" role="status"> |
||||
<span class="sr-only"> |
||||
Loading... |
||||
</span> |
||||
</div> |
||||
<div class="spinner-grow text-secondary" role="status"> |
||||
<span class="sr-only"> |
||||
Loading... |
||||
</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div id="chatbox-wrapper" class="bg-dark"> |
||||
<input class="form-control" |
||||
id="chatinput" |
||||
type="text" |
||||
v-model="chatbox" |
||||
v-on:keyup.enter="sendMessage()" |
||||
v-on:keyup.38="chatbox = lastMessage" |
||||
v-on:keyup.40="chatbox = ''" |
||||
required autofocus> |
||||
</div> |
||||
|
||||
<div class="modal fade" id="todoModal" tabindex="-1" role="dialog" aria-labelledby="todoModal" aria-hidden="true"> |
||||
<div class="modal-dialog" role="document"> |
||||
<div class="modal-content"> |
||||
<div class="modal-header"> |
||||
<h5 class="modal-title">Todos</h5> |
||||
<div class="float-right"> |
||||
<button class="btn btn-sm btn-secondary" @click="clearTodos"> |
||||
<i class="fas fa-trash"></i> |
||||
</button> |
||||
</div> |
||||
</div> |
||||
<div class="modal-body" style="max-height: 800px; overflow-y: scroll"> |
||||
<ul class="list-group"> |
||||
<li class="list-group-item" v-for="todo in todos" v-if="!todo.checked"> |
||||
<span class="float-right"> |
||||
<input type="checkbox" v-model="todo.checked" @change="updateStorage()"/> |
||||
</span> |
||||
{{ todo.body }} |
||||
</li> |
||||
</ul> |
||||
<hr/> |
||||
<ul class="list-group"> |
||||
<li class="list-group-item" v-for="todo in todos" v-if="todo.checked"> |
||||
<span class="float-right"> |
||||
<input type="checkbox" v-model="todo.checked" @change="updateStorage()"/> |
||||
</span> |
||||
<span style="text-decoration: line-through;">{{ todo.body }}</span> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
<div class="modal-footer"> |
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="modal fade" id="settingsModal" tabindex="-1" role="dialog" aria-labelledby="settingsModal" aria-hidden="true"> |
||||
<div class="modal-dialog" role="document"> |
||||
<div class="modal-content"> |
||||
<div class="modal-header"> |
||||
<h5 class="modal-title">Settings</h5> |
||||
</div> |
||||
<div class="modal-body"> |
||||
<div class="form-group" v-if="features.changeName"> |
||||
<label for="name">What's my name?</label> |
||||
<input type="text" class="form-control" id="name" v-model="settingsModal.name"> |
||||
</div> |
||||
<div class="form-group" v-if="username !== null"> |
||||
<label for="username">What's your name?</label> |
||||
<input type="text" class="form-control" id="username" v-model="settingsModal.username"> |
||||
</div> |
||||
<div class="form-group"> |
||||
<label for="location">What city do you live in? <small class="text-muted">(for weather-reports only)</small> </label> |
||||
<input type="text" class="form-control" id="location" v-model="settingsModal.location"> |
||||
</div> |
||||
<div class="form-group" v-if="features.themes"> |
||||
<label for="theme">Pick a theme</label> |
||||
<select name="theme" class="form-control" id="theme" v-model="activeTheme" @change="updateStorage()"> |
||||
<option v-for="theme in themes" :value="theme.name.toLowerCase()" v-text="theme.name"></option> |
||||
</select> |
||||
</div> |
||||
<div class="form-group"> |
||||
<label>Data</label> |
||||
<div class="row"> |
||||
<div class="col-sm-6"> |
||||
<button @click="clearChat()" class="btn btn-warning form-button" data-dismiss="modal"> |
||||
Delete chat |
||||
</button> |
||||
</div> |
||||
<div class="col-sm-6"> |
||||
<button @click="clearStorage()" class="btn btn-warning form-button"> |
||||
Delete everything |
||||
</button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="form-group"> |
||||
<div class="float-right"> |
||||
<i class="fa fa-code" aria-hidden="true"></i> App by <a href="/">Luna Development</a> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="modal-footer"> |
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> |
||||
<button type="button" class="btn btn-primary" data-dismiss="modal" @click="saveSettings()">Save</button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<link rel="stylesheet" :href="'https://maxcdn.bootstrapcdn.com/bootswatch/4.3.1/' + activeTheme + '/bootstrap.min.css'"> |
||||
<link href="app.css" rel="stylesheet" type="text/css"/> |
||||
</div> |
||||
|
||||
|
||||
<script src="https://kit.fontawesome.com/b54a4cceff.js" crossorigin="anonymous"></script> |
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment.min.js" crossorigin="anonymous"></script> |
||||
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" crossorigin="anonymous"></script> |
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" crossorigin="anonymous"></script> |
||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" crossorigin="anonymous"></script> |
||||
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> |
||||
<script src="https://code.jquery.com/jquery-3.5.1.js"></script> |
||||
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> |
||||
<script src="js/lightbox.min.js"></script> |
||||
<script src="https://cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/alertify.min.js"></script> |
||||
<script src="app.js"> |
||||
</script> |
||||
</body> |
||||
</html> |
||||
|
Loading…
Reference in new issue