{"id":17344617,"url":"https://github.com/jamonserrano/proton","last_synced_at":"2025-03-27T10:19:57.814Z","repository":{"id":147768833,"uuid":"50943056","full_name":"jamonserrano/proton","owner":"jamonserrano","description":"Simple HTML prototypes","archived":false,"fork":false,"pushed_at":"2017-01-26T16:33:27.000Z","size":72,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-01T15:11:15.347Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jamonserrano.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-02-02T18:43:04.000Z","updated_at":"2016-02-02T18:54:00.000Z","dependencies_parsed_at":"2023-05-10T11:31:03.190Z","dependency_job_id":null,"html_url":"https://github.com/jamonserrano/proton","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamonserrano%2Fproton","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamonserrano%2Fproton/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamonserrano%2Fproton/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamonserrano%2Fproton/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jamonserrano","download_url":"https://codeload.github.com/jamonserrano/proton/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245823316,"owners_count":20678173,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-15T16:25:52.415Z","updated_at":"2025-03-27T10:19:57.807Z","avatar_url":"https://github.com/jamonserrano.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n#\u003cimg src=\"http://jamonserrano.github.io/proton/proton-logo.png\" alt=\"Proton logo\" width=\"45\" height=\"45\" valign=\"bottom\"\u003e Proton\n###Proton is a tool to create stateful prototypes for mobile and desktop.\n\n##Demo\nCheck out the Android demo here: http://jamonserrano.github.io/proton-basic-example   \nGo through the login flow or tap the screen with 3 fingers to choose any screen.\nFor the best experience add the demo page to your home screen.\n\n##Installation\n1. Clone the repository or download \u0026 extract the [.zip](https://github.com/jamonserrano/proton/archive/master.zip).\n2. Serve the folder with your favorite local server, e.g. SimpleHTTPServer or npm serve. This is needed for the browser history to work.\n3. Add your scripts and styling to app.js and app.css respectively.\n\n##Usage\n\n1. Define the states of your application\n\n\t```javascript\n\tinit({\n\t\tscreen: {\n\t\t\thome: true,\n\t\t\tfeed: false,\n\t\t\tsettings: false\n\t\t},\n\t\tnotification: false\n\t});\n\t```\n2. Add screens and other layers for each state\n\n\t```javascript\n\taddLayer({\n\t\tid: \"Home\"\n\t\tvisible: \"screen:home\",\n\t\timage: \"img/home.png\"\n\t});\n\n\taddLayer({\n\t\tid: \"SettingsButton\",\n\t\tparent: \"Home\",\n\t\tclick: \"screen:settings\"\n\t});\n\t```\n3. Add advanced functionality and styling with JavaScript \u0026 CSS\n\n\t```javascript\n\taddEventListener(\"setState\", (e) =\u003e {\n\t\tif (e.detail === \"screen:settings\") {\n\t\t\talert(\"Welcome to the settings screen!\");\n\t\t}\n\t});\n\t```\n\t```css\n\t#SettingsButton {\n\t\twidth: 100px;\n\t\theight: 40px;\n\t}\n\t```\n\n##Viewing \u0026 sharing\n1. Open your served folder in your browser.\n2. To manually change states, click on the icon in the top right folder (desktop), or tap the screen with three fingers (mobile).\n3. To share a specific state, just use the URL.\n\n##Supported browsers\nEvergreen browsers with decent ES2015 support: Chrome, Firefox, Edge\n\n##Yet to come\n* Documentation \u0026 Demos\n* Tests!\n* Gestures\n* Animations\n\n##License\nMIT License\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjamonserrano%2Fproton","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjamonserrano%2Fproton","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjamonserrano%2Fproton/lists"}