Dušan's grid presenter Online demo: http://krehel.sk/Dusans_grid_presenter/demo.html
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.
 
 
Dusans_grid_presenter/demo.html

159 lines
3.3 KiB

<!DOCTYPE HTML>
<!--
Dušan's grid presenter
Copyright 2022, Dušan Kreheľ <dusankrehel@gmail.com>
Dual licence: MIT and CC0 1.0
- Licence URL for MIT: https://opensource.org/licenses/MIT
- Licence URL for CC0 1.0: https://creativecommons.org/publicdomain/zero/1.0/
Online demo: https://krehel.sk/Dusans_grid_presenter/demo.html
-->
<html>
<head>
<meta charset="utf-8">
<title>Demo of Dušan's grid presenter</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="Dusans_grid_presenter.js"></script>
<style>
body, div {
margin:0;
padding:0;
}
#grid_info {
padding:0.5em;
}
ul {
margin:0;
}
#grid_info {
height: 100%;
background:#f2ecce;
}
#grid_info .button_back {
display: block;
radius: 0.3em;
}
#grid_info .grid {
text-align:center;
}
#grid_info .grid button {
padding: 5%;
margin:1%;
font-size: 1.5em;
}
.fullwindow_popud {
z-index: 500;
width:100vw;
height:100vh;
position: absolute;
top:0;
left:0;
background:#B9B9B9C3;
}
.fullwindow_popud .user {
background: white;
border-radius:0.5em;
margin:auto;
padding:0.5em;
width: 80%;
margin-top: 1em;
box-shadow: 0 0 3px #B9B9B9;
}
.fullwindow_popud #close_button {
float: right;
}
.fullwindow_popud h2 {
display: inline;
}
.fullwindow_popud .user_info {
margin-top:0.5em;
}
.questions_answers td,
.questions_answers th,
.questions_answers tr,
.questions_answers {
border: solid black 1px;
border-collapse:collapse;
padding:0.2em;
text-align:left;
}
.questions_answers {
text-align:left;
margin-top: 1em;
background:#EBEBEB;
}
.questions_answers th {
background:#DBDBDB;
}
.questions_answers .quester{
text-align:center;
}
.questions_result .indificator,
.fullwindow_popud .indificator{
width: 1em;
display:inline-block;
}
.switch_baner {
margin-top: 0.5em;
margin-bottom: 0.5em;
}
#grid_info #start_page {
margin-top:0.3em;
margin-bottom:0.3em;
}
#grid_info #start_page li{
margin-top:0.2em;
margin-bottom:0.2em;
}
.back_line {
display: flex;
flex-direction: row;
}
footer {
padding: 0.3em;
background:#EDEDED;
font-style: oblique;
color: #888;
font-size: 0.85em;
}
</style>
</head>
<body>
<div id="grid_info"></div>
<script>
grid_info=new Grid_info("grid_info");
grid_info.add_item("1", "Like You System A?", "Dusan", "Yes", "Nice.", '#4F9F42"','#B9FFAD');
grid_info.add_item("2", "Like You System A?", "Peter", "No", "Super.",'#8C000F','#FF909C');
grid_info.add_item("3", "Like You System A?", "Karol", "Neutral", "Perfect.",'black','#C6C3C3');
grid_info.add_item("3", "Like You System A?", "Viktor", "Neutral", "Perfect.",'black','#C6C3C3');
grid_info.add_item("3", "Like You System A?", "Karol", "Neutral", "Perfect.",'black','#C6C3C3');
grid_info.add_item("4", "Use You System B?", "Dusan", "Yes", "Extra.", '#4F9F42','#B9FFAD');
grid_info.render();
</script>
<footer>Demo of <a href="https://codeberg.org/Dusan_Krehel/Dusans_grid_presenter">Dušan's grid presenter</a>.</footer>
</body>
</html>