LunaDev
/
kara
1
1
Fork 0
Code Issues 14 Releases 1 Wiki Activity
Browse Source

Revert "Rename notes to todos" 

This reverts commit 52dbc551
master
stingl 5 years ago
parent
2c4da7abce
commit
4fff3b8d51
3 changed files with 904 additions and 912 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 218
      app.css
  2. 1226
      app.js
  3. 372
      index.html

218
app.css
Unescape View File

@ -1,112 +1,108 @@
body { body {
margin: 15px; margin: 15px;
padding: 0; padding: 0;
} }
#kara { #kara {
margin: 0; margin: 0;
padding: 0; padding: 0;
width: auto; width: auto;
} }
@media (min-width: 40em) { @media (min-width: 40em) {
#kara, #kara,
#kara-banner, #kara-banner,
#chatbox-wrapper { #chatbox-wrapper {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
padding: 0; padding: 0;
width: 40em; width: 40em;
} }
} }
.message { .message {
color: black; color: black;
padding: 10px; padding: 10px;
margin-bottom: 5px; margin-bottom: 5px;
min-width: 55%; min-width: 55%;
max-width: 80%; max-width: 80%;
} }
img.message-image { img.message-image {
max-width: 60%; max-width: 60%;
border-radius: 0 15px 15px 15px; border-radius: 0 15px 15px 15px;
margin-bottom: 5px; margin-bottom: 5px;
clear: top; clear: top;
} }
.bot-message { .bot-message {
border-radius: 0 15px 15px 15px; border-radius: 0 15px 15px 15px;
background-color: lightgreen; background-color: lightgreen;
} }
.user-message { .user-message {
border-radius: 15px 0 15px 15px; border-radius: 15px 0 15px 15px;
background-color: lightblue; background-color: lightblue;
} }
#chat-box { #chat-box {
margin-top: 4em; margin-top: 4em;
overflow-y: scroll; overflow-y: scroll;
height: 65vh; height: 65vh;
padding-bottom: 2em; padding-bottom: 2em;
} }
#chatbox-wrapper { #chatbox-wrapper {
position: fixed; position: fixed;
padding: 1em; padding: 1em;
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
} }
#kara-banner { #kara-banner {
position: fixed; position: fixed;
height: 3.2em; height: 3.2em;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
text-align: center; text-align: center;
padding: 0.7em; padding: 0.7em;
} }
#kara-banner .btn, .add-response-input-button { #kara-banner .btn, .add-response-input-button {
margin-top: -0.3em; margin-top: -0.3em;
} }
.response-input { .response-input {
margin-bottom: 3px; margin-bottom: 3px;
} }
.form-button { .form-button {
width: 100%; width: 100%;
} }
.command-message { .command-message {
color: grey; color: grey;
} }
.command-message::before { .command-message::before {
content: '$: '; content: '$: ';
} }
.header-logo { .header-logo {
max-height: 32px; max-height: 32px;
max-width: 32px; max-width: 32px;
width: 32px; width: 32px;
height: 32px; height: 32px;
margin-right: 5px; margin-right: 5px;
} }
.me-message { .me-message {
background-color: orange; background-color: orange;
} }
#addForm { #addForm {
margin-top: 60px; margin-top: 60px;
}
.fa-check-circle {
color: green;
} }

1226
app.js
View File

File diff suppressed because it is too large Load Diff

372
index.html
Unescape View File

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

Write Preview
Loading…
Cancel
Save