datamanager.js/index.html at main · vorks-dev/datamanager.js · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DataManager.js</title>
    <script type="module" src="main.js"></script>
    <link rel="stylesheet" href="style.css">

    <link rel="icon" href="/favicon.ico" sizes="any">
    <link rel="icon" href="/logo.svg" type="image/svg+xml">

    <meta name="google-site-verification" content="gM0EuCgi_aTqr9QElaj_Ym2k03W4z0cAWVrHn9uUgzM" />
    <meta property="og:site_name" content="DataManager.js">
    <meta name="description" content="DataManager.js is a powerful JavaScript Module that manages file uploads, downloads, encryption and local storage interactions seamlessly for your web projects.">
    <script type="application/ld+json">
        {
          "@context": "https://schema.org",
          "@type": "SoftwareApplication",
          "name": "DataManager.js",
          "url": "https://github.com/jvdesignbavaria/datamanager.js",
          "description": "A JavaScript module that manages file uploads, downloads, encryption, and local storage interactions",
          "applicationCategory": "DeveloperTool",
          "operatingSystem": "Web",
          "programmingLanguage": "JavaScript",
          "author": {
            "@type": "Organization",
            "name": "JVDesign",
            "url": "https://jvdesign.is-a.dev"
          }
        }
    </script>
</head>
<body>
    <div class="top">
        <div class="heading">
            <svg class="logo" viewBox="0 0 20 20">
                <rect style="fill:#ffffff" width="20" height="20" x="0" y="0" />
                <path style="fill:#8f9f89" d="M 0,0 V 20 H 20 V 0 Z m 4.7528076,8.5098267 h 1.9137573 c 1.1094084,0 1.9521135,0.366929 2.5281525,1.1008453 0.576039,0.733916 0.8640286,1.813515 0.8640286,3.238678 0,1.450765 -0.2922731,2.549486 -0.876846,3.296204 -0.5845729,0.746717 -1.3803124,1.120071 -2.3873138,1.120071 H 4.7528076 Z m 6.4068604,0 h 1.593704 l 1.459274,2.9634093 1.452942,-2.9634093 h 1.600113 v 8.7557983 h -1.715316 v -5.530014 h -0.02564 l -1.248093,2.566605 h -0.128021 l -1.260834,-2.566605 h -0.02564 v 5.530014 H 11.159668 Z M 6.532135,10.001144 v 5.773163 h 0.1216126 c 0.5504372,0 0.9515577,-0.213334 1.2033081,-0.64003 0.2517503,-0.430962 0.3775787,-1.171245 0.3775787,-2.220916 0,-1.002735 -0.1130542,-1.738811 -0.3392029,-2.208176 C 7.6692829,10.23582 7.2724459,10.001144 6.7049408,10.001144 Z" />
            </svg>
            <h1>DataManager.js</h1>
        </div>
        <p>Manages the data flow of the website - handling file uploads/downloads as well as localStorage interactions. Runs quietly in the background, doing what needs to be done.</p>
        <p>Check out the demo below, npm module and proper documentation coming soon!</p>
    </div>
    <div class="sectionWrapper">
        <section>
            <h1>File Configuration</h1>
            <div>
                <textarea id="fileConfig" rows="7" placeholder='"datamanager-dtm": {
    "extension": "dtm",
    "encrypted": false,
    "minVersion": "Version 1.0",
    "currVersion": "Version 1.1",
    "fileName": "datamanager-demo"
},
"datamanager-dtme": {
    "extension": "dtme",
    "encrypted": true,
    "minVersion": "Version 1.0",
    "currVersion": "Version 1.1",
    "fileName": "datamanager-demo"
}'></textarea>
                <label for="fileConfig">Configure, what files can be handled</label>
                <button id="setFileConfig">Set File Config</button>
            </div>
        </section>
        <section>
            <h1>File Download</h1>
            <div>
                <input id="fileContent" type="text" placeholder="Hello World!">
                <label for="fileContent">Input content for the file</label>
                <select id="fileFormatInput"></select>
                <label for="fileFormatInput">Choose a file format</label>
                <input type="text" id="filePasswordInput" placeholder="password" class="encryptedFile">
                <label for="filePasswordInput" class="encryptedFile">Choose a password to lock the file</label>
                <div class="encryptedFile box">
                    <span id="recoveryKey" class="encryptedFile"></span>
                    <button id="copyRecoveryKey">Copy</button>
                </div>
                <label for="copyRecoveryKey" class="encryptedFile">Your Recovery Code</label>
                <button id="downloadButton">GO!</button>
            </div>
        </section>
        <section>
            <h1>File Upload</h1>
                <div>
                <input id="fileInput" type="file">
                <label for="fileInput">Upload your file</label>
                <input id="fileAccessKey" class="fileAccess" type="text" placeholder="password">
                <label for="fileAccessKey" class="fileAccess">Enter the password for this file</label>
                <button id="submitUpload" class="fileAccess">Submit</button>
                <span id="resultContent"></span>
            </div>
        </section>
        <section>
            <h1>LocalStorage</h1>
            <div>
                <input type="text" id="localStoragePrefix" placeholder="datamanager" list="localStorageKeys">
                <label for="localStoragePrefix">Choose a localStorage prefix</label>
                <datalist id="localStorageKeys">
                    <option value="datamanager"></option>
                </datalist>
                <textarea id="localStorageContent" rows="5" placeholder='"property1": "Hello",
"property2": "World",
"punctuation": "!"'></textarea>
                <label for="localStorageContent">Properties of the localStorage JSON object</label>
                <button id="setStorage">Set Storage</button>
                <button id="getStorage">Get Storage</button>
            </div>
        </section>
    </div>
</body>
</html>