diff --git a/README.md b/README.md index e823479..f458e53 100644 --- a/README.md +++ b/README.md @@ -1,47 +1,27 @@ -# scripter -i hate python, so i build a jupyter notebook for javascript - - -https://stackoverflow.com/questions/1340872/how-to-get-javascript-caller-function-line-number-and-caller-source-url/37081135#37081135 - -https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval - -https://github.com/WebDevSimplified/React-CodePen-Clone/tree/master - - -``` -var regex = /\((.*?)\)/; - let x =1 - var strToMatch = `console.log(x + 1)` - var matched = regex.exec(strToMatch); - console.log(eval(matched[1])) - eval(strToMatch) -``` - - ``` -console.stdlog = console.log.bind(console); -console.logs = []; -console.log = function(){ - console.logs.push(Array.from(arguments)); - console.stdlog.apply(console, arguments); +import type { User } from '../interfaces' +import useSwr from 'swr' +import Link from 'next/link' + +const fetcher = (url: string) => fetch(url).then((res) => res.json()) + +export default function Index() { + const { data, error, isLoading } = useSwr('/api/users', fetcher) + + if (error) return
Failed to load users
+ if (isLoading) return
Loading...
+ if (!data) return null + + return ( + + ) } -``` - -``` - - - // js = js.replace("console.log", "alert"); - - // var regex = /\((.*?)\)/; - // var strToMatch = "This is a test string (more or less)"; - // var matched = regex.exec(strToMatch); - // console.log(matched[1]); - - // var content = template(jsEditor.value); -``` - - -``` -onInput={()=>hljs.highlightAll()} ``` \ No newline at end of file diff --git a/index.html b/index.html index 3b13ed5..f90fca9 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@
-

Scripter

+

Scripter

@@ -17,6 +17,11 @@

Scripter

- + diff --git a/scripter/README.md b/scripter/README.md index ca8a3a2..55bdcbb 100644 --- a/scripter/README.md +++ b/scripter/README.md @@ -1,38 +1,4 @@ -This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). - -## Getting Started - -First, run the development server: - -```bash -npm run dev -# or -yarn dev -# or -pnpm dev ``` - -Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. - -You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file. - -[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`. - -The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. - -This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. - -## Learn More - -To learn more about Next.js, take a look at the following resources: - -- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. -- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. - -You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! - -## Deploy on Vercel - -The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. - -Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. +let domData = document.querySelectorAll('[data-language=json]')[0].innerText +console.log(JSON.parse(domData)) + ``` \ No newline at end of file diff --git a/scripter/package-lock.json b/scripter/package-lock.json index 53259b8..ba0d045 100644 --- a/scripter/package-lock.json +++ b/scripter/package-lock.json @@ -20,7 +20,9 @@ "next": "13.2.4", "react": "18.2.0", "react-dom": "18.2.0", - "sass": "^1.59.3" + "sass": "^1.59.3", + "swr": "^2.1.5", + "uuid": "^9.0.0" } }, "node_modules/@babel/runtime": { @@ -383,6 +385,16 @@ "node": ">= 10" } }, + "node_modules/@popperjs/core": { + "version": "2.11.7", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.7.tgz", + "integrity": "sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw==", + "peer": true, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, "node_modules/@swc/helpers": { "version": "0.4.14", "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.4.14.tgz", @@ -896,6 +908,17 @@ } } }, + "node_modules/swr": { + "version": "2.1.5", + "resolved": "https://registry.npmjs.org/swr/-/swr-2.1.5.tgz", + "integrity": "sha512-/OhfZMcEpuz77KavXST5q6XE9nrOBOVcBLWjMT+oAE/kQHyE3PASrevXCtQDZ8aamntOfFkbVJp7Il9tNBQWrw==", + "dependencies": { + "use-sync-external-store": "^1.2.0" + }, + "peerDependencies": { + "react": "^16.11.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/to-regex-range": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", @@ -912,6 +935,22 @@ "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz", "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==" }, + "node_modules/use-sync-external-store": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz", + "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/uuid": { + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz", + "integrity": "sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==", + "bin": { + "uuid": "dist/bin/uuid" + } + }, "node_modules/w3c-keyname": { "version": "2.2.6", "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.6.tgz", diff --git a/scripter/package.json b/scripter/package.json index a1c5c85..4043401 100644 --- a/scripter/package.json +++ b/scripter/package.json @@ -21,6 +21,8 @@ "next": "13.2.4", "react": "18.2.0", "react-dom": "18.2.0", - "sass": "^1.59.3" + "sass": "^1.59.3", + "swr": "^2.1.5", + "uuid": "^9.0.0" } } diff --git a/scripter/public/scripter.svg b/scripter/public/scripter.svg new file mode 100644 index 0000000..effd571 --- /dev/null +++ b/scripter/public/scripter.svg @@ -0,0 +1,3 @@ + + + diff --git a/scripter/src/components/codemirror.js b/scripter/src/components/codemirror.js index 189d7b7..53dec6f 100644 --- a/scripter/src/components/codemirror.js +++ b/scripter/src/components/codemirror.js @@ -2,20 +2,27 @@ import styles from '@/styles/Home.module.scss' import CodeMirror from "@uiw/react-codemirror"; import { javascript } from "@codemirror/lang-javascript"; import { githubDark } from '@uiw/codemirror-theme-github'; -import { useEffect, useState, useRef } from 'react' -import { consoleTemplate, inputTemplate } from '@/functions/input'; +import { useState, useRef } from 'react' +import { consoleTemplate, inputTemplate, sharedJsonDom } from '@/functions/input'; + +export default function Codespace({index, data, func}) { + const {init, output, cellID} = data + const {deleteFunc, clearFunc} = func + -export default function Codespace({data}) { - const {init, name, output} = data const [codes, setCodes] = useState(init) const [result, setResult ] = useState(output) + const [isRunning, setRunning] = useState(false) + + const compute = useRef() - // const print = useRef() - const id = name - + const noOfTimes = useRef(0) + const id = cellID compute.current = () => { - let runable = consoleTemplate(id) + inputTemplate() + codes + setRunning(true) + noOfTimes.current += 1 + let runable = consoleTemplate(id) + inputTemplate() + sharedJsonDom() + codes console.log(runable) document.getElementById(id + 'result').innerHTML = '' try { new Function(runable)() } @@ -24,6 +31,8 @@ export default function Codespace({data}) { } finally { setResult(document.getElementById(id + 'result').innerHTML) + setTimeout(()=> setRunning(false), 1000) + } } @@ -34,24 +43,36 @@ export default function Codespace({data}) { } } + return (
-
+
+ setCodes(value)} - /> + onChange={(value) => setCodes(value)}/> +
    - {/**/} - {/**/} - + {/* + */} +
- - +
) } diff --git a/scripter/src/components/codespace.js b/scripter/src/components/codespace.js new file mode 100644 index 0000000..d3efcdb --- /dev/null +++ b/scripter/src/components/codespace.js @@ -0,0 +1,68 @@ +import Codespace from '@/components/codemirror' +import { useEffect, useImperativeHandle,forwardRef, useState } from 'react' +import useSwr from 'swr' +import styles from '@/styles/Home.module.scss' + +function removeElementAtIndex(arr, index) { + if (index < 0 || index >= arr.length) { + throw new Error('Index out of bounds'); + } + const newArr = [...arr]; + newArr.splice(index, 1); + return newArr; + } + + +const fetcher = (url) => fetch(url).then((res) => res.json()) +const CodeSpaceContainer = forwardRef((props, ref) => { + const fileName = props.fileName + const {data: code, error: codeError, isLoading: codeLoading} = useSwr(`api/code/${fileName}`, fetcher) + const [cells, setCells] = useState([]) + + + useImperativeHandle(ref, () => ({ + deleteAllCell: () => setCells([]) + })) + + useEffect(() => { + if (code) setCells(() => code) + }, [code]); + + if (codeError) return

Failed to Load

+ if (codeLoading) return
+ + + + function newCell(){ + const x = { + init: '// start coding here', + output: '' + } + setCells((cells) => [...cells, x]) + } + const deleteCell = (index) => setCells(cells.filter((value, arrIndex) => index !== arrIndex)) + const clearCell = (index) => setCells((cells) => cells.map((cell, arrIndex) => index === arrIndex ? {output:' ', init: ' '} : cell )) + + return ( + <> + {cells.length > 0? + cells.map((eachCell, i)=>()) + :

Create new cell to start coding

+ + } +
    + + + +
+ + ) +}) + +export default CodeSpaceContainer; \ No newline at end of file diff --git a/scripter/src/components/file.js b/scripter/src/components/file.js new file mode 100644 index 0000000..814736c --- /dev/null +++ b/scripter/src/components/file.js @@ -0,0 +1,35 @@ +import SharedDom from '@/components/statemanage' +import CodeSpaceContainer from './codespace' +import useSwr from 'swr' +import { useRef } from 'react' + +const fetcher = (url) => fetch(url).then((res) => res.json()) + +export default function ScripterFile() { + const codeSpaceCell = useRef() + + const {data: file, error: fileError, isLoading: fileLoading} = useSwr(`api/header/file1`, fetcher) + + function deleteAllCell(){ + let text = 'Are you sure you want to delete all cell?' + if (confirm(text)) codeSpaceCell.current.deleteAllCell() + } + + if (fileError) return

Failed to Load

+ if (fileLoading) return
+ if (file === null) return

404 File not Found

+ + + + return ( + <> +
+ scripter logo +

{file.fileTitle}

+
+
+ + + + ) +} \ No newline at end of file diff --git a/scripter/src/components/statemanage.js b/scripter/src/components/statemanage.js index e5cec32..28ca505 100644 --- a/scripter/src/components/statemanage.js +++ b/scripter/src/components/statemanage.js @@ -2,30 +2,75 @@ import styles from '@/styles/Home.module.scss' import CodeMirror from "@uiw/react-codemirror"; import { json } from "@codemirror/lang-json"; import { githubDark } from '@uiw/codemirror-theme-github'; +import { useState, useEffect } from 'react' -export default function SharedDom({data}) { - const dataValue = { - name: 'Jane Doe', - city: 'New York', - lastContacts: ['2022-01-01', '2022-03-21', '2022-04-11', '2022-05-15'], - hi: {name: 'help'}, - hus: () => {console.log('hello')}, - number: 123456789, - } - const values = JSON.stringify(dataValue, undefined, 4) + +export default function SharedDom({file, func}) { + const [codes, setCodes] = useState('') + const [reableOnly, setReable] = useState(false) + const [isAllRun, setAllRun] = useState(false) + + function runAll(){ + setAllRun(true) + document.querySelectorAll('.runButton').forEach(e => { + setTimeout(()=> e.click(), 300) + }) + setTimeout(()=> setAllRun(false), 1000) + } + + function clearJSON(){ + let text = "Are you sure you want to clear all the JSON?" + if (confirm(text)) setCodes('') + } + + useEffect(() => { + let value = JSON.stringify(file.init, undefined, 4) + setCodes(value) + + document.addEventListener('keydown', (e) => { + if (e.ctrlKey && e.keyCode == 13){ + e.preventDefault() + runAll() + } + }) + + }, []); + return ( -
-
- - +
+ setCodes(value)} + onChange={(value) => setCodes(value)} />
+
+
    + + + + + + + + +
+
) } + + +// let domData = document.querySelectorAll('[data-language=json]')[0].innerText +// console.log(JSON.stringify(JSON.parse(domData).hi)) \ No newline at end of file diff --git a/scripter/src/functions/input.js b/scripter/src/functions/input.js index 6d756e9..b9e6d09 100644 --- a/scripter/src/functions/input.js +++ b/scripter/src/functions/input.js @@ -1,28 +1,8 @@ -// export async function input(string) { -// let id = string.replace(/ /g,'') - -// const inputForm = `
` -// $('#preview').append(inputForm) - -// return new Promise ((resolve, reject)=>{ -// let element = document.getElementById(id) - -// element.addEventListener("submit",(e)=>{ -// e.preventDefault() - -// console.log("got the value") -// resolve(e.target.data.value) - -// }, {once : true}) -// }) - -// } - export function consoleTemplate(id){ return `const doc = "${id + 'result'}";\n`+ "const console = { clear: ()=> document.getElementById(doc).innerHTML = '',\n" + "log: (...arg) => document.getElementById(doc).innerHTML += `${arg.join(' ')}`,\n" + - "assert: (fact, ...arg) => !fact ? document.getElementById(doc).innerHTML += `{arg.join(' ')}` : fact ,\n" + + "assert: (fact, ...arg) => !fact ? document.getElementById(doc).innerHTML += `${arg.join(' ')}` : fact ,\n" + "add: (...arg) => {let temp = document.createElement('span')\n" + "temp.setAttribute('class', 'console')\n" + "temp.innerHTML = `${arg.join(' ')}`\n"+ @@ -31,10 +11,11 @@ export function consoleTemplate(id){ } export function inputTemplate(){ - return ` - function input(string) { let id = string.replace(/ /g,'')\n` + + return `const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms)) + async function input(string) { let id = string.replace(/ /g,'')\n` + "const inputForm = `
`\n" +`console.add(inputForm) + await sleep(10) return new Promise ((resolve, reject)=>{ document.getElementById(id).addEventListener("submit",(e)=>{ e.preventDefault() e.target.data.placeholder += " = " + e.target.data.value @@ -43,21 +24,13 @@ export function inputTemplate(){ }, {once : true})})}\n` } - - - - // print.current = { - // log: (...e)=> setResult(result + `${e.join(" ")}`), - // clear: ()=>{ setResult(``), document.getElementById(id+'result').innerHTML = ''}, - // assert: (fact, ...arg) => { if (!fact) setResult(result + `${arg.join(" ")}`) }, - // error: (...arg) => setResult(result + `${arg.join(" ")}`), - // } - - // print.current.clear() -// export function consoleTemplate(id){ -// const oldConsole = console.log -// console.log = (...e) => { -// document.getElementById(id + 'result').innerHTML += `> ${e.join(' ')}` -// oldConsole(...e) -// } -// } \ No newline at end of file +export function sharedJsonDom(){ + return ` + const get = () => JSON.parse(document.querySelector('[data-language=json]').innerText) + const set = (setter, value) => { + let returner = get() + returner[setter] = value + document.querySelector('[data-language=json]').innerText = JSON.stringify(returner, undefined, 4)} + const setFunc = (setter, func) => set(setter, (func).toString()) + const getFunc = (funcName) => eval("(" + {...get()}[funcName] + ")")\n` +} diff --git a/scripter/src/pages/_document.js b/scripter/src/pages/_document.js index 6976a5e..7fb34ae 100644 --- a/scripter/src/pages/_document.js +++ b/scripter/src/pages/_document.js @@ -1,5 +1,5 @@ import { Html, Head, Main, NextScript } from 'next/document' - +import Image from 'next/image' export default function Document() { return ( @@ -10,6 +10,17 @@ export default function Document() {
+
+ +
Scriptw.js by @rajatsandeepsen
+
+ + + + +
+

open source release in June 31 2023

+
) } diff --git a/scripter/src/pages/api/code.js b/scripter/src/pages/api/code.js deleted file mode 100644 index bb068c7..0000000 --- a/scripter/src/pages/api/code.js +++ /dev/null @@ -1,43 +0,0 @@ -// Next.js API route support: https://nextjs.org/docs/api-routes/introduction - - -const array = [ - {init: "(() => console.log(10 + 2))()",name: 'asdh', output: ""}, - {init: "input('Enter Something').then(e=> console.log(e))",name: 'one', output: ""}, - - {init: `Promise.all( - [input('value 1'),input('value 2'),input('value 3')] - ).then(values => console.log(values)) - `,name: 'two', output: ''}, - - {init: `let x = [] - input('Enter Value 1').then(e=> x.push(e)) - input('Enter Value 2').then(e=> { - x.push(e) - console.log(x) - })`,name: 'three', output: ''}, - - {init: "console.error('this is an error message')",name: 'four', output: ''}, - {init: "console.add(`Trulli`)",name: 'five', output: ''}, - {init: ` - let x = [] - input('hi').then(e=> x.push(e)) - -setTimeout(()=>{ - input('hi2').then(e=> { - x.push(e) - console.log(x) - }) -}, 5000); - - `,name: 'six', output: ''}, -] - -export default function handler(req, res) { - setTimeout(() => { - res.status(200).json({ - array: array - }) -}, 1000) -console.log("done") -} diff --git a/scripter/src/pages/api/code/[id].js b/scripter/src/pages/api/code/[id].js new file mode 100644 index 0000000..3bfa039 --- /dev/null +++ b/scripter/src/pages/api/code/[id].js @@ -0,0 +1,91 @@ +import { v4 as uuidv4 } from 'uuid'; + +const array = [ + {init: `// same console.log +let x = 10 + 20 + console.log(x)`, output: '', type:'cell', cellID: uuidv4()}, + + + + {init: `// custom asyc input prompt +let array = [10,20,30] + +input("Enter Value") + .then((value) => { + array.push(value) + console.log(array) + })`, output: '', type:'cell', cellID: uuidv4()}, + + + + {init: `let age = 17 + +try{ if (age < 18) throw new Error('toooo young') } + +catch(e){ console.error(e) } +finally { console.log("try again?") } + +// another console methods`, output: '', type:'cell', cellID: uuidv4()}, +{init: "let {url} = get() // reading from JSON\n\nlet HTML = `img loading?`\n\nconsole.add(HTML)\n// DOM editor", output: '', type:'cell', cellID: uuidv4()}, +{init: "// let bring up a whole website\nlet {sus} = get()\n\nlet HTML = ``\n\nconsole.add(HTML)", output: '', type:'cell', cellID: uuidv4()}, +{init: `// keyboard shortcuts (awai) + +// Execute the current cell (Shift + Enter) +// Execute all the cells (Ctrl + Enter) +// Append new cell (Ctrl + N) + +// available all VScode shortcuts`, output: '', type:'cell', cellID: uuidv4()}, + +{init: `let {x, y, z} = get() + +console.log(x, y, z) + +console.assert(x > 100 , x + y + z)`, output: '', type:'cell', cellID: uuidv4()}, + +{init: `let data = { + name : "Appu", + age : 18, + skills : undefined, +} + +set('data', data) +// add data to JSON & access them in next block`, output: '', type:'cell', cellID: uuidv4()}, + + +{init: `let {data} = get() // now access here + +console.log(JSON.stringify(data))`, output: '', type:'cell', cellID: uuidv4()}, + +{init: `// store functions & use it on next cell + +function findSum(a, b){ return a + b } +const findSquare = (a,b) => a ** b + +setFunc("findSum", findSum) +setFunc("findSquare", findSquare)`, output: '', type:'cell', cellID: uuidv4()}, +{init: `// read function +let findSum = getFunc("findSum") + +let result = findSum(10, 13) +console.log(result)`, output: '', type:'cell', cellID: uuidv4()}, +{init: `async function someFunc(){ + await sleep(1000) // in-build thread sleep + console.log("After thread sleeping") +} + +someFunc()`, output: '', type:'cell', cellID: uuidv4()}, + + ] + + + + const codeDB = new Map() + codeDB.set('file1', array) + export default function handler(req, res) { + let request = req.query.id + let responce = codeDB.get(request) + + responce === undefined ? res.status(404).json({message: 'not found'}) + : res.status(200).json(responce) + } + \ No newline at end of file diff --git a/scripter/src/pages/api/header/[fileName].js b/scripter/src/pages/api/header/[fileName].js new file mode 100644 index 0000000..04a09bf --- /dev/null +++ b/scripter/src/pages/api/header/[fileName].js @@ -0,0 +1,28 @@ +const files = [ + { + init:{ + x: 10, + y: 20, + z: 30, + url: "https://images.pexels.com/photos/417173/pexels-photo-417173.jpeg", + sus: "https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1&mute=1", + }, + + fileName: 'file1', + fileTitle: 'ScriptW', + codespaceID: 'file1', + fileDescription: `I hate Python, so i build a jupyter notebook for Javascript
Browser only, No Nodejs, No Jupyter Notebook Kernal, No Server required

+ `, + }, + ] + +// const values = JSON.stringify(dataValue, undefined, 4) + export default function handler(req, res) { + let request = req.query.fileName + + let responce = files.find(e => e.fileName === request) + + responce === undefined ? res.status(404).json({message: 'not found'}) + : res.status(200).json(responce) + } + \ No newline at end of file diff --git a/scripter/src/pages/index.js b/scripter/src/pages/index.js index 62733af..5f72ea5 100644 --- a/scripter/src/pages/index.js +++ b/scripter/src/pages/index.js @@ -1,21 +1,9 @@ import Head from 'next/head' -import { Inter } from 'next/font/google' -import Codespace from '@/components/codemirror' -import SharedDom from '@/components/statemanage' -import { useState,useEffect } from 'react' +import ScripterFile from '@/components/file' +import Image from 'next/image' +import styles from '@/styles/Home.module.scss' - - - -export default function Home() { - const [array, setArray] = useState(null) - - useEffect(() => { - fetch('/api/code') - .then(res => res.json()) - .then(data => setArray(data.array)) - }, []) - +export default function Home() { return ( <> @@ -25,22 +13,10 @@ export default function Home() { -
-
-

-

Scripter

-

I hate Python, so build a jupyter notebook for Javascript

-
-
- - - { - array ? - array.map((e)=>( )) - : - } - -
+
+
+ +
) diff --git a/scripter/src/styles/Home.module.scss b/scripter/src/styles/Home.module.scss index 6793201..380bfbf 100644 --- a/scripter/src/styles/Home.module.scss +++ b/scripter/src/styles/Home.module.scss @@ -40,13 +40,28 @@ display: flex; gap: .3rem; i { + margin-left: .3rem; display: flex; justify-content: center; align-items: center; + color: var(--github-green); } &:hover{ background-color: #25292D; } + &:disabled{ + color: #2D3139; + cursor: not-allowed; + i { + opacity: 50%; + } + &:hover { + background-color: #010409; + } + } +} + +.rotateLogo { &:active i,&:hover i{ animation: rotate 6s linear; } @@ -74,20 +89,29 @@ border: 1px solid #2D3139; min-height: 200px; width: 100%; - // padding-bottom: 25px ; - // margin-bottom: 40px; - + display: flex; + flex-direction: column; + + position: relative; + &::before{ + content: '〔 'attr(data-running) ' 〕'; + color: var(--github-green); + position: absolute; + top: 0; + left: -40px; + transform: translate(-50%, 0); + } ul { position:absolute; - bottom: -3px; - right: 10px; + bottom: 1rem; + right: 1rem; padding: 0; z-index: 10; color: white; display: flex; - gap: 2rem; - justify-content: center; - // width: 100%; + flex-direction: column; + gap: 1rem; + align-items: flex-end; transition: all .3s ease-in-out; } @@ -99,4 +123,18 @@ display: flex; flex-direction: column; gap: 3px; -} \ No newline at end of file +} + +.domStyle { + width: 100%; + text-align: end; + display: flex; + justify-content: space-between; + flex-wrap: wrap-reverse; + ul { + display: flex; + gap: 1rem; + flex-wrap: wrap; + } +} + diff --git a/scripter/src/styles/globals.scss b/scripter/src/styles/globals.scss index 952e3ed..d613953 100644 --- a/scripter/src/styles/globals.scss +++ b/scripter/src/styles/globals.scss @@ -8,6 +8,12 @@ margin: 0; } +:root { + --github-green: #6ce778; + --github-red: #ff7b72; + --github-blue: #a5d6ff; +} + html, body { max-width: 100vw; @@ -22,8 +28,17 @@ p { padding: 0; margin: 0; } +ul { + list-style: none; + padding: 0; + margin: 0; +} body { background-color: #0D1117;; + overflow-x: hidden; + min-height: 100vh; + display: flex; + flex-direction: column; } .bg-black { @@ -46,10 +61,10 @@ body { #shared { .ͼ1o { - color: #6ce778; + color: var(--github-green); } .ͼ1n { - color: #a5d6ff; + color: var(--github-blue); } } @@ -57,12 +72,13 @@ body { background-color: #0D1117; } .err { - color: #ff7b72; + color: var(--github-red); display: flex; &::before { content: ">"; - color: #ff7b72; - margin: auto 9px + color: var(--github-red); + // margin: auto 9px + margin-right: 7px; } } @@ -76,7 +92,7 @@ body { left: -15px; top: 0px; content: ">"; - color: #6ce778; + color: var(--github-green); } } @@ -98,4 +114,21 @@ code { background-color: #2D3139; } } +} + +footer { + flex-grow: 1; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 3rem 0; + background-color: #010409; + color: rgba(255, 255, 255, 0.553); + a { + color: white; + &:hover { + color: var(--github-green); + } + } } \ No newline at end of file