diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/404/404.html b/404/404.html new file mode 100644 index 0000000..0fa23cc --- /dev/null +++ b/404/404.html @@ -0,0 +1,469 @@ + + + + + + + 404 + + + +

404

+ +

+ + diff --git a/README.md b/README.md index 2719832..d0584ff 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,9 @@ # Trade and Code -> Components for Trade and Code event platform + +## Components for Trade and Code event platform + +--- + +![LOGO](transparentLogo.png "Trade and Code Logo") + +--- diff --git a/competitionStarted/started.css b/competitionStarted/started.css new file mode 100644 index 0000000..b6c7ceb --- /dev/null +++ b/competitionStarted/started.css @@ -0,0 +1,48 @@ +@import url("https://fonts.googleapis.com/css?family=Press+Start+2P"); +html, +body { + width: 100%; + height: 100%; + margin: 0; +} + +* { + font-family: "Press Start 2P", cursive; + box-sizing: border-box; +} + +#app { + padding: 1rem; + background: black; + display: flex; + height: 100%; + justify-content: center; + align-items: center; + color: cyan; + text-shadow: 0px 0px 10px; + font-size: 5rem; + flex-direction: column; +} +#app .txt { + font-size: 1.8rem; +} + +@keyframes blink { + 0% { + opacity: 0; + } + 49% { + opacity: 0; + } + 50% { + opacity: 1; + } + 100% { + opacity: 1; + } +} +.blink { + animation-name: blink; + animation-duration: 1s; + animation-iteration-count: infinite; +} diff --git a/competitionStarted/started.html b/competitionStarted/started.html new file mode 100644 index 0000000..f475900 --- /dev/null +++ b/competitionStarted/started.html @@ -0,0 +1,19 @@ + + + + + + + 403 + + + +

Access Denied

+
+

+ Competition Started Already_ +

+ + diff --git a/customCursor/cursor.js b/customCursor/cursor.js new file mode 100644 index 0000000..3f7fb8b --- /dev/null +++ b/customCursor/cursor.js @@ -0,0 +1,5 @@ +new kursor({ + type: 1, + removeDefaultCursor: true, + color: "#fff" +}) \ No newline at end of file diff --git a/homeScreen/home.html b/homeScreen/home.html index bb744cc..f3689ce 100644 --- a/homeScreen/home.html +++ b/homeScreen/home.html @@ -19,11 +19,14 @@ href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" /> + + - + +

Welcome

Contact Details-

+ diff --git a/index.html b/index.html new file mode 100644 index 0000000..48329e3 --- /dev/null +++ b/index.html @@ -0,0 +1,79 @@ + + + + + + + WebPage + + + +

Trade and Code

+ Pages published at: + https://abstrxtinfinity.github.io/TradeandCodeFrontendComponents/ +

+ Add the path of the .html file separated by '/ ' in the above link to + see the page. +
+ For example: The link to home page will be - + https://abstrxtinfinity.github.io/TradeandCodeFrontendComponents/homeScreen/home.html +

+ + diff --git a/logOutPage/logout.css b/logOutPage/logout.css new file mode 100644 index 0000000..74c5cb4 --- /dev/null +++ b/logOutPage/logout.css @@ -0,0 +1,669 @@ +body { + margin: 0; + font-size: 20px; +} + +* { + box-sizing: border-box; +} + +.container { + position: relative; + display: flex; + align-items: center; + justify-content: center; + height: 100vh; + background: white; + color: black; + font-family: arial, sans-serif; + overflow: hidden; +} + +.content { + position: relative; + width: 600px; + max-width: 100%; + margin: 20px; + background: white; + padding: 60px 40px; + text-align: center; + box-shadow: -10px 10px 67px -12px rgba(0, 0, 0, 0.2); + opacity: 0; + animation: apparition 0.5s 1.2s cubic-bezier(0.39, 0.575, 0.28, 0.995) + forwards; +} +.content p { + font-size: 1.3rem; + margin-top: 0; + margin-bottom: 0.6rem; + letter-spacing: 0.1rem; + color: #595959; +} +.content p:last-child { + margin-bottom: 0; +} +.content button { + display: inline-block; + margin-top: 2rem; + padding: 0.5rem 1rem; + border: 3px solid #595959; + background: transparent; + font-size: 1rem; + color: #595959; + text-decoration: none; + cursor: pointer; + font-weight: bold; +} + +.particle { + position: absolute; + display: block; + pointer-events: none; +} +.particle:nth-child(1) { + top: 79.704797048%; + left: 14.8075024679%; + font-size: 13px; + filter: blur(0.02px); + animation: 25s float infinite; +} +.particle:nth-child(2) { + top: 56.3106796117%; + left: 36.1328125%; + font-size: 24px; + filter: blur(0.04px); + animation: 23s float2 infinite; +} +.particle:nth-child(3) { + top: 84.7290640394%; + left: 6.9169960474%; + font-size: 12px; + filter: blur(0.06px); + animation: 36s floatReverse infinite; +} +.particle:nth-child(4) { + top: 64.3902439024%; + left: 27.4509803922%; + font-size: 20px; + filter: blur(0.08px); + animation: 34s floatReverse infinite; +} +.particle:nth-child(5) { + top: 25.6473489519%; + left: 82.096933729%; + font-size: 11px; + filter: blur(0.1px); + animation: 24s float infinite; +} +.particle:nth-child(6) { + top: 35.8787878788%; + left: 63.4146341463%; + font-size: 25px; + filter: blur(0.12px); + animation: 27s floatReverse2 infinite; +} +.particle:nth-child(7) { + top: 32.8899637243%; + left: 91.5287244401%; + font-size: 27px; + filter: blur(0.14px); + animation: 29s floatReverse infinite; +} +.particle:nth-child(8) { + top: 54.3689320388%; + left: 60.546875%; + font-size: 24px; + filter: blur(0.16px); + animation: 26s float infinite; +} +.particle:nth-child(9) { + top: 80.9638554217%; + left: 81.5533980583%; + font-size: 30px; + filter: blur(0.18px); + animation: 27s float2 infinite; +} +.particle:nth-child(10) { + top: 73.7100737101%; + left: 71.0059171598%; + font-size: 14px; + filter: blur(0.2px); + animation: 23s float infinite; +} +.particle:nth-child(11) { + top: 21.5950920245%; + left: 88.6699507389%; + font-size: 15px; + filter: blur(0.22px); + animation: 39s floatReverse infinite; +} +.particle:nth-child(12) { + top: 77.5757575758%; + left: 61.4634146341%; + font-size: 25px; + filter: blur(0.24px); + animation: 30s float2 infinite; +} +.particle:nth-child(13) { + top: 20.6134969325%; + left: 0.9852216749%; + font-size: 15px; + filter: blur(0.26px); + animation: 36s float2 infinite; +} +.particle:nth-child(14) { + top: 2.9411764706%; + left: 92.5196850394%; + font-size: 16px; + filter: blur(0.28px); + animation: 27s float2 infinite; +} +.particle:nth-child(15) { + top: 85.2300242131%; + left: 44.8343079922%; + font-size: 26px; + filter: blur(0.3px); + animation: 27s floatReverse2 infinite; +} +.particle:nth-child(16) { + top: 17.7558569667%; + left: 5.9347181009%; + font-size: 11px; + filter: blur(0.32px); + animation: 34s float2 infinite; +} +.particle:nth-child(17) { + top: 67.4698795181%; + left: 65.0485436893%; + font-size: 30px; + filter: blur(0.34px); + animation: 35s floatReverse2 infinite; +} +.particle:nth-child(18) { + top: 2.9197080292%; + left: 45.988258317%; + font-size: 22px; + filter: blur(0.36px); + animation: 26s float infinite; +} +.particle:nth-child(19) { + top: 64.656212304%; + left: 58.3090379009%; + font-size: 29px; + filter: blur(0.38px); + animation: 35s floatReverse2 infinite; +} +.particle:nth-child(20) { + top: 21.6216216216%; + left: 24.6548323471%; + font-size: 14px; + filter: blur(0.4px); + animation: 28s floatReverse2 infinite; +} +.particle:nth-child(21) { + top: 8.7804878049%; + left: 27.4509803922%; + font-size: 20px; + filter: blur(0.42px); + animation: 37s floatReverse2 infinite; +} +.particle:nth-child(22) { + top: 18.5365853659%; + left: 47.0588235294%; + font-size: 20px; + filter: blur(0.44px); + animation: 34s floatReverse2 infinite; +} +.particle:nth-child(23) { + top: 81.8742293465%; + left: 68.2492581602%; + font-size: 11px; + filter: blur(0.46px); + animation: 28s float2 infinite; +} +.particle:nth-child(24) { + top: 38.3292383292%; + left: 82.8402366864%; + font-size: 14px; + filter: blur(0.48px); + animation: 24s floatReverse2 infinite; +} +.particle:nth-child(25) { + top: 31.3725490196%; + left: 16.7322834646%; + font-size: 16px; + filter: blur(0.5px); + animation: 29s floatReverse2 infinite; +} +.particle:nth-child(26) { + top: 33.2518337408%; + left: 96.2671905697%; + font-size: 18px; + filter: blur(0.52px); + animation: 21s floatReverse infinite; +} +.particle:nth-child(27) { + top: 69.5226438188%; + left: 72.7630285152%; + font-size: 17px; + filter: blur(0.54px); + animation: 24s floatReverse2 infinite; +} +.particle:nth-child(28) { + top: 56.157635468%; + left: 92.8853754941%; + font-size: 12px; + filter: blur(0.56px); + animation: 28s floatReverse2 infinite; +} +.particle:nth-child(29) { + top: 10.6666666667%; + left: 83.9024390244%; + font-size: 25px; + filter: blur(0.58px); + animation: 23s floatReverse2 infinite; +} +.particle:nth-child(30) { + top: 69.7788697789%; + left: 61.1439842209%; + font-size: 14px; + filter: blur(0.6px); + animation: 39s floatReverse2 infinite; +} +.particle:nth-child(31) { + top: 34.7406513872%; + left: 41.788143829%; + font-size: 29px; + filter: blur(0.62px); + animation: 27s float infinite; +} +.particle:nth-child(32) { + top: 91.8984280532%; + left: 44.7906523856%; + font-size: 27px; + filter: blur(0.64px); + animation: 31s float infinite; +} +.particle:nth-child(33) { + top: 12.8078817734%; + left: 17.7865612648%; + font-size: 12px; + filter: blur(0.66px); + animation: 28s float2 infinite; +} +.particle:nth-child(34) { + top: 39.457459926%; + left: 21.7606330366%; + font-size: 11px; + filter: blur(0.68px); + animation: 29s floatReverse infinite; +} +.particle:nth-child(35) { + top: 85.6447688564%; + left: 52.8375733855%; + font-size: 22px; + filter: blur(0.7px); + animation: 21s float infinite; +} +.particle:nth-child(36) { + top: 72.3763570567%; + left: 8.7463556851%; + font-size: 29px; + filter: blur(0.72px); + animation: 22s floatReverse2 infinite; +} +.particle:nth-child(37) { + top: 0.9732360097%; + left: 94.9119373777%; + font-size: 22px; + filter: blur(0.74px); + animation: 33s float2 infinite; +} +.particle:nth-child(38) { + top: 97.5609756098%; + left: 7.8431372549%; + font-size: 20px; + filter: blur(0.76px); + animation: 28s float2 infinite; +} +.particle:nth-child(39) { + top: 41.696969697%; + left: 42.9268292683%; + font-size: 25px; + filter: blur(0.78px); + animation: 35s floatReverse infinite; +} +.particle:nth-child(40) { + top: 84.0048840049%; + left: 69.6761530913%; + font-size: 19px; + filter: blur(0.8px); + animation: 28s float2 infinite; +} +.particle:nth-child(41) { + top: 63.1319358816%; + left: 94.9554896142%; + font-size: 11px; + filter: blur(0.82px); + animation: 30s float infinite; +} +.particle:nth-child(42) { + top: 95.3771289538%; + left: 15.6555772994%; + font-size: 22px; + filter: blur(0.84px); + animation: 39s floatReverse2 infinite; +} +.particle:nth-child(43) { + top: 92.7250308261%; + left: 79.1295746785%; + font-size: 11px; + filter: blur(0.86px); + animation: 31s floatReverse infinite; +} +.particle:nth-child(44) { + top: 8.7804878049%; + left: 73.5294117647%; + font-size: 20px; + filter: blur(0.88px); + animation: 25s float infinite; +} +.particle:nth-child(45) { + top: 22.6880394575%; + left: 31.6518298714%; + font-size: 11px; + filter: blur(0.9px); + animation: 30s float infinite; +} +.particle:nth-child(46) { + top: 46.6019417476%; + left: 92.7734375%; + font-size: 24px; + filter: blur(0.92px); + animation: 28s float2 infinite; +} +.particle:nth-child(47) { + top: 93.4939759036%; + left: 64.0776699029%; + font-size: 30px; + filter: blur(0.94px); + animation: 37s float infinite; +} +.particle:nth-child(48) { + top: 94.2891859052%; + left: 80.156402737%; + font-size: 23px; + filter: blur(0.96px); + animation: 32s float2 infinite; +} +.particle:nth-child(49) { + top: 20.5378973105%; + left: 25.5402750491%; + font-size: 18px; + filter: blur(0.98px); + animation: 26s float2 infinite; +} +.particle:nth-child(50) { + top: 0.9732360097%; + left: 55.7729941292%; + font-size: 22px; + filter: blur(1px); + animation: 33s floatReverse2 infinite; +} +.particle:nth-child(51) { + top: 66.1800486618%; + left: 76.3209393346%; + font-size: 22px; + filter: blur(1.02px); + animation: 37s floatReverse infinite; +} +.particle:nth-child(52) { + top: 96.1963190184%; + left: 43.3497536946%; + font-size: 15px; + filter: blur(1.04px); + animation: 24s float2 infinite; +} +.particle:nth-child(53) { + top: 94.5717732207%; + left: 65.1117589893%; + font-size: 29px; + filter: blur(1.06px); + animation: 40s floatReverse2 infinite; +} +.particle:nth-child(54) { + top: 54.501216545%; + left: 15.6555772994%; + font-size: 22px; + filter: blur(1.08px); + animation: 36s float2 infinite; +} +.particle:nth-child(55) { + top: 55.0368550369%; + left: 28.5996055227%; + font-size: 14px; + filter: blur(1.1px); + animation: 28s float infinite; +} +.particle:nth-child(56) { + top: 79.6068796069%; + left: 44.3786982249%; + font-size: 14px; + filter: blur(1.12px); + animation: 32s float infinite; +} +.particle:nth-child(57) { + top: 28.2238442822%; + left: 25.4403131115%; + font-size: 22px; + filter: blur(1.14px); + animation: 35s floatReverse2 infinite; +} +.particle:nth-child(58) { + top: 96.3503649635%; + left: 14.6771037182%; + font-size: 22px; + filter: blur(1.16px); + animation: 39s float infinite; +} +.particle:nth-child(59) { + top: 40.0488400488%; + left: 73.6015701668%; + font-size: 19px; + filter: blur(1.18px); + animation: 28s float infinite; +} +.particle:nth-child(60) { + top: 52.427184466%; + left: 82.03125%; + font-size: 24px; + filter: blur(1.2px); + animation: 32s floatReverse2 infinite; +} +.particle:nth-child(61) { + top: 59.0799031477%; + left: 55.5555555556%; + font-size: 26px; + filter: blur(1.22px); + animation: 38s floatReverse infinite; +} +.particle:nth-child(62) { + top: 60.3406326034%; + left: 70.4500978474%; + font-size: 22px; + filter: blur(1.24px); + animation: 23s float infinite; +} +.particle:nth-child(63) { + top: 25.4278728606%; + left: 46.1689587426%; + font-size: 18px; + filter: blur(1.26px); + animation: 21s floatReverse infinite; +} +.particle:nth-child(64) { + top: 14.6163215591%; + left: 27.4240940255%; + font-size: 21px; + filter: blur(1.28px); + animation: 28s floatReverse infinite; +} +.particle:nth-child(65) { + top: 37.6357056695%; + left: 60.2526724976%; + font-size: 29px; + filter: blur(1.3px); + animation: 38s floatReverse infinite; +} +.particle:nth-child(66) { + top: 60.1726263872%; + left: 26.706231454%; + font-size: 11px; + filter: blur(1.32px); + animation: 36s float2 infinite; +} +.particle:nth-child(67) { + top: 8.8452088452%; + left: 98.6193293886%; + font-size: 14px; + filter: blur(1.34px); + animation: 35s floatReverse infinite; +} +.particle:nth-child(68) { + top: 10.6024096386%; + left: 91.2621359223%; + font-size: 30px; + filter: blur(1.36px); + animation: 28s floatReverse infinite; +} +.particle:nth-child(69) { + top: 87.5912408759%; + left: 6.8493150685%; + font-size: 22px; + filter: blur(1.38px); + animation: 27s floatReverse2 infinite; +} +.particle:nth-child(70) { + top: 13.6253041363%; + left: 34.2465753425%; + font-size: 22px; + filter: blur(1.4px); + animation: 27s float2 infinite; +} +.particle:nth-child(71) { + top: 86.8064118372%; + left: 46.4886251236%; + font-size: 11px; + filter: blur(1.42px); + animation: 25s float infinite; +} +.particle:nth-child(72) { + top: 97.0873786408%; + left: 23.4375%; + font-size: 24px; + filter: blur(1.44px); + animation: 25s float infinite; +} +.particle:nth-child(73) { + top: 93.137254902%; + left: 49.2125984252%; + font-size: 16px; + filter: blur(1.46px); + animation: 30s float infinite; +} +.particle:nth-child(74) { + top: 29.5566502463%; + left: 84.9802371542%; + font-size: 12px; + filter: blur(1.48px); + animation: 38s floatReverse infinite; +} +.particle:nth-child(75) { + top: 83.0917874396%; + left: 62.2568093385%; + font-size: 28px; + filter: blur(1.5px); + animation: 27s floatReverse infinite; +} +.particle:nth-child(76) { + top: 4.9321824908%; + left: 67.2601384768%; + font-size: 11px; + filter: blur(1.52px); + animation: 22s float infinite; +} +.particle:nth-child(77) { + top: 95.9608323133%; + left: 55.063913471%; + font-size: 17px; + filter: blur(1.54px); + animation: 33s float infinite; +} +.particle:nth-child(78) { + top: 17.7558569667%; + left: 90.9990108803%; + font-size: 11px; + filter: blur(1.56px); + animation: 34s floatReverse2 infinite; +} +.particle:nth-child(79) { + top: 90.0726392252%; + left: 96.4912280702%; + font-size: 26px; + filter: blur(1.58px); + animation: 22s float2 infinite; +} +.particle:nth-child(80) { + top: 13.7254901961%; + left: 16.7322834646%; + font-size: 16px; + filter: blur(1.6px); + animation: 22s float2 infinite; +} + +@keyframes apparition { + from { + opacity: 0; + transform: translateY(100px); + } + to { + opacity: 1; + transform: translateY(0); + } +} +@keyframes float { + 0%, + 100% { + transform: translateY(0); + } + 50% { + transform: translateY(180px); + } +} +@keyframes floatReverse { + 0%, + 100% { + transform: translateY(0); + } + 50% { + transform: translateY(-180px); + } +} +@keyframes float2 { + 0%, + 100% { + transform: translateY(0); + } + 50% { + transform: translateY(28px); + } +} +@keyframes floatReverse2 { + 0%, + 100% { + transform: translateY(0); + } + 50% { + transform: translateY(-28px); + } +} diff --git a/logOutPage/logout.html b/logOutPage/logout.html new file mode 100644 index 0000000..a0cee5f --- /dev/null +++ b/logOutPage/logout.html @@ -0,0 +1,128 @@ + + + + + + + Logged out + + + +

+ L + L + L + L + L + L + L + L + L + L + O + O + O + O + O + O + O + O + O + O + O + O + O + O + O + O + O + O + O + O + O + O + O + O + O + O + O + O + O + O + G + G + G + G + G + G + G + G + G + G + G + G + G + G + G + G + G + G + G + G + E + E + E + E + E + E + E + E + E + E + D + D + D + D + D + D + D + D + D + D + U + U + U + U + U + U + U + U + U + U + T + T + T + T + T + T + T + T + T + T +

Damnit,

You logged out.

+ +

+ + + + diff --git a/questionScreen/drop.js b/questionScreen/drop.js index e2cbd3d..d3b7207 100644 --- a/questionScreen/drop.js +++ b/questionScreen/drop.js @@ -28,3 +28,5 @@ const upload = (pdf) => { dropArea.setAttribute("class", "upload valid"); dropArea.innerText = "Added " + pdf.name; }; + + diff --git a/questionScreen/question.css b/questionScreen/newQuestion.css similarity index 74% rename from questionScreen/question.css rename to questionScreen/newQuestion.css index eb07233..c64e86b 100644 --- a/questionScreen/question.css +++ b/questionScreen/newQuestion.css @@ -10,7 +10,7 @@ html { font-family: Arial; font-size: 16px; - background: #01011d; + background: rgb(21, 73, 73); } body { @@ -19,7 +19,6 @@ body { padding: 0; font-weight: 300; line-height: 1.75; - color: #444; overflow: hidden; display: flex; flex-direction: column; @@ -44,7 +43,7 @@ body { flex-direction: column; width: 50px; height: 50px; - background-color: rgb(12, 206, 206); + background-color: rgb(47, 170, 170); border-radius: 50%; -webkit-transition: -webkit-transform 250ms ease; transition: -webkit-transform 250ms ease; @@ -139,7 +138,7 @@ body { height: 100vh; margin: 0; padding: 0; - background-color: #040425; + background-color: #1c7a73; font-size: 0.8em; -webkit-transition: left 500ms ease; transition: left 500ms ease; @@ -197,129 +196,72 @@ body { linear, left top, right top, - from(#5e42a6), - to(#b74e91) + from(#01d5f1), + to(#057ca0) ); - background-image: linear-gradient(to right, #5e42a6, #b74e91); + background-image: linear-gradient(to right, from(#01d5f1), to(#057ca0)); } section { transition: ease-in-out 0.5s; width: 80%; margin: 0 auto; - margin-top: 40px; + margin-top: 20px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; } main { position: relative; display: flex; flex-direction: column; - width: 100%; + width: 80%; max-height: 10%; padding: 80px 60px; z-index: 0; + margin: 0 auto; + margin-top: 40px; + box-shadow: inset 5px 5px 5px #0000006b, inset -5px -5px 15px #00eeff7f, + 5px 5px 5px #0000006b, -5px -5px 15px #00eeff7f; + border-radius: 10px; } ::-webkit-scrollbar { width: 0; } .question { - width: 80%; - margin-top: 40px; - margin: 0 auto; - padding: 30px; font-size: 1.5em; color: #fff; overflow-y: scroll; - border: 1px solid #fff; - border-radius: 10px; } -.color { +.btn-container { + width: 60%; position: absolute; - filter: blur(150px); - width: 200px; - height: 200px; -} -.color:nth-child(1) { - top: -100px; - right: -100px; - width: 300px; - height: 200px; - background: #5e42a6; -} - -.color:nth-child(2) { - bottom: -300px; - right: -60px; - width: 300px; - height: 300px; - background: #5e42a6; -} - -.color:nth-child(3) { - bottom: -400px; - left: 60px; - width: 200px; - height: 200px; - background: #5e42a6; -} -.bar { + bottom: 10px; display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; - width: 80%; + justify-content: flex-end; margin: 0 auto; - margin-top: 50px; -} -.bar .upload { - color: grey; - border: 1px dashed grey; - padding: 6.5px 60px; - width: 75%; - justify-content: center; - align-items: center; - font-size: 18px; - text-transform: uppercase; - display: flex; - flex-direction: row; - margin-right: 10px; -} - -.bar .onHover { - color: #fff; - border: 1px dotted #fff; -} -.bar .valid { - color: cyan; - border: 1px solid cyan; -} -.bar .invalid { - color: red; - border: 1px dashed red; + padding: 0 30px; } - -.bar .btn { - display: flex; - padding: 10px 60px; - width: 100px; - justify-content: center; - align-items: center; - background-color: transparent; - border: 2px solid white; - outline: 1px solid #fff; - outline-offset: -1px; +.btn { + width: 400px; + height: 5ch; + margin-bottom: 20px; + font-size: 1.2em; + cursor: pointer; + background: transparent; + outline: none; + border: none; color: #fff; text-transform: uppercase; - font-size: 18px; - cursor: pointer; - transition: outline-offset 0.1s; - transition: letter-spacing 0.2s; + letter-spacing: 0.1em; + transition: 0.5s; } .btn:hover { - outline-offset: 4px; - letter-spacing: 1px; + box-shadow: inset 5px 5px 5px #0000006b, inset -5px -5px 5px #00eeff7f, + 5px 5px 5px #0000006b, -5px -5px 5px #00eeff7f; } - @media screen and (max-width: 1024px) { ::-webkit-scrollbar { width: 0; @@ -340,13 +282,4 @@ main { font-size: 1.25em; margin-top: 40px; } - section main .bar { - display: flex; - flex-direction: column; - } - section main .bar .upload { - border-radius: 10px; - width: 100%; - margin-bottom: 30px; - } } diff --git a/questionScreen/newQuestionScreen.html b/questionScreen/newQuestionScreen.html new file mode 100644 index 0000000..6482a37 --- /dev/null +++ b/questionScreen/newQuestionScreen.html @@ -0,0 +1,349 @@ + + + + + + + Round + + + + + + +

Round {{ round.number }}

Problem Statement

+ Lorem ipsum elit. Alias doloribus accusamus vero quas nulla + veritatis blanditiis inventore debitis. Veniam suscipit magni rerum + officiis aspernatur corporis consequatur, odio sunt ea incidunt + dolorum aliquam laborum laudantium omnis autem tempore eius quasi + saepe molestiae magnam deleniti repellendus placeat vero. Vel quis + omnis nobis. +

Test - Input

10 20 30 40 50 60

Sample - Output

10 20 30 40 50 60

+ +

+ + diff --git a/questionScreen/question.html b/questionScreen/question.html index 4ee09bd..8d9c6e4 100644 --- a/questionScreen/question.html +++ b/questionScreen/question.html @@ -5,9 +5,574 @@ Solving.. - + - + +

+ @@ -23,12 +588,10 @@

Question 1.

Round {{ round.number }}

Problem Statement

Lorem ipsum elit. Alias doloribus accusamus vero quas nulla veritatis blanditiis inventore debitis. Veniam suscipit magni rerum @@ -37,52 +600,73 @@

Question 1.

saepe molestiae magnam deleniti repellendus placeat vero. Vel quis omnis nobis.

Test - Input

10 20 30 40 50 60

Sample - Output

10 20 30 40 50 60

- Upload your answer here -

+ + Select a file... - - - - - - + + +

- +

+ - + button.addEventListener("keydown", function (event) { + if (event.keyCode == 13 || event.keyCode == 32) { + fileInput.focus(); + } + }); + button.addEventListener("click", function (event) { + fileInput.focus(); + return false; + }); + fileInput.addEventListener("change", function (event) { + the_return.innerHTML = this.value.split(`\\`)[ + this.value.split(`\\`).length - 1 + ]; + }); + diff --git a/questionScreen/submissionScreen/submission.css b/questionScreen/submissionScreen/submission.css new file mode 100644 index 0000000..cc33da2 --- /dev/null +++ b/questionScreen/submissionScreen/submission.css @@ -0,0 +1,417 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: Helvetica, sans-serif; + font-weight: light; + -webkit-font-smoothing: antialiased; +} + +html { + background-color: rgb(17, 51, 51); + overflow-y: scroll; + overflow-x: hidden; +} + +::-webkit-scrollbar { + width: 8px; +} + +::-webkit-scrollbar-thumb { + background: linear-gradient(to bottom, transparent, #00bcd4); + border-bottom-left-radius: 10px; + border-bottom-right-radius: 10px; +} +header h1 { + font-size: 2.4em; + font-weight: 400; + letter-spacing: 0.2em; + text-transform: uppercase; + color: #fff; + text-align: center; +} +header { + margin-bottom: 50px; +} +section { + padding: 50px; + width: 100%; + height: 90vh; + flex-direction: column; + display: flex; + align-items: center; +} + +.form1 .question label, +.form1 .question input[type="number"] { + -moz-transition: all 0.25s cubic-bezier(0.53, 0.01, 0.35, 1.5); + -o-transition: all 0.25s cubic-bezier(0.53, 0.01, 0.35, 1.5); + -webkit-transition: all 0.25s cubic-bezier(0.53, 0.01, 0.35, 1.5); + transition: all 0.25s cubic-bezier(0.53, 0.01, 0.35, 1.5); +} + +.form1 h1 { + color: cyan; + font-weight: 100; + letter-spacing: 0.01em; + margin-left: 15px; + margin-bottom: 35px; + text-transform: uppercase; +} + +.form1 .question { + position: relative; + padding: 10px 0; +} + +.form1 .question:first-of-type { + padding-top: 0; +} + +.form1 .question:last-of-type { + padding-bottom: 0; +} + +.form1 .question label { + transform-origin: left center; + color: cyan; + font-weight: 100; + letter-spacing: 0.01em; + font-size: 17px; + box-sizing: border-box; + padding: 10px 15px; + display: block; + position: absolute; + margin-top: -40px; + z-index: 2; + pointer-events: none; +} + +.form1 .question input { + appearance: none; + background-color: transparent; + border: 1px solid cyan; + line-height: 0; + font-size: 17px; + width: 100%; + display: block; + box-sizing: border-box; + padding: 10px 15px; + border-radius: 60px; + font-weight: 100; + letter-spacing: 0.01em; + position: relative; + z-index: 1; + color: cyan; +} + +.form1 .question input:focus, +.form1 .question input:read-only { + letter-spacing: 0.2em; + outline: none; + background: rgba(0, 255, 255, 0.205); + color: white; + margin-top: 30px; +} + +.form1 .question input:valid { + margin-top: 30px; +} + +.form1 .question input:focus ~ label, +.form1 .question input:read-only ~ label { + -moz-transform: translate(0, -35px); + -ms-transform: translate(0, -35px); + -webkit-transform: translate(0, -35px); + transform: translate(0, -35px); +} + +.form1 .question input:valid ~ label, +.form1 .question input:read-only ~ label { + text-transform: uppercase; + font-style: italic; + -moz-transform: translate(5px, -35px) scale(0.6); + -ms-transform: translate(5px, -35px) scale(0.6); + -webkit-transform: translate(5px, -35px) scale(0.6); + transform: translate(5px, -35px) scale(0.6); +} + +p { + font-size: 14px; + text-align: center; + font-weight: 400; + text-transform: uppercase; + letter-spacing: 0.1em; + color: red; +} + +.logo { + top: 20px; + right: 50px; + position: absolute; + border-radius: 50%; + box-shadow: 0px 0px 20px #000; +} + +.logo img { + width: 200px; + height: 200px; +} + +.logo:hover { + box-shadow: 0px 0px 40px cyan; + transition: all 0.25s; +} + +@media screen and (max-width: 1024px) { + .logo img { + width: 150px; + height: 150px; + } +} + +@media screen and (max-width: 768px) { + .form1 { + max-width: 200px; + } + + .logo { + left: 40%; + } +} + +.container { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; +} + +/** Cards **/ + +.row1 { + padding: 20px; + width: 100%; + display: grid; + grid-template-columns: auto auto auto auto; + grid-gap: 40px; +} + +.card { + width: 100%; + max-width: 250px; + min-width: 250px; + min-height: 250px; + max-height: 300px; + background-color: transparent; + border-radius: 10px; + box-shadow: 0px 2px 5px cyan; + border: 1px solid cyan; + font-size: 16px; + position: relative; + display: flex; + flex-direction: column; + justify-content: center; + transition: all 0.3s ease-in-out; + padding: 30px 30px; +} + +.circle { + position: absolute; + width: 100%; + height: 100%; + right: 0; + top: 0; + border-radius: 10px; + clip-path: circle(53.5% at 0 100%); + background: rgba(128, 128, 128, 0.1); + transition: all 0.3s ease-in-out; +} + +.card .title { + width: 100%; + margin: 0 20px; + text-align: left; + margin-top: 30px; + color: white; + font-weight: 600; + letter-spacing: 0.2em; + text-transform: uppercase; +} + +.card .title span { + margin: 0 20px; + font-weight: 400; +} + +.card:hover .circle { + clip-path: circle(80% at 13% 100%); + background: rgba(0, 253, 253, 0.137); +} + +@media screen and (max-width: 1024px) { + .container { + display: flex; + flex-direction: column; + align-items: center; + } + + .row1 { + display: grid; + grid-template-columns: auto auto; + } + + .card { + width: 100%; + max-width: 200px; + min-width: 200px; + height: 250px; + margin: 10px; + border-radius: 10px; + box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.24); + border: 2px solid rgba(107, 107, 107, 0.384); + font-size: 16px; + position: relative; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + cursor: pointer; + transition: all 0.3s ease; + } + + .card .title { + width: 100%; + margin: 0; + text-align: center; + margin-top: 30px; + color: white; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 4px; + } + + .logo { + display: none; + } +} + +@media screen and (max-width: 768px) { + .row1 { + display: flex; + flex-direction: column; + } +} + +/* * Input */ +.input-file-container { + position: relative; + /* width: 250px; */ +} + +.js .input-file-trigger { + display: block; + padding: 14px 45px; + border: 1px solid cyan; + color: cyan; + font-size: 1em; + text-transform: uppercase; + letter-spacing: 0.1em; + transition: all 0.4s; + cursor: pointer; + transition: all 0.2s ease-in; +} + +.js .input-file { + position: absolute; + top: 0; + left: 0; + width: 250px; + opacity: 0; + padding: 14px 0; + cursor: pointer; + border-radius: 20px; +} + +.js .input-file:hover + .input-file-trigger, +.js .input-file:focus + .input-file-trigger, +.js .input-file-trigger:hover, +.js .input-file-trigger:focus { + color: white; + box-shadow: 0 0 20px 0 rgba(0, 199, 236, 0.5); + background-color: #00c8ecb2; + -webkit-transition: all 0.2s ease-out; + -moz-transition: all 0.2s ease-out; + transition: all 0.2s ease-out; +} + +.file-return { + margin: 0; +} + +.file-return:not(:empty) { + margin: 1em 0; +} + +.js .file-return { + font-style: italic; + font-size: 0.9em; + font-weight: bold; +} + +.js .file-return:not(:empty):before { + content: "Selected file: "; + font-style: normal; + font-weight: normal; +} + +button { + margin-top: 20px; + background-color: transparent; + border: 1px solid cyan; + line-height: 0; + font-size: 18px; + display: inline-block; + box-sizing: border-box; + padding: 20px 15px; + border-radius: 60px; + color: cyan; + font-weight: 200; + letter-spacing: 0.01em; + position: relative; + z-index: 1; + text-transform: uppercase; + letter-spacing: 0.1em; +} + +button:hover, +button:focus { + color: #fff; + box-shadow: 0 0 20px 0 rgba(0, 199, 236, 0.5); + background-color: #00c7ec; + -webkit-transition: all 0.2s ease-out; + -moz-transition: all 0.2s ease-out; + transition: all 0.2s ease-out; + outline: none; +} +.row2 { + width: 100%; + padding: 30px; + height: 30%; + display: flex; + justify-content: center; +} + +.row2 .button-group { + width: 30%; + height: 100%; + padding: 30px; + display: flex; + justify-content: center; + text-align: center; +} +.button-group .form2 { + width: 90%; +} diff --git a/questionScreen/submissionScreen/submission.html b/questionScreen/submissionScreen/submission.html new file mode 100644 index 0000000..0e0bff8 --- /dev/null +++ b/questionScreen/submissionScreen/submission.html @@ -0,0 +1,153 @@ + + + + + + + Submission + + + +

Submission

+ +

+ + + diff --git a/registerTeam/createTeam.html b/registerTeam/createTeam.html new file mode 100644 index 0000000..a67f7f9 --- /dev/null +++ b/registerTeam/createTeam.html @@ -0,0 +1,109 @@ + + + + + + + Create Team + + + +

+ +

+ + diff --git a/registerTeam/registerTeam.html b/registerTeam/registerTeam.html index 401673d..907e7ea 100644 --- a/registerTeam/registerTeam.html +++ b/registerTeam/registerTeam.html @@ -4,62 +4,157 @@ - Team Registration - - - -

Trade and Code

Event Team Registration

- Trade and Code is a team event (each team can have maximum 3 members) -

What will you do..?

+ + Create Team + + + +

- diff --git a/rounds/rounds.css b/rounds/rounds.css new file mode 100644 index 0000000..c447950 --- /dev/null +++ b/rounds/rounds.css @@ -0,0 +1,219 @@ +@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap"); + +* { + margin: 0; + padding: 0%; + box-sizing: border-box; + font-family: "Montserrat", sans-serif; +} + +body { + background-color: #000; + overflow: scroll; +} +::-webkit-scrollbar { + width: 0; +} + +section { + width: 100%; + height: 100%; +} +main { + width: 100%; + height: 90vh; + display: flex; + flex-direction: column; + align-items: center; + margin-top: 50px; +} +header h1 { + color: #fff; + text-transform: uppercase; + font-size: 2em; + letter-spacing: 0.3em; + font-weight: 400; + margin-bottom: 30px; + text-align: center; +} +hr { + border: 0; + height: 0; + border-top: 1px solid rgba(0, 0, 0, 0.1); + border-bottom: 1px solid rgba(255, 255, 255, 0.3); + margin-bottom: 30px; + width: 1000px; +} + +.container { + width: auto; + height: 100%; + display: grid; + grid-template-columns: auto auto; + grid-gap: 30px; + padding: 30px; +} + +.card { + width: 100%; + max-width: 500px; + min-width: 500px; + max-height: 200px; + background-color: black; + border-radius: 10px; + box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.24); + border: 2px solid rgba(107, 107, 107, 0.384); + font-size: 16px; + position: relative; + display: flex; + flex-direction: column; + justify-content: center; + transition: all 0.3s ease; + padding: 30px 30px; +} +.circle { + position: absolute; + width: 100%; + height: 100%; + right: 0; + top: 0; + border-radius: 10px; + clip-path: circle(34.7% at 100% 45%); + background: rgba(128, 128, 128, 0.1); +} + +.card .title { + width: 100%; + margin: 0 20px; + text-align: left; + margin-top: 30px; + color: white; + font-weight: 600; + letter-spacing: 0.2em; + text-transform: uppercase; +} +.card .title span { + margin: 0 20px; + font-weight: 400; +} + +.card .text { + width: 80%; + margin: 0 auto; + font-size: 13px; + margin-top: 20px; + color: white; + font-weight: 200; + letter-spacing: 2px; + opacity: 0; + max-height: 0; + transition: all 0.3s ease; + list-style: none; +} +.btn { + position: absolute; + bottom: 20px; + right: 40px; + width: 40px; + height: 50px; + border: 0; + padding: 10px; + border-radius: 50%; + background-color: rgb(48, 48, 48); + cursor: pointer; + visibility: hidden; + z-index: 2; + transition: all 0.1s; +} +.btn .fa { + color: #fff; +} + +.card:hover { + height: 270px; + background: #141313a9; +} + +.card:hover .info { + height: 90%; +} + +.card:hover .text { + transition: all 0.3s ease; + opacity: 1; + max-height: 40px; +} +.card:hover .btn { + visibility: visible; + cursor: pointer; +} +.btn:hover { + background: #000; + border: 1px solid #fff; +} + +@media screen and (max-width: 1024px) { + .container { + display: flex; + flex-direction: column; + align-items: center; + } + .card { + width: 100%; + max-width: 350px; + min-width: 350px; + height: 250px; + background-color: black; + margin: 10px; + border-radius: 10px; + box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.24); + border: 2px solid rgba(107, 107, 107, 0.384); + font-size: 16px; + position: relative; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + cursor: pointer; + transition: all 0.3s ease; + } + .card .title { + width: 100%; + margin: 0; + text-align: center; + margin-top: 30px; + color: white; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 4px; + } + + .card .text { + width: 80%; + margin: 0 auto; + font-size: 13px; + margin-top: 20px; + color: white; + font-weight: 200; + letter-spacing: 2px; + opacity: 0; + max-height: 0; + transition: all 0.3s ease; + list-style: none; + } + + .card:hover { + height: 270px; + background: #141313a9; + } + + .card:hover .info { + height: 90%; + } + + .card:hover .text { + transition: all 0.3s ease; + opacity: 1; + max-height: 40px; + } +} diff --git a/rounds/rounds.html b/rounds/rounds.html new file mode 100644 index 0000000..05a92a3 --- /dev/null +++ b/rounds/rounds.html @@ -0,0 +1,73 @@ + + + + + + + Round Details + + + + +

Round Details

Round 1 Details

Start Time: XX:XX hours

End Time: XX:XX hours
Round Duration: 1 hours

+ +

Round 1 Details

Start Time: XX:XX hours

End Time: XX:XX hours
Round Duration: 1 hours

+ +

Round 1 Details

Start Time: XX:XX hours

End Time: XX:XX hours
Round Duration: 1 hours

+ +

Round 1 Details

Start Time: XX:XX hours

End Time: XX:XX hours
Round Duration: 1 hours

+ +

+ + + +

+ + diff --git a/tradePortalPage/bh.gif b/tradePortalPage/bh.gif new file mode 100644 index 0000000..73edadd Binary files /dev/null and b/tradePortalPage/bh.gif differ diff --git a/tradePortalPage/portalS2/portal.css b/tradePortalPage/portalS2/portal.css new file mode 100644 index 0000000..20cdc43 --- /dev/null +++ b/tradePortalPage/portalS2/portal.css @@ -0,0 +1,338 @@ +.transition, +form button, +form .question label, +form .question input[type="text"] { + -moz-transition: all 0.25s cubic-bezier(0.53, 0.01, 0.35, 1.5); + -o-transition: all 0.25s cubic-bezier(0.53, 0.01, 0.35, 1.5); + -webkit-transition: all 0.25s cubic-bezier(0.53, 0.01, 0.35, 1.5); + transition: all 0.25s cubic-bezier(0.53, 0.01, 0.35, 1.5); +} + +* { + font-family: Helvetica, sans-serif; + font-weight: light; + -webkit-font-smoothing: antialiased; +} + +html { + background-color: rgb(17, 51, 51); + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + overflow-y: scroll; + overflow-x: hidden; +} +::-webkit-scrollbar { + width: 8px; +} +::-webkit-scrollbar-thumb { + background: linear-gradient(to bottom, transparent, #00bcd4); + border-bottom-left-radius: 10px; + border-bottom-right-radius: 10px; +} +form { + position: relative; + display: inline-block; + max-width: 700px; + min-width: 500px; + box-sizing: border-box; + padding: 30px 25px; + /* background-color: #000; */ + border-radius: 40px; + margin: 40px 0; + left: 50%; + border: 1px solid cyan; + box-shadow: 0px 0px 30px cyan; + -moz-transform: translate(-50%, 0); + -ms-transform: translate(-50%, 0); + -webkit-transform: translate(-50%, 0); + transform: translate(-50%, 5%); +} +form h1 { + color: cyan; + font-weight: 100; + letter-spacing: 0.01em; + margin-left: 15px; + margin-bottom: 35px; + text-transform: uppercase; +} +form button { + margin-top: 20px; + background-color: transparent; + border: 1px solid cyan; + line-height: 0; + font-size: 18px; + display: inline-block; + box-sizing: border-box; + padding: 20px 15px; + border-radius: 60px; + color: cyan; + font-weight: 200; + letter-spacing: 0.01em; + position: relative; + z-index: 1; + text-transform: uppercase; + letter-spacing: 0.1em; +} +form button:hover, +form button:focus { + color: #fff; + box-shadow: 0 0 20px 0 rgba(0, 199, 236, 0.5); + background-color: cyan; + -webkit-transition: all 0.2s ease-out; + -moz-transition: all 0.2s ease-out; + transition: all 0.2s ease-out; + outline: none; +} +form .question { + position: relative; + padding: 10px 0; +} +form .question:first-of-type { + padding-top: 0; +} +form .question:last-of-type { + padding-bottom: 0; +} +form .question label { + transform-origin: left center; + color: cyan; + font-weight: 100; + letter-spacing: 0.01em; + font-size: 17px; + box-sizing: border-box; + padding: 10px 15px; + display: block; + position: absolute; + margin-top: -40px; + z-index: 2; + pointer-events: none; +} +form .question input { + appearance: none; + background-color: transparent; + border: 1px solid cyan; + line-height: 0; + font-size: 17px; + width: 100%; + display: block; + box-sizing: border-box; + padding: 10px 15px; + border-radius: 60px; + font-weight: 100; + letter-spacing: 0.01em; + position: relative; + z-index: 1; + color: cyan; +} +form .question input:focus { + letter-spacing: 0.2em; + outline: none; + background: rgba(0, 255, 255, 0.205); + color: white; + margin-top: 30px; +} +form .question input:valid { + margin-top: 30px; +} +form .question input:focus ~ label { + -moz-transform: translate(0, -35px); + -ms-transform: translate(0, -35px); + -webkit-transform: translate(0, -35px); + transform: translate(0, -35px); +} +form .question input:valid ~ label { + text-transform: uppercase; + font-style: italic; + -moz-transform: translate(5px, -35px) scale(0.6); + -ms-transform: translate(5px, -35px) scale(0.6); + -webkit-transform: translate(5px, -35px) scale(0.6); + transform: translate(5px, -35px) scale(0.6); +} + +p { + font-size: 14px; + text-align: center; + font-weight: 400; + text-transform: uppercase; + letter-spacing: 0.1em; + color: red; +} + +.logo { + top: 20px; + left: 50px; + position: absolute; + border-radius: 50%; + box-shadow: 0px 0px 20px #000; +} +.logo img { + width: 200px; + height: 200px; +} +.logo:hover { + box-shadow: 0px 0px 40px cyan; + transition: all 0.25s; +} + +@media screen and (max-width: 1024px) { + .logo img { + width: 150px; + height: 150px; + } +} +@media screen and (max-width: 768px) { + form { + min-width: 400px; + } + .logo { + left: 40%; + } +} + +/** Cards **/ + +.row { + width: 80%; + margin-top: 50px; + margin-bottom: 40px; + padding: 0 30px; + display: grid; + grid-template-columns: auto auto auto auto; + grid-gap: 40px; +} +.card { + width: 100%; + max-width: 200px; + min-width: 200px; + min-height: 250px; + background-color: transparent; + border-radius: 10px; + box-shadow: 0px 2px 5px cyan; + border: 1px solid cyan; + font-size: 16px; + position: relative; + display: flex; + flex-direction: column; + justify-content: center; + transition: all 0.3s ease-in-out; + padding: 30px 30px; +} +.circle { + position: absolute; + width: 100%; + height: 100%; + right: 0; + top: 0; + border-radius: 10px; + clip-path: circle(53.5% at 0 100%); + background: rgba(128, 128, 128, 0.1); + transition: all 0.3s ease-in-out; +} + +.card .title { + width: 100%; + margin: 0 20px; + text-align: left; + margin-top: 30px; + color: white; + font-weight: 600; + letter-spacing: 0.2em; + text-transform: uppercase; +} +.card .title span { + margin: 0 20px; + font-weight: 400; +} + +.card .text { + width: 80%; + margin: 0 auto; + font-size: 18px; + margin-top: 20px; + color: white; + font-weight: 200; + letter-spacing: 2px; + text-transform: uppercase; + opacity: 0; + max-height: 0; + transition: all 0.3s ease; + list-style: none; +} +.text span { + font-weight: 700; + font-size: 20px; +} +.card:hover .text { + opacity: 1; +} + +.card:hover .circle { + clip-path: circle(80% at 13% 100%); + background: rgba(0, 253, 253, 0.137); +} +@media screen and (max-width: 1024px) { + .container { + display: flex; + flex-direction: column; + align-items: center; + } + .row { + display: grid; + grid-template-columns: auto auto; + } + + .card { + width: 100%; + max-width: 200px; + min-width: 200px; + height: 250px; + margin: 10px; + border-radius: 10px; + box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.24); + border: 2px solid rgba(107, 107, 107, 0.384); + font-size: 16px; + position: relative; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + cursor: pointer; + transition: all 0.3s ease; + } + .card .title { + width: 100%; + margin: 0; + text-align: center; + margin-top: 30px; + color: white; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 4px; + } + + .card .text { + width: 80%; + margin: 0 auto; + font-size: 13px; + margin-top: 20px; + color: white; + font-weight: 200; + letter-spacing: 2px; + opacity: 0; + max-height: 0; + transition: all 0.3s ease; + list-style: none; + } + .logo { + display: none; + } +} + +@media screen and (max-width: 768px) { + .row { + display: flex; + flex-direction: column; + } +} diff --git a/tradePortalPage/portalS2/portal.html b/tradePortalPage/portalS2/portal.html new file mode 100644 index 0000000..2e193a5 --- /dev/null +++ b/tradePortalPage/portalS2/portal.html @@ -0,0 +1,73 @@ + + + + + + + Trade Portal + + + +

+ +

Component Name

Qty. 2x

Set Price: 200$

Component Name

Qty. 2x

Set Price: 200$

Component Name

Qty. 2x

Set Price: 200$

Component Name

Qty. 2x

Set Price: 200$

+ +

+ + diff --git a/tradePortalPage/tradWall/wall.css b/tradePortalPage/tradWall/wall.css new file mode 100644 index 0000000..68aae39 --- /dev/null +++ b/tradePortalPage/tradWall/wall.css @@ -0,0 +1,114 @@ +body { + font-family: monospace; + background: rgb(10, 58, 58); +} + +.container { + max-width: 1000px; + margin-top: 60px; + margin-left: auto; + margin-right: auto; + padding-left: 10px; + padding-right: 10px; +} + +h2 { + font-size: 2.5em; + text-transform: uppercase; + font-weight: 400; + letter-spacing: 0.2em; + margin: 20px 0; + text-align: center; + color: #fff; +} + +.responsive-table li { + border-radius: 100px; + border: 1px solid #fff; + padding: 25px 30px; + display: flex; + justify-content: space-between; + margin-bottom: 15px; + font-size: 18px; + color: #fff; +} +.responsive-table .table-header { + background-color: rgba(0, 255, 255, 0.822); + font-size: 18px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.03em; + animation: blink 4s infinite; + animation-delay: 1s; +} +@keyframes blink { + 0% { + background-color: transparent; + } + 50% { + background-color: rgba(0, 255, 255, 0.822); + } + 100% { + background-color: transparent; + } +} +.responsive-table .table-row { + background-color: #00000049; + box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.1); +} +.responsive-table .col-1 { + flex-basis: 10%; +} +.responsive-table .col-2 { + flex-basis: 40%; +} +.responsive-table .col-3 { + flex-basis: 25%; +} +.responsive-table .col-4 { + flex-basis: 25%; +} + +.btn { + font-family: arial; + font-weight: bold; + color: #ffffff !important; + font-size: 20px; + border-radius: 50px; + padding: 5px 10px; + border: 0; + background: transparent; + transition: all 0.3s; + outline: none; + cursor: pointer; +} +.btn:hover { + background: #00e5ed93; +} + +@media all and (max-width: 767px) { + .responsive-table .table-header { + display: none; + } + .responsive-table li { + display: block; + border: 0; + border-radius: 10px; + } + .responsive-table .col { + flex-basis: 100%; + } + .responsive-table .col { + display: flex; + padding: 10px 0; + } + .responsive-table .col:before { + color: #ffffff; + padding-right: 10px; + font-size: 20px; + text-transform: uppercase; + content: attr(data-label); + flex-basis: 50%; + text-align: right; + } +} diff --git a/tradePortalPage/tradWall/wall.html b/tradePortalPage/tradWall/wall.html new file mode 100644 index 0000000..4739e93 --- /dev/null +++ b/tradePortalPage/tradWall/wall.html @@ -0,0 +1,41 @@ + + + + + + + Trade Wall + + + +

Open Trades

+
S no.
+
Component On Sale
+
Amt./component
+
+
+
1
+
if else
+
100
+
+ +
+
+
2
+
+ Vector Library +
+
600
+
+ +
+

+ + diff --git a/tradePortalPage/trade.css b/tradePortalPage/trade.css new file mode 100644 index 0000000..ab03d9d --- /dev/null +++ b/tradePortalPage/trade.css @@ -0,0 +1,136 @@ +@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap"); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Montserrat", sans-serif; +} +body { + background: #000; + overflow: hidden; +} + +section { + width: 100%; + height: 100vh; + display: flex; + position: relative; +} + +.container { + margin: 5%; + width: 90%; + height: 90%; + display: flex; + position: relative; + flex-direction: column; + align-items: center; + color: #fff; +} +.container h1 { + color: #fff; + font-size: 2.5em; + font-weight: 400; + letter-spacing: 0.3em; + text-transform: uppercase; + margin: 30px 0; +} +form { + width: 100%; + display: flex; + justify-content: center; +} +@import url("https://rsms.me/inter/inter.css"); +:root { + --color-background: var(--color-light); + --color-text: var(--color-dark); + --color-accent: var(--color-signal); + --size-bezel: 0.5rem; + --size-radius: 4px; + line-height: 1.4; + font-family: "Inter", sans-serif; + font-size: calc(0.6rem + 0.4vw); +} + +form h2 { + font-weight: 400; +} + +.card { + width: 600px; + background: #000; + padding: calc(4 * var(--size-bezel)); + margin-top: calc(4 * var(--size-bezel)); + border-radius: var(--size-radius); + border: 1px solid var(--color-shadow, cyan); + box-shadow: 0.5rem 0.5rem 0 var(--color-shadow, rgba(40, 196, 196, 0.651)); +} + +.input { + position: relative; +} +.input__label { + position: absolute; + left: 0; + top: 0; + padding: calc(var(--size-bezel) * 0.75) calc(var(--size-bezel) * 0.5); + margin: calc(var(--size-bezel) * 0.75 + 3px) calc(var(--size-bezel) * 0.5); + white-space: nowrap; + transform: translate(0, 0); + transform-origin: 0 0; + background: #000; + color: rgb(180, 180, 180); + + transition: transform 120ms ease-in; + text-transform: uppercase; + line-height: 1.2; +} +.input__field { + box-sizing: border-box; + display: block; + width: 100%; + border: 2px solid currentColor; + padding: calc(var(--size-bezel) * 1.5) var(--size-bezel); + color: rgb(70, 70, 70); + background: transparent; + border-radius: var(--size-radius); +} +.input__field:not(:-moz-placeholder-shown) + .input__label { + transform: translate(0.25rem, -65%) scale(0.8); + color: cyan; +} +.input__field:not(:-ms-input-placeholder) + .input__label { + transform: translate(0.25rem, -65%) scale(0.8); + color: cyan; +} +.input__field:focus + .input__label, +.input__field:not(:placeholder-shown) + .input__label { + transform: translate(0.25rem, -65%) scale(0.8); + color: cyan; +} + +.card .button-group { + margin-top: 30px; +} + +button { + color: #fff; + padding: 8px 12px; + background: rgb(87, 86, 86); + border: none; + border-radius: 4px; + font-weight: 600; + text-transform: uppercase; + cursor: pointer; +} +button:hover { + box-shadow: 0 0 20px 0 rgba(0, 199, 236, 0.5); + background-color: #00c8ecb2; + -webkit-transition: all 0.2s ease-out; + -moz-transition: all 0.2s ease-out; + transition: all 0.2s ease-out; +} +button:focus { + outline: 0; +} diff --git a/tradePortalPage/trade.html b/tradePortalPage/trade.html new file mode 100644 index 0000000..d9c5f9d --- /dev/null +++ b/tradePortalPage/trade.html @@ -0,0 +1,30 @@ + + + + + + + Trading + + + +

Trade Portal

+ +

+ + diff --git a/transactionTable/confirmtransactions.html b/transactionTable/confirmtransactions.html new file mode 100644 index 0000000..bfdc161 --- /dev/null +++ b/transactionTable/confirmtransactions.html @@ -0,0 +1,165 @@ + + + + + + + Transactions + + + + +

Confirm Transactions

+
S no.
+
Component
+
Qty.
+
T Amt.
+
+
1
+
if else
+
5
+
5000
+
+
1
+
if else
+
5
+
5000
+
+
1
+
if else
+
5
+
5000
+
+
1
+
if else
+
5
+
5000
+

+ +

+ + diff --git a/transactionTable/transaction.html b/transactionTable/transaction.html new file mode 100644 index 0000000..17954fa --- /dev/null +++ b/transactionTable/transaction.html @@ -0,0 +1,120 @@ + + + + + + + Transactions + + + + +

Transactions

+
S no.
+
Message
+
Mode
+
Current Balance
+
+
1
+
Buying if else
+
Db.
+
5000
+
+
2
+
+ Selling vector Library +
+
Cr.
+
6000
+

+ + diff --git a/transparentLogo.png b/transparentLogo.png new file mode 100644 index 0000000..06c4dc5 Binary files /dev/null and b/transparentLogo.png differ

+ Pages published at: + https://abstrxtinfinity.github.io/TradeandCodeFrontendComponents/ +

Welcome

Trade and Code

Round {{ round.number }}

Problem Statement

Test - Input

Sample - Output

Question 1.

Round {{ round.number }}

Problem Statement

Question 1.

Test - Input

Sample - Output

Submission

Trade and Code

Event Team Registration

What will you do..?

Round Details

Trading Details

Open Trades

Trade Portal

Enter Other Team's Code

Confirm Transactions

Transactions

Welcome

Round {{ round.number }}

Problem Statement

Test - Input

Sample - Output

Question 1.

Round {{ round.number }}

Problem Statement

Question 1.

Test - Input

Sample - Output

Event Team Registration

What will you do..?

+ {{ message }} +

Trading Details

Open Trades

Trade Portal

Enter Other Team's Code

Confirm Transactions

Transactions