Update app.py

app.py

@@ -979,6 +979,150 @@ def clear_chat():
 
 
 # енерирует HTML код мандалы идентично JavaScript верси
+from flask import Flask, render_template_string, request, jsonify
+
+app = Flask(__name__)
+
+# Паттерны в виде JSON
+PATTERNS = {
+    "pattern1": [
+  "577416161737624147874371687965675387455166255764767112646",
+  "35257777811486552662718756762243826291673871341244823811",
+  "8773555692535217838989632448467218821741268475368315292",
+  "651811262788738622888695683314939713825385323895246722",
+  "26992388967612584177565252645433784217824855285761494",
+  "8692527864473743585322777819976163638616341714347544",
+  "562779651821127844854955691974779992577975885772398",
+  "28957626913239638349451261172257992735773474359538",
+  "1853488614553692274496387289473792918351722785582",
+  "948737575918962492846926918421172219286894964141",
+  "43611333519868642131628619363289431215584461555",
+  "7972466861855516344781571399518474336143817611",
+  "779613557941167978269638439569322769757298472",
+  "57674813745274776186692373526354946733928329",
+  "3442394129792254795362511878989441416321252",
+  "786534532772479275898762966888485557953377",
+  "65287985959627293488648263577334113758615",
+  "2716784555689923737513189835167524134576",
+  "987463911258925111364498828674376547934",
+  "86219312374827622491848711542714292737",
+  "5831343512319484641933682696985622911",
+  "424477863541433115136951866684284212",
+  "66825659895576426649656953353613633",
+  "3517225885134168314622658688974996",
+  "868947474647575245184824557872496",
+  "55842222112333769693316913669646",
+  "1436444323566146663647614936611",
+  "579188755823751339912475439372",
+  "37197631415136463913623973319",
+  "1817494556649119314985371641",
+  "998244912314121345484818715",
+  "98168413545533479933399686",
+  "8975354899186727936639655",
+  "873889389195499739393621",
+  "61278328115949713333983",
+  "7396251926544784666382",
+  "136876128298263133921",
+  "49564731128189446323",
+  "4521214231998481955",
+  "973335654198339151",
+  "71668229518263166",
+  "8735142569189473",
+  "618656726198421",
+  "79522498718363",
+  "7574648689299",
+  "332113558229",
+  "65324814142",
+  "2856395556",
+  "142935112",
+  "56238623"
+],
+    "pattern2": [
+"577416161737624147874371687965675387455166255764767112646",
+"35257777811486552662718756762243826291673871341244823811",
+"8773555692535217838989632448467218821741268475368315292",
+"651811262788738622888695683314939713825385323895246722",
+"26992388967612584177565252645433784217824855285761494",
+"8692527864473743585322777819976163638616341714347544",
+"562779651821127844854955691974779992577975885772398",
+"28957626913239638349451261172257992735773474359538",
+"1853488614553692274496387289473792918351722785582",
+"948737575918962492846926918421172219286894964141",
+"43611333519868642131628619363289431215584461555",
+"7972466861855516344781571399518474336143817611",
+"779613557941167978269638439569322769757298472",
+"57674813745274776186692373526354946733928329",
+"3442394129792254795362511878989441416321252",
+"786534532772479275898762966888485557953377",
+"65287985959627293488648263577334113758615",
+"2716784555689923737513189835167524134576",
+"987463911258925111364498828674376547934",
+"86219312374827622491848711542714292737",
+"5831343512319484641933682696985622911",
+"424477863541433115136951866684284212",
+"66825659895576426649656953353613633",
+"3517225885134168314622658688974996",
+"868947474647575245184824557872496",
+"55842222112333769693316913669646",
+"1436444323566146663647614936611",
+"579188755823751339912475439372",
+"37197631415136463913623973319",
+"1817494556649119314985371641",
+"998244912314121345484818715",
+"98168413545533479933399686",
+"8975354899186727936639655",
+"873889389195499739393621",
+"61278328115949713333983",
+"7396251926544784666382",
+"136876128298263133921",
+"49564731128189446323",
+"4521214231998481955",
+"973335654198339151",
+"71668229518263166",
+"8735142569189473",
+"618656726198421",
+"79522498718363",
+"7574648689299",
+"332113558229",
+"65324814142",
+"2856395556",
+"142935112",
+"56238623"
+],
+    "pattern3": [
+"6874371515144176932462356166320254753",
+"562718666658584635618582773952279238",
+"28989533324443198279441951357497252",
+"1888586656887418197485156483247977",
+"977445322576259917234662132562775",
+"75289854734875918957138345728953",
+"3718849217363519853842279391858",
+"189734238199861848236497331944",
+"98717652919857933159147164148",
+"8688427211843736465152871553",
+"557369932937119112667168618",
+"13196935231821123834875579",
+"4416638754913235227363137",
+"857392639414558749199441",
+"43132893455914624119485",
+"7445183791515186521434",
+"289692171666695273577",
+"18662388733365791835",
+"9538527616692371928",
+"582479477362518121",
+"41627425198769933",
+"5789267618646936",
+"368284479511639",
+"95113827562793",
+"5624219328973",
+"286631351871",
+"15394486968",
+"6834835665",
+"527328232",
+"79151155"
+]
+}
+
 def generate_mandala_html(pattern_array, container_id="mandala-container"):
     """Генер��рует HTML код мандалы идентично JavaScript версии"""
     
@@ -1017,12 +1161,36 @@ def generate_mandala_html(pattern_array, container_id="mandala-container"):
     
     return '\n'.join(html_parts)
 
-# HTML шаблон как строка
+# HTML шаблон с кнопками
 MANDALA_TEMPLATE = """
 <!DOCTYPE html>
 <html>
 <head>
     <style>
+        .button-container {
+            text-align: center;
+            margin: 20px 0;
+        }
+        .pattern-btn {
+            padding: 10px 20px;
+            margin: 0 10px;
+            font-size: 16px;
+            cursor: pointer;
+            background-color: #4CAF50;
+            color: white;
+            border: none;
+            border-radius: 5px;
+        }
+        .pattern-btn:hover {
+            background-color: #45a049;
+        }
+        .pattern-btn.active {
+            background-color: #2196F3;
+        }
+        #mandala-container {
+            margin: 20px auto;
+        }
+        /* Базовые стили для мандалы */
 .container_top { padding-top: 30px; }
 .details_numbers { margin: 15px 0 0px 0; }
 .details_numbers br { clear: both; }
@@ -1032,7 +1200,6 @@ MANDALA_TEMPLATE = """
 .smenu { margin: 0 auto 20px auto; width: 100%; }
 .btn.disabled{ }
 .hid { display: none!important; }
-
 .clear { clear: both; }
 .graphs { margin: 20px 0 0 0; }
 .graph_numbers { /* float: left; */  }
@@ -1043,16 +1210,12 @@ MANDALA_TEMPLATE = """
 .method_light tr td { border-right: 1px #000 solid; border-bottom: 1px #000 solid; vertical-align: middle; text-align: center; }
 .method_light tr td.decart_gorizont { border-bottom: 3px #000 solid!important; }
 .method_light tr td.decart_vertical { border-right: 3px #000 solid!important; }
-
 .graph_colors .method_light { border-left: 1px #000 solid; border-top: 1px #000 solid;  }
 .graph_colors .method_light tr { padding: 0px; margin: 0px; }
 .graph_colors .method_light tr td { padding: 0px; margin: 0px; border-right: 1px #000 solid; border-bottom: 1px #000 solid; }
-
 .no-border .method_light, .no-border .method_light tr td {
 	border: 0px!important;
 }
-
-
 .cell, .cell_noresize { text-align: center; display: block; width: 18px; height: 18px; }
 .cell_noresize { border: 1px #ccc solid; }
 .white { color: #ffffff; background-color: #ffffff; }
@@ -1065,7 +1228,6 @@ MANDALA_TEMPLATE = """
 .pink { color: #ff00ff; background-color: #ff00ff; }
 .orange { color: #ff9900; background-color: #ff9900; }
 .violet { color: #9900ff; background-color: #9900ff; } 
-
 @media print {
 	.white { color: #ffffff!important; background-color: #ffffff!important; }
 	.red { color: #ff0000!important; background-color: #ff0000!important; }
@@ -1081,22 +1243,18 @@ MANDALA_TEMPLATE = """
 	
 .hide, .mob-only { display: none;}
 .show { display: block; }
-
 .print { margin: 40px auto; }
 .one_color {}
 .one_color .cell_noresize { margin-right: 8px; }
 .one_color span { float: left; }
 .one_color p { clear: both; /* padding: 0 37px; */ }
-
 #word { max-width: calc(100% - 80px); height: 66x; font-size: 20px; }
 .navbar-form-own .btn-default { width: 18%; text-transform: uppercase; }
 .off { display: none; }
 .on { display: block; }
-
 .numerology_details { }
 .numerology_details tr td { text-align: center; width: 25px; }
 .numerology_details tr td.wc { font-weight: bold; }
-
 .plinks { margin: 10px 0 0 0; padding: 0px; }
 .plinks li {
 	list-style: none;
@@ -1104,17 +1262,12 @@ MANDALA_TEMPLATE = """
 	margin: 0 20px 0 0;
 	padding: 0px;
 }
-
 .green_b { background: green!important; }
 .red_b { background: red!important; }
 .point_number { width: 50px; text-align: center; }
-
 .method_point { margin: auto; }
 .graph_numbers .method_point tr td { width: 16px; height: 16px; vertical-align: middle; font-size: 18px; line-height: 16px; }
 .method_point tr td { vertical-align: middle; text-align: center; }
-
-
-
 .tooltip{
     position:absolute;
     z-index:1070;
@@ -1209,7 +1362,6 @@ MANDALA_TEMPLATE = """
     background-color:#000;
     border-radius:.25rem
 }
-
 .glyphicon-exclamation-sign{
 	margin: 10px 10px 0 10px;
 }
@@ -1225,19 +1377,16 @@ MANDALA_TEMPLATE = """
 		padding: 0px!important;
 	}
 }
-
 .overflow-auto { overflow: auto; width: 100%; }
 .nowrap { white-space: nowrap; }
 .w100 { text-align: center; margin: 10px 0 0 10px;  }
 .tor_value { font-size: 10px; }
-
 .nav-pills{
 		display: flex;
 		justify-content: center; 
 		align-items: center;
 		
 	}
-
 .tab-ids li a { font-weight: 600; }
 	.navbar-form-own {
 	}	
@@ -1256,9 +1405,7 @@ MANDALA_TEMPLATE = """
 	}
 	
 }
-
  
-
 .romb {
 	width: 0; 
 	height: 0; 
@@ -1284,18 +1431,11 @@ MANDALA_TEMPLATE = """
     /* color: white; */
     z-index: 2;
 }
-
-
-
-
-
-
 .hexagon.courts {
 	height: 700px;
 	width: 700px;
 	margin: 90px auto 20px;
 }
-
 .courts .hex {
     margin-top: 8px;
     width: 16px;
@@ -1320,11 +1460,9 @@ MANDALA_TEMPLATE = """
   border-left: 8px solid transparent;
   border-right: 8px solid transparent;
 }
-
 .hexagon.courts .line {
 	margin-top: -4px!important;
 }
-
 .hexagon.courts .side { 	
 	display: inline-block;
 	margin: 0px;
@@ -1351,7 +1489,6 @@ MANDALA_TEMPLATE = """
     top: 133px;
 	z-index: 4;
 }
-
 .hexagon.courts .side-4 { 
 	transform: rotate(150deg);
     position: absolute;
@@ -1373,9 +1510,6 @@ MANDALA_TEMPLATE = """
     top: 114px;
 	z-index: 1;
 }
-
-
-
 .hexagon {
 	position: relative;
 /*	max-width: 438px;*/
@@ -1391,7 +1525,6 @@ MANDALA_TEMPLATE = """
 	width: 500px; 
 	margin-top: -11px;
 }
-
 .hexagon .side { 	
 	display: inline-block;
 	margin: 0px;
@@ -1415,7 +1548,6 @@ MANDALA_TEMPLATE = """
     left: 256px;
     top: 148px;
 }
-
 .hexagon .side-4 { 
 	transform: rotate(150deg);
 	position: absolute;
@@ -1434,11 +1566,6 @@ MANDALA_TEMPLATE = """
     left: -85px;
     top: 148px;
 }
-
-
-
-
-
 .hexagon.size-6 {
 	position: relative;
 	height: 400px;
@@ -1453,7 +1580,6 @@ MANDALA_TEMPLATE = """
 	width: 500px; 
 	margin-top: -11px;
 }
-
 .hexagon.size-6 .side { 	
 	display: inline-block;
 	margin: 0px;
@@ -1476,9 +1602,7 @@ MANDALA_TEMPLATE = """
 	position: absolute;
     left: 114px;
     top: 66px;
-
 }
-
 .hexagon.size-6 .side-4 { 
 	transform: rotate(150deg);
 	position: absolute;
@@ -1497,8 +1621,6 @@ MANDALA_TEMPLATE = """
 	left: -38px;
     top: 66px;
 }
-
-
 .hexagon.size-8 {
 	position: relative;
 /*	max-width: 438px;*/
@@ -1514,7 +1636,6 @@ MANDALA_TEMPLATE = """
 	width: 500px; 
 	margin-top: -11px;
 }
-
 .hexagon.size-8 .side { 	
 	display: inline-block;
 	margin: 0px;
@@ -1538,7 +1659,6 @@ MANDALA_TEMPLATE = """
     left: 143px;
     top: 82px;
 }
-
 .hexagon.size-8 .side-4 { 
 	transform: rotate(150deg);
 	position: absolute;
@@ -1557,9 +1677,6 @@ MANDALA_TEMPLATE = """
     left: -48px;
     top: 82px;
 }
-
-
-
 .hexagon.size-12 {
 	position: relative;
 	height: 580px;
@@ -1574,7 +1691,6 @@ MANDALA_TEMPLATE = """
 	width: 500px; 
 	margin-top: -11px;
 }
-
 .hexagon.size-12 .side { 	
 	display: inline-block;
 	margin: 0px;
@@ -1598,7 +1714,6 @@ MANDALA_TEMPLATE = """
 	left: 200px;
     top: 115px;
 }
-
 .hexagon.size-12 .side-4 { 
 	transform: rotate(150deg);
 	position: absolute;
@@ -1617,9 +1732,6 @@ MANDALA_TEMPLATE = """
     left: -67px;
     top: 115px;
 } 
-
-
-
 .hexagon.courts.size-12 {
 	position: relative;
 	height: 580px;
@@ -1634,7 +1746,6 @@ MANDALA_TEMPLATE = """
 	width: 500px; 
 	margin-top: -11px;
 }
-
 .hexagon.courts.size-12 .side { 	
 	display: inline-block;
 	margin: 0px;
@@ -1658,7 +1769,6 @@ MANDALA_TEMPLATE = """
 left: 115px;
     top: 68px;
 }
-
 .hexagon.courts.size-12 .side-4 { 
     transform: rotate(150deg);
     position: absolute;
@@ -1678,9 +1788,6 @@ left: 115px;
     left: -39px;
     top: 67px;
 } 
-
-
-
 .hexagon.courts.size-16 .side-1 { 
 	transform: rotate(-30deg); 	
 	position: absolute;
@@ -1699,7 +1806,6 @@ left: 115px;
     left: 158px;
     top: 90px;
 }
-
 .hexagon.courts.size-16 .side-4 { 
     transform: rotate(150deg);
     position: absolute;
@@ -1718,18 +1824,10 @@ transform: rotate(270deg);
     left: -52px;
     top: 92px;
 }
-
 .octagon.size-16 {
 	width: 700px;
 	height: 700px;
 }
-
-
-
-
-
-
-
 .hexagon.size-24 {
 	position: relative;
 /*	max-width: 438px;*/
@@ -1768,7 +1866,6 @@ transform: rotate(270deg);
     left: 371px;
     top: 214px;
 }
-
 .hexagon.size-24 .side-4 { 
 	transform: rotate(150deg);
 	position: absolute;
@@ -1787,9 +1884,6 @@ transform: rotate(270deg);
 	left: -124px;
     top: 213px;
 }
-
-
-
 .octagon {
 	position: relative;
 /*	max-width: 438px;*/
@@ -1820,7 +1914,6 @@ transform: rotate(270deg);
     left: 256px;
     top: 106px;
 }
-
 .octagon .side-4 { 
 	transform: rotate(112.5deg);
 	position: absolute;
@@ -1839,25 +1932,18 @@ transform: rotate(270deg);
 	left: 0px;
     top: 362px;
 }
-
 .octagon .side-7 { 
 	transform: rotate(247.5deg);
 	position: absolute;
     left: -106px;
     top: 256px;
 }
-
 .octagon .side-8 { 
 	transform: rotate(292.5deg);
 	position: absolute;
     left: -106px;
     top: 106px;
 }
-
-
-
-
-
 .octagon.size-6 {
 	position: relative;
 /*	max-width: 438px;*/
@@ -1888,7 +1974,6 @@ transform: rotate(270deg);
     left: 113px;
     top: 47px;
 }
-
 .octagon.size-6 .side-4 { 
 	transform: rotate(112.5deg);
 	position: absolute;
@@ -1907,24 +1992,18 @@ transform: rotate(270deg);
 	left: 0px;
     top: 161px;
 }
-
 .octagon.size-6 .side-7 { 
 	transform: rotate(247.5deg);
 	position: absolute;
         left: -47px;
     top: 114px;
 }
-
 .octagon.size-6 .side-8 { 
 	transform: rotate(292.5deg);
 	position: absolute;
 	left: -47px;
     top: 47px;
 }
-
-
-
-
 .octagon.size-8 {
 	position: relative;
 /*	max-width: 438px;*/
@@ -1955,7 +2034,6 @@ transform: rotate(270deg);
     left: 142px;
     top: 59px;
 }
-
 .octagon.size-8 .side-4 { 
 	transform: rotate(112.5deg);
 	position: absolute;
@@ -1974,24 +2052,18 @@ transform: rotate(270deg);
 	left: 0px;
     top: 201px;
 }
-
 .octagon.size-8 .side-7 { 
 	transform: rotate(247.5deg);
 	position: absolute;
     left: -59px;
     top: 142px;
 }
-
 .octagon.size-8 .side-8 { 
 	transform: rotate(292.5deg);
 	position: absolute;
     left: -59px;
     top: 59px;
 }
-
-
-
-
 .octagon.size-12 {
 	position: relative;
 /*	max-width: 438px;*/
@@ -2022,7 +2094,6 @@ transform: rotate(270deg);
     left: 220px;
     top: 106px;
 }
-
 .octagon.size-12 .side-4 { 
 	transform: rotate(112.5deg);
 	position: absolute;
@@ -2041,24 +2112,18 @@ transform: rotate(270deg);
     left: 20px;
     top: 305px;
 }
-
 .octagon.size-12 .side-7 { 
 	transform: rotate(247.5deg);
 	position: absolute;
     left: -63px;
     top: 223px;
 }
-
 .octagon.size-12 .side-8 { 
 	transform: rotate(292.5deg);
 	position: absolute;
 	left: -63px;
     top: 106px;
 }
-
-
-
-
 .octagon.size-24 {
 	position: relative;
 /*	max-width: 438px;*/
@@ -2089,7 +2154,6 @@ transform: rotate(270deg);
     left: 349px;
     top: 153px;
 }
-
 .octagon.size-24 .side-4 { 
 	transform: rotate(112.5deg);
 	position: absolute;
@@ -2108,26 +2172,18 @@ transform: rotate(270deg);
 	left: -20px;
     top: 521px;
 }
-
 .octagon.size-24 .side-7 { 
 	transform: rotate(247.5deg);
 	position: absolute;
     left: -172px;
     top: 368px;
 }
-
 .octagon.size-24 .side-8 { 
 	transform: rotate(292.5deg);
 	position: absolute;
     left: -174px;
     top: 152px;
 }
-
-
-
-
-
-
 .octagon .romb {
 	width: 0; 
 	height: 0; 
@@ -2153,8 +2209,6 @@ transform: rotate(270deg);
     /* color: white; */
     z-index: 2;
 }
-
-
 .octagon .line {
 	display: flex;
  	justify-content: center; 
@@ -2163,18 +2217,12 @@ transform: rotate(270deg);
 	width: 400px; 
 	margin-top: -9px;
 }
-
-
-
-
 :root {
   --hex-color: transparent;
   --hex-border-color: #000;
   --dark_blue-color: #0000ff;
   --red-color: #ff0000;
 }
-
-
 .romb.white {  color: #ffffff; border-bottom-color: #ffffff;  }
 .romb.white:after { color: #ffffff; border-top-color: #ffffff; }
 .romb.red{  color: #ff0000; border-bottom-color: #ff0000;  }
@@ -2195,8 +2243,6 @@ transform: rotate(270deg);
 .romb.orange:after { color: #ff9900; border-top-color: #ff9900; }
 .romb.violet {  color: #9900ff; border-bottom-color: #9900ff; }
 .romb.violet:after { color: #9900ff; border-top-color: #9900ff; }
-
-
 .hex.white { background-color: #ffffff; color:#ffffff; }
 .hex.white:before { border-bottom-color: #ffffff; }
 .hex.white:after { border-top-color: #ffffff;}
@@ -2227,8 +2273,6 @@ transform: rotate(270deg);
 .hex.violet { background-color: #9900ff; color:#9900ff; }
 .hex.violet:before { border-bottom-color: #9900ff; }
 .hex.violet:after { border-top-color: #9900ff;}
-
-
 .hex {
   margin-top: 10px;
   width: 18px;
@@ -2238,7 +2282,6 @@ transform: rotate(270deg);
   color: #fff;
  /*  transform: rotate(90deg); */
 }
-
 .hex span { 
     position: absolute;
     top: -2px;
@@ -2247,7 +2290,6 @@ transform: rotate(270deg);
 	font-size: 10px;
 	/* transform: rotate(-90deg); */
 }
-
  
 .hex:before {
   content: " ";
@@ -2267,9 +2309,6 @@ transform: rotate(270deg);
   border-left: 9px solid transparent;
   border-right: 9px solid transparent;
 }
-
-
-
 .cards_start {
 	display: flex;
 	
@@ -2279,22 +2318,16 @@ transform: rotate(270deg);
 	margin-left: -170px; 
 }
 */
-
-
-
 .owl-carousel { -ms-touch-action: pan-y; touch-action: pan-y; }
 .owl-carousel .owl-item img { max-width: 100%; width: auto!important; }
 .cards_start.owl-carousel .owl-stage-outer { overflow: inherit; }
-
 .scene {
   width: 220px;
   height: 321px;
   perspective: 600px;
   margin-left: -120px; 
 }
-
 .scene:first-child { margin-left: 0px; }
-
 .card {
   width: 100%;
   height: 100%;
@@ -2308,34 +2341,24 @@ transform: rotate(270deg);
   text-align: center; 
 }
 .card img { max-width: 221px; }
-
 .scene-active { width: 381px; height: 551px; margin-top: -110px;}
 .scene-active .card img { max-width: 381px; }
 .card.is-flipped {
   transform: rotateY(180deg);
 }
-
 .card__face {
   position: absolute;
   width: 100%;
   height: 100%;
   backface-visibility: hidden;
 }
-
 .card__face--front {
 }
-
 .card__face--back {
   transform: rotateY(180deg);
 }
-
 .rekl { text-align: center; }
 .lazy { margin: auto; vertical-align: middle; }
-
-
-
-
-
 .form-inputs {
 	
 		display: flex;
@@ -2354,7 +2377,6 @@ transform: rotate(270deg);
 .send_build_web { display: block; }
 .width-100 { max-width: 100%!important; }
 .more-save i img { max-height: 18px; }
-
 @media (max-width: 768px){
 	h1 { font-size: 24px!important; }
 	h2 { font-size: 20px!important; }
@@ -2375,8 +2397,6 @@ transform: rotate(270deg);
 	
 	.center { text-align: center; }
 }
-
-
 .flex-center {
 	display: flex;
     align-items: center;
@@ -2388,7 +2408,6 @@ transform: rotate(270deg);
 	line-height: 16px;
 }
 .flex-side { display: inline-block; }
-
 .mt-5 { margin-top: 5px; }
 .mt-10 { margin-top: 10px; }
 .mt-20 { margin-top: 20px; }
@@ -2397,74 +2416,65 @@ transform: rotate(270deg);
 	.m-none { display: none!important; }
 	.btn { padding: 6px 10px!important;}
 }
-
 .center-red { background: #f6f6f6; color: red; padding: 5px 10px; margin: auto; width: 430px; max-width: 100%; }
     </style>
 </head>
 <body>
-    {{ mandala_html|safe }}
+    <div class="button-container">
+        <button class="pattern-btn active" onclick="switchPattern('pattern1')">Паттерн 1</button>
+        <button class="pattern-btn" onclick="switchPattern('pattern2')">Паттерн 2</button>
+        <button class="pattern-btn" onclick="switchPattern('pattern3')">Паттерн 3</button>
+    </div>
+    
+    <div id="mandala-display">
+        {{ mandala_html|safe }}
+    </div>
+
+    <script>
+        function switchPattern(patternName) {
+            // Обновляем активную кнопку
+            document.querySelectorAll('.pattern-btn').forEach(btn => {
+                btn.classList.remove('active');
+            });
+            event.target.classList.add('active');
+            
+            // Загружаем новый паттерн
+            fetch('/switch-pattern', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({pattern: patternName})
+            })
+            .then(response => response.json())
+            .then(data => {
+                document.getElementById('mandala-display').innerHTML = data.mandala_html;
+            })
+            .catch(error => console.error('Error:', error));
+        }
+    </script>
 </body>
 </html>
 """
 
-@app.route('/mandala')
+@app.route('/')
 def show_mandala():
-    pattern = [
-  "577416161737624147874371687965675387455166255764767112646",
-  "35257777811486552662718756762243826291673871341244823811",
-  "8773555692535217838989632448467218821741268475368315292",
-  "651811262788738622888695683314939713825385323895246722",
-  "26992388967612584177565252645433784217824855285761494",
-  "8692527864473743585322777819976163638616341714347544",
-  "562779651821127844854955691974779992577975885772398",
-  "28957626913239638349451261172257992735773474359538",
-  "1853488614553692274496387289473792918351722785582",
-  "948737575918962492846926918421172219286894964141",
-  "43611333519868642131628619363289431215584461555",
-  "7972466861855516344781571399518474336143817611",
-  "779613557941167978269638439569322769757298472",
-  "57674813745274776186692373526354946733928329",
-  "3442394129792254795362511878989441416321252",
-  "786534532772479275898762966888485557953377",
-  "65287985959627293488648263577334113758615",
-  "2716784555689923737513189835167524134576",
-  "987463911258925111364498828674376547934",
-  "86219312374827622491848711542714292737",
-  "5831343512319484641933682696985622911",
-  "424477863541433115136951866684284212",
-  "66825659895576426649656953353613633",
-  "3517225885134168314622658688974996",
-  "868947474647575245184824557872496",
-  "55842222112333769693316913669646",
-  "1436444323566146663647614936611",
-  "579188755823751339912475439372",
-  "37197631415136463913623973319",
-  "1817494556649119314985371641",
-  "998244912314121345484818715",
-  "98168413545533479933399686",
-  "8975354899186727936639655",
-  "873889389195499739393621",
-  "61278328115949713333983",
-  "7396251926544784666382",
-  "136876128298263133921",
-  "49564731128189446323",
-  "4521214231998481955",
-  "973335654198339151",
-  "71668229518263166",
-  "8735142569189473",
-  "618656726198421",
-  "79522498718363",
-  "7574648689299",
-  "332113558229",
-  "65324814142",
-  "2856395556",
-  "142935112",
-  "56238623"
-]
-    
-    mandala_html = generate_mandala_html(pattern)
+    # Используем паттерн по умолчанию
+    mandala_html = generate_mandala_html(PATTERNS["pattern1"])
     return render_template_string(MANDALA_TEMPLATE, mandala_html=mandala_html)
 
+@app.route('/switch-pattern', methods=['POST'])
+def switch_pattern():
+    data = request.get_json()
+    pattern_name = data.get('pattern', 'pattern1')
+    
+    if pattern_name in PATTERNS:
+        mandala_html = generate_mandala_html(PATTERNS[pattern_name])
+        return jsonify({'mandala_html': mandala_html})
+    else:
+        return jsonify({'error': 'Pattern not found'}), 404
+
+