1+ <!doctype html>
2+ < html lang ="en ">
3+ < head >
4+ < meta http-equiv ="X-UA-Compatible " content ="IE=edge " />
5+ < meta charset ="utf-8 ">
6+ < meta name ="viewport " content ="width=device-width, initial-scale=1, shrink-to-fit=no ">
7+
8+ < link rel ="stylesheet " href ="assets/bootstrap.min.css ">
9+
10+ < title > About new version</ title >
11+
12+ < style >
13+ .scroller {
14+ height : 200px ;
15+ overflow-y : auto;
16+ }
17+ .card-body img {
18+ width : 100% ;
19+ }
20+ .card-body {
21+ height : 250px ;
22+ }
23+ .noselect {
24+ -webkit-touch-callout : none; /* iOS Safari */
25+ -webkit-user-select : none; /* Safari */
26+ -khtml-user-select : none; /* Konqueror HTML */
27+ -moz-user-select : none; /* Firefox */
28+ -ms-user-select : none; /* Internet Explorer/Edge */
29+ user-select : none; /* Non-prefixed version, currently
30+ supported by Chrome and Opera */
31+ }
32+ .card-selected {
33+ border : 2px solid blue;
34+ }
35+ </ style >
36+ </ head >
37+ < body class ="container-fluid noselect ">
38+
39+ < div class ="row text-center " style ="margin-top:10px; ">
40+ < div class ="col-md-12 ">
41+ < h2 > Welcome to AssistantComputerControl!</ h2 >
42+ < p >
43+ This software needs a cloud service to function. We natively support Dropbox, Google Drive and OneDrive.
44+ </ p >
45+ </ div >
46+
47+ < div class ="col-md-12 ">
48+ < div class ="row ">
49+ < div class ="col-md-3 ">
50+ < div class ="card " data-name ="Dropbox ">
51+ < div class ="card-body ">
52+ < h5 class ="card-title "> Dropbox</ h5 >
53+ < h6 class ="card-subtitle mb-2 text-muted "> Click me!</ h6 >
54+ < img draggable ="false " src ="assets/cloud_services/dropbox.png ">
55+ </ div >
56+ </ div >
57+ </ div >
58+ < div class ="col-md-3 ">
59+ < div class ="card " data-name ="OneDrive ">
60+ < div class ="card-body ">
61+ < h5 class ="card-title "> OneDrive</ h5 >
62+ < h6 class ="card-subtitle mb-2 text-muted "> Click me!</ h6 >
63+ < img draggable ="false " src ="assets/cloud_services/onedrive.png ">
64+ </ div >
65+ </ div >
66+ </ div >
67+ < div class ="col-md-3 ">
68+ < div class ="card " data-name ="Google Drive ">
69+ < div class ="card-body ">
70+ < h5 class ="card-title "> Google Drive</ h5 >
71+ < h6 class ="card-subtitle mb-2 text-muted "> Click me!</ h6 >
72+ < img draggable ="false " src ="assets/cloud_services/googledrive.png ">
73+ </ div >
74+ </ div >
75+ </ div >
76+ < div class ="col-md-3 ">
77+ < div class ="card " data-name ="the expert setup ">
78+ < div class ="card-body ">
79+ < h5 class ="card-title "> Expert setup</ h5 >
80+ < h6 class ="card-subtitle mb-2 text-muted "> < small > Choose me if you want more freedom (custom setup, no help)</ small > </ h6 >
81+ < img draggable ="false " src ="assets/cloud_services/expert.png ">
82+ </ div >
83+ </ div >
84+ </ div >
85+ </ div >
86+ </ div >
87+ < div class ="col-md-12 " style ="margin-top:20px; ">
88+ < button id ="pick_btn " class ="btn btn-primary btn-block btn-lg " disabled > Pick a cloud service</ button >
89+ </ div >
90+
91+ < div class ="col-md-12 " style ="margin-top:40px; ">
92+ < a href ="# "> Click here to skip the setup guide < i > (not recommended)</ i > </ a >
93+ </ div >
94+ </ div >
95+
96+ < script src ="assets/jquery.js "> </ script >
97+ < script >
98+ $ ( ".card" ) . on ( "click" , function ( ) {
99+ $ ( ".card" ) . removeClass ( "card-selected" ) ;
100+ $ ( this ) . addClass ( "card-selected" ) ;
101+
102+ $ ( "#pick_btn" ) . prop ( "disabled" , false ) . text ( "Proceed with " + $ ( this ) . attr ( "data-name" ) ) ;
103+ } ) ;
104+ </ script >
105+
106+ </ body >
107+ </ html >
0 commit comments