Skip to content

Instantly share code, notes, and snippets.

@sasstr

sasstr/SassMeister-input-HTML.html

Last active August 29, 2019 23:05
Show Gist options
  • Save sasstr/34029c540bc561e185bb9263f4e740e1 to your computer and use it in GitHub Desktop.
Save sasstr/34029c540bc561e185bb9263f4e740e1 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Big Trip</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700,800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body class="page-body">
<header class="page-header">
<div class="page-body__container page-header__container">
<img class="page-header__logo" src="img/logo.png" width="42" height="42" alt="Trip logo">
<div class="trip-main">
<section class="trip-main__trip-info trip-info">
<!-- Маршрут -->
<p class="trip-info__cost">
Total: &euro;&nbsp;<span class="trip-info__cost-value">0</span>
</p>
</section>
<div class="trip-main__trip-controls trip-controls">
<h2 class="visually-hidden">Switch trip view</h2>
<!-- Меню -->
<h2 class="visually-hidden">Filter events</h2>
<!-- Фильтры -->
</div>
<button class="trip-main__event-add-btn btn btn--big btn--yellow" type="button">New event</button>
</div>
</div>
</header>
<main class="page-body__page-main page-main">
<div class="page-body__container">
<section class="trip-events">
<h2 class="visually-hidden">Trip events</h2>
<!-- Сортировка -->
<!-- Контент -->
</section>
</div>
</main>
<script>
export const days = [
{
eventTime: new Date(2019, 8, 3, 3, 5, 33),
comment: `3 сентября 2019`,
},
{
eventTime: new Date(2019, 7, 30, 7, 9, 33),
comment: `30 августа 2019`,
},
{
eventTime: new Date(2019, 7, 31, 11, 23, 33),
comment: `31 августа 2019`,
},
{
eventTime: new Date(2019, 8, 1, 9, 17, 33),
comment: `1 сентября 2019`,
},
{
eventTime: new Date(2019, 8, 3, 15, 36, 35),
comment: `3 сентября 2019`,
}
];
export let someDate = new Date(2019, 8, 3, 3, 55, 63);
someDate = Date.parse(someDate.toISOString().slice(0, 10).split(`-`).join(`, `));
// функция возращает таймстэмп без часов минут и секунд с милисекундами
export const getEventDayDate = (date) => Date.parse(date.toISOString()
.slice(0, 10)
.split(`-`)
.join(`, `));
// функция сортирует массив объектов по дате в поле eventTime по возрастанию.
export const sortTripDays = (daysArray) => {
daysArray.sort((time1, time2) => time1.eventTime - time2.eventTime);
};
export const makeTripDaysArray = (daysInfo) => {
daysInfo.map((day) => {
const tripDays = [];
tripDays.push(getEventDayDate(day.eventTime));
});
};
sortTripDays(days);
let daysEvt = new Set(days.slice()
.map((day) => getEventDayDate(day.eventTime)))
.entries();
</script>
<script src="./bundle.js"></script>
</body>
</html>
Raw
mock.js
export const days = [
{
eventTime: new Date(2019, 8, 3, 3, 5, 33),
comment: `3 сентября 2019`,
},
{
eventTime: new Date(2019, 7, 30, 7, 9, 33),
comment: `30 августа 2019`,
},
{
eventTime: new Date(2019, 7, 31, 11, 23, 33),
comment: `31 августа 2019`,
},
{
eventTime: new Date(2019, 8, 1, 9, 17, 33),
comment: `1 сентября 2019`,
},
{
eventTime: new Date(2019, 8, 3, 15, 36, 35),
comment: `3 сентября 2019`,
}
];
export let someDate = new Date(2019, 8, 3, 3, 55, 63);
someDate = Date.parse(someDate.toISOString().slice(0, 10).split(`-`).join(`, `));
// функция возращает таймстэмп без часов минут и секунд с милисекундами
export const getEventDayDate = (date) => Date.parse(date.toISOString()
.slice(0, 10)
.split(`-`)
.join(`, `));
// функция сортирует массив объектов по дате в поле eventTime по возрастанию.
export const sortTripDays = (daysArray) => {
daysArray.sort((time1, time2) => time1.eventTime - time2.eventTime);
};
export const makeTripDaysArray = (daysInfo) => {
daysInfo.map((day) => {
const tripDays = [];
tripDays.push(getEventDayDate(day.eventTime));
});
};
sortTripDays(days);
let daysEvt = new Set(days.slice()
.map((day) => getEventDayDate(day.eventTime)))
.entries();
/* Days [{day1: [day1-evt1, day1-evt2, day1-evt3]},
{day2: [day2-evt1, day2-evt2, day2-evt3]}
]
.sort((a, b) => a - b); */
export {daysEvt};
Raw
SassMeister-input-HTML.html
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="btn">"
<a href="#" class="simple-button">Кнопка</a>
<a href="#" class="attention-button">Кнопка</a>
<a href="#" class="danger-button">Кнопка</a>
</div>
<div class="fir"></div>
</body>
</html>
Raw
SassMeister-input.scss
// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----
$bg-color: #f50;
$width: 400px;
$heigth: 400px;
$margin:40px;
.fir {
background: $bg-color;
width:$width;
height:$heigth;
border-radius:$width/2;
margin-top:$margin;
margin-left:$margin;
}
@mixin button($color: lime) {
background: $color;
display:inline-block;
margin:$width/100;
height:$heigth/10;;
width:$width/2;
text-align: center;
border-radius: $width/50;
text-decoration: none;
text-transform: uppercase;
font-size: $heigth/17;
border:1px solid #bcbcbc;
box-shadow: 0 0 5px #eee;
&:hover {
background: darken( $color, 10%);
font-weight:bold;
text-decoration: underline;
}
}
.simple-button {
@include button();
}
.attention-button {
@include button(lightblue);
}
.danger-button {
@include button(red);
}
Raw
SassMeister-output.css
.fir {
background: #f50;
width: 400px;
height: 400px;
border-radius: 200px;
margin-top: 40px;
margin-left: 40px;
}
.simple-button {
background: lime;
display: inline-block;
margin: 4px;
height: 40px;
width: 200px;
text-align: center;
border-radius: 8px;
text-decoration: none;
text-transform: uppercase;
font-size: 23.52941px;
border: 1px solid #bcbcbc;
box-shadow: 0 0 5px #eee;
}
.simple-button:hover {
background: #00cc00;
font-weight: bold;
text-decoration: underline;
}
.attention-button {
background: lightblue;
display: inline-block;
margin: 4px;
height: 40px;
width: 200px;
text-align: center;
border-radius: 8px;
text-decoration: none;
text-transform: uppercase;
font-size: 23.52941px;
border: 1px solid #bcbcbc;
box-shadow: 0 0 5px #eee;
}
.attention-button:hover {
background: #86c5da;
font-weight: bold;
text-decoration: underline;
}
.danger-button {
background: red;
display: inline-block;
margin: 4px;
height: 40px;
width: 200px;
text-align: center;
border-radius: 8px;
text-decoration: none;
text-transform: uppercase;
font-size: 23.52941px;
border: 1px solid #bcbcbc;
box-shadow: 0 0 5px #eee;
}
.danger-button:hover {
background: #cc0000;
font-weight: bold;
text-decoration: underline;
}
Raw
SassMeister-rendered.html
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="btn">"
<a href="#" class="simple-button">Кнопка</a>
<a href="#" class="attention-button">Кнопка</a>
<a href="#" class="danger-button">Кнопка</a>
</div>
<div class="fir"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment