-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
123 lines (123 loc) · 2.97 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta
content="width=device-width,initial-scale=1"
name="viewport"
/>
<title>VueStorage</title>
<link
href="https://raw.githubusercontent.com/SeregPie/assets/main/favicon.svg"
rel="icon"
type="image/svg+xml"
/>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"
rel="stylesheet"
/>
<link
href="https://unpkg.com/@mdi/font@5/css/materialdesignicons.min.css"
rel="stylesheet"
/>
<link
href="https://unpkg.com/vuetify@2/dist/vuetify.min.css"
rel="stylesheet"
/>
<style>
[v-cloak] {
display: none;
}
</style>
<script src="https://unpkg.com/vue@2/dist/vue.min.js"></script>
<script src="https://unpkg.com/@vue/composition-api"></script>
<script src="https://unpkg.com/vue-demi"></script>
<script src="./index.js"></script>
<script src="https://unpkg.com/vuetify@2/dist/vuetify.min.js"></script>
</head>
<body>
<v-app
v-cloak
id="App"
>
<v-app-bar
app
color="primary"
dark
>
<v-toolbar-title>VueStorage</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn
href="https://github.com/SeregPie/VueStorage"
icon
target="_blank"
>
<v-icon>mdi-github</v-icon>
</v-btn>
</v-app-bar>
<v-main>
<v-container
fill-height
justify-center
>
<div
style="
display: grid;
gap: 16px;
max-width: 512px;
width: 100%;
"
>
<v-alert
class="ma-0"
type="info"
>Select some items and reload the page; the selection remains. If you open a second tab in your browser, the changes between the tabs are reflected immediately.</v-alert>
<div style="overflow: hidden">
<div
class="text--secondary"
>selected items</div>
<v-slide-group
v-model="selectedItems"
multiple
show-arrows
>
<v-slide-item
v-for="item of items"
:key="item"
v-slot:default="{active, toggle}"
>
<v-card
:color="active ? 'primary' : 'grey lighten-1'"
style="margin: 4px"
@click="toggle"
>
<div
style="
align-items: center;
display: flex;
font-size: 32px;
height: 64px;
justify-content: center;
pointer-events: none;
user-select: none;
width: 64px;
"
>{{ item }}</div>
</v-card>
</v-slide-item>
</v-slide-group>
</div>
<v-text-field
v-model="storageKey"
filled
hint="Change this to switch between the stored items."
label="storage key"
persistent-hint
></v-text-field>
</div>
</v-container>
</v-main>
</v-app>
<script src="./demo/script.js"></script>
</body>
</html>