HTML-Homeworks/index.html at main · NoClipMonster/HTML-Homeworks · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html>

<head>
    <title>Главная страница</title>
</head>
<body>

    <style>

        .grain {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 0;
            background-color: rgb(100 100 100);
        }

        #maintxt {
            font-size: 40px;
            fill: black;
            font-family: Segoe UI;
            font-weight: 500;
        }

        text {
            font-size: 20px;
            fill: white;
            font-family: Segoe UI;
            font-weight: 100;
            transform: scale(%)
        }

        .quarect {
            position: relative;
            z-index: 3;
            fill: rgb(100,100,100);
            /*96,96,96*/
        }

        #MainSvg {
            width: 400px;
            height: 100%;
            position: absolute;
            z-index: 1;
            bottom: 1px;
            left: 50%;
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            transform: translateX(-50%);
            border: 1px solid;
        }

        .sideSVG {
            height: 100%;
            background-color: rgb(0,0,0,0.1);
            position: absolute;
            z-index: 1;
            top: 0;
        }
    </style>


    <svg class="sideSVG" id="left" style="left:0"></svg>
    <svg class="sideSVG" id="right" style="right:0"></svg>

    <svg id="MainSvg">
        <text id="maintxt" text-anchor='middle' x=50% y=40px>Главная страница</text>
    </svg>

    <canvas style="background-color:transparent" id="canvas"></canvas>
    <canvas id="BackNoise" class="grain"></canvas>
    <script src="BackGroundNoise.js"></script>

    <script>


        var MainSvg = document.getElementById("MainSvg");
        var BordCl = document.getElementsByClassName("sideSVG");
        var MainSvgWidth = 400;
        BordCl[0].setAttribute("width", (window.innerWidth / 2) - MainSvgWidth / 2);
        BordCl[1].setAttribute("width", (window.innerWidth / 2) - MainSvgWidth / 2);
        var kol = 0;
        createElem(15, 50, 210, 28, "Домашняя работу №1", "HomeWork_1.html");
        createElem(15, 90, 125, 28, "Шумный фон", "noise.html");
        createElem(15, 130, 170, 28, "Генератор кнопок", "rectCreator.html");
        createElem(15, 170, 210, 28, "Домашняя работу №2", "HomeWork_2.html");
        createElem(15, 210, 100, 28, "Сердечки", "heart.html");
        function createElem(x, y, w, h, text, ref) {

            var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
            rect.setAttribute("width", w);
            rect.setAttribute("height", h);
            rect.setAttribute("x", x);
            rect.setAttribute("y", y);
            rect.setAttribute("style", "fill:black; filter:blur(1px)");
            rect.setAttribute("id", "downrect" + kol);

            var rect1 = document.createElementNS("http://www.w3.org/2000/svg", "rect");
            rect1.setAttribute("width", w);
            rect1.setAttribute("height", h);
            rect1.setAttribute("x", x);
            rect1.setAttribute("y", y);
            rect1.setAttribute("style", "fill:#696969; cursor:pointer;");
            rect1.onclick = function () { location.replace(ref); }
            rect1.setAttribute("class", kol);
            rect1.onmouseenter = function () { document.getElementById("downrect" + rect1.getAttribute("class")).setAttribute("style", "fill:red; filter:blur(4px)"); };
            rect1.onmouseleave = function () { document.getElementById("downrect" + rect1.getAttribute("class")).setAttribute("style", "fill:black; filter:blur(1px)"); };

            var textline = document.createElementNS("http://www.w3.org/2000/svg", "text");
            textline.setAttribute("x", x + 5);
            textline.setAttribute("y", y + 20);
            textline.setAttribute("style", "font-size:20px; font-family:Segoe UI; fill:white; font-weight:100; cursor:pointer;")
            textline.textContent = text;
            textline.onclick = function () { location.replace(ref); }
            textline.setAttribute("class", kol);
            textline.onmouseenter = function () { document.getElementById("downrect" + textline.getAttribute("class")).setAttribute("style", "fill:red; filter:blur(4px)"); };
            textline.onmouseleave = function () { document.getElementById("downrect" + textline.getAttribute("class")).setAttribute("style", "fill:black; filter:blur(1px)"); };
            MainSvg.appendChild(rect);
            MainSvg.appendChild(rect1);
            MainSvg.appendChild(textline);
            kol++;
        }
        function onEnter(id) {

        }
    </script>

</body>
</html>