Kara is a digital assistent aimed to help in any daily situation. => Moved to /LunaDev/luna-development
https://luna-development.net/kara/
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
173 lines
8.2 KiB
173 lines
8.2 KiB
<!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"/> |
|
<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 bot-message float-left" v-if="message.bot"> |
|
{{ message.body }} |
|
<br/> |
|
</div> |
|
<div :class="'message user-message float-right' + (message.command ? ' command-message' : '') + (message.me ? ' me-message' : '')" v-else> |
|
{{ message.body }} |
|
<br/> |
|
</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()" data-dismiss="modal"/> |
|
</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> |
|
<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="app.js"> |
|
</script> |
|
</body> |
|
</html>
|
|
|