diff --git a/examples/dna/assets/dna.png b/examples/dna/assets/dna.png new file mode 100644 index 0000000..ad47db6 Binary files /dev/null and b/examples/dna/assets/dna.png differ diff --git a/examples/dna/index.html b/examples/dna/index.html new file mode 100644 index 0000000..e792d7f --- /dev/null +++ b/examples/dna/index.html @@ -0,0 +1,89 @@ + + + + + + + + + dna + + + + + + +
+

Welcome to the "Complementary DNA converter"!

+
+ +
+ +
+

+ Welcome to the "Complementary DNA converter" +
+ "how does it work?" + The "Complementary DNA converter", given one side of a DNA strand returns the other, + complementary side of said strand. + To learn more, please visit: + + + about DNA transcription and translation + + + + +

+ + +
+ + +
+ +
+ +
+ +
+
+ + + +
+ +
+ +
+ +
+ +
+ + + def dna(*args, **kwargs): + output = Element("dna_result") + p = str(Element("initial_dna").value) + res = p.translate(p.maketrans("ATCGatcg","TAGCTAGC")) + output.write("complementary side: " + str(res)) + + + + +
+ + + + + + \ No newline at end of file diff --git a/examples/dna/styles/styles.css b/examples/dna/styles/styles.css new file mode 100644 index 0000000..90e82a1 --- /dev/null +++ b/examples/dna/styles/styles.css @@ -0,0 +1,167 @@ +body { + background-color: #F3F6F8; + min-height: 100vh; + display: flex; + flex-direction: column; +} + +main { + display: flex; + flex-direction: row; +} + +#first_div { + align-content: center; + margin: 1%; + flex: 1.25; +} + +#first_p { + margin: 3.5%; + margin-left: 15%; + font-family: Tahoma, sans-serif; +} + +.flexelement { + flex: 1; + padding: 2%; +} + + + +#form { + margin-top: 7%; + height: 100%; + display: flex; + align-content: center; + justify-content: center; +} + +#form input[type=number] { + border: 1px solid white; + border-radius: 0.3em; + height: 12%; + width: 100%; + margin-bottom: 5px; +} + + +#form button { + width: 100%; + height: 12%; + margin-bottom: 5px; +} + +header { + height: 100px; +} + +footer { + margin-top: auto; + height: 57px; +} + +header, footer { + background-color: #1A1A27; +} + +#header_h1 { + padding-top: 2.2%; + margin-left: 40%; + font-weight: bold; + color: white; +} + +input[type=number] { + padding: 1%; +} + +#principal, #interest_rate, #time { + width: 25%; +} + +#calc { + min-height: 47px; + width: 25%; + padding: 1%; + font-weight: bold; + margin-top: 2%; + color: white; + background-color: #0095E8; +} + +#initial_dna { + margin-bottom: 2%; + margin-top: 2%; + color: black; + min-height: 47px; +} + +#simple_interest, #compound_interest { + color: black; + font-weight: bold; +} + +input[type=radio] { + display: none; +} + +label { + cursor: pointer; +} + +input[type=radio] ~ img { + animation: close 1.5; + display: none; + height: 0; + max-height: 500px; + overflow: hidden; +} + +input[type=radio]:checked ~ img { + animation: open 1.5s; + display: block; + height: auto; + max-height: 500px; +} + +@keyframes open { + from { + max-height: 0; + } + + to { + max-height: auto; + } +} + +@keyframes close { + from { + display: block; + max-height: auto; + } + + to { + display: none; + height: 0; + } +} + +.expander_label { + border: 1px solid #0095E8; + border-radius: 0.1em; + padding: 1%; + font-weight: 500; + color: white; + background-color: #0095E8; + background-color: #0095E8; +} + +#footer_p { + font-weight: bold; + font-size: 13px; + text-align: center; + color: white; + vertical-align: central; + padding: 1.2%; +} \ No newline at end of file diff --git a/tests/test_examples.py b/tests/test_examples.py index df8ba50..270afe3 100644 --- a/tests/test_examples.py +++ b/tests/test_examples.py @@ -33,7 +33,8 @@ ] EXAMPLES = [ - "hello_world" + "hello_world", + "dna", ] TEST_PARAMS = { @@ -42,6 +43,11 @@ "pattern": "\\d+:\\d+:\\d+", "title": "PyScript Hello World", }, + "dna":{ + "file":"/dna/index.html", + "pattern":"Get Result", + "title": "dna", + } }