add blocks

static/base/css/style.css

@@ -0,0 +1,173 @@
+body {
+  font-family: system-ui, sans-serif;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: #333;
+  color: white;
+  padding: 10px 15px;
+  position: relative;
+}
+
+footer {
+  background: #333;
+  color: white;
+  text-align: center;
+  padding: 10px;
+}
+
+main {
+  flex: 1;
+  padding: 20px;
+  max-width: 1000px;
+  margin: 0 auto;
+}
+
+/* навигация */
+nav ul {
+  list-style: none;
+  display: flex;
+  gap: 20px;
+  margin: 0;
+  padding: 0;
+}
+
+nav a {
+  color: white;
+  text-decoration: none;
+  font-weight: 500;
+}
+
+nav a:hover {
+  text-decoration: underline;
+}
+
+/* бургер */
+.burger {
+  display: none;
+  flex-direction: column;
+  justify-content: center;
+  gap: 5px;
+  width: 30px;
+  height: 25px;
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+
+.burger span {
+  display: block;
+  height: 3px;
+  width: 100%;
+  background: white;
+  border-radius: 2px;
+  transition: 0.3s;
+}
+
+.burger.active span:nth-child(1) {
+  transform: translateY(8px) rotate(45deg);
+}
+
+.burger.active span:nth-child(2) {
+  opacity: 0;
+}
+
+.burger.active span:nth-child(3) {
+  transform: translateY(-8px) rotate(-45deg);
+}
+
+/* сетка */
+.grid-3 {
+  display: grid;
+  grid-template-columns: 15% 70% 15%;
+  gap: 20px;
+  margin-top: 20px;
+}
+
+.grid-block {
+  background: #f5f5f5;
+  padding: 15px;
+  border-radius: 10px;
+  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+}
+  /* Полупрозрачный фон */
+  .overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0,0,0,0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+  }
+
+  /* Окна */
+/* Message */
+.window-popup { width:400px; height:150px; background:#fff; border-radius:10px; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:20px; box-shadow:0 0 10px rgba(0,0,0,0.3); }
+.window-popup button { margin-top:20px; padding:5px 10px; cursor:pointer; }
+
+/* Menu */
+.window-menu { position:absolute; background:#fff; border-radius:10px; border:1px solid rgba(0,0,0,0.12); box-shadow:0 6px 18px rgba(0,0,0,0.12); min-width:160px; z-index:9999; overflow:hidden; }
+.window-item { padding:8px 12px; cursor:pointer; white-space:nowrap; font-size:14px; }
+.window-item:hover { background:rgba(0,0,0,0.04); }
+
+/* File */
+.window-panel { width:420px; background:#f0f0f0; border:1px solid #888; border-radius:10px; box-shadow:0 0 12px rgba(0,0,0,0.4); position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); user-select:none; display:flex; flex-direction:column; }
+.window-header { background:#f0f0f0; padding:10px; font-size:16px; font-weight:600; border-bottom:1px solid #aaa; cursor:move; }
+.window-tabs { display:flex; border-bottom:1px solid #aaa; background:#f0f0f0; }
+.window-tab { padding:8px 14px; cursor:pointer; border-right:1px solid #aaa; user-select:none; }
+.window-tab.active { background:#fff; font-weight:600; border-bottom:2px solid #fff; }
+.window-content { display:none; padding:15px; background:#fff; }
+.window-content.active { display:block; }
+.window-row { display:flex; justify-content:space-between; margin-bottom:8px; font-size:14px; }
+.window-buttons { display:flex; justify-content:flex-end; padding:10px; gap:8px; border-top:1px solid #aaa; background:#f0f0f0; }
+.window-buttons button { padding:6px 16px; cursor:pointer; }
+
+/* адаптив */
+@media (max-width: 425px) {
+  .grid-3 {
+    grid-template-columns: 1fr;
+  }
+
+  .burger {
+    display: flex;
+  }
+
+  nav {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 100%;
+    background: #222;
+    display: none;
+    flex-direction: column;
+    text-align: center;
+    padding: 10px 0;
+    z-index: 10;
+  }
+
+  nav.open {
+    display: flex;
+    animation: slideDown 0.3s ease;
+  }
+
+  nav ul {
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  @keyframes slideDown {
+    from { opacity: 0; transform: translateY(-10px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+}