1 Commits

Author SHA1 Message Date
cd13aca48d added embeded details 2025-10-03 02:38:40 +10:00
115 changed files with 181 additions and 22717 deletions

3
.gitignore vendored
View File

@@ -1,3 +0,0 @@
**node_modules
**to_reform
.vscode

File diff suppressed because it is too large Load Diff

View File

@@ -1,30 +0,0 @@
{
"name": "template_pug",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack --mode production",
"serve": "webpack serve --open --mode development",
"dev": "webpack --mode development",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"chokidar": "^4.0.3",
"css-loader": "^6.8.1",
"filemanager-webpack-plugin": "^8.0.0",
"glob": "^11.0.3",
"html-webpack-plugin": "^5.5.3",
"pug": "^2.0.4",
"pug-loader": "^2.4.0",
"style-loader": "^3.3.3",
"stylus": "^0.61.0",
"stylus-loader": "^7.1.3",
"webpack": "^5.89.0",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^4.15.1"
}
}

View File

@@ -1,306 +0,0 @@
block variables
-
var navbarItems = {
Home: './index.html',
Embedded: './embeded_details.html',
OpenCV: './opencv_details.html',
Photography: './photography-details.html',
Table: './table.html',
Institute: './images/institute.png'
};
var smallCards = [
{
header: 'Заголовок',
text: '3D printers are versatile tools used for creating prototypes, custom parts, and artistic designs. They work by layering materials.',
image: require('../images/16x10/3d-printer.jpeg'),
imageAlt: '3D Printer',
link: '#',
},
{
header: 'BLHeli ESCs',
text: 'BLHeli ESCs are electronic speed controllers designed for drones, offering smooth and precise motor control.',
image: require('../images/16x10/blheli-esc.jpeg'),
imageAlt: 'BLHeli ESC',
link: '#',
},
{
header: 'Raspberry Pi Nano',
text: 'Raspberry Pi Nano is a compact computer ideal for learning, prototyping, and IoT projects. It is highly energy-efficient.',
image: require('../images/16x10/rpi-nano.jpeg'),
imageAlt: 'Raspberry Pi Nano',
link: '#',
},
{
header: 'Smart Thermostats',
text: 'Smart thermostats help regulate home temperatures efficiently, saving energy and enhancing comfort with automation.',
image: require('../images/16x10/thermostat.jpeg'),
imageAlt: 'Smart Thermostat',
link: '#',
}
];
var galleryImages= [
{ src: require('../images/sqarucos.png'), alt: 'ESP32'},
{ src: require('../images/sqstm32.png'), alt: 'Arduino'},
{ src: require('../images/sqesp32.png'), alt: 'STM32'}
];
var locationFilters = [
{ id: 'loc_kitchen', value: 'Kitchen', label: 'Kitchen' },
{ id: 'loc_living', value: 'Living Room', label: 'Living Room' },
{ id: 'loc_balcony', value: 'Balcony', label: 'Balcony' },
{ id: 'loc_bedroom', value: 'Bedroom', label: 'Bedroom' }
];
var sensorTypeFilters = [
{ id: 'type_xiaomi', value: 'Xiaomi', label: 'Xiaomi' },
{ id: 'type_bmp220', value: 'Bmp220', label: 'Bmp220' },
{ id: 'type_scd30', value: 'Scd30(Internal)', label: 'Scd30(Internal)' },
{ id: 'type_bmp280', value: 'Bmp280', label: 'Bmp280' }
];
var sortOptions = [
{ value: '', label: '-- None --' },
{ value: 'SensorID', label: 'SensorID' },
{ value: 'Timestamp', label: 'Time' },
{ value: 'BatteryLevel', label: 'BatteryLevel' },
{ value: 'Temperature', label: 'Temperature' },
{ value: 'Humidity', label: 'Humidity' }
];
var axisOptions = [
{ id: 'x_time', value: 'Time', label: 'Time', checked: true },
{ id: 'x_battery', value: 'BatteryLevel', label: 'BatteryLevel', checked: false },
{ id: 'x_temperature', value: 'Temperature', label: 'Temperature', checked: false },
{ id: 'x_humidity', value: 'Humidity', label: 'Humidity', checked: false }
];
var valueOptions = [
{ id: 'val_temperature', value: 'AverageTemperature', label: 'Average Temperature', checked: true },
{ id: 'val_humidity', value: 'Humidity', label: 'Average Humidity', checked: false },
{ id: 'val_battery', value: 'BatteryLevel', label: 'Average BatteryLevel', checked: false }
]
var sensorData = [
{
sensorId: 'TEMP-001',
location: 'Balcony',
timestamp: '2025-10-03T03:41:50Z',
temperature: 19.4,
tempDifference: -0.2,
sensorType: 'Bmp220',
batteryLevel: 95,
humidity: 38.1,
lastCalibrationDate: '2025-07-26'
},
{
sensorId: 'TEMP-003',
location: 'Bedroom',
timestamp: '2025-10-03T03:42:46Z',
temperature: 18.2,
tempDifference: -0.1,
sensorType: 'Xiaomi',
batteryLevel: 75,
humidity: 45.5,
lastCalibrationDate: '2025-07-21'
},
{
sensorId: 'TEMP-004',
location: 'Balcony',
timestamp: '2025-10-03T03:43:48Z',
temperature: 24.1,
tempDifference: 0.1,
sensorType: 'Xiaomi',
batteryLevel: 72,
humidity: 50.5,
lastCalibrationDate: '2025-08-30'
},
{
sensorId: 'TEMP-001',
location: 'Balcony',
timestamp: '2025-10-03T03:44:34Z',
temperature: 19.1,
tempDifference: -0.3,
sensorType: 'Bmp220',
batteryLevel: 95,
humidity: 56.5,
lastCalibrationDate: '2025-07-26'
},
{
sensorId: 'TEMP-006',
location: 'Kitchen',
timestamp: '2025-10-03T03:45:46Z',
temperature: 22.8,
tempDifference: 0.0,
sensorType: 'Scd30(Internal)',
batteryLevel: 80,
humidity: 41.4,
lastCalibrationDate: '2025-09-10'
},
{
sensorId: 'TEMP-010',
location: 'Balcony',
timestamp: '2025-10-03T03:46:18Z',
temperature: 21.7,
tempDifference: 0.5,
sensorType: 'Scd30(Internal)',
batteryLevel: 79,
humidity: 59.8,
lastCalibrationDate: '2025-08-07'
},
{
sensorId: 'TEMP-006',
location: 'Balcony',
timestamp: '2025-10-03T03:47:05Z',
temperature: 22.7,
tempDifference: -0.1,
sensorType: 'Scd30(Internal)',
batteryLevel: 80,
humidity: 36.1,
lastCalibrationDate: '2025-09-10'
},
{
sensorId: 'TEMP-006',
location: 'Bedroom',
timestamp: '2025-10-03T03:48:13Z',
temperature: 22.9,
tempDifference: 0.2,
sensorType: 'Scd30(Internal)',
batteryLevel: 80,
humidity: 56.1,
lastCalibrationDate: '2025-09-10'
},
{
sensorId: 'TEMP-005',
location: 'Living Room',
timestamp: '2025-10-03T03:49:03Z',
temperature: 24.4,
tempDifference: 0.4,
sensorType: 'Bmp180',
batteryLevel: 91,
humidity: 30.1,
lastCalibrationDate: '2025-08-07'
},
{
sensorId: 'TEMP-001',
location: 'Kitchen',
timestamp: '2025-10-03T03:50:24Z',
temperature: 19.1,
tempDifference: 0.0,
sensorType: 'Bmp220',
batteryLevel: 95,
humidity: 64.8,
lastCalibrationDate: '2025-07-26'
},
{
sensorId: 'TEMP-008',
location: 'Living Room',
timestamp: '2025-10-03T03:51:12Z',
temperature: 21.9,
tempDifference: -0.1,
sensorType: 'Scd30(Internal)',
batteryLevel: 92,
humidity: 36.0,
lastCalibrationDate: '2025-08-02'
},
{
sensorId: 'TEMP-009',
location: 'Balcony',
timestamp: '2025-10-03T03:51:46Z',
temperature: 22.3,
tempDifference: 0.0,
sensorType: 'Xiaomi',
batteryLevel: 76,
humidity: 74.0,
lastCalibrationDate: '2025-09-17'
},
{
sensorId: 'TEMP-003',
location: 'Kitchen',
timestamp: '2025-10-03T03:52:23Z',
temperature: 18.4,
tempDifference: 0.2,
sensorType: 'Xiaomi',
batteryLevel: 75,
humidity: 45.2,
lastCalibrationDate: '2025-07-21'
},
{
sensorId: 'TEMP-010',
location: 'Living Room',
timestamp: '2025-10-03T03:53:44Z',
temperature: 21.8,
tempDifference: 0.1,
sensorType: 'Scd30(Internal)',
batteryLevel: 79,
humidity: 36.3,
lastCalibrationDate: '2025-08-07'
},
{
sensorId: 'TEMP-001',
location: 'Kitchen',
timestamp: '2025-10-03T03:54:46Z',
temperature: 18.7,
tempDifference: -0.4,
sensorType: 'Bmp220',
batteryLevel: 95,
humidity: 44.3,
lastCalibrationDate: '2025-07-26'
},
{
sensorId: 'TEMP-006',
location: 'Bedroom',
timestamp: '2025-10-03T03:55:24Z',
temperature: 23.3,
tempDifference: 0.4,
sensorType: 'Scd30(Internal)',
batteryLevel: 80,
humidity: 55.9,
lastCalibrationDate: '2025-09-10'
},
{
sensorId: 'TEMP-002',
location: 'Kitchen',
timestamp: '2025-10-03T03:55:57Z',
temperature: 17.7,
tempDifference: -0.5,
sensorType: 'Scd30(Internal)',
batteryLevel: 93,
humidity: 70.2,
lastCalibrationDate: '2025-08-30'
},
{
sensorId: 'TEMP-002',
location: 'Balcony',
timestamp: '2025-10-03T03:57:05Z',
temperature: 17.4,
tempDifference: -0.3,
sensorType: 'Scd30(Internal)',
batteryLevel: 93,
humidity: 66.7,
lastCalibrationDate: '2025-08-30'
},
{
sensorId: 'TEMP-009',
location: 'Living Room',
timestamp: '2025-10-03T03:58:28Z',
temperature: 22.6,
tempDifference: 0.3,
sensorType: 'Xiaomi',
batteryLevel: 76,
humidity: 56.4,
lastCalibrationDate: '2025-09-17'
},
{
sensorId: 'TEMP-004',
location: 'Bedroom',
timestamp: '2025-10-03T03:59:51Z',
temperature: 24.3,
tempDifference: 0.2,
sensorType: 'Xiaomi',
batteryLevel: 72,
humidity: 47.3,
lastCalibrationDate: '2025-08-30'
}
];

View File

@@ -1,24 +0,0 @@
include mixins.pug
html
head
meta(charset="UTF-8")
block title
title Details Page
body
block navbar
+navbarMixin("")
.details
header.details__header
block header
h1 Default Header
.details__content
.details__text
block text
p Default text content
.details__gallery
block gallery
p No images available

View File

@@ -1,158 +0,0 @@
include data.pug
mixin navbarMixin(selectedItem)
.navbar
each navbarUrl,navbarName in navbarItems
if navbarName == selectedItem
a.navbar__link-wrapper(href=navbarUrl)
.navbar__item.navbar__item_selected #{navbarName}
else
a.navbar__link-wrapper(href=navbarUrl)
.navbar__item #{navbarName}
mixin infoCardsMinxin()
each cardData in smallCards
.small-card
.small-card__content
h3.small-card__header #{cardData.header}
p.small-card__text #{cardData.text}
a.small-card__link(href=cardData.link) Подробнее»
.small-card__image
img(src=cardData.image alt=cardData.imageAlt)
mixin galleryMixin()
each img in galleryImages
img.gallery__image(src=img.src alt=img.alt)
mixin filtersMixin()
details.filters
summary.filters__summary Filters
form.filters__form
fieldset.filters__fieldset
.filter-group
i.filter-group__label
b Location
br
.filter-group__items
each filter in locationFilters
input.filter-group__checkbox(type="checkbox" id=filter.id name="location" value=filter.value)
span #{filter.label}
br
.filter-group
i.filter-group__label
b Sensor Type
br
.filter-group__items
each filter in sensorTypeFilters
input.filter-group__checkbox(type="checkbox" id=filter.id name="sensor_type" value=filter.value)
span #{filter.label}
br
.filter-group
i.filter-group__label
b Numeric Values
br
.filter-group__range
span Temperature from:
input.filter-group__input(type="number" name="temp_min" placeholder="20")
span to:
input.filter-group__input(type="number" name="temp_max" placeholder="30")
br
span Humidity from:
input.filter-group__input(type="number" name="humidity_min" placeholder="40")
span to:
input.filter-group__input(type="number" name="humidity_max" placeholder="60")
br
.filter-group
i.filter-group__label
b Device Specific Filters
br
.filter-group__items
span Sensor Name:
input.filter-group__input(type="text" name="sensor_name")
br
span Days Since Calibration (max):
input.filter-group__input(type="number" name="calibration_days" placeholder="30")
br
.filter-group
i.filter-group__label
b Measurement Period
br
.filter-group__dates
span From:
input.filter-group__input(type="date" name="date_from")
br
span To:
input.filter-group__input(type="date" name="date_to")
br
.filter-group__buttons
input.filter-group__button.filter-group__button--submit(type="submit" value="Apply Filters")
input.filter-group__button.filter-group__button--reset(type="reset" value="Reset Filters")
mixin sortLevel(level)
.sort-level
i.sort-level__label
b Sort Level #{level}
br
label.sort-level__field-label(for=`sort${level}`) Field:
select.sort-level__select(id=`sort${level}` name=`sort${level}`)
each option in sortOptions
option(value=option.value) #{option.label}
label.sort-level__reverse-label(for=`sort${level}_reverse`)
input.sort-level__checkbox(type="checkbox" id=`sort${level}_reverse` name=`sort${level}_reverse`)
span Reverse
br
if level === '3'
input.sort-level__submit(type="submit" value="Sort")
else
br
mixin sortingMixin()
- const sortLevels = ['1', '2', '3'];
details.sorting
summary.sorting__summary Sortings
form.sorting__form
fieldset.sorting__fieldset
each level in sortLevels
+sortLevel(level)
mixin graphXOption(option)
if option.checked
input.axis-group__radio(type="radio" id=option.id name="x_axis" value=option.value checked)
else
input.axis-group__radio(type="radio" id=option.id name="x_axis" value=option.value)
label.axis-group__option-label(for=option.id) #{option.label}
br
mixin graphYOption(option)
if option.checked
input.values-group__checkbox(type="checkbox" id=option.id name="values" value=option.value checked)
else
input.values-group__checkbox(type="checkbox" id=option.id name="values" value=option.value)
label.values-group__option-label(for=option.id) #{option.label}
br
mixin graphMixin()
details.graph
summary.graph__summary Graph
form.graph__form
fieldset.graph__fieldset
.axis-group
i.axis-group__label
b X axis
br
.axis-group__options
each option in axisOptions
+graphXOption(option)
.values-group
i.values-group__label
b Values
br
.values-group__options
each option in valueOptions
+graphYOption(option)
button.values-group__button(type="submit" id="build_graph" name="build_graph") Build

Binary file not shown.

Before

Width:  |  Height:  |  Size: 198 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 159 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 106 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 229 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.3 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.2 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 99 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.9 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.4 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.9 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 65 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 53 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 50 KiB

View File

@@ -1,3 +0,0 @@
import './styles/index.styl'
import './styles/details.styl'
import './styles/table.styl'

View File

@@ -1,51 +0,0 @@
include ../components/mixins.pug
-
const infoBlockA = {
header: "Embedded Systems",
text: "Had a serval projects with different MCUs and wrote firmware for them. My main stack consists of Platformio+EspIdf or Arduino, also tried STM32 asdadas",
description: "I love embeded development beceuse of autonomity of produced devices, the redices are not dependant on any other hardware and can work autunomously",
img: require('../images/AQ_monitor.png'),
imgAlt: "ESP32"
}
const infoBlockB = {
header: "Embedded Systems",
text: "Had a serval projects with different MCUs and wrote firmware for them. My main stack consists of Platformio+EspIdf or Arduino, also tried STM32",
description: "I love embeded development device because of autonomity of produced devices, the devices are not dependant on any other hardware and can work autunomously or off the grid",
img: require('../images/remote.jpeg'),
imgAlt: "ESP32"
}
html(lang="en")
head
meta(charset="UTF-8")
title Portfolio
body
+navbarMixin("Home")
.gallery
+galleryMixin()
.main-container
.main-container__content
article.info-block
h2.info-block__header #{infoBlockA.header}
.info-block__container.info-block__container_layout-a
p.info-block__text #{infoBlockA.text}
.info-block__details
p.info-block__description #{infoBlockA.description}
a.info-block__link(href="#") More info
img.info-block__image(src=infoBlockA.img alt=infoBlockA.imgAlt)
article.info-block
h2.info-block__header #{infoBlockB.header}
.info-block__container.info-block__container_layout-b
p.info-block__text #{infoBlockB.text}
img.info-block__image(src=infoBlockB.img alt=infoBlockB.imgAlt)
.info-block__details
p.info-block__description #{infoBlockB.description}
a.info-block__link(href="./photography-details.html") More info
.sidebar
+infoCardsMinxin()

View File

@@ -1,22 +0,0 @@
extends ../components/details-template.pug
block title
title Photography Portfolio - Details
block navbar
+navbarMixin("Photography")
block header
h1.details__title Photography
p.details__description I prefer landscape photography.
block text
p.details__text-content D3100 -> SLT A58.
block gallery
.details__gallery-item
img.details__gallery-image(src=require('../images/photos/image0.png') alt="Photography 1")
.details__gallery-item
img.details__gallery-image(src=require('../images/photos/image1.png') alt="Photography 2")
.details__gallery-item
img.details__gallery-image(src=require('../images/photos/image2.png') alt="Photography 3")

View File

@@ -1,25 +0,0 @@
include ../components/mixins.pug
include ../components/data.pug
head
title table
body
+navbarMixin("Table")
.table-controls
+filtersMixin()
+sortingMixin()
+graphMixin()
table.table
tbody.table-content
each dataItem,index in sensorData
if index == 0
tr.table-content__table-header
each value,header in dataItem
th #{header}
tr.table-content__table-row
each value,header in dataItem
td #{value}

View File

@@ -1,58 +0,0 @@
.details
margin 0 auto
padding 20px
.details__header
margin-bottom 20px
text-align center
.details__title
margin-bottom 5px
.details__description
margin auto
.details__content
display flex
gap 40px
align-items flex-start
.details__text
flex 1
text-align justify
.details__text-content
margin auto 30px
.details__gallery
display flex
flex-direction column
gap 20px
margin auto
.details__gallery-item
overflow hidden
border-radius 8px
box-shadow 0 4px 12px rgba(0, 0, 0, 0.1)
transition transform 0.3s ease, box-shadow 0.3s ease
&:hover
transform translateY(-5px)
box-shadow 0 8px 20px rgba(0, 0, 0, 0.15)
.details__gallery-image
width 100%
height 250px
object-fit cover
display block
@media screen and (max-width: 700px)
.details__content
flex-direction column
.details__gallery
order -1 // Move gallery above text
.details__gallery-image
height 300px

View File

@@ -1,166 +0,0 @@
item_h=3em;
double-border()
border-top double thick silver
border-bottom double thick silver
flex-center()
display flex
align-items center
justify-content center
text-center-bold()
text-align center
font-weight bold
display block
grid-responsive(columns)
display grid
grid-template-columns columns
grid-template-rows 1fr
.navbar
double-border()
font-size 0
grid-responsive(repeat(7, min-content))
justify-items start
&__link-wrapper
color black
text-decoration none
&__item
display inline-block
width max-content
height item_h
line-height item_h
text-align center
vertical-align middle
padding 0 10px
margin @padding
overflow hidden
text-overflow ellipsis
font-size medium
&_selected
color green
font-weight bold
border-left double thin silver
border-right double thin silver
.gallery
display flex
flex-direction row
width 90%
margin auto
&__image
margin auto
width 100%
border thin solid black
&:nth-child(2n+1)
margin-top 10px
.main-container
grid-responsive(3fr 1fr)
.info-block
border solid thin black
padding 2vw
margin 1vw 0
&__header
text-center-bold()
&__container
&_layout-a
grid-responsive(3fr 3fr 2fr)
&_layout-b
grid-responsive(4fr 7fr 4fr)
& > *
margin 2vw
&__text, &__description
text-align justify
&__image
margin auto
width 100%
&__link
color inherit
.sidebar
border-left thin solid black
margin 30px 0 0 50px
.small-card
margin 20px 10px 0
grid-responsive(1fr 1fr)
&__content
text-align justify
&__header
text-center-bold()
text-align right
&__link
display block
text-align right
color inherit
&__image
& img
width 100%
margin-left:10px
@media screen and (max-width: 1000px)
.small-card
display flex
flex-direction column
.sidebar
margin 0
width:100%
@media screen and (max-width: 800px)
.navbar
grid-responsive(1fr 1fr)
grid-template-rows 1fr 1fr 1fr
justify-items center
&__item
&_selected
border-bottom double thick silver
border-left none
border-right none
.gallery
display inline-flex
flex-direction column
width 100%
&__image
width 100%
height 100%
&:nth-child(2n+1)
margin-top 0px
.main-container
display flex
flex-direction column
.info-block
&__container
&_layout-a, &_layout-b
display flex
flex-direction column

View File

@@ -1,6 +0,0 @@
.table, .table-content *, .table-content
border: 1px solid black;
border-collapse: collapse;
.table-content__table-row:nth-child(2n)
background: #F0FFF0;

View File

@@ -1,69 +0,0 @@
const HtmlWebpackPlugin = require("html-webpack-plugin");
const FileManagerPlugin = require("filemanager-webpack-plugin");
const path = require("path");
const fs = require("fs");
const pagesDir = path.join(__dirname, "src", "pages");
const pages = fs.readdirSync(pagesDir).filter(file => file.endsWith(".pug"));
module.exports = {
output: {
path: path.join(__dirname, "dist"),
filename: "index.[contenthash].js",
assetModuleFilename: path.join("images", "[name].[contenthash][ext]"),
},
entry: path.join(__dirname, "src", "index.js"),
module: {
rules: [
{
test: /\.pug$/,
loader: "pug-loader",
},
{
test: /\.(png|jpg|jpeg|gif)$/i,
type: "asset/resource",
},
{
test: /\.svg$/,
type: "asset/resource",
generator: {
filename: path.join("icons", "[name].[contenthash][ext]"),
},
},
{
test: /\.styl$/,
use: [
{
loader: "style-loader",
},
{
loader: "css-loader",
},
{
loader: "stylus-loader",
},
],
},
],
},
plugins: [
...pages.map(
(page) =>
new HtmlWebpackPlugin({
template: path.join(pagesDir, page),
filename: page.replace(".pug", ".html"),
})
),
new FileManagerPlugin({
events: {
onStart: {
delete: ["dist"],
},
},
}),
],
devServer: {
watchFiles: path.join(__dirname, "src"),
port: 9000,
},
};

104
embeded_details.html Normal file
View File

@@ -0,0 +1,104 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
"Portfolio"
</title>
</head>
<body bgcolor="#F0F8FF">
<details>
<summary>Menu</summary>
<ul>
<li><a href="./index.html">Home</a></li>
<li><a href="./embeded_details.html">Embeded Details</a></li>
<li><a href="./opencv_details.html">OpenCV Details</a></li>
<li><a href="./photography_details.html">Photography Details</a></li>
<li><a href="./table.html">Table with filters (not working yet)</a></li>
<li><a href="./images/institute.png">Institute</a></li>
</ul>
</details>
<h2 align="center">Embedded Details</h2>
<hr width="80%" align="center">
<div style="text-align:center;">
<img src="./images/esp32.png" alt="ESP32" height="150">
<img src="./images/arduino.png" alt="Arduino" height="150">
<img src="./images/stm32.png" alt="STM32" height="150">
</div>
<p align="justify">My programming path started with embeded systems,
i love all the low level things that Mcu could do with just a little bit of code,
sometimes build or flashing progress could take some time to get a hand of , but after that everething usualy
goes smooth</p>
<p align="justify">The first MCU i tried was a ATmega328P,
after some time i was surprised with the debug capabilities on the Stm32
and now i'm working with esp32-s3 , that's a good chip, has internal JTAG and all the shiny wireless interfaces
but feels faulty
for some reason <i> regular segfaults with CDC</i></p>
<h3 align="center">Microcontroller Comparison Table</h3>
<table border="1" align="center" cellpadding="6" cellspacing="0">
<tr>
<th>Board/MCU</th>
<th>UART Count</th>
<th>Dynamic UART Assignment</th>
<th>ADC Channels</th>
<th>Debug Support</th>
<th>Flash Size</th>
<th>Wireless Connectivity</th>
</tr>
<tr>
<td>ESP32</td>
<td>3</td>
<td>Yes (via IO MUX)</td>
<td>18</td>
<td>JTAG, Serial</td>
<td>4MB (typical)</td>
<td>Wi-Fi, Bluetooth</td>
</tr>
<tr>
<td>ESP32-S3</td>
<td>3</td>
<td>Yes (via IO MUX)</td>
<td>20</td>
<td>JTAG, Serial</td>
<td>8MB (typical)</td>
<td>Wi-Fi, Bluetooth LE</td>
</tr>
<tr>
<td>ESP-01</td>
<td>1</td>
<td>No</td>
<td>1</td>
<td>Serial only</td>
<td>512KB/1MB</td>
<td>Wi-Fi</td>
</tr>
<tr>
<td>Arduino Uno (ATmega328P)</td>
<td>1</td>
<td>No</td>
<td>6</td>
<td>Serial, DebugWire</td>
<td>32KB</td>
<td>None</td>
</tr>
<tr>
<td>Blue Pill (STM32F103C8T6)</td>
<td>3</td>
<td>Yes (remappable)</td>
<td>10</td>
<td>SWD, Serial</td>
<td>64KB/128KB</td>
<td>None</td>
</tr>
</table>
<p align="right"> no rpi pico here , the build system has won over my temper</p>
</body>
</html>

View File

@@ -1,112 +0,0 @@
let templates = [
[
"X--X----",
"-XXX-X--",
"----X---",
"----X---",
"------XX",
"----XX--",
"X-------",
"-XX--X--"
],
[
"---XX---",
"----X-X-",
"---XX---",
"---X----",
"-X------",
"X----X-X",
"--X--X--",
"-X----XX"
],
[
"-X-X----",
"---X-X--",
"X-XX--X-",
"--X-X---",
"------X",
"--------",
"X-----X-",
"-X-X---X"
],
[
"-XX-X---",
"-----X--",
"----X---",
"-----X-X",
"-X-X--X-",
"-XX----X",
"-X------",
"XX------"
], [
"----XX-X",
"X-------",
"--------",
"-----XX-",
"---X-X--",
"-X---XX-",
"-X-X----",
"----XXX-"
], [
"XX------",
"-----X--",
"-------X",
"-X-X----",
"X-X----X",
"-X-X-X-X",
"----X-X-",
"-X------"
],
];
const squareSize = templates[0].length;
//convert to arrays for mutability
let temp = []
for (let n = 0; n < templates.length; n++) {
temp.push([])
for (let i = 0; i < squareSize; i++) {
temp[n].push([]);
for (let j = 0; j < squareSize; j++) {
temp[n][i].push(templates[n][i][j] == "X" ? 1 : 0);
}
}
}
templates = temp;
const encodedMsg = "Р_НАЙА_СЛЗДЕОСЖСТОИКНОЛЬЛЬТКУЮО__КЗАЕВАОКАЧОЖЗ_УЧАСМОДУ_ТЮЖЕ";
function rotateTemplate(template) {
for (let i = 0; i < squareSize; i++) {
for (let j = 0; j < i; j++) {
let temp = template[i][j];
template[i][j] = template[j][i];
template[j][i] = temp;
}
}
for (let i = 0; i < squareSize; i++) {
for (let j = 0; j < squareSize / 2; j++) {
let temp = template[i][j];
template[i][j] = template[i][(squareSize - 1) - j];
template[i][(squareSize - 1) - j] = temp;
}
}
}
for (let n = 0; n < templates.length; n++) {
let out = ""
for (let rot = 0; rot < 4; rot++) {
for (let i = 0; i < squareSize; i++) {
for (let j = 0; j < squareSize; j++) {
if (templates[n][i][j]) {
out += encodedMsg[i * squareSize + j];
}
}
}
rotateTemplate(templates[n]);
}
console.log(out);
console.log("=======");
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 31 KiB

View File

@@ -1,108 +0,0 @@
.desctription-heading{
font-size: medium;
text-align: center;
}
.main-container {
display: flex;
gap: 20px;
align-items: flex-start;
}
.scheme-image{
flex: 1;
max-width: 400px;
height: auto;
object-fit: contain;
}
.controls-container {
display: flex;
flex-direction: column;
gap: 20px;
flex: 1;
min-width: 300px;
max-width: 400px;
}
.inputs{
min-width: 300px;
}
.outputs{
min-width: 300px;
}
.radio-label{
display: inline-block;
}
p{
line-height: 0;
}
.max-w{
width: 100%;
}
.bad-input-tooltip {
display: block;
background: #ffffff;
color: #721c24;
border: 1px solid #8f0c19;
padding: 4px 8px;
max-width: 220px;
white-space: normal;
}
.bad-input-highlight {
outline: 2px solid #990917;
}
.hidden{
display: none;
}
body{
display: flex;
flex-direction: column;
gap: 20px;
}
table {
width: 100%;
border-collapse: collapse;
margin: 16px 0;
}
th, td {
border: 1px solid #ccc;
text-align: left;
}
th {
background-color: #f5f5f5;
font-weight: bold;
}
tr:nth-child(even) {
background-color: #fafafa;
}
@media (max-width: 800px) {
.main-container {
flex-direction: column;
align-items: center;
}
.scheme-image {
max-width: 100%;
width: 100%;
}
.controls-container {
width: 100%;
max-width: none;
}
.inputs, .outputs {
min-width: unset;
width: 100%;
}
}

View File

@@ -1,71 +0,0 @@
<html>
<head>
<title>калькулятор равнобедренного треугольника</title>
<link rel="stylesheet" href="./hw7.css">
<link rel="icon" href="favicon.ico">
<link rel="stylesheet" href="https://unpkg.com/xp.css/dist/98.css"
>
</head>
<body>
<h3 class="desctription-heading">калькулятор равнобедренного треугольника</h3>
<div class="main-container">
<div class="image-container">
<img src="./imgs/type1.png" class="scheme-image" id="schemeImageA">
<img src="./imgs/type2.png" class="scheme-image hidden" id="schemeImageB">
</div>
<div class="controls-container">
<div class="inputs" id="inputsForm">
<p>Выберете варинат входных данных:</p>
<input type="radio" name="input-type" id="radioButtonA" checked>
<label class="radio-label" for="radioButtonA">
<span>боковая сторона и угол при основании</span>
</label><br>
<input type="radio" name="input-type" id="radioButtonB">
<label class="radio-label" for="radioButtonB">
<span>основание и прилежащий к нему угол</span>
</label>
<form>
<fieldset id="inputTypeFieldsetA">
<legend>входные данные</legend>
<label for="equalSideLength">Длина боковой стороны B:<span class="bad-input-tooltip hidden" id="equalSideLengthErr"></span></label><br>
<input class="max-w" type="number" min="0" id="equalSideLength">
<br>
<label for="baseAngle">Угол при основании α (в градусах):<span class="bad-input-tooltip hidden" id="baseAngleErr"></span></label><br>
<input class="max-w" type="number" min="0" max="180" id="baseAngle">
</fieldset>
<fieldset id="inputTypeFieldsetB" class="hidden">
<legend>входные данные</legend>
<label for="baseSideLength">Длина основания A:<span class="bad-input-tooltip hidden" id="baseSideLengthErr"></span></label><br>
<input class="max-w" type="number" min="0" id="baseSideLength">
<br>
<label for="baseAdjacentAngle">Угол прилежащий основанию β:<span class="bad-input-tooltip hidden" id="baseAdjacentAngleErr"></span></label><br>
<input class="max-w" type="number" min="0" max="180" id="baseAdjacentAngle">
</fieldset>
<fieldset id="outputsFieldset">
<legend>что вычислить</legend>
<span class="bad-input-tooltip hidden" id="outputValuesErr"><br></span>
<input type="checkbox" name="output-valuesR" id="outputValuesR" checked>
<label for="outputValuesR">радиус вписанной окружности</label><br>
<input type="checkbox" name="output-valuesH" id="outputValuesH" checked>
<label for="outputValuesH">высоты треугольника</label><br>
<input type="checkbox" name="output-valuesL" id="outputValuesL" checked>
<label for="outputValuesL">длины сторон треугольника</label><br>
</fieldset>
<button id="calculateButton" disabled>Вычислить</button>
<button id="clearButton">Отчислить</button>
</form>
</div>
<table class="outputs hidden" id="outputsTable">
</table>
</div>
</div>
</body>
<script src="./hw7.js">
</script>
</html>

View File

@@ -1,357 +0,0 @@
let elements = {
radioA: document.getElementById('radioButtonA'),
radioB: document.getElementById('radioButtonB'),
fieldsetA: document.getElementById('inputTypeFieldsetA'),
fieldsetB: document.getElementById('inputTypeFieldsetB'),
imageA: document.getElementById('schemeImageA'),
imageB: document.getElementById('schemeImageB'),
inputsForm: document.getElementById('inputsForm'),
equalSideLength: document.getElementById('equalSideLength'),
equalSideLengthErr: document.getElementById('equalSideLengthErr'),
baseAngle: document.getElementById('baseAngle'),
baseAngleErr: document.getElementById('baseAngleErr'),
baseSideLength: document.getElementById('baseSideLength'),
baseSideLengthErr: document.getElementById('baseSideLengthErr'),
baseAdjacentAngle: document.getElementById('baseAdjacentAngle'),
baseAdjacentAngleErr: document.getElementById('baseAdjacentAngleErr'),
outputsFieldset: document.getElementById('outputsFieldset'),
outputValuesErr: document.getElementById('outputValuesErr'),
outputR: document.getElementById('outputValuesR'),
outputH: document.getElementById('outputValuesH'),
outputL: document.getElementById('outputValuesL'),
calculateButton: document.getElementById('calculateButton'),
clearButton: document.getElementById('clearButton'),
outputsTable: document.getElementById('outputsTable')
}
console.log("loaded js!");
let currentModeIsA = true;
let outputFields = {};
let inputsA = {
l: null,
angle: null
};
let inputsB = {
l: null,
angle: null
};
function highlightErrorElement(errorFieldIndex, add = true) {
let fields = [
elements.equalSideLength,
elements.baseAngle,
elements.baseSideLength,
elements.baseAdjacentAngle,
outputsFieldset
];
if (fields[errorFieldIndex]) {
if (add) {
fields[errorFieldIndex].classList.add("bad-input-highlight");
}
else {
fields[errorFieldIndex].classList.remove("bad-input-highlight");
}
}
}
function setErrTooltip(errorFieldIndex, tooltip) {
let errElem = [
elements.equalSideLengthErr,
elements.baseAngleErr,
elements.baseSideLengthErr,
elements.baseAdjacentAngleErr,
elements.outputValuesErr
][errorFieldIndex];
if (errElem) {
highlightErrorElement(errorFieldIndex, tooltip !== "");
if (tooltip !== "") {
errElem.classList.remove("hidden");;
}
else {
errElem.classList.add("hidden");;
}
if (errorFieldIndex == 4) {
tooltip += "<br>"
}
errElem.innerHTML = tooltip;
}
}
function deg2rad(degrees) {
return degrees * (Math.PI / 180);
}
function getCalculations() {
let heights = [];//base related, side realted
let lengths = [];// base side
let radius = 0;
let baseAngle = 0;
let sideAngle = 0;
if (currentModeIsA) {
lengths[0] = 2 * Math.sin(deg2rad(inputsA.angle) / 2) * inputsA.l;
lengths[1] = inputsA.l;
baseAngle = inputsA.angle;
sideAngle = (180 - baseAngle) / 2;
}
else {
lengths[0] = inputsB.l;
lengths[1] = inputsB.l / (2 * Math.cos(deg2rad(inputsB.angle)));
sideAngle = inputsB.angle;
baseAngle = 180 - 2 * sideAngle;
}
let a = lengths[0];
let b = lengths[1];
let p = (a + b + b) / 2;
radius = Math.sqrt((p - a) * (p - b) * (p - b) / p);
heights[0] = lengths[1] * Math.sin(deg2rad(sideAngle));
heights[1] = lengths[0] * Math.sin(deg2rad(baseAngle));
return {
radius: radius,
heights: heights,
lengths: lengths
};
}
function updateCheckboxes() {
outputFields["radius"] = elements.outputR.checked;
outputFields["heights"] = elements.outputH.checked;
outputFields["lengths"] = elements.outputL.checked;
let ret = !outputFields.radius && !outputFields.heights && !outputFields.lengths;
if (ret) {
setErrTooltip(4, "Выберите хотя бы один параметр для вывода.");
} else {
setErrTooltip(4, "");
}
updateCalculateButton();
}
function updateCalculateButton() {
let ret = false;
if (currentModeIsA) {
ret = inputsA["l"] !== null && inputsA["angle"] !== null
}
else {
ret = inputsB["l"] !== null && inputsB["angle"] !== null
}
ret &= elements.outputR.checked || elements.outputH.checked || elements.outputL.checked;
elements.calculateButton.disabled = !ret;
}
function switchInputs(selectA) {
if (selectA) {
elements.imageA.classList.remove("hidden");
elements.imageB.classList.add("hidden");
elements.fieldsetA.classList.remove("hidden");
elements.fieldsetB.classList.add("hidden");
}
else {
elements.imageA.classList.add("hidden");
elements.imageB.classList.remove("hidden");
elements.fieldsetA.classList.add("hidden");
elements.fieldsetB.classList.remove("hidden");
}
updateCalculateButton();
}
function displayTable(calcResults) {
let table = elements.outputsTable;
table.innerHTML = ""; // Clear previous content
let header = "<tr><th>Параметр</th><th>Значение</th></tr>";
let rows = "";
if (outputFields.radius) {
rows += `<tr><td>R</td><td>${calcResults.radius.toFixed(3)}</td></tr>`;
}
if (outputFields.heights) {
rows += `<tr><td>h1</td><td>${calcResults.heights[0].toFixed(3)}</td></tr>`;
rows += `<tr><td>h2</td><td>${calcResults.heights[1].toFixed(3)}</td></tr>`;
}
if (outputFields.lengths) {
rows += `<tr><td>A</td><td>${calcResults.lengths[0].toFixed(3)}</td></tr>`;
rows += `<tr><td>B</td><td>${calcResults.lengths[1].toFixed(3)}</td></tr>`;
}
table.innerHTML = header + rows;
if (rows === "") {
table.innerHTML = `<h3>Выберите параметры для вычислений, сейчас таблица пустая</h3>`;
}
table.classList.remove("hidden");
}
function clearCurrentInputs() {
if (currentModeIsA) {
elements.equalSideLength.value = null;
elements.baseAngle.value = null;
setErrTooltip(0, "");
setErrTooltip(1, "");
inputsA = {
l: null,
angle: null
};
}
else {
inputsB = {
l: null,
angle: null
};
setErrTooltip(2, "");
setErrTooltip(3, "");
elements.baseSideLength.value = null;
elements.baseAdjacentAngle.value = null;
}
elements.outputsTable.classList.add("hidden");
updateCalculateButton()
}
function check180Angle(angleString) {
let angle = parseFloat(angleString);
if (isNaN(angle)) {
return "Введите корректное число";
}
if (angle <= 0) {
return "Угол должен быть больше 0";
}
if (angle >= 180) {
return "Угол должен быть меньше 180";
}
return "";
}
function check90Angle(angleString) {
let angle = parseFloat(angleString);
if (isNaN(angle)) {
return "Введите корректное число";
}
if (angle <= 0) {
return "Угол должен быть больше 0";
}
if (angle >= 90) {
return "Угол должен быть меньше 90";
}
return "";
}
function checkLength(lengthString) {
let length = parseFloat(lengthString);
if (!isFinite(length)) {
return "Введите корректное число";
}
if (length <= 0) {
return "Длина должна быть больше 0";
}
return "";
}
function handleSwitchInputs(event) {
if (event.target.id[event.target.id.length - 1].toLowerCase() == "a") {
currentModeIsA = true;
switchInputs(true);
console.log("Switching inputs to A");
}
else {
currentModeIsA = false;
switchInputs(false);
console.log("Switching inputs to B");
}
}
function handleInputsUpdate(event) {
switch (event.target.id) {
case "equalSideLength":
{
const err = checkLength(event.target.value);
setErrTooltip(0, err);
if (err === "") {
inputsA.l = parseFloat(event.target.value);
} else {
inputsA.l = null;
}
}
break;
case "baseAngle":
{
const err = check180Angle(event.target.value);
setErrTooltip(1, err);
if (err === "") {
inputsA.angle = parseFloat(event.target.value);
} else {
inputsA.angle = null;
}
}
break;
case "baseSideLength":
{
const err = checkLength(event.target.value);
setErrTooltip(2, err);
if (err === "") {
inputsB.l = parseFloat(event.target.value);
} else {
inputsB.l = null;
}
}
break;
case "baseAdjacentAngle":
{
const err = check90Angle(event.target.value);
setErrTooltip(3, err);
if (err === "") {
inputsB.angle = parseFloat(event.target.value);
} else {
inputsB.angle = null;
}
}
break;
default:
console.log(event.target.id)
break;
}
updateCalculateButton();
}
function handleFieldsetEvent(event) {
if (event.target.type === 'radio') {
handleSwitchInputs(event);
} else if (event.target.type === 'number') {
handleInputsUpdate(event);
}
}
elements.inputsForm.addEventListener('change', handleFieldsetEvent);
elements.inputsForm.addEventListener('input', handleFieldsetEvent);
elements.outputsFieldset.addEventListener('change', (event) => {
if (event.target.type === 'checkbox') {
updateCheckboxes();
}
});
elements.clearButton.addEventListener('click', (event) => {
event.preventDefault();
clearCurrentInputs()
});
elements.calculateButton.addEventListener('click', (event) => {
event.preventDefault();
displayTable(getCalculations());
});
// чтобы не сконфузило
updateCheckboxes();
switchInputs(elements.radioA.checked);

Binary file not shown.

Before

Width:  |  Height:  |  Size: 73 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 73 KiB

View File

Before

Width:  |  Height:  |  Size: 1.2 MiB

After

Width:  |  Height:  |  Size: 1.2 MiB

View File

Before

Width:  |  Height:  |  Size: 80 KiB

After

Width:  |  Height:  |  Size: 80 KiB

View File

Before

Width:  |  Height:  |  Size: 347 KiB

After

Width:  |  Height:  |  Size: 347 KiB

View File

Before

Width:  |  Height:  |  Size: 41 KiB

After

Width:  |  Height:  |  Size: 41 KiB

View File

Before

Width:  |  Height:  |  Size: 1.1 MiB

After

Width:  |  Height:  |  Size: 1.1 MiB

View File

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

View File

Before

Width:  |  Height:  |  Size: 99 KiB

After

Width:  |  Height:  |  Size: 99 KiB

77
index.html Normal file
View File

@@ -0,0 +1,77 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
"Portfolio"
</title>
</head>
<body bgcolor="#F0F8FF">
<details>
<summary>Menu</summary>
<ul>
<li><a href="./index.html">Home</a></li>
<li><a href="./embeded_details.html">Embeded Details</a></li>
<li><a href="./opencv_details.html">OpenCV Details</a></li>
<li><a href="./photography_details.html">Photography Details</a></li>
<li><a href="./table.html">Table with filters (not working yet)</a></li>
<li><a href="./images/institute.png">Institute</a></li>
</ul>
</details>
<h2 align="center">OkunElya's Portfolio</h2>
<p align="center">
<b>Q:</b> What's this site for? <br>
<b>A:</b> Just to show progress in education ( check git)
</p>
<p align="center">
<b>Q:</b> Why? <br>
<b>A:</b> Because.
</p>
<hr width="80%" align="center">
<h3>Experience:</h3>
<a href="./embeded_details.html">
<h4><i>Embedded Systems:</i></h4>
</a>
<p> Had a serval projects with different MCUs and wrote firmware for them. <br>
My main stack consists of Platformio+EspIdf or Arduino, also tried STM32</p>
<a href="https://github.com/OkunElya/Air-Quality-Monitor-Device">
<img src="./images/AQ_monitor.png" width="50%" border="2" alt="Air Quality Monitor Device"><br>
<p><i>Click the image to check GitHub Project</i></p>
</a>
<hr width="80%" align="center">
<a href="./opencv_details.html">
<h4><i>OpenCV:</i></h4>
</a>
<p> I love when programs are able to <i>see</i> things or recognise them<br>
so i had serval projects involding image processing <br>
Sadly i'm used to opencv binding in python and not C++ , but that is solvable)</p>
<p>
<img src="./images/arucos.png" width="50%" border="2" alt="Image of a table with arucos sheet"><br>
<i>Random image from the internet (not mine)</i>
</p>
<hr width="80%" align="center">
<h3>Hobbies:</h3>
<ol>
<li>
<p>Reading:<br> I love Stephen King's books , especially "<a href="./images/institute.png">Insitite</a>"</p>
</li>
<li>
<p><a href="./photography_details.html">Photography:</a><br> If I have some <i>free time</i> I may take some pictures and post them <a
href="https://t.me/iTakePhotosOnTapok">here</a> </p>
</li>
</ol>
<hr width="80%" align="center">
<h3><a href="./table.html"> Table!!!! With Filters!!! (not working yet)</a></h3>
</body>
<p align="right">Author: Kulesh <br>
Group: Б9123-09.03.04</p>
</html>

View File

@@ -1,40 +0,0 @@
CN Tower, Торонто, Канада
553,3-метровая телевизионная башня. Была самым высоким свободно стоящим сооружением в мире с 1976 по 2007 год,
а также до сих пор остаётся таковым в Западном полушарии. Является символом Торонто.
Земляные работы для сооружения железобетонной конструкции с последующим
натяжением арматуры весом 130 000 т начались 12 февраля 1973 г., а уже 2 апреля 1975 г. возведение башни было завершено.
Башня используется для телекоммуникационных нужд. Кроме того, башня используется как обзорная площадка.
Также на башне имеется вращающийся ресторан.
На высоте 447 м находится астрономическая обсерватория.
Бурдж-Халифа, Дубай, ОАЭ
Небоскрёб высотой 828 метров, самое высокое сооружение в мире. Форма здания напоминает сталагмит.
Строительство небоскрёба началось в 2004 году и шло со скоростью 1—2 этажа в неделю. Ежедневно на строительстве
работало до 12 000 рабочих. На его создание ушло около 320 тыс. м³ бетона и более 60 тыс. тонн стальной арматуры.
Бетонные работы были завершены после возведения 160 этажа, далее шла сборка 180-метрового шпиля из металлических
конструкций.
Специально для «Бурдж-Халифа» была разработана особая марка бетона, который выдерживает температуру до +50 °C.
Бетонную смесь укладывали только ночью, а в раствор добавляли лёд.
Небесное дерево, Токио, Япония
Телевизионная башня в районе Сумида самая высокая среди телебашен мира. Высота телебашни вместе с антенной составляет 634 метра.
Высота башни была выбрана так, чтобы цифры: 6 (на старом японском «му»), 3 («са»), 4 («си») были созвучны «Мусаси» —
названию исторической области, где находится современный Токио.
Здание напоминает пятиярусную пагоду, что хорошо сочетается с историческим районом Асакуса на другом берегу реки.
Основание башни напоминает штатив; с высоты примерно 350 м она имеет цилиндрическую форму, позволяющую наслаждаться
панорамными видами реки и города.
Имеются две наблюдательные площадки: одна на высоте 350 м (вместимостью 2000 человек), другая на высоте 450 м
(вместимостью 900 человек).

File diff suppressed because one or more lines are too long

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 35 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 27 KiB

View File

@@ -1,208 +0,0 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Лабораторная работа Bootstrap</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap.bundle.min.js"></script>
<style>
.lead{
text-align: justify;
}
@media (max-width: 576px) {
.lead{
font-size: 1rem;
}
}
</style>
</head>
<body>
<header>
<nav class="navbar navbar-expand-md bg-light navbar-light">
<!-- Заголовок -->
<a class="navbar-brand" href="#">Топ высотных зданий</a>
<!-- Кнопка для свернутого меню -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#menu">
<span class="navbar-toggler-icon"></span>
</button>
<!-- меню -->
<div class="collapse navbar-collapse" id="menu">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Главная</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Список зданий</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Контакты</a>
</li>
</ul>
<!-- форма для поиска -->
<form class="d-flex">
<input class="form-control" type="text" placeholder="Найти">
<button class="btn btn-outline-success" type="submit">Найти</button>
</form>
</div>
</nav>
</header>
<div class="row gy-3 text-center d-none d-md-flex">
<div class="col-lg-2 col-md-4 col-6 img-fluid img-thumbnail">
<img src="images/image1.jpg" alt="">
</div>
<div class="col-lg-2 col-md-4 col-6 img-fluid img-thumbnail">
<img src="images/image2.jpg" alt="">
</div>
<div class="col-lg-2 col-md-4 col-6 img-fluid img-thumbnail">
<img src="images/image12.jpg" alt="">
</div>
<div class="col-lg-2 col-md-4 col-6 img-fluid img-thumbnail">
<img src="images/image4.jpg" alt="">
</div>
<div class="col-lg-2 col-md-4 col-6 img-fluid img-thumbnail">
<img src="images/image5.jpg" alt="">
</div>
<div class="col-lg-2 col-md-4 col-6 img-fluid img-thumbnail">
<img src="images/image6.jpg" alt="">
</div>
</div>
<div id="gallery" class="carousel slide carousel-dark d-block d-md-none " data-bs-ride="carousel">
<!-- Содержимое галереи -->
<div class="carousel-inner">
<div class="carousel-item active">
</div>
<div class="carousel-item ">
<img src="images/image1.jpg" class="d-block mx-auto" alt="">
</div>
<div class="carousel-item">
<img src="images/image2.jpg" class="d-block mx-auto" alt="">
</div>
<div class="carousel-item">
<img src="images/image12.jpg" class="d-block mx-auto" alt="">
</div>
<div class="carousel-item">
<img src="images/image4.jpg" class="d-block mx-auto" alt="">
</div>
<div class="carousel-item">
<img src="images/image5.jpg" class="d-block mx-auto" alt="">
</div>
<div class="carousel-item">
<img src="images/image6.jpg" class="d-block mx-auto" alt="">
</div>
</div>
<!-- Кнопки управления -->
<button class="carousel-control-prev" type="button" data-bs-target="#gallery" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Предыдущий</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#gallery" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Следующий</span>
</button>
</div>
<main class="container">
<div class="row">
<div class="col-md-9">
<h2>
CN Tower, <span class="text-muted">Торонто, Канада</span>
</h2>
<p class="lead">
553,3-метровая телевизионная башня. Была самым высоким свободно стоящим сооружением в мире с 1976 по
2007 год,
а также до сих пор остаётся таковым в Западном полушарии. Является символом Торонто.
</p>
<p class="lead">
Земляные работы для сооружения железобетонной конструкции с последующим
натяжением арматуры весом 130 000 т начались 12 февраля 1973 г., а уже 2 апреля 1975 г. возведение
башни было завершено.
</p>
<p class="lead">
Башня используется для телекоммуникационных нужд. Кроме того, башня используется как обзорная
площадка.
Также на башне имеется вращающийся ресторан.
</p>
<p class="lead">
На высоте 447 м находится астрономическая обсерватория.
</p>
</div>
<div class="col-md-3">
<img src="images/image9.jpg">
</div>
</div>
<div class="row order flex-row-reverse">
<div class="col-md-9">
<h2>
Бурдж-Халифа, <span class="text-muted">Дубай, ОАЭ</span>
</h2>
<p class="lead">
Небоскрёб высотой 828 метров, самое высокое сооружение в мире. Форма здания напоминает сталагмит.
</p>
<p class="lead">
Строительство небоскрёба началось в 2004 году и шло со скоростью 1—2 этажа в неделю. Ежедневно на строительстве
работало до 12 000 рабочих. На его создание ушло около 320 тыс. м³ бетона и более 60 тыс. тонн стальной арматуры.
Бетонные работы были завершены после возведения 160 этажа, далее шла сборка 180-метрового шпиля из металлических
конструкций.
</p>
<p class="lead">
Специально для «Бурдж-Халифа» была разработана особая марка бетона, который выдерживает температуру до +50 °C.
Бетонную смесь укладывали только ночью, а в раствор добавляли лёд.
</p>
</div>
<div class="col-md-3">
<img src="images/image13.jpg">
</div>
</div>
<div class="row">
<div class="col-md-9">
<h2>
Небесное дерево, <span class="text-muted">Токио, Япония</span>
</h2>
<p class="lead">
Телевизионная башня в районе Сумида самая высокая среди телебашен мира. Высота телебашни вместе с антенной составляет 634 метра.
Высота башни была выбрана так, чтобы цифры: 6 (на старом японском «му»), 3 («са»), 4 («си») были созвучны «Мусаси» —
названию исторической области, где находится современный Токио.
</p>
<p class="lead">
Здание напоминает пятиярусную пагоду, что хорошо сочетается с историческим районом Асакуса на другом берегу реки.
Основание башни напоминает штатив; с высоты примерно 350 м она имеет цилиндрическую форму, позволяющую наслаждаться
панорамными видами реки и города.
</p>
<p class="lead">
Имеются две наблюдательные площадки: одна на высоте 350 м (вместимостью 2000 человек), другая на высоте 450 м
(вместимостью 900 человек).
</p>
</div>
<div class="col-md-3">
<img src="images/image11.jpg">
</div>
</div>
</main>
</body>
</html>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -1 +0,0 @@
node_modules

File diff suppressed because it is too large Load Diff

View File

@@ -1,30 +0,0 @@
{
"name": "template_pug",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack --mode production",
"serve": "webpack serve --open --mode development",
"dev": "webpack --mode development",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"chokidar": "^4.0.3",
"css-loader": "^6.8.1",
"filemanager-webpack-plugin": "^8.0.0",
"glob": "^11.0.3",
"html-webpack-plugin": "^5.5.3",
"pug": "^2.0.4",
"pug-loader": "^2.4.0",
"style-loader": "^3.3.3",
"stylus": "^0.61.0",
"stylus-loader": "^7.1.3",
"webpack": "^5.89.0",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^4.15.1"
}
}

View File

@@ -1,36 +0,0 @@
block variables
- var title = 'Самые высокие здания и сооружения'
-
var dictMenu = {'Главная': 'index.html',
'Небоскребы' : "#",
'Башни': "#",
'Список': "#"
}
- var listImages = ['image1.jpg', 'image2.jpg', 'image3.jpg', 'image4.jpg', 'image5.jpg']
-
var listSections = [
{'header' : 'Бурдж-Халифа в Дубае, ОАЭ',
'image' : 'image7.jpg',
'text' : 'Небоскрёб высотой 828 метров, самое высокое сооружение в мире. Форма здания напоминает сталагмит.'
},
{'header' : 'Токийское небесное дерево, Япония',
'image' : 'image6.jpg',
'text' : 'Телевизионная башня в районе Сумида самая высокая среди телебашен мира. Высота телебашни вместе с антенной составляет 634 метра.'
},
{'header' : 'CN Tower, Канада',
'image' : 'image8.jpg',
'text' : 'Си-Эн Тауэр — самое высокое свободно стоящее сооружение в мире с 1976 по 2007 год. Его высота составляет 553,33 метра.'
}
]
-
var structures = [
{
menuItem: "Ворота Запада, США",
pict: "image1_big.jpg",
firstP: `Арка в Сент-Луисе, также известная под именем «Врата на запад» — мемориал, являющийся частью Джефферсоновского национального экспансиального мемориала, а также визитной карточкой Сент-Луиса, штат Миссури, США.`,
secondP: `Арка была спроектирована финско-американским архитектором Ээро Саариненом в 1947 году. Её высота 192 метра в самой высокой точке, ширина её основания также 192 метра.
Таким образом арка является самым высоким памятником на территории США. Её строительство началось 12 февраля 1963 года и было закончено 28 октября 1965 года. Памятник открылся для посетителей 24 июля 1967 года.`
}
]

View File

@@ -1,20 +0,0 @@
include ../components/data.pug
mixin createMenu(menu, active)
each value, key in menu
if active == key
a.active(href= value)= key
else
a(href= value)= key
mixin createMenuBuild(menu, active)
each value, key in menu
a(href= value)= key
a.active(href= "")= active
mixin createSection()
each item in listSections
section
h3= item.header
img(src= require("../images/" + item.image))
p= item.text
a(href="#") &hellip;

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 162 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 35 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 28 KiB

View File

@@ -1 +0,0 @@
import './styles/main.styl'

View File

@@ -1,19 +0,0 @@
extends template
block nav
title #{structures[0].menuItem}
nav
+createMenuBuild(dictMenu, structures[0].menuItem)
block header
h2= structures[0].menuItem
block content
img.big(src= require("../images/" + structures[0].pict))
section
p= structures[0].firstP
p= structures[0].secondP

View File

@@ -1,19 +0,0 @@
extends template
block nav
nav
+createMenu(dictMenu, 'Главная')
block content
div.images
each pict in listImages
a(href= "building.html")
img(src= require("../images/" + pict))
article
each item in listSections
section
h3= item.header
img(src= require("../images/" + item.image))
p= item.text
a(href="#") &hellip;

View File

@@ -1,18 +0,0 @@
include ../components/mixin.pug
include ../components/data.pug
doctype html
html(lang="ru")
head
title #{title}
body
block header
h2= title
block nav
block content
block footer
footer
h4 &copy; Пример html-страницы

View File

@@ -1,86 +0,0 @@
colorText = #6f6d6d
back(size)
background-color #f1f1f1
box-shadow 4px 5px 10px rgba(0, 0, 0, 0.4)
padding: size + "%"
margin 0 0 1% 0
html
color colorText
nav
back(0)
text-align right
& a
display inline-block
padding 1%
color colorText
text-decoration: none
&:hover
&.active
background-color #f87777
color #f8f8f8
div.images
display grid
grid-template-columns repeat(5, 1fr)
grid-gap 0.5%
back(1)
overflow hidden
& img
width: 100%
@media (max-width: 600px)
grid-template-rows repeat(5, 1fr)
grid-template-columns 1fr
justify-items center
article
width 80%
margin auto
display grid
grid-template-columns repeat(3, 1fr)
grid-gap 4%
overflow hidden
@media (max-width: 600px)
grid-template-rows repeat(3, 1fr)
grid-template-columns 1fr
& section
display grid
grid-template-columns 1fr 2fr
grid-gap 2%
align-items center
back(2)
& h3
grid-column 1/3
margin 0
text-align center
& img
width: 100%
footer
background-color colorText
color white
@media (max-width: 600px)
margin 3vh 0
& h4
padding:10px
.big
width 50vw
@media (max-width: 600px)
width 100vw
section
display grid
grid-template-columns 1fr 1fr
@media (max-width: 600px)
grid-template-columns 1fr

View File

@@ -1,69 +0,0 @@
const HtmlWebpackPlugin = require("html-webpack-plugin");
const FileManagerPlugin = require("filemanager-webpack-plugin");
const path = require("path");
const fs = require("fs");
const pagesDir = path.join(__dirname, "src", "pages");
const pages = fs.readdirSync(pagesDir).filter(file => file.endsWith(".pug"));
module.exports = {
output: {
path: path.join(__dirname, "dist"),
filename: "index.[contenthash].js",
assetModuleFilename: path.join("images", "[name].[contenthash][ext]"),
},
entry: path.join(__dirname, "src", "index.js"),
module: {
rules: [
{
test: /\.pug$/,
loader: "pug-loader",
},
{
test: /\.(png|jpg|jpeg|gif)$/i,
type: "asset/resource",
},
{
test: /\.svg$/,
type: "asset/resource",
generator: {
filename: path.join("icons", "[name].[contenthash][ext]"),
},
},
{
test: /\.styl$/,
use: [
{
loader: "style-loader",
},
{
loader: "css-loader",
},
{
loader: "stylus-loader",
},
],
},
],
},
plugins: [
...pages.map(
(page) =>
new HtmlWebpackPlugin({
template: path.join(pagesDir, page),
filename: page.replace(".pug", ".html"),
})
),
new FileManagerPlugin({
events: {
onStart: {
delete: ["dist"],
},
},
}),
],
devServer: {
watchFiles: path.join(__dirname, "src"),
port: 9000,
},
};

View File

@@ -1,23 +0,0 @@
.main-block{
margin: auto;
width: 90%;
background-color: lightgreen;
}
.info-block{
display: inline-block;
margin:15px;
width: 180px;
}
.info-block-header{
padding: 5px;
background-color: white;
display: inline-block;
font-weight: bold;
}
.info-block-text{
padding: 5px;
background-color: white;
}

View File

@@ -1,42 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
Lab 2
</title>
<link rel="stylesheet" href="./lab2.css">
</head>
<body>
<div class="main-block">
<div class="info-block">
<div class="info-block-header">C</div>
<div class="info-block-text">разработан в 19691973 годах сотрудником Bell Labs Деннисом Ритчи.</div>
</div>
<div class="info-block">
<div class="info-block-header">JavaScript </div>
<div class="info-block-text">разработан в 1996 году, автор - американский программист Брендан Айк.</div>
</div>
<div class="info-block">
<div class="info-block-header">Prolog </div>
<div class="info-block-text">разработан в 1972 году, автор - французский программист Ален Колмероэ.</div>
</div>
<div class="info-block">
<div class="info-block-header">Python </div>
<div class="info-block-text">создан в 19891991 годах голландским программистом Гвидо ван Россумом.</div>
</div>
<div class="info-block">
<div class="info-block-header">Java </div>
<div class="info-block-text">разработан в 19901996 годах канадским программистом Джеймсом Гослингом.</div>
</div>
<div class="info-block">
<div class="info-block-header">Ruby </div>
<div class="info-block-text">разработан в 1993-1995 годах, автор - японский программист Юкихиро Мацумото.</div>
</div>
</div>
</body>

View File

@@ -1,55 +0,0 @@
h3{
text-align: center;
margin: 1vh;
}
.content{
background-color: lightgreen;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
padding:10px;
}
.topic > b{
display: block;
width: 40%;
}
.topic * {
display: inline-block;
}
.content :first-child b, .content :first-child a{
background-color: lightgreen;
}
.topic{
/* width:calc(50%-10px); */
padding:5px 10px;
margin: 10px ;
background-color: white;
}
@media (max-width:800px) {
.content{
flex-direction: column;
}
}
/* grid part */
p{
margin: 5px auto;
max-width: 600px;
display: grid;
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 1fr;
grid-gap: 5px;
}
p > a{
background-color: lightgray;
text-decoration: none;
color: black;
text-align: center;
}
p> :first-child{
background-color: lightgreen;
}

View File

@@ -1,34 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
Lab 3
</title>
<link rel="stylesheet" href="./lab3.css">
</head>
<body>
<h3>Языки программирования</h3>
<p>
<a href="#">Python</a>
<a href="#">C</a>
<a href="#">Java</a>
<a href="#">JavaScript</a>
</p>
<div class="content">
<div class="topic">
<b>Python</b> создан в 19891991 годах голландским программистом <a href="#"> Гвидо ван Россумом</a>.
</div>
<div class="topic">
<b>C</b> разработан в 19691973 годах сотрудником Bell Labs <a href="#"> Деннисом Ритчи</a>.
</div>
<div class="topic">
<b>Java</b> разработан в 19901996 годах канадским программистом <a href="#"> Джеймсом Гослингом</a>.
</div>
<div class="topic">
<b>JavaScript</b> разработан в 1996 году, автор - американский программист <a href="#">Брендан Айк</a>.
</div>
</div>
</body>

File diff suppressed because one or more lines are too long

Binary file not shown.

Before

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 29 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 29 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 37 KiB

View File

@@ -1,99 +0,0 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Лабораторная работа Bootstrap</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap.bundle.min.js"></script>
<style>
.lead {
text-align: justify;
}
</style>
</head>
<body class="container">
<div class="row bg-lg-light justify-content-center">
<div class="col-sm-12 col-md-6 col-xl-4 p-4 text-center">
<h3 class="bg-light d-sm-block d-lg-inline my-0 p-2">
JavaScript
</h3>
<div class="bg-light d-lg-flex align-self-center">
<p class="lead px-2 m-0">
разработан в 1996 году, автор - американский программист Брендан Айк.
</p>
<img src="images/javascript.jpg" class="d-block m-auto w-50">
</div>
</div>
</div>
<div class="row bg-lg-light justify-content-center">
<div class="col-sm-12 col-md-6 col-xl-4 p-4 text-center">
<h3 class="bg-light d-sm-block d-lg-inline my-0 p-2">
Java
</h3>
<div class="bg-light d-lg-flex align-self-center">
<p class="lead px-2 m-0"></p>
разработан в 19901996 годах канадским программистом Джеймсом Гослингом.
</p>
<img src="images/java.jpg" class="d-block m-auto w-50">
</div>
</div>
<div class="col-sm-12 col-md-6 col-xl-4 p-4 text-center">
<h3 class="bg-light d-sm-block d-lg-inline my-0 p-2">
C
</h3>
<div class="bg-light d-lg-flex align-self-center">
<p class="lead px-2 m-0">
разработан в 19691973 годах сотрудником Bell Labs Деннисом Ритчи.
</p>
<img src="images/c.jpg" class="d-block m-auto w-50">
</div>
</div>
</div>
<div class="row bg-lg-light justify-content-center">
<div class="col-sm-12 col-md-6 col-xl-4 p-4 text-center">
<h3 class="bg-light d-sm-block d-lg-inline my-0 p-2">
Prolog
</h3>
<div class="bg-light d-lg-flex align-self-center">
<p class="lead px-2 m-0">
разработан в 1972 году, автор - французский программист Ален Колмероэ.
</p>
<img src="images/prolog.jpg" class="d-block m-auto w-50">
</div>
</div>
<div class="col-sm-12 col-md-6 col-xl-4 p-4 text-center">
<h3 class="bg-light d-sm-block d-lg-inline my-0 p-2">
Python
</h3>
<div class="bg-light d-lg-flex align-self-center">
<p class="lead px-2 m-0">
создан в 19891991 годах голландским программистом Гвидо ван Россумом.
</p>
<img src="images/python.jpg" class="d-block m-auto w-50">
</div>
</div>
<div class="col-sm-12 col-md-6 col-xl-4 p-4 text-center">
<h3 class="bg-light d-sm-block d-lg-inline my-0 p-2">
Ruby
</h3>
<div class="bg-light d-lg-flex align-self-center">
<p class="lead px-2 m-0">
разработан в 1993-1995 годах, автор - японский программист Юкихиро Мацумото.
</p>
<img src="images/ruby.jpg" class="d-block m-auto w-50">
</div>
</div>
</div>
</body>
</html>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

Some files were not shown because too many files have changed in this diff Show More