DevLens

completed the inspector and finished palette, it is for jumping to any file, nvigate, open, or close. not much.

started with the inspector screen, this is the screen which shows info about each fie, just click on the file and you can see the info about it, yet no info as ofcourse folder or any file is not there yet.

Two newses: 1. Completed the history section (page) css too, it was a little big but as compared to other pages, it was like medium small and less hard.
2. I have crossed 1000 lines in css, won’t be very big for coders who regularly code huge, but for me it is like very less time I hit above 1000 lines, sooo !

Completed warning screen (section) toooooo!! the css for this was not hard, means it was easy, nothing so much was there, just wrote css for body, title, content, hover, etc. you can’t see so much n the image yet as after js when I will upload any folder, that time it will show warnings of the folder, files, etc.

I finished my graph section css. I took some help of AI for understanding how to make that graph box in between and the circles of it and a little more, but I wrote the code myself, I used AI only to know about it and understand it as I haven’t made any css for graph.

I startd with the graph screen CSS!!!!!!!!! agggaaaaiiin the same, buttons are hover reacctive, colours are pastel, and nothing more, just font size color, alignment, shadows, hover, etc etc; not yet finished but at least it looks good. you would be thinking how am I able to see the graph screen before writing js (as we can see graph screen by using navigation bar)? the answer is simple, the div of overview section had “class=“view active” “ and others had view, so I made overview’s class to view, and graph’s class to “view active”. simple. so for every thing untill css finishes, I will do this, and after all the things are done in css, I will make it correct again, and then write the perfect js for it (which could get wrong, don’t know yet).

Finally completed the main dashboard (overview) css. everything is hover reactive, and the best look which gives my style to it is the messiness off all things, the pastel colours, the tapes, etc. it looks super cool. No data is there as after the css and js finishes, while testing or anything, when we upload the folder to it, it will analyse it and give the results. when you will click on the file, it should show everything about the file like data, type, and all.rest depends if my code succeeds to work (which it will after different attempts, could be less, could be more, don’t know, but I will try my best to finish this project completely working and help other people, coders, office people through it.

completed completely with scanning screen and started writing css for the main screen. I have wrote the css for the buttons and the file navigation box at the lleft side, then also for the top main navigation bar, the buttons arre reactive with mouse hover and click, and has a dashed border or highlighting the main thing at top right corner: 🔒 Local — files never leave your machine. I used the ‘& hashtag128274;’ (hashtag should be replaced with hashtag sign, when I put hashtag sign here, it converted it to the same lock sign) for making the lock logo (it is in html). I removed the class=hidden for a while from the main app division and header section, later I will agaiin make them hidden and remove class=hidden from the main landing page section/division.

I finished the scanniing screen, it is plain but looks good, I tried making it look more good, but some errors were there so I made it simple and started with the main dshboard styling.

Completed with the landing/main page!! 🅰️ Y! All the cards which are randomly placed everywhere are hover sensitive, means when you will hover over it, it will react to it and change it’s shadow giving the effect of being pressed, same for the 2 main buttons for selecting the folder. now I have started with the scanning screen which you can also tell loading screen.

I have now made it look even more beautiful!! A half transparency box in center for uploading or dropping files and folders (or you can say codebase) for devlens to analyze it and give you the report. then made its borders rotate which was a little tricky work but I did it. The codeblock for the rotating border is in the code image below and also you can see the image of my launch/main starting page. also it has some colour boxes randomly placed around with dashed border around it and also the pastel colour, brown colour shade, etc looks very pretty.

Wrote more css, now the starting page or landing page llooks very good, not completed yet but still it is like around 60% is done, now the title colour, stlye of writing, the tagline, the points about devlens, and background, all looks like excellent. I used ink, ink-soft, butter, etc; colours. then for the font style I used these font families: 1st is named mono: “SFMono-Regular”, Consolas, “Liberation Mono”, Menlo, monospape; and second is named serif: Gorgia, “Iowan Old Style”, “Palatino Linotype”, serif;

both are wonderful styles according to me. I had described these font families and colours in start itself inside ‘:root{}’ so it is easy to directly use it wherever we want inside the css file.

Now it has started looking good, not completely but partially, I have wrote css for navigation button, the main title of DEVLENS, then also for the feature lines which tells what DevLens can do, yet css for the select folder button and the box in which it will be there, then for the main dashboard and other navigated buttons like history, graph, etc; is remaining.

Started with css and added one mre button in html which I had forgot, the button is for adding or using DEVLENS for new folder or code base. in css I have added so many colours in start itself using variables, colours like: Kraft, mint, ink, blue, lavendar, butter, deep colours of many colours, etc. the made colour families in starting itself. so by defining and using 20 to 22 colours and 3 font families in start itself, it will be very helpful throughout the css coding.

Wrote the first version of html, it has tabs or sections for overview, graph, warnings, History, export for whole analysis.

Made the scanning screen which will come when the file is being analyzed and a the main scene which comes after it, it has all the features and the main outputs and workings like it will show everything about the codebase or the folder which we uploaded, it will show all the files, their content type, relation with other files like css file is connected to html and js is also connected to html, then css is connected to js, etc. then the importance of each file, etc. till now only Project health section and architecture section

Added new section which contains the lines which will show the button to upload the folder of codes and explain the features of DevLens such as: Where the project starts, how files are connected, etc.

I have started making my frictionless project, which is DevLens! it helps you to upload any folder in it and then it will tell everything about each and every file in it, like what is connected to which file, what is importance of each file, you can view the whole file, and many more features. When developers open a codebase which is new or they don’t know about it, they often don’t know: Where to start, How files are connected, Which files are important, What might be problematic, Why certain files/code exist. This project turns a confusing codebase into an interactive explanation. I have made the navigation bar, the title and some details.