Skip to content
Snippets Groups Projects
Commit e47b1742 authored by Alfredo Chissotti's avatar Alfredo Chissotti
Browse files

icona +

parent 4ac7943a
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
webapp/css/buttons.css 0 → 100644
+ 94
− 0
View file @ e47b1742
/* cool button 4 vertical lines */
.btn-12,
.btn-12 *,
.btn-12 :after,
.btn-12 :before,
.btn-12:after,
.btn-12:before {
border: 0 solid;
box-sizing: border-box;
}
.btn-12 {
-webkit-tap-highlight-color: transparent;
-webkit-appearance: button;
background-color: #000;
/* background-color: #fff; */
background-image: none;
color: #fff;
/* color: #000; */
cursor: pointer;
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
font-size: 100%;
font-weight: 900;
line-height: 1.5;
margin: 0;
-webkit-mask-image: -webkit-radial-gradient(#000, #fff);
padding: 0;
text-transform: uppercase;
}
.btn-12:disabled {
cursor: default;
}
.btn-12:-moz-focusring {
outline: auto;
}
.btn-12 svg {
display: block;
vertical-align: middle;
}
.btn-12 [hidden] {
display: none;
}
.btn-12 {
border-radius: 99rem;
border-width: 2px;
overflow: hidden;
padding: 0.8rem 3rem;
position: relative;
}
.btn-12 span {
mix-blend-mode: difference;
}
.btn-12:after,
.btn-12:before {
background: linear-gradient(
90deg,
#fff 25%,
/* #000 25%, */
transparent 0,
transparent 50%,
#fff 0,
/* #000 0, */
#fff 75%,
/* #000 75%, */
transparent 0
);
content: "";
inset: 0;
position: absolute;
transform: translateY(var(--progress, 100%));
transition: transform 0.5s ease;
}
.btn-12:after {
--progress: -100%;
background: linear-gradient(
90deg,
transparent 0,
transparent 25%,
#fff 0,
/* #000 0, */
#fff 50%,
/* #000 50%, */
transparent 0,
transparent 75%,
#fff 0
/* #000 0 */
);
z-index: -1;
}
.btn-12:hover:after,
.btn-12:hover:before {
--progress: 0;
}
\ No newline at end of file
webapp/css/style.css 0 → 100644
+ 64
− 0
View file @ e47b1742
/* switch toggle */
.switch-container {
position: relative;
left: 50%;
top: 50%;
/* transform: translate(-50%, -50%); */
}
.toggle-button {
background: gray;
width: 80px;
height: 40px;
border-radius: 30px;
padding: 5px;
cursor: pointer;
transition: all 300ms ease-in-out;
}
.toggle-button>.inner-circle {
background: white;
width: 40px;
height: 40px;
border-radius: 50%;
transition: all 300ms ease-in-out;
}
.toggle-button.active {
background: #00ff22;
}
.toggle-button.active>.inner-circle {
margin-left: 40px;
}
.no-box-sizing {
box-sizing: content-box !important;
}
/* other */
.invisible {
visibility: hidden;
display: none;
}
.more-margin-top {
border-top: 20px solid transparent;
}
/* center on the screen below any other element */
.center-on-screen {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* set to the right of the screen, below any other element */
.right-on-screen {
position: relative;
top: 50%;
right: 50%;
/* transform: translate(-50%, -50%); */
/* left: 0; */
}
\ No newline at end of file
webapp/index.html
+ 33
− 28
View file @ e47b1742
......@@ -16,20 +16,25 @@
<!-- link bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<!-- link fontawesome (for icons)-->
<!-- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> -->
<script src="https://kit.fontawesome.com/a1635545b7.js" crossorigin="anonymous"></script>
<!-- link style.css -->
<link rel="stylesheet" href="style.css" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" href="css/buttons.css" type="text/css">
</head>
<body>
<h1>Pissir SmartHome ${nomeCasa o nomeProprio}</h1>
<div id="alert-message">
<!-- TODO use this -->
<!-- any error or confirmation goes here (updated by JS) -->
</div>
<!-- container of the top buttons to change what is seen -->
<div id="mainButtonContainer" class="d-flex flex-row justify-content-around">
<button class="btn btn-dark btn-12">
<!-- -->
<button class="btn-12 btn btn-dark">
<span>Luci</span>
</button>
<button class="btn-12 btn btn-dark">
......@@ -42,7 +47,7 @@
</div>
<!-- actual containers -->
<div id="luciContainer" class="invisible">
<!-- table -->
<!-- luci -->
<table class="table table-striped">
<thead>
<tr class="more-margin-top">
......@@ -65,10 +70,9 @@
<!-- row to add a new element -->
<tr>
<th scope="row">
<button type="button" class="btn btn-dark" data-bs-toggle="modal" data-bs-target="#luci-modal">
<!-- assicurarsi di targettare il giusto modal -->
+
</button>
<!-- TODO remove fa-bounce if there's at least 1 light -->
<i type="button" class="fa-solid fa-circle-plus fa-2x fa-bounce" data-bs-toggle="modal"
data-bs-target="#luci-modal"></i>
</th>
<td>
<span>Aggiungi una luce</span>
......@@ -110,29 +114,29 @@
</tr> -->
</tbody>
</table>
<!-- <button type="button" class="btn btn-dark" data-bs-toggle="modal" data-bs-target="#scenari-modal"> -->
<div class="d-flex justify-content-around">
<!-- FIXME -->
<!-- <div> -->
<!-- class="d-flex justify-content-around" -->
<span class="invisible">
<span id="termina-registrazione-launcher" data-bs-toggle="modal"
data-bs-target="#termina-registrazione-modal"></span>
<span id="registra-modal-launcer" data-bs-toggle="modal" data-bs-target="#scenari-modal"></span>
</span>
<!-- TODO center button -->
<button id="scenari-registra" type="button" class="btn btn-info center-on-screen">
Registra
</button>
<!-- TODO set to the right -->
<div class="right-on-screen">
<span>
<span id="termina-registrazione-launcher" data-bs-toggle="modal" data-bs-target="#termina-registrazione-modal">
<span id="registra-modal-launcer" data-bs-toggle="modal" data-bs-target="#scenari-modal"></span>
Antifurto:
</span>
<!-- centered button -->
<button id="scenari-registra" type="button" class="btn btn-info">
Registra
<!-- change btn-danger to btn-success when ON -->
<button type="button" class="btn btn-danger" id="scenari-stato-antifurto">
OFF
</button>
<!-- set to the right -->
<div>
<span>
Antifurto:
</span>
<!-- change btn-danger to btn-success when ON -->
<button type="button" class="btn btn-danger" id="scenari-stato-antifurto">
OFF
</button>
<span id="lancia-antifurto-modal" data-bs-toggle="modal" data-bs-target="#antifurto-modal"></span>
</div>
<span id="lancia-antifurto-modal" data-bs-toggle="modal" data-bs-target="#antifurto-modal"></span>
</div>
<!-- </div> -->
</div>
<!-- antifurto -->
<div id="antifurtoContainer" class="invisible">
......@@ -257,7 +261,8 @@
</div>
</div>
<!-- anteprima scenario -->
<span class="invisible" data-bs-toggle="modal" data-bs-target="#anteprima-modal" id="anteprima-modal-launcher"></span>
<span class="invisible" data-bs-toggle="modal" data-bs-target="#anteprima-modal"
id="anteprima-modal-launcher"></span>
<div class="modal fade" id="anteprima-modal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
......
webapp/style.css deleted 100644 → 0
+ 0
− 145
View file @ 4ac7943a
/* cool button 4 vertical lines */
.btn-12 {
--width: 250px !important;
width: var(--width) !important;
display: block !important;
box-sizing: border-box !important;
padding: 20px 45px !important;
border-radius: 999px !important;
position: relative !important;
overflow: hidden !important;
text-transform: uppercase !important;
border: 1px solid currentColor !important;
}
.btn-12 span {
font-weight: 900 !important;
mix-blend-mode: difference !important;
}
.btn-12:before,
.btn-12:after {
--w: calc(var(--width) / 4) !important;
content: "" !important;
z-index: -1 !important;
height: 100% !important;
width: var(--w) !important;
position: absolute !important;
background: white !important;
box-shadow: calc(2 * var(--w)) 0 0 0 white !important;
transition: transform 0.2s !important;
will-change: transform !important;
}
.btn-12:before {
top: -100% !important;
left: 0 !important;
}
.btn-12:after {
top: 100% !important;
left: var(--w) !important;
}
.btn-12:hover:before {
transform: translateY(100%) !important;
}
.btn-12:hover:after {
transform: translateY(-100%) !important;
}
/* cool button slide triangle */
.btn-5 {
--tilt: 40px;
display: block;
box-sizing: border-box;
padding: 20px 45px;
border-radius: 999px;
position: relative;
overflow: hidden;
text-transform: uppercase;
border: 1px solid currentColor;
}
.btn-5 > span {
font-weight: 900;
mix-blend-mode: difference;
}
.btn-5:before {
content: "";
z-index: -1;
width: calc(100% + var(--tilt));
height: 100%;
position: absolute;
top: 0;
left: calc(-100% - var(--tilt));
background: white;
clip-path: polygon(0 0,
calc(100% - var(--tilt)) 0,
100% 50%,
calc(100% - var(--tilt)) 100%,
0 100%);
transition: transform 0.4s;
}
.btn-5:hover:before {
transform: translateX(100%);
}
/* switch toggle */
.switch-container {
position: relative;
left: 50%;
top: 50%;
/* transform: translate(-50%, -50%); */
}
.toggle-button {
background: gray;
width: 80px;
height: 40px;
border-radius: 30px;
padding: 5px;
cursor: pointer;
transition: all 300ms ease-in-out;
}
.toggle-button>.inner-circle {
background: white;
width: 40px;
height: 40px;
border-radius: 50%;
transition: all 300ms ease-in-out;
}
.toggle-button.active {
background: #00ff22;
}
.toggle-button.active>.inner-circle {
margin-left: 40px;
}
.no-box-sizing {
box-sizing: content-box !important;
}
/* other */
.invisible {
visibility: hidden;
display: none;
}
.more-margin-top {
border-top: 20px solid transparent;
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment