Первая лабораторная работа

build.gradle

@@ -1,22 +0,0 @@
-plugins {
-	id 'java'
-	id 'org.springframework.boot' version '3.0.2'
-	id 'io.spring.dependency-management' version '1.1.0'
-}
-
-group = 'is.ulstu.ru'
-version = '0.0.1-SNAPSHOT'
-sourceCompatibility = '17'
-
-repositories {
-	mavenCentral()
-}
-
-dependencies {
-	implementation 'org.springframework.boot:spring-boot-starter-web'
-	testImplementation 'org.springframework.boot:spring-boot-starter-test'
-}
-
-tasks.named('test') {
-	useJUnitPlatform()
-}

src/main/java/is/ulstu/ru/Application/Application.java

@@ -1,21 +0,0 @@
-package is.ulstu.ru.Application;
-
-import org.springframework.boot.SpringApplication;
-import org.springframework.boot.autoconfigure.SpringBootApplication;
-import org.springframework.web.bind.annotation.GetMapping;
-import org.springframework.web.bind.annotation.RequestParam;
-import org.springframework.web.bind.annotation.RestController;
-
-@SpringBootApplication
-@RestController
-public class Application {
-
-	public static void main(String[] args) {
-		SpringApplication.run(Application.class, args);
-	}
-	@GetMapping("/hello")
-	public String hello(@RequestParam(value = "name", defaultValue = "World") String name) {
-		return String.format("Hello %s!", name);
-	}
-
-}

src/main/resources/application.properties

@@ -1 +0,0 @@
-

src/test/java/is/ulstu/ru/Application/ApplicationTests.java

@@ -1,13 +0,0 @@
-package is.ulstu.ru.Application;
-
-import org.junit.jupiter.api.Test;
-import org.springframework.boot.test.context.SpringBootTest;
-
-@SpringBootTest
-class ApplicationTests {
-
-	@Test
-	void contextLoads() {
-	}
-
-}

website/css/style.css

@@ -0,0 +1,197 @@
+@font-face {
+	font-family: 'iviSans bold'; 
+	src: url(../fonts/iviSans/iviSans-Bold.otf); 
+}
+@font-face {
+	font-family: 'iviSans Medium'; 
+	src: url(../fonts/iviSans/iviSans-Medium.otf); 
+}
+@font-face {
+	font-family: 'iviSans Regular'; 
+	src: url(../fonts/iviSans/iviSans-Regular.otf); 
+}
+label.error {
+    color: red;
+}
+input.error {
+    border: 1px dashed red;
+    color: red;
+}
+.bg-rose {
+    --bs-bg-opacity: 1;
+    background-color: rgb(225, 30, 157) !important;
+}
+.bg-red {
+    --bs-bg-opacity: 1;
+    background-color: rgb(225, 30, 30) !important;
+}
+a.nav-link{
+    color: rgb(146, 138, 138) !important;
+    font-size: 20px;
+    font-family: 'iviSans Medium';
+}
+.custom-toggler .navbar-toggler-icon {
+	background-image: url(
+"data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
+}
+.custom-toggler.navbar-toggler {
+    border-color: rgb(255, 255, 255);
+} 
+.navbar-brand.bg-red{
+    justify-content: flex-start;
+    width: 120px;
+}
+#collapsibleNavId{
+    /* padding-right: 10%;
+    margin-right: 7%; */
+    justify-content: center;
+}
+.container.text-truncate.p-0{
+    width: 100%;
+    font-size: 1.6em;
+}
+@media(max-width: 2000px){
+    li.nav-item{
+        text-align: center;
+        margin-left: 0%;
+    }
+    #collapsibleNavId{
+        padding-right: 0%;
+    }
+    .size-text-title{
+        font-size: 30px;
+    }
+    .container.text-truncate.p-0{
+        width: 100%;
+        font-size: 1.4em;
+    }
+    .page-name-text-width{
+        font-size: 33px;
+    }
+    .category-text-width{
+        font-size: 26px;
+    }
+    .description-text-width{
+        font-size: 15px;
+    }
+    div#name-page{
+        font-size: 30px;
+    }
+}
+@media(max-width: 992px){
+    li.nav-item{
+        text-align: center;
+        margin-left: 0%;
+    }
+    #collapsibleNavId{
+        padding-right: 0%;
+    }
+    .size-text-title{
+        font-size: 25px;
+    }
+    .container.text-truncate.p-0{
+        width: 100%;
+        font-size:1.2em;
+    }
+    .page-name-text-width{
+        font-size: 28px;
+    }
+    .category-text-width{
+        font-size: 23px;
+    }
+    .description-text-width{
+        font-size: 13px;
+    }
+    div#name-page{
+        font-size: 25px;
+    }
+}
+@media(max-width: 768px){
+    li.nav-item{
+        text-align: center;
+        margin-left: 0%;
+    }
+    #collapsibleNavId{
+        padding-right: 0%;
+    }
+    .size-text-title{
+        font-size: 20px;
+    }
+    .size-image{
+        width: 200px;
+    }
+    .container.text-truncate.p-0{
+        width: 100%;
+        font-size:1em;
+    }
+    .page-name-text-width{
+        font-size: 23px;
+    }
+    .category-text-width{
+        font-size: 17px;
+    }
+    .description-text-width{
+        font-size: 10px;
+    }
+    div#name-page{
+        font-size: 20px;
+    }
+}
+@media(max-width: 576px){
+    li.nav-item{
+        text-align: center;
+        margin-left: 0%;
+    }
+    #collapsibleNavId{
+        padding-right: 0%;
+    }
+    .size-text-title{
+        font-size: 20px;
+    }
+    .size-image{
+        width: 100px;
+    }
+    .container.text-truncate.p-0{
+        width: 100%;
+        font-size: 0.8em;
+    }
+    .page-name-text-width{
+        font-size: 17px;
+    }
+    .category-text-width{
+        font-size: 13px;
+    }
+    .description-text-width{
+        font-size: 10px;
+    }
+    div#name-page{
+        font-size: 15px;
+    }
+}
+body{
+    overflow-x: hidden;
+}
+#banner {
+    margin: 15px;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+  }
+  
+  #banner img {
+    border-radius: 5px;
+  }
+  
+  #banner img.show {
+    width: 95%;
+    opacity: 1;
+    transition: opacity 1s, visibility 0s;
+  }
+  
+  #banner img.hide {
+    height: 0;
+    width: 0;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 1s, visibility 0s 1s;
+  }

website/data.js

@@ -0,0 +1,11 @@
+module.exports = function () {
+    return {
+        img: [
+
+        ],
+        year: [
+            "2021",
+            "2022"
+        ]
+    }
+}

website/handlebars/items-select.html

@@ -0,0 +1,3 @@
+{{#each items}}
+<option>{{this}}</option>
+{{/each}}

website/handlebars/items-table.html

@@ -0,0 +1,10 @@
+{{#each items}}
+<div class="col-xl-2 col-lg-4 col-6 mt-2" name={{this.name}} id="item-{{@key}}">
+    <img class="img-fluid rounded-3" src={{this.image}}>
+    <div>
+        {{this.name}}
+        <a href="#" class="btn btn-outline-primary text-center d-flex justify-content-md-center mx-5"
+           onclick="removeItemFromTable({{@key}})">Удалить</a>
+    </div>
+</div>
+{{/each}}

website/index.html

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>ivi</title>
+    <link rel="stylesheet" href="css/style.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
+    <script src="node_modules/handlebars/dist/handlebars.min.js"></script>
+  </head>
+  <body style="background: url('background.png')">
+    <style>
+      body {
+      background: #FFFF99 !important;
+      }
+    </style>
+    <header>
+    </header>
+    <main>
+      <form id="calc" class="from" method="" action="#" style="margin: 30px 0 0 30px">
+        <select id="operation" required="required">
+          <option value="">Выберите операцию</option>
+          <option>Деление</option>
+          <option>Умножение</option>
+          <option>Сложение</option>
+          <option>Вычитание</option>
+        </select>
+        <div style="color:black">Введите первое число</div>
+        <input id="firstDig" type="number" required="required" placeholder="Первое число">
+
+        <div style="color:black">Введите второе число</div>
+        <input id="secondDig" type="number" required="required" placeholder="Второе число">
+
+        <div style="color:black">Результат</div>
+        <input type="number" id="result">
+
+        <div style="margin-top: 10px">
+          <input id="startCalc" class="button" type="button" value="Посчитать"/>
+        </div>
+      </form>
+
+      <form id="alert" class="from" method="" action="#" style="margin: 30px 0 0 30px">
+        <div style="color:black">Введите текст</div>
+        <input id="text" type="text" required="required" placeholder="Текст">
+        <input id="start" class="button" type="button" value="Показать"/>
+      </form>
+
+
+      <!-- <input id="button" class="buttonText" type="button" value="clickme"/>
+      <label for="text" >num1</label>
+      <input type="number"  value="0" id="text" />
+      <label for="result" style="color:white">Result</label>
+      <input type="number" id="result" /> -->
+    </main>
+    <script src="js2.js"></script>
+  </body>
+</html>

website/js2.js

@@ -0,0 +1,59 @@
+// let text1 = document.getElementById("text");
+// let button = document.getElementById("button");
+// let result = document.getElementById("result");
+
+// button.onclick = function(){
+//     method();
+// }
+// function method() {
+//     console.log("получилось");
+//     let text = text1.value;
+//     console.log(text);
+//     fetch(`http://localhost:8080/hello?name=${text}`)
+//         .then(response => response.text())
+//         .then(res => result.value = res);
+// }
+
+
+let firstDig = document.getElementById("firstDig");
+let secondDig = document.getElementById("secondDig");
+let operation = document.getElementById("operation");
+let calcButton = document.getElementById("startCalc");
+let result = document.getElementById("result");
+
+calcButton.onclick = function(){
+    let adress = "";
+    operationValue = operation.value;
+    if (operationValue == 'Умножение'){
+        adress = 'mult'
+    }
+    else if (operationValue == 'Деление'){
+        adress = 'div'
+    }
+    else if (operationValue == 'Сложение'){
+        adress = 'sum'
+    }
+    else if (operationValue == 'Вычитание'){
+        adress = 'sub'
+    }
+    calc(adress);
+}
+function calc(adress) {
+    console.log(firstDig, secondDig)
+    fetch(`http://localhost:8080/${adress}?firstDig=${firstDig.value}&secondDig=${secondDig.value}`)
+        .then(response => response.text())
+        .then(res => result.value = res);
+}
+
+
+let text = document.getElementById("text");
+let start = document.getElementById("start");
+
+start.onclick = function(){
+    let result1 = '';
+    
+    fetch(`http://localhost:8080/text?text=${text.value}`)
+        .then(response => response.text())
+        .then(res => alert(res));
+
+}

website/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "int-prog",
+  "version": "1.0.0",
+  "main": "1.html",
+  "scripts": {
+    "web-server": "http-server -p 3000 ./",
+    "start": "npm-run-all --parallel web-server",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-free": "6.2.0",
+    "bootstrap": "5.2.1",
+    "handlebars": "4.7.7"
+  },
+  "devDependencies": {
+    "http-server": "14.1.1",
+    "json-server": "^0.17.1",
+    "npm-run-all": "^4.1.5"
+  }
+}

website/start.bat

@@ -0,0 +1 @@
+npm start