43 changed files with 5277 additions and 198 deletions
@ -0,0 +1,152 @@ |
|||
-- phpMyAdmin SQL Dump |
|||
-- version 4.7.7 |
|||
-- https://www.phpmyadmin.net/ |
|||
-- |
|||
-- Host: localhost |
|||
-- Generation Time: Apr 02, 2018 at 08:36 AM |
|||
-- Server version: 10.2.13-MariaDB |
|||
-- PHP Version: 7.2.3 |
|||
|
|||
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; |
|||
SET AUTOCOMMIT = 0; |
|||
START TRANSACTION; |
|||
SET time_zone = "+00:00"; |
|||
|
|||
|
|||
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; |
|||
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; |
|||
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; |
|||
/*!40101 SET NAMES utf8mb4 */; |
|||
|
|||
-- |
|||
-- Database: `coze_training` |
|||
-- |
|||
|
|||
-- -------------------------------------------------------- |
|||
|
|||
-- |
|||
-- Table structure for table `actions` |
|||
-- |
|||
|
|||
CREATE TABLE `actions` ( |
|||
`id` int(11) NOT NULL, |
|||
`label` varchar(255) NOT NULL, |
|||
`description` text NOT NULL, |
|||
`mid` int(11) NOT NULL |
|||
) ENGINE=InnoDB DEFAULT CHARSET=latin1; |
|||
|
|||
-- |
|||
-- Dumping data for table `actions` |
|||
-- |
|||
|
|||
INSERT INTO `actions` (`id`, `label`, `description`, `mid`) VALUES |
|||
(13, 'sdbf', 'xg', 22), |
|||
(14, 'sdbfASFDV', 'xgSDF ', 20), |
|||
(15, 'wwwwwwww', 'wwwwwwww', 21), |
|||
(16, 'xxxxxxxxx', 'xxxxxxxxxx', 20), |
|||
(17, 'wwwwwwww', 'wwwwwwww', 21), |
|||
(18, 'xxxxxxxxx', 'xxxxxxxxxx', 23), |
|||
(19, 'ascd', 'dsvf', 22), |
|||
(20, 'ddddddddddddd', 'ddddddddddd', 21), |
|||
(21, 'fffffffff', 'ffffffffff', 22), |
|||
(22, 'Action 1', 'Description of action 1', 24), |
|||
(23, 'Action 2', 'Description of action 2 (Goto message 1)', 24), |
|||
(24, 'Action 3', 'Description of action 3 (Goto message 2)', 25); |
|||
|
|||
-- -------------------------------------------------------- |
|||
|
|||
-- |
|||
-- Table structure for table `messages` |
|||
-- |
|||
|
|||
CREATE TABLE `messages` ( |
|||
`id` int(11) NOT NULL, |
|||
`sid` int(11) NOT NULL, |
|||
`title` varchar(255) NOT NULL, |
|||
`short_text` text NOT NULL, |
|||
`long_text` text NOT NULL, |
|||
`image` varchar(255) NOT NULL, |
|||
`actions` varchar(100) NOT NULL, |
|||
`timer` time NOT NULL, |
|||
`progress` int(11) NOT NULL |
|||
) ENGINE=InnoDB DEFAULT CHARSET=latin1; |
|||
|
|||
-- |
|||
-- Dumping data for table `messages` |
|||
-- |
|||
|
|||
INSERT INTO `messages` (`id`, `sid`, `title`, `short_text`, `long_text`, `image`, `actions`, `timer`, `progress`) VALUES |
|||
(24, 5, 'Test message 1', 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. <strong>Donec quam felis</strong>, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.<em> Nullam dictum felis</em> eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. <br />', 'Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. <span style=\"text-decoration: underline;\">Etiam ultricies nisi vel augue</span>. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,', '/images/upload/20180402082649.jpg', '', '00:00:00', 0), |
|||
(25, 5, 'Test message 2', 'Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue.', '', '', '22', '00:00:10', 0), |
|||
(26, 5, 'Test message 3', 'Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.', '', '', '23,24', '00:00:00', 1); |
|||
|
|||
-- -------------------------------------------------------- |
|||
|
|||
-- |
|||
-- Table structure for table `session` |
|||
-- |
|||
|
|||
CREATE TABLE `session` ( |
|||
`id` int(11) NOT NULL, |
|||
`name` varchar(255) NOT NULL, |
|||
`link` varchar(255) NOT NULL, |
|||
`start` datetime NOT NULL, |
|||
`stop` datetime NOT NULL, |
|||
`enabled` tinyint(1) NOT NULL |
|||
) ENGINE=InnoDB DEFAULT CHARSET=latin1; |
|||
|
|||
-- |
|||
-- Dumping data for table `session` |
|||
-- |
|||
|
|||
INSERT INTO `session` (`id`, `name`, `link`, `start`, `stop`, `enabled`) VALUES |
|||
(5, 'Test session 1', 'Test-session-1', '2018-04-02 10:32:00', '2018-04-02 10:35:00', 1); |
|||
|
|||
-- |
|||
-- Indexes for dumped tables |
|||
-- |
|||
|
|||
-- |
|||
-- Indexes for table `actions` |
|||
-- |
|||
ALTER TABLE `actions` |
|||
ADD PRIMARY KEY (`id`); |
|||
|
|||
-- |
|||
-- Indexes for table `messages` |
|||
-- |
|||
ALTER TABLE `messages` |
|||
ADD PRIMARY KEY (`id`); |
|||
|
|||
-- |
|||
-- Indexes for table `session` |
|||
-- |
|||
ALTER TABLE `session` |
|||
ADD PRIMARY KEY (`id`); |
|||
|
|||
-- |
|||
-- AUTO_INCREMENT for dumped tables |
|||
-- |
|||
|
|||
-- |
|||
-- AUTO_INCREMENT for table `actions` |
|||
-- |
|||
ALTER TABLE `actions` |
|||
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=25; |
|||
|
|||
-- |
|||
-- AUTO_INCREMENT for table `messages` |
|||
-- |
|||
ALTER TABLE `messages` |
|||
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=27; |
|||
|
|||
-- |
|||
-- AUTO_INCREMENT for table `session` |
|||
-- |
|||
ALTER TABLE `session` |
|||
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=6; |
|||
COMMIT; |
|||
|
|||
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */; |
|||
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */; |
|||
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */; |
|||
@ -0,0 +1,77 @@ |
|||
<?php |
|||
|
|||
session_start(); |
|||
|
|||
@include 'cgi-bin/conn.conn'; |
|||
@include 'cgi-bin/functions.inc'; |
|||
@include 'cgi-bin/params.inc'; |
|||
|
|||
$conn=@mysqli_connect($DATAhst,$DATAusr,$DATApwd,$DATAdtb)or die("CONNECTION ERROR"); |
|||
mysqli_set_charset($conn, "utf8"); |
|||
|
|||
?> |
|||
|
|||
|
|||
<!DOCTYPE html> |
|||
<html> |
|||
<head> |
|||
|
|||
<title>COZe</title> |
|||
|
|||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
|||
<meta name="description" content="COZe"> |
|||
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'> |
|||
|
|||
<base href="<?php echo $BASE_URL;?>/"> |
|||
<?php |
|||
@include 'cssvendors.php'; |
|||
?> |
|||
|
|||
</head> |
|||
<body> |
|||
|
|||
<div id="MainContent" class="container"> |
|||
<form method="post"> |
|||
|
|||
<?php |
|||
if($_POST['id']) { |
|||
|
|||
$q = mysqli_query($conn, "DELETE FROM messages WHERE id=".$_POST['id'].""); |
|||
echo "<script>parent.window.location=parent.window.location</script>"; |
|||
|
|||
} else { |
|||
|
|||
?> |
|||
|
|||
<div class="row"> |
|||
<div class="col-12 text-center p-4"> |
|||
<span class="font-24">Delete message</span> |
|||
<input type="hidden" name="id" value="<?= $_GET['id'];?>"> |
|||
</div> |
|||
|
|||
<div class="col-12 text-center p4"> |
|||
<button type="submit" class="button big confirm mx-0">Go</button> |
|||
</div> |
|||
</div> |
|||
|
|||
<?php |
|||
} |
|||
?> |
|||
|
|||
</form> |
|||
</div> |
|||
|
|||
<?php |
|||
@include 'jsvendors.php'; |
|||
@include 'scripts/'.$getQ[0].'.php'; |
|||
?> |
|||
|
|||
|
|||
</body> |
|||
</html> |
|||
|
|||
|
|||
|
|||
<?php |
|||
mysqli_close($conn); |
|||
?> |
|||
@ -0,0 +1,77 @@ |
|||
<?php |
|||
|
|||
session_start(); |
|||
|
|||
@include 'cgi-bin/conn.conn'; |
|||
@include 'cgi-bin/functions.inc'; |
|||
@include 'cgi-bin/params.inc'; |
|||
|
|||
$conn=@mysqli_connect($DATAhst,$DATAusr,$DATApwd,$DATAdtb)or die("CONNECTION ERROR"); |
|||
mysqli_set_charset($conn, "utf8"); |
|||
|
|||
?> |
|||
|
|||
|
|||
<!DOCTYPE html> |
|||
<html> |
|||
<head> |
|||
|
|||
<title>COZe</title> |
|||
|
|||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
|||
<meta name="description" content="COZe"> |
|||
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'> |
|||
|
|||
<base href="<?php echo $BASE_URL;?>/"> |
|||
<?php |
|||
@include 'cssvendors.php'; |
|||
?> |
|||
|
|||
</head> |
|||
<body> |
|||
|
|||
<div id="MainContent" class="container"> |
|||
<form method="post"> |
|||
|
|||
<?php |
|||
if($_POST['id']) { |
|||
|
|||
$q = mysqli_query($conn, "DELETE FROM `session` WHERE id=".$_POST['id'].""); |
|||
echo "<script>parent.window.location=parent.window.location</script>"; |
|||
|
|||
} else { |
|||
|
|||
?> |
|||
|
|||
<div class="row"> |
|||
<div class="col-12 text-center p-4"> |
|||
<span class="font-24">Delete session</span> |
|||
<input type="hidden" name="id" value="<?= $_GET['id'];?>"> |
|||
</div> |
|||
|
|||
<div class="col-12 text-center p4"> |
|||
<button type="submit" class="button big confirm mx-0">Go</button> |
|||
</div> |
|||
</div> |
|||
|
|||
<?php |
|||
} |
|||
?> |
|||
|
|||
</form> |
|||
</div> |
|||
|
|||
<?php |
|||
@include 'jsvendors.php'; |
|||
@include 'scripts/'.$getQ[0].'.php'; |
|||
?> |
|||
|
|||
|
|||
</body> |
|||
</html> |
|||
|
|||
|
|||
|
|||
<?php |
|||
mysqli_close($conn); |
|||
?> |
|||
File diff suppressed because it is too large
@ -0,0 +1,31 @@ |
|||
<?php |
|||
@include '../cgi-bin/params.inc'; |
|||
?> |
|||
|
|||
<!doctype html> |
|||
<html lang="en"> |
|||
<head> |
|||
<title>COZe Training</title> |
|||
<meta charset="UTF-8"> |
|||
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'> |
|||
<link rel="stylesheet" href="<?= $BASE_URL;?>/device/css/styles.css"> |
|||
</head> |
|||
<body> |
|||
<div class="header"> |
|||
<img class="menu" src="<?= $BASE_URL;?>/images/menu.png"> |
|||
<img class="logo" src="<?= $BASE_URL;?>/images/logo.png"> |
|||
</div> |
|||
|
|||
<div class="content"> |
|||
</div> |
|||
|
|||
|
|||
<audio id="notify1"> |
|||
<source src="<?= $BASE_URL;?>/sounds/message.ogg" type="audio/ogg"> |
|||
</audio> |
|||
|
|||
<script type="text/javascript" src="<?= $BASE_URL;?>/node_modules/jquery/dist/jquery.min.js"></script> |
|||
<script type="text/javascript" src="<?= $BASE_URL;?>/device/script.js"></script> |
|||
|
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,106 @@ |
|||
$(document).ready(()=>{ |
|||
|
|||
const baseUrl = `http://${window.location.hostname}`; |
|||
const canVibrate = "vibrate" in navigator || "mozVibrate" in navigator; |
|||
if (canVibrate && !("vibrate" in navigator)){navigator.vibrate = navigator.mozVibrate;} |
|||
|
|||
const content = $('.content'); |
|||
|
|||
const urlString = window.location.href; |
|||
const url = new URL(urlString); |
|||
const sid = url.searchParams.get("sid"); |
|||
|
|||
$.getJSON( baseUrl + "/apis/getMessages.php", { |
|||
sid: sid |
|||
}).done( (session)=> { |
|||
console.log(session); |
|||
|
|||
if(session.enabled){ |
|||
$.each(session.messages, (index,item)=>{ |
|||
if(item.timer != session.start){ |
|||
const now = Date.now() / 1000; |
|||
const timer = Date.parse(item.timer) / 1000; |
|||
const start = Date.parse(session.start) / 1000; |
|||
|
|||
if(now > timer){ |
|||
showCloud(item.title, [item.short_text, item.long_text], item.image, item.actions, session.messages); |
|||
} else { |
|||
const delay = (timer - now); |
|||
setTimeout( ()=>{ |
|||
showCloud(item.title, [item.short_text, item.long_text], item.image, item.actions, session.messages); |
|||
},1000*delay); |
|||
} |
|||
} |
|||
}); |
|||
} |
|||
}); |
|||
|
|||
|
|||
function showCloud(title, text, img, actions, messages){ |
|||
|
|||
const image = img ? `<img src="${img}"` : ''; |
|||
const long_text = text[1] ? `<div class="long-text">
|
|||
<button class="toggle button confirm">More...</button> |
|||
<div class="text-content">${text[1]}</div> |
|||
</div>` : ''; |
|||
|
|||
const cloud = $(`<div class="cloud left">
|
|||
<div class="title">${title}</div> |
|||
<div class="short-text">${text[0]}</div> |
|||
${long_text} |
|||
${image} |
|||
</div>`); |
|||
|
|||
cloud.find('.toggle').on('click', (e)=>{ |
|||
const button = $(e.currentTarget); |
|||
const text = button.siblings('.text-content'); |
|||
if(text.is(':visible')){ |
|||
button.text('More...'); |
|||
text.slideUp(); |
|||
}else{ |
|||
button.text('Less...'); |
|||
text.slideDown(); |
|||
} |
|||
}); |
|||
content.append(cloud); |
|||
|
|||
if(actions.length){ |
|||
|
|||
const actionsContainer = $('<div class="actions"></div>'); |
|||
$.each(actions, (index, value)=>{ |
|||
const button = $(`<button class="goto button dotted" data-goto="${value.mid}">${value.label}</button>`); |
|||
|
|||
button.on('click', (e)=>{ |
|||
const goto = $(e.currentTarget); |
|||
const messageId = goto.data('goto'); |
|||
const fullMessage = messages.filter( (m)=> m.id == messageId); |
|||
showCloud(fullMessage[0].title, [fullMessage[0].short_text, fullMessage[0].long_text], fullMessage[0].image, fullMessage[0].actions, messages); |
|||
}); |
|||
|
|||
actionsContainer.append(button); |
|||
}); |
|||
|
|||
content.append(actionsContainer); |
|||
} |
|||
|
|||
scrollBottom(); |
|||
notify(false); |
|||
} |
|||
|
|||
function scrollBottom(){ |
|||
$('html, body').stop().animate({ |
|||
scrollTop: $('.cloud').last().offset().top |
|||
}, 1000); |
|||
} |
|||
|
|||
function notify(vibrate){ |
|||
if(vibrate){ navigator.vibrate(500); } |
|||
$('#notify1')[0].play(); |
|||
} |
|||
|
|||
}); |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,58 @@ |
|||
|
|||
|
|||
.font-light{ |
|||
font-weight: 300 !important; |
|||
} |
|||
.font-regular{ |
|||
font-weight: 400 !important; |
|||
} |
|||
.font-medium{ |
|||
font-weight: 500 !important; |
|||
} |
|||
.font-semibold{ |
|||
font-weight: 600 !important; |
|||
} |
|||
.font-bold{ |
|||
font-weight: 700 !important; |
|||
} |
|||
.font-extrabold{ |
|||
font-weight: 800 !important; |
|||
} |
|||
.font-normal { |
|||
font-style: normal !important; |
|||
} |
|||
.font-italic { |
|||
font-style: italic !important; |
|||
} |
|||
|
|||
|
|||
.text-right{ |
|||
text-align: right !important; |
|||
} |
|||
.text-center{ |
|||
text-align: center !important; |
|||
} |
|||
.text-left{ |
|||
text-align: left !important; |
|||
} |
|||
|
|||
.text-white{ |
|||
color: white !important; |
|||
} |
|||
.text-black{ |
|||
color: black !important; |
|||
} |
|||
.text-red{ |
|||
color: $red !important; |
|||
} |
|||
.text-grey{ |
|||
color: $grey !important; |
|||
} |
|||
.text-light-grey{ |
|||
color: $light-grey !important; |
|||
} |
|||
|
|||
|
|||
.text-upper{ |
|||
text-transform: uppercase !important; |
|||
} |
|||
@ -0,0 +1,66 @@ |
|||
|
|||
|
|||
input,button{ |
|||
border: none; |
|||
border-radius: 3px; |
|||
margin: 5px 0; |
|||
-webkit-appearance: none; |
|||
&::-ms-clear { |
|||
display: none; |
|||
} |
|||
&:focus {outline:none;} |
|||
&::-moz-focus-inner {border:0;} |
|||
} |
|||
|
|||
input[type=text], |
|||
input[type=password]{ |
|||
border: 1px solid $grey; |
|||
color: $grey; |
|||
padding: 5px 20px; |
|||
width: 100%; |
|||
text-align: left; |
|||
box-sizing: border-box; |
|||
|
|||
&.input-login{ |
|||
border: 1px solid $red; |
|||
border-radius: 5px; |
|||
color: black; |
|||
} |
|||
} |
|||
|
|||
input[type=button], |
|||
input[type=submit], |
|||
button, |
|||
.button{ |
|||
padding: 5px 20px; |
|||
margin: 10px; |
|||
border-radius: 4px; |
|||
cursor: pointer; |
|||
text-align: center; |
|||
font-size: $font-10; |
|||
text-transform: uppercase; |
|||
color: white; |
|||
|
|||
&.big{ |
|||
padding: 10px 25px; |
|||
} |
|||
|
|||
&.confirm{ |
|||
background: $red; |
|||
} |
|||
&.discard{ |
|||
background: black; |
|||
} |
|||
&.grey{ |
|||
background: $dark-grey; |
|||
} |
|||
&.dotted{ |
|||
background: white; |
|||
color: $dark-grey; |
|||
border: 2px dotted $dark-grey; |
|||
border-radius: 6px; |
|||
padding: 5px 15px; |
|||
margin: 5px; |
|||
} |
|||
} |
|||
|
|||
@ -0,0 +1,171 @@ |
|||
@charset "UTF-8"; |
|||
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700,800,900'); |
|||
|
|||
@import "variables"; |
|||
|
|||
@import "../../node_modules/font-awesome/scss/font-awesome"; |
|||
|
|||
@import "fonts"; |
|||
@import "forms"; |
|||
|
|||
|
|||
body{ |
|||
font-family: 'Montserrat'; |
|||
font-weight: 600; |
|||
margin: 0; |
|||
padding: 0; |
|||
overflow: hidden; |
|||
overflow-y: auto; |
|||
font-size: $font-12; |
|||
font-weight: 400; |
|||
} |
|||
|
|||
p, |
|||
label{ |
|||
margin: 0; |
|||
} |
|||
|
|||
a{ |
|||
color: white; |
|||
text-decoration: none; |
|||
transition: .4s; |
|||
outline: none; |
|||
&:active, |
|||
&:visited, |
|||
&:hover, |
|||
&:focus{ |
|||
outline: none; |
|||
color: white; |
|||
text-decoration: none; |
|||
} |
|||
&:hover{ |
|||
color: $grey; |
|||
} |
|||
} |
|||
|
|||
.content{ |
|||
margin-top: 70px; |
|||
width: 100%; |
|||
text-align: center; |
|||
|
|||
.cloud{ |
|||
position: relative; |
|||
width: 80%; |
|||
font-size: $font-12; |
|||
font-weight: 500; |
|||
padding: 10px; |
|||
margin: 10px 0; |
|||
border-radius: 8px; |
|||
line-height: 18px; |
|||
color: $dark-grey; |
|||
text-align: left; |
|||
|
|||
img{ |
|||
width: 100%; |
|||
margin: 8px 0; |
|||
cursor: pointer; |
|||
border-radius: 5px; |
|||
} |
|||
|
|||
&.left{ |
|||
left: 15px; |
|||
background: $pink; |
|||
border: 1px solid $dark-pink; |
|||
&:before{ |
|||
content: ''; |
|||
border: solid 8px transparent; |
|||
border-right-color: $dark-pink; |
|||
position: absolute; |
|||
left: 0; |
|||
top: 50%; |
|||
transform: translate(-100%, -50%); |
|||
} |
|||
&:after{ |
|||
content: ''; |
|||
border: solid 7px transparent; |
|||
border-right-color: $pink; |
|||
position: absolute; |
|||
left: 0; |
|||
top: 50%; |
|||
transform: translate(-100%, -50%); |
|||
} |
|||
} |
|||
|
|||
&.right{ |
|||
left: calc(20% - 38px); |
|||
background: $azure; |
|||
border: 1px solid $dark-azure; |
|||
&:before{ |
|||
content: ''; |
|||
border: solid 8px transparent; |
|||
border-left-color: $dark-azure; |
|||
position: absolute; |
|||
right: 0; |
|||
top: 50%; |
|||
transform: translate(100%, -50%); |
|||
} |
|||
&:after{ |
|||
content: ''; |
|||
border: solid 7px transparent; |
|||
border-left-color: $azure; |
|||
position: absolute; |
|||
right: 0; |
|||
top: 50%; |
|||
transform: translate(100%, -50%); |
|||
} |
|||
} |
|||
|
|||
.title{ |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.long-text{ |
|||
|
|||
.toggle{ |
|||
color: $grey; |
|||
margin: 5px 0; |
|||
} |
|||
.text-content{ |
|||
display: none; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.actions{ |
|||
padding: 0 20vw 0 50px; |
|||
text-align: center; |
|||
|
|||
.goto{ |
|||
margin: 5px 10px; |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
|
|||
|
|||
.header{ |
|||
position: fixed; |
|||
height: 50px; |
|||
width: 100%; |
|||
left: 0; |
|||
top: 0; |
|||
background: black; |
|||
z-index: 10; |
|||
|
|||
.logo{ |
|||
height: 25px; |
|||
position: absolute; |
|||
left: 50%; |
|||
top: 50%; |
|||
transform: translate(-50%, -50%); |
|||
} |
|||
|
|||
.menu{ |
|||
height: 20px; |
|||
position: absolute; |
|||
left: 20px; |
|||
top: 50%; |
|||
transform: translateY(-50%); |
|||
} |
|||
} |
|||
@ -0,0 +1,68 @@ |
|||
#!/bin/bash |
|||
|
|||
# input folder |
|||
src="" |
|||
# input file |
|||
src+="main.scss" |
|||
|
|||
# output folders |
|||
dest="../css/" |
|||
# output filename |
|||
dev=$dest"styles.css" |
|||
prod=$dest"styles.min.css" |
|||
custom=$dest"styles.custom.css" |
|||
|
|||
#help message |
|||
usage=" |
|||
Usage:\n |
|||
sass.sh [environment|watch-mode] [watch-mode|other-switches]\n\n |
|||
Examples:\n |
|||
1) watch mode with develop environment presets\n |
|||
./sass.sh dev --watch\n |
|||
---\n |
|||
2) 1 time compiling for production\n |
|||
./sass.sh prod\n |
|||
---\n\n |
|||
to modify input/output paths edit sass.sh\n |
|||
" |
|||
|
|||
# check for output directories |
|||
if [[ ! -e $dest ]]; then |
|||
mkdir -p $dest |
|||
elif [[ ! -d $dest ]]; then |
|||
echo "$dest already exists but is not a directory." 1>&2 |
|||
fi |
|||
|
|||
# don't edit below this line |
|||
if (( $# == 0 )); then |
|||
echo -e $usage |
|||
exit |
|||
else |
|||
case $1 in |
|||
--h*|--\? ) |
|||
echo -e $usage |
|||
exit |
|||
;; |
|||
"dev" ) |
|||
echo "compiling for developement" |
|||
sass $2 $src:$dev --line-numbers --sourcemap=none --style expanded ${@:3} |
|||
exit |
|||
;; |
|||
"prod"|"min" ) |
|||
echo "compiling for production" |
|||
sass $2 $src:$prod --sourcemap=none --style compressed ${@:3} |
|||
exit |
|||
;; |
|||
--w* ) |
|||
echo "compiling with given switches in --watch mode" |
|||
sass $1 $src:$custom ${@:2} |
|||
exit |
|||
;; |
|||
* ) |
|||
echo "compiling with given switches" |
|||
sass $src:$custom ${@:1} |
|||
exit |
|||
;; |
|||
esac |
|||
echo -e $usage |
|||
fi |
|||
@ -0,0 +1,62 @@ |
|||
// Bootstrap Settings |
|||
$grid-columns: 12; |
|||
$grid-gutter-width: 20px; |
|||
|
|||
$grid-breakpoints: ( |
|||
xs: 0, // Mobile Portrait |
|||
sm: 768px, // Tablet Portrait |
|||
md: 1024px, // Tablet landscape/Small desktop |
|||
lg: 1280px, // Desktop |
|||
xl: 1600px, // Large desktop |
|||
); |
|||
|
|||
|
|||
$container-max-widths: ( |
|||
sm: 708px, |
|||
md: 984px, |
|||
lg: 1240px, |
|||
xl: 1560px |
|||
); |
|||
|
|||
$fa-font-path: '/fonts'; |
|||
|
|||
$font-8: 0.5rem; /* 8px */ |
|||
$font-10: 0.625rem; /* 10px */ |
|||
$font-12: 0.75rem; /* 12px */ |
|||
$font-13: 0.812rem; /* 13px */ |
|||
$font-14: 0.875rem; /* 14px */ |
|||
$font-15: 0.937rem; /* 15px */ |
|||
$font-16: 1rem; /* 16px */ |
|||
$font-18: 1.125rem; /* 18px */ |
|||
$font-20: 1.25rem; /* 20px */ |
|||
$font-22: 1.375rem; /* 22px */ |
|||
$font-24: 1.5rem; /* 24px */ |
|||
$font-26: 1.625rem; /* 26px */ |
|||
$font-28: 1.75rem; /* 28px */ |
|||
$font-30: 1.875rem; /* 30px */ |
|||
$font-34: 2.125rem; /* 34px */ |
|||
$font-40: 2.5rem; /* 40px */ |
|||
$font-45: 2.812rem; /* 45px */ |
|||
$font-48: 3rem; /* 48px */ |
|||
$font-53: 3.312rem; /* 53px */ |
|||
$font-alert: 8rem; /* ?px */ |
|||
|
|||
$icon: 'FontAwesome'; |
|||
|
|||
@each $size in 8, 10, 12, 13, 14, 15, 16, 18, 20, 22, 24, 26, 28, 30, 34, 40, 45, 48, 53 { |
|||
.font-#{$size} {font-size: #{$size/16}rem !important;} |
|||
} |
|||
|
|||
|
|||
$alpha: rgba(255,255,255,0.6); |
|||
$green: #4e984a; |
|||
$light-green: #71986e; |
|||
$red: #bf0f3d; |
|||
$grey: #ccc; |
|||
$light-grey: #f2f2f2; |
|||
$dark-grey: #2f2f2f; |
|||
|
|||
$pink: #f6e7ea; |
|||
$dark-pink: #c8bcbe; |
|||
$azure: #d4eeed; |
|||
$dark-azure: #b0c8c6; |
|||
|
After Width: | Height: | Size: 35 KiB |
|
After Width: | Height: | Size: 47 KiB |
Binary file not shown.
Binary file not shown.
@ -0,0 +1,61 @@ |
|||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. |
|||
# yarn lockfile v1 |
|||
|
|||
|
|||
"@fortawesome/fontawesome-common-types@^0.1.3": |
|||
version "0.1.3" |
|||
resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.1.3.tgz#8475e0f2d1ad1f858c4ec2e76ed9a2456a09ad83" |
|||
|
|||
"@fortawesome/fontawesome-free-brands@^5.0.9": |
|||
version "5.0.9" |
|||
resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free-brands/-/fontawesome-free-brands-5.0.9.tgz#6023e29636a6d97a67a36b7e3f4af20f3d1526b0" |
|||
dependencies: |
|||
"@fortawesome/fontawesome-common-types" "^0.1.3" |
|||
|
|||
"@fortawesome/fontawesome-free-regular@^5.0.9": |
|||
version "5.0.9" |
|||
resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free-regular/-/fontawesome-free-regular-5.0.9.tgz#d420f0b9f9f4a3a0585f192d235d7e08bd5029d5" |
|||
dependencies: |
|||
"@fortawesome/fontawesome-common-types" "^0.1.3" |
|||
|
|||
"@fortawesome/fontawesome-free-solid@^5.0.9": |
|||
version "5.0.9" |
|||
resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free-solid/-/fontawesome-free-solid-5.0.9.tgz#456155a1cd82a0342ffe6a869d5a54fdadd78548" |
|||
dependencies: |
|||
"@fortawesome/fontawesome-common-types" "^0.1.3" |
|||
|
|||
"@fortawesome/fontawesome@^1.1.5": |
|||
version "1.1.5" |
|||
resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome/-/fontawesome-1.1.5.tgz#c7cfafdd3364245626293cc670357f9fb8487170" |
|||
dependencies: |
|||
"@fortawesome/fontawesome-common-types" "^0.1.3" |
|||
|
|||
bootstrap@^4.0.0: |
|||
version "4.0.0" |
|||
resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.0.0.tgz#ceb03842c145fcc1b9b4e15da2a05656ba68469a" |
|||
|
|||
flatpickr@^4.3.2: |
|||
version "4.4.3" |
|||
resolved "https://registry.yarnpkg.com/flatpickr/-/flatpickr-4.4.3.tgz#53ba7b06523f73ee69175b3ed808c7fc0f245c4f" |
|||
|
|||
font-awesome@^4.7.0: |
|||
version "4.7.0" |
|||
resolved "https://registry.yarnpkg.com/font-awesome/-/font-awesome-4.7.0.tgz#8fa8cf0411a1a31afd07b06d2902bb9fc815a133" |
|||
|
|||
jquery-colorbox@^1.6.4: |
|||
version "1.6.4" |
|||
resolved "https://registry.yarnpkg.com/jquery-colorbox/-/jquery-colorbox-1.6.4.tgz#799452523a6c494839224ef702e807deb9c06cc5" |
|||
dependencies: |
|||
jquery ">=1.3.2" |
|||
|
|||
jquery@>=1.3.2, jquery@^3.3.1: |
|||
version "3.3.1" |
|||
resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.3.1.tgz#958ce29e81c9790f31be7792df5d4d95fc57fbca" |
|||
|
|||
popper.js@^1.12.9: |
|||
version "1.14.1" |
|||
resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.14.1.tgz#b8815e5cda6f62fc2042e47618649f75866e6753" |
|||
|
|||
tinymce@^4.7.9: |
|||
version "4.7.9" |
|||
resolved "https://registry.yarnpkg.com/tinymce/-/tinymce-4.7.9.tgz#2f14934cf42ab20e6d081fd282842c24aecf1866" |
|||
Loading…
Reference in new issue