Added projects section

config/json/projects.json

@@ -0,0 +1,20 @@
+{
+    "cols": 3,
+    "projects" : [
+        {
+        "title": "Этот сайт",
+        "description": "Текст",
+        "image": "images/thissite.png"
+        },
+        {
+            "title": "ChatManager",
+            "description": "Плагин для работы с чатом в Minecraft.",
+            "image": "images/chatmanager.png"
+        },
+        {
+            "title": "Скоро, совсем скоро, текст",
+            "description": "Скоро",
+            "image": "images/soon.jpg"
+        }
+    ]
+}

main.py

@@ -1,9 +1,10 @@
-import flask
+from flask import Flask, url_for, render_template
 import os
+import json
 import numpy.random as gaussian_rnd
 
 
-app = flask.Flask(__name__, subdomain_matching=True)
+app = Flask(__name__, subdomain_matching=True)
 app.config['SERVER_NAME'] = 'thematdev.local:22837'
 
 
@@ -22,17 +23,29 @@ def dated_url_for(endpoint, **values):
         if filename:
             file_path = os.path.join(app.root_path, endpoint, filename)
             values['q'] = int(os.stat(file_path).st_mtime)
-    return flask.url_for(endpoint, **values)
+    return url_for(endpoint, **values)
 
 
 @app.route('/')
 def index():
-    return flask.render_template('index.html', random_number=generate_iq())
+    with open('config/json/projects.json') as file:
+        data = json.loads(file.read())
+    cols = data['cols']
+    projects = data['projects']
+    length = len(projects)
+    rows = []
+    for i in range(0, length, cols):
+        row = []
+        for j in range(i, min(i + cols, length)):
+            row.append(projects[j])
+        rows.append(row)
+
+    return render_template('index.html', random_number=generate_iq(), rows=rows)
 
 
 @app.route('/', subdomain='tex')
 def texindex():
-    return "Fuck you, leatherman!"
+    return render_template('texindex.html')
 
 
 def main():

static/assets/css/style.css

@@ -21,12 +21,12 @@ body {
 .pagehead-inner {
     position: inherit;
     margin: 0;
-    width: 456px;
+    width: 24%;
-    height: 600px;
+    height: 55vh;
     top: 50%;
     left: 50%;
-    margin-left: -228px;
+    margin-left: -12%;
-    margin-top: -300px;
+    margin-top: -27vh;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -53,6 +53,8 @@ body {
     background: #222;
     color: white;
     border-radius: 15px;
+    border: none;
+    outline: none;
 }
 
 .btn-container button:hover {
@@ -62,6 +64,11 @@ body {
     color: green;
 }
 
+.btn-container button:active {
+    transform: scale(0.8);
+    -webkit-transition: transform 0.2s ease-in-out;
+}
+
 .mainh {
     color: white;
     font-family: "Overpass Mono", monospace;
@@ -69,4 +76,64 @@ body {
     margin: 0;
 }
 
+.pagebody {
+    width: 100%;
+    height: 100vh;
+    position: relative;
+    background: #222;
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+}
+
+.pagebody-inner-section {
+    margin-top: 100px; margin-left: 300px;
+}
+
+.pagebody-inner-section > h1 {
+    color: white;
+    font-family: "Overpass Mono", monospace;
+    font-weight: 700;
+}
+
+.project-container {
+    position: inherit;
+    display: flex;
+    flex-direction: column;
+}
+
+.project-container-row {
+    display: flex;
+    position: inherit;
+    flex-direction: row;
+}
+
+.project-element {
+    position: inherit;
+    width: 300px;
+    margin-right: 70px;
+    display: flex;
+    flex-direction: column;
+}
+
+.project-element > h1 {
+    color: white;
+    font-family: "Overpass Mono", monospace;
+    font-weight: 700;
+    margin: 0;
+}
+
+.project-element  > p {
+    color: white;
+    font-family: "Overpass Mono", monospace;
+    font-weight: 400;
+    margin: 0;
+}
+
+.project-element > img {
+    background: #222;
+    margin-top: 20px;
+    margin-bottom: 20px;
+}
+
 .

static/js/projects.js

@@ -0,0 +1,13 @@
+function alignHeadersByHeight(table) {
+    var maxHeight = 0;
+    table.querySelectorAll('h1').forEach(
+        element => maxHeight = Math.max(maxHeight, element.clientHeight)
+    )
+    table.querySelectorAll('h1').forEach(
+        element => element.style.height = maxHeight + 'px'
+    )
+    console.log(maxHeight);
+}
+
+var table = document.getElementById("pbic");
+alignHeadersByHeight(table);

templates/index.html

@@ -24,6 +24,25 @@
                 </div>
             </div>
         </div>
-    </body>
+        <div class="pagebody" id="pb">
+            <div class="pagebody-inner-section" id="pbi">
+                <h1>Мои проекты</h1>
+                <div class="project-container" id="pbic">
+                    {% for row in rows %}
+                        <div class="project-container-row">
+                            {% for project in row %}
+                                <div class="project-element">
+                                    <h1> {{ project.title }}</h1>
+                                    <img src="{{ url_for('static', filename='assets/{0}'.format(project.image))}}" width=200 height=200>
+                                    <p> {{ project.description }} </p>
+                                </div>
+                            {% endfor %}
+                        </div>
+                    {% endfor %}
+                </div>
+            </div>
+        </div>
+        <script src="{{ url_for('static', filename='js/projects.js') }}"></script>
         Идея про Гауссово распределение вместо обычного рандома: <a href="https://t.me/Prentor">Prentor</a> и <a href="https://t.me/pavel_the_best"> pavel_the_best </a>
+    </body>
 </html>

templates/texindex.html

@@ -1,8 +1,9 @@
 <!DOCTYPE html>
 <html>
-<head>
+    <head>
-</head>
+    </head>
-<body>
+    <body>
-    
+        <h1>Fuck you, leatherman!</h1>
-</body>
+        Hey buddy, i think you got the wrong door the leather-club is two blocks down.
+    </body>
 </html>